WIP v5

.gitignore

@@ -34,4 +34,6 @@ node_modules
 *.swn
 
 # build
-build
+build
+
+src.back

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 140
+}

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2019 (c) Gabe Scholz
+Copyright 2022 (c) Gabe Scholz
 
 # Mozilla Public License Version 2.0
 

jest.config.js

@@ -1,8 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
-  transform: {
-    ".(ts|tsx)": "ts-jest"
-  },
-  testRegex: "\\.test\\.(ts|tsx)$",
-  moduleFileExtensions: ["ts", "tsx", "js"],
-  setupFiles: ["<rootDir>/jest.setup.js"]
-};
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package.json

@@ -1,49 +1,24 @@
 {
   "name": "flag",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "description": "Feature flagging made easy for React and Redux",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "repository": "https://github.com/garbles/flag",
   "author": "Gabe Scholz",
   "license": "MPL-2.0",
   "devDependencies": {
-    "@types/enzyme": "^3.9.1",
-    "@types/invariant": "^2.2.30",
-    "@types/jest": "^24.0.11",
-    "@types/lodash": "^4.14.123",
-    "@types/react": "^16.8.12",
-    "@types/react-dom": "^16.8.3",
-    "@types/react-redux": "^7.0.7",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "jest": "^24.7.1",
-    "np": "^4.0.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-redux": "^7.0.2",
-    "ts-jest": "^24.0.1",
-    "typescript": "^3.5.3"
+    "@testing-library/react": "^13.0.0",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
+    "jest": "^27.5.1",
+    "react": "^18.0.0",
+    "ts-jest": "^27.1.4",
+    "typescript": "^4.6.3"
   },
   "dependencies": {
-    "deep-computed": "^0.2.0",
-    "invariant": "^2.2.4",
-    "lodash": "^4.17.11",
-    "useful-types": "^0.4.0"
+    "@types/react": "^17.0.43"
   },
-  "peerDependencies": {
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "react-redux": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "redux": "^2.0.0 || ^3.0.0 || ^4.0.0"
-  },
-  "scripts": {
-    "clean": "rm -rf build",
-    "build": "tsc",
-    "prepublish": "yarn clean && yarn build",
-    "test": "jest",
-    "pub": "np"
-  }
+  "peerDependencies": {},
+  "scripts": {}
 }

src/__test__/create-flags.test.tsx

@@ -0,0 +1,25 @@
+import { render } from "@testing-library/react";
+import { createFlags } from "../create-flags";
+
+type Flags = {
+  a: boolean;
+  b: boolean;
+  c: boolean;
+  d: boolean;
+  e: {
+    f: {
+      g: boolean;
+    };
+  };
+  h: boolean;
+  i: number;
+};
+
+test("mounts", () => {
+  const { useFlag, FlagsProvider } = createFlags<Flags>();
+
+  const App = () => {
+    const b = useFlag(["b"]);
+    const g = useFlag(["e", "f", "g"]);
+  };
+});

src/__test__/types.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { KeyPaths, ShallowKeys } from "../types";
+import { createFlags } from "../create-flags";
+
+type Something = {
+  a: boolean;
+  b: {
+    c: {
+      d: boolean;
+      e: string;
+    };
+  };
+  f: number;
+};
+
+type Keys = KeyPaths<Something>;
+type Shallow = ShallowKeys<Something>;
+
+it("check key paths", () => {
+  const a: Keys = ["a"];
+
+  // @ts-expect-error
+  const b: Keys = ["b"];
+  // @ts-expect-error
+  const c: Keys = ["b", "c"];
+
+  const d: Keys = ["b", "c", "d"];
+  const e: Keys = ["b", "c", "d"];
+  const f: Keys = ["f"];
+});
+
+it("check shallow keys", () => {
+  const a: Shallow = "a";
+
+  // @ts-expect-error
+  const b: Shallow = "b";
+
+  const f: Shallow = "f";
+});
+
+it("useFlag", () => {
+  const { useFlag } = createFlags<Something>();
+
+  function App() {
+    useFlag("a");
+
+    useFlag(["a"]);
+
+    useFlag(["a"], false);
+
+    // @ts-expect-error
+    useFlag(["a"], "haha");
+
+    // @ts-expect-error
+    useFlag("b");
+
+    // @ts-expect-error
+    useFlag(["b"]);
+
+    // @ts-expect-error
+    useFlag(["b", "c"]);
+
+    // @ts-expect-error
+    useFlag(["b", "c"]);
+
+    // @ts-expect-error
+    useFlag(["b", "c", "e"], true);
+
+    useFlag(["b", "c", "e"], "haha");
+
+    useFlag("f", 123);
+
+    return null;
+  }
+});
+
+it("Flag", () => {
+  const { Flag } = createFlags<Something>();
+
+  <Flag keyPath={"a"} render={(a) => <div>{a === true}</div>} />;
+
+  // @ts-expect-error
+  <Flag keyPath={"a"} render={(a) => <div>{a === "1"}</div>} />;
+
+  // @ts-expect-error
+  <Flag keyPath={["a"]} render={(a) => <div>{a === "1"}</div>} />;
+
+  // @ts-expect-error
+  <Flag keyPath={"b"} render={(b) => null} />;
+
+  // @ts-expect-error
+  <Flag keyPath={["b"]} render={(b) => null} />;
+
+  // @ts-expect-error
+  <Flag keyPath={["b", "c"]} render={(c) => null} />;
+
+  <Flag keyPath={["b", "c", "e"]} render={(d) => <div>{d === "haha"}</div>} />;
+
+  // @ts-expect-error
+  <Flag keyPath={["b", "c", "e"]} render={(d) => <div>{d === true}</div>} />;
+});