Support overriding schematic-js API URLs; improve use of React hooks in schematic-react

js/package.json

@@ -4,12 +4,12 @@
   "module": "dist/schematic.esm.js",
   "author": "Ben Papillon <ben@schematichq.com>",
   "dependencies": {
-    "@types/uuid": "^9.0.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
     "@types/jest": "^29.5.11",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "esbuild": "^0.19.9",
@@ -44,5 +44,5 @@
     "test": "jest --config jest.config.js"
   },
   "types": "dist/schematic.d.ts",
-  "version": "0.1.2"
+  "version": "0.1.3"
 }

js/src/index.ts

@@ -64,6 +64,8 @@ type StoragePersister = {
 };
 
 type SchematicOptions = {
+  apiUrl?: string;
+  eventUrl?: string;
   flagListener?: (values: Record<string, boolean>) => void;
   storage?: StoragePersister;
   useWebSocket?: boolean;
@@ -78,6 +80,8 @@ export type CheckOptions = {
 /* @preserve */
 export class Schematic {
   private apiKey: string;
+  private apiUrl = "api.schematichq.com";
+  private eventUrl = "c.schematichq.com";
   private conn: WebSocket | null = null;
   private context: SchematicContext = {};
   private eventQueue: Event[];
@@ -98,6 +102,14 @@ export class Schematic {
       this.storage = localStorage;
     }
 
+    if (options?.apiUrl !== undefined) {
+      this.apiUrl = options.apiUrl;
+    }
+
+    if (options?.eventUrl !== undefined) {
+      this.eventUrl = options.eventUrl;
+    }
+
     if (typeof window !== "undefined") {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
@@ -116,7 +128,7 @@ export class Schematic {
         : contextVals[key];
     }
 
-    const requestUrl = `https://api.schematichq.com/flags/${key}/check`;
+    const requestUrl = this.getUrl(this.apiUrl, `flags/${key}/check`);
     return fetch(requestUrl, {
       method: "POST",
       headers: {
@@ -146,7 +158,7 @@ export class Schematic {
   ): Promise<Record<string, boolean>> => {
     context = context || this.context;
 
-    const requestUrl = "https://api.schematichq.com/flags/check";
+    const requestUrl = this.getUrl(this.apiUrl, "flags/check");
     const requestBody = JSON.stringify(context);
 
     return fetch(requestUrl, {
@@ -215,6 +227,19 @@ export class Schematic {
     this.handleEvent("track", body);
   };
 
+  private getUrl = (domain: string, path: string, urlType?: string): string => {
+    let scheme = "http";
+    if (urlType === "ws") {
+      scheme = "ws";
+    }
+
+    if (typeof window === "undefined" || window.location.protocol === "https:") {
+      return `${scheme}s://${domain}/${path}`;
+    }
+
+    return `${scheme}://${domain}/${path}`;
+  }
+
   private flushEventQueue = (): void => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -257,7 +282,7 @@ export class Schematic {
   };
 
   private sendEvent = (event: Event): void => {
-    const captureUrl = "https://c.schematichq.com/e";
+    const captureUrl = this.getUrl(this.apiUrl, "e");
     const payload = JSON.stringify(event);
 
     fetch(captureUrl, {
@@ -289,7 +314,7 @@ export class Schematic {
         resolve();
       }
 
-      const wsUrl = "wss://api.schematichq.com/flags/bootstrap";
+      const wsUrl = this.getUrl(this.apiUrl, "flags/bootstrap", "ws");
       const webSocket = new WebSocket(wsUrl);
       this.conn = webSocket;
 

react/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["import"],
+  rules: {
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-unused-vars": ["error", {ignoreRestSiblings: true}],
+  },
+};

react/package.json

@@ -12,6 +12,8 @@
     "esbuild": "^0.19.9",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-esbuild": "^0.3.0",
@@ -40,7 +42,7 @@
     "test": "jest --config jest.config.js"
   },
   "types": "dist/schematic-react.d.ts",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "dependencies": {
     "@schematichq/schematic-js": "^0.1.2"
   },

react/src/index.tsx

@@ -76,12 +76,13 @@ const useSchematicEvents = () => {
 const useSchematicFlag = (key: string, fallback?: boolean) => {
   const { flagValues } = useSchematic();
   const [value, setValue] = useState(fallback ?? false);
+  const flagValue = flagValues[key];
 
   useEffect(() => {
-    typeof flagValues[key] === "undefined"
+    typeof flagValue === "undefined"
       ? setValue(fallback ?? false)
-      : setValue(flagValues[key]);
-  }, [key, fallback, flagValues[key]]);
+      : setValue(flagValue);
+  }, [key, fallback, flagValue]);
 
   return value;
 };