@schematichq/schematic-react 1.0.0 → 1.0.3

package/dist/schematic-react.cjs.js

@@ -624,6 +624,7 @@ function contextString(context) {
 }
 var anonymousIdKey = "schematicId";
 var Schematic = class {
+  additionalHeaders = {};
   apiKey;
   apiUrl = "https://api.schematichq.com";
   conn = null;
@@ -643,6 +644,9 @@ var Schematic = class {
     this.eventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.flagListener = options?.flagListener;
+    if (options?.additionalHeaders) {
+      this.additionalHeaders = options.additionalHeaders;
+    }
     if (options?.storage) {
       this.storage = options.storage;
     } else if (typeof localStorage !== "undefined") {
@@ -663,36 +667,89 @@ var Schematic = class {
       });
     }
   }
-  // Get value for a single flag
-  // If in websocket mode, return the local value, otherwise make an API call
+  /**
+   * Get value for a single flag.
+   * In WebSocket mode, returns cached values if connection is active, otherwise establishes
+   * new connection and then returns the requestedvalue. Falls back to REST API if WebSocket
+   * connection fails.
+   * In REST mode, makes an API call for each check.
+   */
   async checkFlag(options) {
     const { fallback = false, key } = options;
     const context = options.context || this.context;
-    if (this.useWebSocket) {
-      const contextVals = this.values[contextString(context)] ?? {};
+    const contextStr = contextString(context);
+    if (!this.useWebSocket) {
+      const requestUrl = `${this.apiUrl}/flags/${key}/check`;
+      return fetch(requestUrl, {
+        method: "POST",
+        headers: {
+          ...this.additionalHeaders ?? {},
+          "Content-Type": "application/json;charset=UTF-8",
+          "X-Schematic-Api-Key": this.apiKey
+        },
+        body: JSON.stringify(context)
+      }).then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      }).then((data) => {
+        return data.data.value;
+      }).catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+        return fallback;
+      });
+    }
+    try {
+      const existingVals = this.values[contextStr];
+      if (this.conn && typeof existingVals !== "undefined" && typeof existingVals[key] !== "undefined") {
+        return existingVals[key];
+      }
+      try {
+        await this.setContext(context);
+      } catch (error) {
+        console.error(
+          "WebSocket connection failed, falling back to REST:",
+          error
+        );
+        return this.fallbackToRest(key, context, fallback);
+      }
+      const contextVals = this.values[contextStr] ?? {};
       return typeof contextVals[key] === "undefined" ? fallback : contextVals[key];
+    } catch (error) {
+      console.error("Unexpected error in checkFlag:", error);
+      return fallback;
     }
-    const requestUrl = `${this.apiUrl}/flags/${key}/check`;
-    return fetch(requestUrl, {
-      method: "POST",
-      headers: {
-        "X-Schematic-Api-Key": this.apiKey,
-        "Content-Type": "application/json;charset=UTF-8"
-      },
-      body: JSON.stringify(context)
-    }).then((response) => {
+  }
+  /**
+   * Helper method for falling back to REST API when WebSocket connection fails
+   */
+  async fallbackToRest(key, context, fallback) {
+    try {
+      const requestUrl = `${this.apiUrl}/flags/${key}/check`;
+      const response = await fetch(requestUrl, {
+        method: "POST",
+        headers: {
+          ...this.additionalHeaders ?? {},
+          "Content-Type": "application/json;charset=UTF-8",
+          "X-Schematic-Api-Key": this.apiKey
+        },
+        body: JSON.stringify(context)
+      });
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-      return response.json();
-    }).then((data) => {
+      const data = await response.json();
       return data.data.value;
-    }).catch((error) => {
-      console.error("There was a problem with the fetch operation:", error);
+    } catch (error) {
+      console.error("REST API call failed, using fallback value:", error);
       return fallback;
-    });
+    }
   }
-  // Make an API call to fetch all flag values for a given context (use if not in websocket mode)
+  /**
+   * Make an API call to fetch all flag values for a given context.
+   * Recommended for use in REST mode only.
+   */
   checkFlags = async (context) => {
     context = context || this.context;
     const requestUrl = `${this.apiUrl}/flags/check`;
@@ -700,6 +757,7 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
+        ...this.additionalHeaders ?? {},
         "Content-Type": "application/json;charset=UTF-8",
         "X-Schematic-Api-Key": this.apiKey
       },
@@ -722,18 +780,30 @@ var Schematic = class {
       return false;
     });
   };
-  // Send an identify event
+  /**
+   * Send an identify event.
+   * This will set the context for subsequent flag evaluation and events, and will also
+   * send an identify event to the Schematic API which will upsert a user and company.
+   */
   identify = (body) => {
-    this.setContext({
-      company: body.company?.keys,
-      user: body.keys
-    });
+    try {
+      this.setContext({
+        company: body.company?.keys,
+        user: body.keys
+      });
+    } catch (error) {
+      console.error("Error setting context:", error);
+    }
     return this.handleEvent("identify", body);
   };
-  // Set the flag evaluation context; if the context has changed,
-  // this will open a websocket connection (if not already open)
-  // and submit this context. The promise will resolve when the
-  // websocket sends back an initial set of flag values.
+  /**
+   * Set the flag evaluation context.
+   * In WebSocket mode, this will:
+   * 1. Open a websocket connection if not already open
+   * 2. Send the context to the server
+   * 3. Wait for initial flag values to be returned
+   * The promise resolves when initial flag values are received.
+   */
   setContext = async (context) => {
     if (!this.useWebSocket) {
       this.context = context;
@@ -747,10 +817,14 @@ var Schematic = class {
       const socket = await this.conn;
       await this.wsSendMessage(socket, context);
     } catch (error) {
-      console.error("Error setting Schematic context:", error);
+      console.error("Failed to establish WebSocket connection:", error);
+      throw error;
     }
   };
-  // Send track event
+  /**
+   * Send a track event
+   * Track usage for a company and/or user.
+   */
   track = (body) => {
     const { company, user, event, traits } = body;
     return this.handleEvent("track", {
@@ -805,6 +879,7 @@ var Schematic = class {
       await fetch(captureUrl, {
         method: "POST",
         headers: {
+          ...this.additionalHeaders ?? {},
           "Content-Type": "application/json;charset=UTF-8"
         },
         body: payload
@@ -821,6 +896,9 @@ var Schematic = class {
   /**
    * Websocket management
    */
+  /**
+   * If using websocket mode, close the connection when done.
+   */
   cleanup = async () => {
     if (this.conn) {
       try {
@@ -854,8 +932,7 @@ var Schematic = class {
   wsSendMessage = (socket, context) => {
     return new Promise((resolve, reject) => {
       if (contextString(context) == contextString(this.context)) {
-        resolve();
-        return;
+        return resolve(this.setIsPending(false));
       }
       this.context = context;
       const sendMessage = () => {
@@ -868,7 +945,7 @@ var Schematic = class {
           (message.flags ?? []).forEach(
             (flag) => {
               this.values[contextString(context)][flag.flag] = flag.value;
-              this.notifyFlagValueListeners(flag.flag);
+              this.notifyFlagValueListeners(flag.flag, flag.value);
             }
           );
           if (this.flagListener) {
@@ -912,7 +989,9 @@ var Schematic = class {
   };
   setIsPending = (isPending) => {
     this.isPending = isPending;
-    this.isPendingListeners.forEach((listener) => listener());
+    this.isPendingListeners.forEach(
+      (listener) => notifyListener(listener, isPending)
+    );
   };
   // flagValues state
   getFlagValue = (flagKey) => {
@@ -932,11 +1011,18 @@ var Schematic = class {
       this.flagValueListeners[flagKey].delete(listener);
     };
   };
-  notifyFlagValueListeners = (flagKey) => {
+  notifyFlagValueListeners = (flagKey, value) => {
     const listeners = this.flagValueListeners?.[flagKey] ?? [];
-    listeners.forEach((listener) => listener());
+    listeners.forEach((listener) => notifyListener(listener, value));
   };
 };
+var notifyListener = (listener, value) => {
+  if (listener.length > 0) {
+    listener(value);
+  } else {
+    listener();
+  }
+};
 
 // src/context/schematic.tsx
 var import_react = __toESM(require("react"));
@@ -950,16 +1036,19 @@ var SchematicProvider = ({
   publishableKey,
   ...clientOpts
 }) => {
+  const initialOptsRef = (0, import_react.useRef)({
+    publishableKey,
+    useWebSocket: clientOpts.useWebSocket ?? true,
+    ...clientOpts
+  });
   const client = (0, import_react.useMemo)(() => {
-    const { useWebSocket = true } = clientOpts;
     if (providedClient) {
       return providedClient;
     }
-    return new Schematic(publishableKey, {
-      useWebSocket,
-      ...clientOpts
+    return new Schematic(initialOptsRef.current.publishableKey, {
+      ...initialOptsRef.current
     });
-  }, [providedClient, publishableKey, clientOpts]);
+  }, [providedClient]);
   (0, import_react.useEffect)(() => {
     return () => {
       if (!providedClient) {

package/dist/schematic-react.esm.js

@@ -582,6 +582,7 @@ function contextString(context) {
 }
 var anonymousIdKey = "schematicId";
 var Schematic = class {
+  additionalHeaders = {};
   apiKey;
   apiUrl = "https://api.schematichq.com";
   conn = null;
@@ -601,6 +602,9 @@ var Schematic = class {
     this.eventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.flagListener = options?.flagListener;
+    if (options?.additionalHeaders) {
+      this.additionalHeaders = options.additionalHeaders;
+    }
     if (options?.storage) {
       this.storage = options.storage;
     } else if (typeof localStorage !== "undefined") {
@@ -621,36 +625,89 @@ var Schematic = class {
       });
     }
   }
-  // Get value for a single flag
-  // If in websocket mode, return the local value, otherwise make an API call
+  /**
+   * Get value for a single flag.
+   * In WebSocket mode, returns cached values if connection is active, otherwise establishes
+   * new connection and then returns the requestedvalue. Falls back to REST API if WebSocket
+   * connection fails.
+   * In REST mode, makes an API call for each check.
+   */
   async checkFlag(options) {
     const { fallback = false, key } = options;
     const context = options.context || this.context;
-    if (this.useWebSocket) {
-      const contextVals = this.values[contextString(context)] ?? {};
+    const contextStr = contextString(context);
+    if (!this.useWebSocket) {
+      const requestUrl = `${this.apiUrl}/flags/${key}/check`;
+      return fetch(requestUrl, {
+        method: "POST",
+        headers: {
+          ...this.additionalHeaders ?? {},
+          "Content-Type": "application/json;charset=UTF-8",
+          "X-Schematic-Api-Key": this.apiKey
+        },
+        body: JSON.stringify(context)
+      }).then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      }).then((data) => {
+        return data.data.value;
+      }).catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+        return fallback;
+      });
+    }
+    try {
+      const existingVals = this.values[contextStr];
+      if (this.conn && typeof existingVals !== "undefined" && typeof existingVals[key] !== "undefined") {
+        return existingVals[key];
+      }
+      try {
+        await this.setContext(context);
+      } catch (error) {
+        console.error(
+          "WebSocket connection failed, falling back to REST:",
+          error
+        );
+        return this.fallbackToRest(key, context, fallback);
+      }
+      const contextVals = this.values[contextStr] ?? {};
       return typeof contextVals[key] === "undefined" ? fallback : contextVals[key];
+    } catch (error) {
+      console.error("Unexpected error in checkFlag:", error);
+      return fallback;
     }
-    const requestUrl = `${this.apiUrl}/flags/${key}/check`;
-    return fetch(requestUrl, {
-      method: "POST",
-      headers: {
-        "X-Schematic-Api-Key": this.apiKey,
-        "Content-Type": "application/json;charset=UTF-8"
-      },
-      body: JSON.stringify(context)
-    }).then((response) => {
+  }
+  /**
+   * Helper method for falling back to REST API when WebSocket connection fails
+   */
+  async fallbackToRest(key, context, fallback) {
+    try {
+      const requestUrl = `${this.apiUrl}/flags/${key}/check`;
+      const response = await fetch(requestUrl, {
+        method: "POST",
+        headers: {
+          ...this.additionalHeaders ?? {},
+          "Content-Type": "application/json;charset=UTF-8",
+          "X-Schematic-Api-Key": this.apiKey
+        },
+        body: JSON.stringify(context)
+      });
       if (!response.ok) {
         throw new Error("Network response was not ok");
       }
-      return response.json();
-    }).then((data) => {
+      const data = await response.json();
       return data.data.value;
-    }).catch((error) => {
-      console.error("There was a problem with the fetch operation:", error);
+    } catch (error) {
+      console.error("REST API call failed, using fallback value:", error);
       return fallback;
-    });
+    }
   }
-  // Make an API call to fetch all flag values for a given context (use if not in websocket mode)
+  /**
+   * Make an API call to fetch all flag values for a given context.
+   * Recommended for use in REST mode only.
+   */
   checkFlags = async (context) => {
     context = context || this.context;
     const requestUrl = `${this.apiUrl}/flags/check`;
@@ -658,6 +715,7 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
+        ...this.additionalHeaders ?? {},
         "Content-Type": "application/json;charset=UTF-8",
         "X-Schematic-Api-Key": this.apiKey
       },
@@ -680,18 +738,30 @@ var Schematic = class {
       return false;
     });
   };
-  // Send an identify event
+  /**
+   * Send an identify event.
+   * This will set the context for subsequent flag evaluation and events, and will also
+   * send an identify event to the Schematic API which will upsert a user and company.
+   */
   identify = (body) => {
-    this.setContext({
-      company: body.company?.keys,
-      user: body.keys
-    });
+    try {
+      this.setContext({
+        company: body.company?.keys,
+        user: body.keys
+      });
+    } catch (error) {
+      console.error("Error setting context:", error);
+    }
     return this.handleEvent("identify", body);
   };
-  // Set the flag evaluation context; if the context has changed,
-  // this will open a websocket connection (if not already open)
-  // and submit this context. The promise will resolve when the
-  // websocket sends back an initial set of flag values.
+  /**
+   * Set the flag evaluation context.
+   * In WebSocket mode, this will:
+   * 1. Open a websocket connection if not already open
+   * 2. Send the context to the server
+   * 3. Wait for initial flag values to be returned
+   * The promise resolves when initial flag values are received.
+   */
   setContext = async (context) => {
     if (!this.useWebSocket) {
       this.context = context;
@@ -705,10 +775,14 @@ var Schematic = class {
       const socket = await this.conn;
       await this.wsSendMessage(socket, context);
     } catch (error) {
-      console.error("Error setting Schematic context:", error);
+      console.error("Failed to establish WebSocket connection:", error);
+      throw error;
     }
   };
-  // Send track event
+  /**
+   * Send a track event
+   * Track usage for a company and/or user.
+   */
   track = (body) => {
     const { company, user, event, traits } = body;
     return this.handleEvent("track", {
@@ -763,6 +837,7 @@ var Schematic = class {
       await fetch(captureUrl, {
         method: "POST",
         headers: {
+          ...this.additionalHeaders ?? {},
           "Content-Type": "application/json;charset=UTF-8"
         },
         body: payload
@@ -779,6 +854,9 @@ var Schematic = class {
   /**
    * Websocket management
    */
+  /**
+   * If using websocket mode, close the connection when done.
+   */
   cleanup = async () => {
     if (this.conn) {
       try {
@@ -812,8 +890,7 @@ var Schematic = class {
   wsSendMessage = (socket, context) => {
     return new Promise((resolve, reject) => {
       if (contextString(context) == contextString(this.context)) {
-        resolve();
-        return;
+        return resolve(this.setIsPending(false));
       }
       this.context = context;
       const sendMessage = () => {
@@ -826,7 +903,7 @@ var Schematic = class {
           (message.flags ?? []).forEach(
             (flag) => {
               this.values[contextString(context)][flag.flag] = flag.value;
-              this.notifyFlagValueListeners(flag.flag);
+              this.notifyFlagValueListeners(flag.flag, flag.value);
             }
           );
           if (this.flagListener) {
@@ -870,7 +947,9 @@ var Schematic = class {
   };
   setIsPending = (isPending) => {
     this.isPending = isPending;
-    this.isPendingListeners.forEach((listener) => listener());
+    this.isPendingListeners.forEach(
+      (listener) => notifyListener(listener, isPending)
+    );
   };
   // flagValues state
   getFlagValue = (flagKey) => {
@@ -890,14 +969,21 @@ var Schematic = class {
       this.flagValueListeners[flagKey].delete(listener);
     };
   };
-  notifyFlagValueListeners = (flagKey) => {
+  notifyFlagValueListeners = (flagKey, value) => {
     const listeners = this.flagValueListeners?.[flagKey] ?? [];
-    listeners.forEach((listener) => listener());
+    listeners.forEach((listener) => notifyListener(listener, value));
   };
 };
+var notifyListener = (listener, value) => {
+  if (listener.length > 0) {
+    listener(value);
+  } else {
+    listener();
+  }
+};
 
 // src/context/schematic.tsx
-import React, { createContext, useEffect, useMemo } from "react";
+import React, { createContext, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var SchematicContext = createContext(
   null
@@ -908,16 +994,19 @@ var SchematicProvider = ({
   publishableKey,
   ...clientOpts
 }) => {
+  const initialOptsRef = useRef({
+    publishableKey,
+    useWebSocket: clientOpts.useWebSocket ?? true,
+    ...clientOpts
+  });
   const client = useMemo(() => {
-    const { useWebSocket = true } = clientOpts;
     if (providedClient) {
       return providedClient;
     }
-    return new Schematic(publishableKey, {
-      useWebSocket,
-      ...clientOpts
+    return new Schematic(initialOptsRef.current.publishableKey, {
+      ...initialOptsRef.current
     });
-  }, [providedClient, publishableKey, clientOpts]);
+  }, [providedClient]);
   useEffect(() => {
     return () => {
       if (!providedClient) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -17,23 +17,21 @@
   },
   "scripts": {
     "dev": "yarn tsc --watch",
-    "build": "yarn tsc && yarn openapi && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
+    "build": "yarn tsc && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
     "build:cjs": "npx esbuild src/index.ts --bundle --external:react --format=cjs --outfile=dist/schematic-react.cjs.js",
     "build:esm": "npx esbuild src/index.ts --bundle --external:react --format=esm --outfile=dist/schematic-react.esm.js",
     "build:types": "npx tsc && npx api-extractor run",
     "clean": "rm -rf dist",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
-    "openapi": "rm -rf src/api/ && npx openapi-generator-cli generate -c openapi-config.yaml && prettier --write \"src/api/**/*.{ts,tsx}\"",
     "test": "jest --config jest.config.js",
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^1.0.0"
+    "@schematichq/schematic-js": "^1.0.2"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.9",
-    "@openapitools/openapi-generator-cli": "^2.13.9",
     "@types/jest": "^29.5.13",
     "@types/react": "^18.3.9",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
@@ -42,7 +40,7 @@
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-esbuild": "^0.3.0",