@schematichq/schematic-react 1.0.2 → 1.0.3

package/dist/schematic-react.cjs.js

@@ -667,37 +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: {
-        ...this.additionalHeaders ?? {},
-        "Content-Type": "application/json;charset=UTF-8",
-        "X-Schematic-Api-Key": this.apiKey
-      },
-      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`;
@@ -728,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;
@@ -753,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", {
@@ -828,6 +896,9 @@ var Schematic = class {
   /**
    * Websocket management
    */
+  /**
+   * If using websocket mode, close the connection when done.
+   */
   cleanup = async () => {
     if (this.conn) {
       try {
@@ -965,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

@@ -625,37 +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: {
-        ...this.additionalHeaders ?? {},
-        "Content-Type": "application/json;charset=UTF-8",
-        "X-Schematic-Api-Key": this.apiKey
-      },
-      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`;
@@ -686,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;
@@ -711,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", {
@@ -786,6 +854,9 @@ var Schematic = class {
   /**
    * Websocket management
    */
+  /**
+   * If using websocket mode, close the connection when done.
+   */
   cleanup = async () => {
     if (this.conn) {
       try {
@@ -912,7 +983,7 @@ var notifyListener = (listener, value) => {
 };
 
 // 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
@@ -923,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.2",
+  "version": "1.0.3",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -40,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",