@schematichq/schematic-react 1.2.6 → 1.2.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Schematic, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -134,6 +134,8 @@ const MyComponent = () => {
 };
 ```
 
+*Note: `useSchematicIsPending` is checking if entitlement data has been loaded, typically via `identify`. It should, therefore, be used to wrap flag and entitlement checks, but never the initial call to `identify`.*
+
 ## Troubleshooting
 
 For debugging and development, Schematic supports two special modes:

package/dist/schematic-react.cjs.js

@@ -799,7 +799,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.6";
+var version = "1.2.7";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -821,6 +821,14 @@ var Schematic = class {
   checks = {};
   featureUsageEventMap = {};
   webSocketUrl = "wss://api.schematichq.com";
+  webSocketConnectionTimeout = 1e4;
+  webSocketReconnect = true;
+  webSocketMaxReconnectAttempts = 7;
+  webSocketInitialRetryDelay = 1e3;
+  webSocketMaxRetryDelay = 3e4;
+  wsReconnectAttempts = 0;
+  wsReconnectTimer = null;
+  wsIntentionalDisconnect = false;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
@@ -864,11 +872,36 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
+    if (options?.webSocketConnectionTimeout !== void 0) {
+      this.webSocketConnectionTimeout = options.webSocketConnectionTimeout;
+    }
+    if (options?.webSocketReconnect !== void 0) {
+      this.webSocketReconnect = options.webSocketReconnect;
+    }
+    if (options?.webSocketMaxReconnectAttempts !== void 0) {
+      this.webSocketMaxReconnectAttempts = options.webSocketMaxReconnectAttempts;
+    }
+    if (options?.webSocketInitialRetryDelay !== void 0) {
+      this.webSocketInitialRetryDelay = options.webSocketInitialRetryDelay;
+    }
+    if (options?.webSocketMaxRetryDelay !== void 0) {
+      this.webSocketMaxRetryDelay = options.webSocketMaxRetryDelay;
+    }
     if (typeof window !== "undefined" && window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
         this.flushContextDependentEventQueue();
       });
+      if (this.useWebSocket) {
+        window.addEventListener("offline", () => {
+          this.debug("Browser went offline, closing WebSocket connection");
+          this.handleNetworkOffline();
+        });
+        window.addEventListener("online", () => {
+          this.debug("Browser came online, attempting to reconnect WebSocket");
+          this.handleNetworkOnline();
+        });
+      }
     }
     if (this.offlineEnabled) {
       this.debug(
@@ -1133,6 +1166,13 @@ var Schematic = class {
     try {
       this.setIsPending(true);
       if (!this.conn) {
+        if (this.wsReconnectTimer !== null) {
+          this.debug(
+            `Cancelling scheduled reconnection, connecting immediately`
+          );
+          clearTimeout(this.wsReconnectTimer);
+          this.wsReconnectTimer = null;
+        }
         this.conn = this.wsConnect();
       }
       const socket = await this.conn;
@@ -1339,6 +1379,11 @@ var Schematic = class {
       this.debug("cleanup: skipped (offline mode)");
       return Promise.resolve();
     }
+    this.wsIntentionalDisconnect = true;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1350,6 +1395,91 @@ var Schematic = class {
       }
     }
   };
+  /**
+   * Calculate the delay for the next reconnection attempt using exponential backoff with jitter.
+   * This helps prevent dogpiling when the server recovers from an outage.
+   */
+  calculateReconnectDelay = () => {
+    const exponentialDelay = this.webSocketInitialRetryDelay * Math.pow(2, this.wsReconnectAttempts);
+    const cappedDelay = Math.min(exponentialDelay, this.webSocketMaxRetryDelay);
+    const jitter = Math.random() * cappedDelay * 0.5;
+    const totalDelay = cappedDelay + jitter;
+    this.debug(
+      `Reconnect delay calculated: ${totalDelay.toFixed(0)}ms (attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts})`
+    );
+    return totalDelay;
+  };
+  /**
+   * Handle browser going offline
+   */
+  handleNetworkOffline = async () => {
+    if (this.conn !== null) {
+      try {
+        const socket = await this.conn;
+        socket.close();
+      } catch (error) {
+        this.debug("Error closing connection on offline:", error);
+      }
+      this.conn = null;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+  };
+  /**
+   * Handle browser coming back online
+   */
+  handleNetworkOnline = () => {
+    if (this.context.company === void 0 && this.context.user === void 0) {
+      this.debug("No context set, skipping reconnection");
+      return;
+    }
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.debug("Network online, reconnecting immediately");
+    this.attemptReconnect();
+  };
+  /**
+   * Attempt to reconnect the WebSocket connection with exponential backoff.
+   * Called automatically when the connection closes unexpectedly.
+   */
+  attemptReconnect = () => {
+    if (this.wsReconnectAttempts >= this.webSocketMaxReconnectAttempts) {
+      this.debug(
+        `Maximum reconnection attempts (${this.webSocketMaxReconnectAttempts}) reached, giving up`
+      );
+      return;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+    }
+    const delay = this.calculateReconnectDelay();
+    this.debug(
+      `Scheduling reconnection attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts} in ${delay.toFixed(0)}ms`
+    );
+    this.wsReconnectTimer = setTimeout(async () => {
+      this.wsReconnectTimer = null;
+      this.wsReconnectAttempts++;
+      this.debug(
+        `Attempting to reconnect (attempt ${this.wsReconnectAttempts}/${this.webSocketMaxReconnectAttempts})`
+      );
+      try {
+        this.conn = this.wsConnect();
+        const socket = await this.conn;
+        if (this.context.company !== void 0 || this.context.user !== void 0) {
+          this.debug(`Reconnected, re-sending context`);
+          await this.wsSendMessage(socket, this.context);
+        }
+        this.debug(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1362,17 +1492,45 @@ var Schematic = class {
       const wsUrl = `${this.webSocketUrl}/flags/bootstrap?apiKey=${this.apiKey}`;
       this.debug(`connecting to WebSocket:`, wsUrl);
       const webSocket = new WebSocket(wsUrl);
+      let timeoutId = null;
+      let isResolved = false;
+      timeoutId = setTimeout(() => {
+        if (!isResolved) {
+          this.debug(
+            `WebSocket connection timeout after ${this.webSocketConnectionTimeout}ms`
+          );
+          webSocket.close();
+          reject(new Error("WebSocket connection timeout"));
+        }
+      }, this.webSocketConnectionTimeout);
       webSocket.onopen = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+        this.wsReconnectAttempts = 0;
+        this.wsIntentionalDisconnect = false;
         this.debug(`WebSocket connection opened`);
         resolve(webSocket);
       };
       webSocket.onerror = (error) => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection error:`, error);
         reject(error);
       };
       webSocket.onclose = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection closed`);
         this.conn = null;
+        if (!this.wsIntentionalDisconnect && this.webSocketReconnect) {
+          this.attemptReconnect();
+        }
       };
     });
   };
@@ -1564,7 +1722,7 @@ var notifyFlagValueListener = (listener, value) => {
 var import_react = __toESM(require("react"));
 
 // src/version.ts
-var version2 = "1.2.6";
+var version2 = "1.2.7";
 
 // src/context/schematic.tsx
 var import_jsx_runtime = require("react/jsx-runtime");

package/dist/schematic-react.esm.js

@@ -754,7 +754,7 @@ function contextString(context) {
   }, {});
   return JSON.stringify(sortedContext);
 }
-var version = "1.2.6";
+var version = "1.2.7";
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   additionalHeaders = {};
@@ -776,6 +776,14 @@ var Schematic = class {
   checks = {};
   featureUsageEventMap = {};
   webSocketUrl = "wss://api.schematichq.com";
+  webSocketConnectionTimeout = 1e4;
+  webSocketReconnect = true;
+  webSocketMaxReconnectAttempts = 7;
+  webSocketInitialRetryDelay = 1e3;
+  webSocketMaxRetryDelay = 3e4;
+  wsReconnectAttempts = 0;
+  wsReconnectTimer = null;
+  wsIntentionalDisconnect = false;
   constructor(apiKey, options) {
     this.apiKey = apiKey;
     this.eventQueue = [];
@@ -819,11 +827,36 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
+    if (options?.webSocketConnectionTimeout !== void 0) {
+      this.webSocketConnectionTimeout = options.webSocketConnectionTimeout;
+    }
+    if (options?.webSocketReconnect !== void 0) {
+      this.webSocketReconnect = options.webSocketReconnect;
+    }
+    if (options?.webSocketMaxReconnectAttempts !== void 0) {
+      this.webSocketMaxReconnectAttempts = options.webSocketMaxReconnectAttempts;
+    }
+    if (options?.webSocketInitialRetryDelay !== void 0) {
+      this.webSocketInitialRetryDelay = options.webSocketInitialRetryDelay;
+    }
+    if (options?.webSocketMaxRetryDelay !== void 0) {
+      this.webSocketMaxRetryDelay = options.webSocketMaxRetryDelay;
+    }
     if (typeof window !== "undefined" && window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
         this.flushContextDependentEventQueue();
       });
+      if (this.useWebSocket) {
+        window.addEventListener("offline", () => {
+          this.debug("Browser went offline, closing WebSocket connection");
+          this.handleNetworkOffline();
+        });
+        window.addEventListener("online", () => {
+          this.debug("Browser came online, attempting to reconnect WebSocket");
+          this.handleNetworkOnline();
+        });
+      }
     }
     if (this.offlineEnabled) {
       this.debug(
@@ -1088,6 +1121,13 @@ var Schematic = class {
     try {
       this.setIsPending(true);
       if (!this.conn) {
+        if (this.wsReconnectTimer !== null) {
+          this.debug(
+            `Cancelling scheduled reconnection, connecting immediately`
+          );
+          clearTimeout(this.wsReconnectTimer);
+          this.wsReconnectTimer = null;
+        }
         this.conn = this.wsConnect();
       }
       const socket = await this.conn;
@@ -1294,6 +1334,11 @@ var Schematic = class {
       this.debug("cleanup: skipped (offline mode)");
       return Promise.resolve();
     }
+    this.wsIntentionalDisconnect = true;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
     if (this.conn) {
       try {
         const socket = await this.conn;
@@ -1305,6 +1350,91 @@ var Schematic = class {
       }
     }
   };
+  /**
+   * Calculate the delay for the next reconnection attempt using exponential backoff with jitter.
+   * This helps prevent dogpiling when the server recovers from an outage.
+   */
+  calculateReconnectDelay = () => {
+    const exponentialDelay = this.webSocketInitialRetryDelay * Math.pow(2, this.wsReconnectAttempts);
+    const cappedDelay = Math.min(exponentialDelay, this.webSocketMaxRetryDelay);
+    const jitter = Math.random() * cappedDelay * 0.5;
+    const totalDelay = cappedDelay + jitter;
+    this.debug(
+      `Reconnect delay calculated: ${totalDelay.toFixed(0)}ms (attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts})`
+    );
+    return totalDelay;
+  };
+  /**
+   * Handle browser going offline
+   */
+  handleNetworkOffline = async () => {
+    if (this.conn !== null) {
+      try {
+        const socket = await this.conn;
+        socket.close();
+      } catch (error) {
+        this.debug("Error closing connection on offline:", error);
+      }
+      this.conn = null;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+  };
+  /**
+   * Handle browser coming back online
+   */
+  handleNetworkOnline = () => {
+    if (this.context.company === void 0 && this.context.user === void 0) {
+      this.debug("No context set, skipping reconnection");
+      return;
+    }
+    this.wsReconnectAttempts = 0;
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    this.debug("Network online, reconnecting immediately");
+    this.attemptReconnect();
+  };
+  /**
+   * Attempt to reconnect the WebSocket connection with exponential backoff.
+   * Called automatically when the connection closes unexpectedly.
+   */
+  attemptReconnect = () => {
+    if (this.wsReconnectAttempts >= this.webSocketMaxReconnectAttempts) {
+      this.debug(
+        `Maximum reconnection attempts (${this.webSocketMaxReconnectAttempts}) reached, giving up`
+      );
+      return;
+    }
+    if (this.wsReconnectTimer !== null) {
+      clearTimeout(this.wsReconnectTimer);
+    }
+    const delay = this.calculateReconnectDelay();
+    this.debug(
+      `Scheduling reconnection attempt ${this.wsReconnectAttempts + 1}/${this.webSocketMaxReconnectAttempts} in ${delay.toFixed(0)}ms`
+    );
+    this.wsReconnectTimer = setTimeout(async () => {
+      this.wsReconnectTimer = null;
+      this.wsReconnectAttempts++;
+      this.debug(
+        `Attempting to reconnect (attempt ${this.wsReconnectAttempts}/${this.webSocketMaxReconnectAttempts})`
+      );
+      try {
+        this.conn = this.wsConnect();
+        const socket = await this.conn;
+        if (this.context.company !== void 0 || this.context.user !== void 0) {
+          this.debug(`Reconnected, re-sending context`);
+          await this.wsSendMessage(socket, this.context);
+        }
+        this.debug(`Reconnection successful`);
+      } catch (error) {
+        this.debug(`Reconnection attempt failed:`, error);
+      }
+    }, delay);
+  };
   // Open a websocket connection
   wsConnect = () => {
     if (this.isOffline()) {
@@ -1317,17 +1447,45 @@ var Schematic = class {
       const wsUrl = `${this.webSocketUrl}/flags/bootstrap?apiKey=${this.apiKey}`;
       this.debug(`connecting to WebSocket:`, wsUrl);
       const webSocket = new WebSocket(wsUrl);
+      let timeoutId = null;
+      let isResolved = false;
+      timeoutId = setTimeout(() => {
+        if (!isResolved) {
+          this.debug(
+            `WebSocket connection timeout after ${this.webSocketConnectionTimeout}ms`
+          );
+          webSocket.close();
+          reject(new Error("WebSocket connection timeout"));
+        }
+      }, this.webSocketConnectionTimeout);
       webSocket.onopen = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
+        this.wsReconnectAttempts = 0;
+        this.wsIntentionalDisconnect = false;
         this.debug(`WebSocket connection opened`);
         resolve(webSocket);
       };
       webSocket.onerror = (error) => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection error:`, error);
         reject(error);
       };
       webSocket.onclose = () => {
+        isResolved = true;
+        if (timeoutId !== null) {
+          clearTimeout(timeoutId);
+        }
         this.debug(`WebSocket connection closed`);
         this.conn = null;
+        if (!this.wsIntentionalDisconnect && this.webSocketReconnect) {
+          this.attemptReconnect();
+        }
       };
     });
   };
@@ -1519,7 +1677,7 @@ var notifyFlagValueListener = (listener, value) => {
 import React, { createContext, useEffect, useMemo, useRef } from "react";
 
 // src/version.ts
-var version2 = "1.2.6";
+var version2 = "1.2.7";
 
 // src/context/schematic.tsx
 import { jsx } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -24,40 +24,38 @@
     "clean": "rm -rf dist",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
-    "test": "jest --config jest.config.js",
-    "test:reactnative": "jest --config jest.config.reactnative.js",
+    "test": "vitest run",
+    "test:reactnative": "vitest run --config vitest.config.reactnative.ts",
+    "test:watch": "vitest",
     "tsc": "npx tsc",
     "prepare": "husky"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^1.2.6"
+    "@schematichq/schematic-js": "^1.2.7"
   },
   "devDependencies": {
-    "@eslint/js": "^9.24.0",
-    "@microsoft/api-extractor": "^7.52.2",
+    "@eslint/js": "^9.39.1",
+    "@microsoft/api-extractor": "^7.55.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.1",
-    "esbuild": "^0.25.2",
-    "esbuild-jest": "^0.5.0",
-    "eslint": "^9.24.0",
+    "@types/react": "^19.2.3",
+    "@vitest/browser": "^4.0.8",
+    "esbuild": "^0.27.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^16.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "globals": "^16.5.0",
+    "happy-dom": "^20.0.10",
     "husky": "^9.1.7",
-    "jest": "^30.0.0",
-    "jest-environment-jsdom": "^30.0.0",
-    "jest-esbuild": "^0.4.0",
-    "jest-fetch-mock": "^3.0.3",
+    "jsdom": "^27.2.0",
     "prettier": "^3.6.2",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "ts-jest": "^29.3.0",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.29.1"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vitest": "^4.0.8"
   },
   "peerDependencies": {
     "react": ">=18"