@schematichq/schematic-react 0.1.5 → 0.1.7

package/dist/schematic-react.cjs.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  Schematic: () => Schematic,
   SchematicProvider: () => SchematicProvider,
   useSchematic: () => useSchematic,
   useSchematicContext: () => useSchematicContext,
@@ -101,13 +102,13 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
-    if (typeof window !== "undefined") {
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
     }
   }
-  checkFlag = async (options) => {
+  async checkFlag(options) {
     const { fallback = false, key } = options;
     const context = options.context || this.context;
     if (this.useWebSocket) {
@@ -133,7 +134,7 @@ var Schematic = class {
       console.error("There was a problem with the fetch operation:", error);
       return fallback;
     });
-  };
+  }
   // Make a REST API call to fetch all flag values for a given context
   checkFlags = async (context) => {
     context = context || this.context;
@@ -222,7 +223,7 @@ var Schematic = class {
       tracker_user_id: this.getAnonymousId(),
       type: eventType
     };
-    if (typeof document !== "undefined" && document.hidden) {
+    if (document?.hidden) {
       this.storeEvent(event);
     } else {
       this.sendEvent(event);
@@ -255,7 +256,7 @@ var Schematic = class {
       if (this.conn) {
         resolve();
       }
-      const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
+      const wsUrl = `${this.webSocketUrl}/flags/subscribe`;
       const webSocket = new WebSocket(wsUrl);
       this.conn = webSocket;
       webSocket.onopen = () => {
@@ -281,13 +282,9 @@ var Schematic = class {
         let resolved = false;
         this.conn.onmessage = (event) => {
           const message = JSON.parse(event.data);
-          this.values[contextString(context)] = (message.flags ?? []).reduce(
-            (accum, flag) => {
-              accum[flag.flag] = flag.value;
-              return accum;
-            },
-            {}
-          );
+          (message.flags ?? []).forEach((flag) => {
+            this.values[contextString(context)][flag.flag] = flag.value;
+          });
           if (this.flagListener) {
             this.flagListener(this.values[contextString(context)]);
           }
@@ -337,28 +334,29 @@ var SchematicContext = (0, import_react.createContext)({
   flagValues: {}
 });
 var SchematicProvider = ({
-  apiUrl,
   children,
-  eventUrl,
-  publishableKey,
-  webSocketUrl
+  client: providedClient,
+  clientOpts,
+  publishableKey
 }) => {
   const [client, setClient] = (0, import_react.useState)();
   const [flagValues, setFlagValues] = (0, import_react.useState)({});
   (0, import_react.useEffect)(() => {
+    if (providedClient) {
+      setClient(providedClient);
+      return providedClient.cleanup;
+    }
     if (publishableKey === void 0) {
       return;
     }
-    const client2 = new Schematic(publishableKey, {
-      apiUrl,
-      eventUrl,
+    const newClient = new Schematic(publishableKey, {
+      ...clientOpts,
       flagListener: setFlagValues,
-      useWebSocket: true,
-      webSocketUrl
+      useWebSocket: true
     });
-    setClient(client2);
-    return client2.cleanup;
-  }, [apiUrl, eventUrl, publishableKey, webSocketUrl]);
+    setClient(newClient);
+    return newClient.cleanup;
+  }, [clientOpts, providedClient, publishableKey]);
   const contextValue = {
     client,
     flagValues
@@ -366,23 +364,40 @@ var SchematicProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SchematicContext.Provider, { value: contextValue, children });
 };
 var useSchematic = () => (0, import_react.useContext)(SchematicContext);
-var useSchematicContext = () => {
-  const { client } = useSchematic();
+var useSchematicClient = (opts) => {
+  const schematic = useSchematic();
+  const { client } = opts ?? {};
+  if (client) {
+    return client;
+  }
+  return schematic.client;
+};
+var useSchematicContext = (opts) => {
+  const client = useSchematicClient(opts);
   const { setContext } = client ?? {};
   return { setContext };
 };
-var useSchematicEvents = () => {
-  const { client } = useSchematic();
+var useSchematicEvents = (opts) => {
+  const client = useSchematicClient(opts);
   const { track, identify } = client ?? {};
   return { track, identify };
 };
-var useSchematicFlag = (key, fallback) => {
+var useSchematicFlag = (key, opts) => {
   const { flagValues } = useSchematic();
+  const { client } = opts ?? {};
+  const { fallback = false } = opts ?? {};
   const [value, setValue] = (0, import_react.useState)(fallback ?? false);
   const flagValue = flagValues[key];
   (0, import_react.useEffect)(() => {
-    typeof flagValue === "undefined" ? setValue(fallback ?? false) : setValue(flagValue);
+    typeof flagValue === "undefined" ? setValue(fallback) : setValue(flagValue);
   }, [key, fallback, flagValue]);
+  (0, import_react.useEffect)(() => {
+    if (!client)
+      return;
+    client.checkFlag({ key, fallback }).then((value2) => {
+      setValue(value2);
+    });
+  }, [client, key, fallback]);
   return value;
 };
 /*! Bundled license information:

package/dist/schematic-react.d.ts

@@ -9,8 +9,10 @@ import { FlagCheckWithKeyResponseBody } from '@schematichq/schematic-js';
 import { Keys } from '@schematichq/schematic-js';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { Schematic } from '@schematichq/schematic-js';
 import { SchematicContext } from '@schematichq/schematic-js';
 import * as SchematicJS from '@schematichq/schematic-js';
+import { SchematicOptions } from '@schematichq/schematic-js';
 import { Traits } from '@schematichq/schematic-js';
 
 export { Event_2 as Event }
@@ -31,6 +33,8 @@ export { FlagCheckWithKeyResponseBody }
 
 export { Keys }
 
+export { Schematic }
+
 export { SchematicContext }
 
 declare interface SchematicContextProps {
@@ -42,29 +46,38 @@ export declare interface SchematicFlags {
     [key: string]: boolean;
 }
 
+export declare interface SchematicHookOpts {
+    client?: SchematicJS.Schematic;
+}
+
+export { SchematicOptions }
+
 export declare const SchematicProvider: React_2.FC<SchematicProviderProps>;
 
-declare interface SchematicProviderProps {
+export declare interface SchematicProviderProps {
     children: ReactNode;
+    client?: SchematicJS.Schematic;
+    clientOpts?: SchematicJS.SchematicOptions;
     publishableKey?: string;
-    apiUrl?: string;
-    eventUrl?: string;
-    webSocketUrl?: string;
 }
 
 export { Traits }
 
 export declare const useSchematic: () => SchematicContextProps;
 
-export declare const useSchematicContext: () => {
+export declare const useSchematicContext: (opts?: SchematicHookOpts) => {
     setContext: ((context: SchematicJS.SchematicContext) => Promise<void>) | undefined;
 };
 
-export declare const useSchematicEvents: () => {
+export declare const useSchematicEvents: (opts?: SchematicHookOpts) => {
     track: ((body: SchematicJS.EventBodyTrack) => void) | undefined;
     identify: ((body: SchematicJS.EventBodyIdentify) => void) | undefined;
 };
 
-export declare const useSchematicFlag: (key: string, fallback?: boolean) => boolean;
+export declare const useSchematicFlag: (key: string, opts?: UseSchematicFlagOpts) => boolean;
+
+export declare type UseSchematicFlagOpts = SchematicHookOpts & {
+    fallback?: boolean;
+};
 
 export { }

package/dist/schematic-react.esm.js

@@ -71,13 +71,13 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
-    if (typeof window !== "undefined") {
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
     }
   }
-  checkFlag = async (options) => {
+  async checkFlag(options) {
     const { fallback = false, key } = options;
     const context = options.context || this.context;
     if (this.useWebSocket) {
@@ -103,7 +103,7 @@ var Schematic = class {
       console.error("There was a problem with the fetch operation:", error);
       return fallback;
     });
-  };
+  }
   // Make a REST API call to fetch all flag values for a given context
   checkFlags = async (context) => {
     context = context || this.context;
@@ -192,7 +192,7 @@ var Schematic = class {
       tracker_user_id: this.getAnonymousId(),
       type: eventType
     };
-    if (typeof document !== "undefined" && document.hidden) {
+    if (document?.hidden) {
       this.storeEvent(event);
     } else {
       this.sendEvent(event);
@@ -225,7 +225,7 @@ var Schematic = class {
       if (this.conn) {
         resolve();
       }
-      const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
+      const wsUrl = `${this.webSocketUrl}/flags/subscribe`;
       const webSocket = new WebSocket(wsUrl);
       this.conn = webSocket;
       webSocket.onopen = () => {
@@ -251,13 +251,9 @@ var Schematic = class {
         let resolved = false;
         this.conn.onmessage = (event) => {
           const message = JSON.parse(event.data);
-          this.values[contextString(context)] = (message.flags ?? []).reduce(
-            (accum, flag) => {
-              accum[flag.flag] = flag.value;
-              return accum;
-            },
-            {}
-          );
+          (message.flags ?? []).forEach((flag) => {
+            this.values[contextString(context)][flag.flag] = flag.value;
+          });
           if (this.flagListener) {
             this.flagListener(this.values[contextString(context)]);
           }
@@ -312,28 +308,29 @@ var SchematicContext = createContext({
   flagValues: {}
 });
 var SchematicProvider = ({
-  apiUrl,
   children,
-  eventUrl,
-  publishableKey,
-  webSocketUrl
+  client: providedClient,
+  clientOpts,
+  publishableKey
 }) => {
   const [client, setClient] = useState();
   const [flagValues, setFlagValues] = useState({});
   useEffect(() => {
+    if (providedClient) {
+      setClient(providedClient);
+      return providedClient.cleanup;
+    }
     if (publishableKey === void 0) {
       return;
     }
-    const client2 = new Schematic(publishableKey, {
-      apiUrl,
-      eventUrl,
+    const newClient = new Schematic(publishableKey, {
+      ...clientOpts,
       flagListener: setFlagValues,
-      useWebSocket: true,
-      webSocketUrl
+      useWebSocket: true
     });
-    setClient(client2);
-    return client2.cleanup;
-  }, [apiUrl, eventUrl, publishableKey, webSocketUrl]);
+    setClient(newClient);
+    return newClient.cleanup;
+  }, [clientOpts, providedClient, publishableKey]);
   const contextValue = {
     client,
     flagValues
@@ -341,26 +338,44 @@ var SchematicProvider = ({
   return /* @__PURE__ */ jsx(SchematicContext.Provider, { value: contextValue, children });
 };
 var useSchematic = () => useContext(SchematicContext);
-var useSchematicContext = () => {
-  const { client } = useSchematic();
+var useSchematicClient = (opts) => {
+  const schematic = useSchematic();
+  const { client } = opts ?? {};
+  if (client) {
+    return client;
+  }
+  return schematic.client;
+};
+var useSchematicContext = (opts) => {
+  const client = useSchematicClient(opts);
   const { setContext } = client ?? {};
   return { setContext };
 };
-var useSchematicEvents = () => {
-  const { client } = useSchematic();
+var useSchematicEvents = (opts) => {
+  const client = useSchematicClient(opts);
   const { track, identify } = client ?? {};
   return { track, identify };
 };
-var useSchematicFlag = (key, fallback) => {
+var useSchematicFlag = (key, opts) => {
   const { flagValues } = useSchematic();
+  const { client } = opts ?? {};
+  const { fallback = false } = opts ?? {};
   const [value, setValue] = useState(fallback ?? false);
   const flagValue = flagValues[key];
   useEffect(() => {
-    typeof flagValue === "undefined" ? setValue(fallback ?? false) : setValue(flagValue);
+    typeof flagValue === "undefined" ? setValue(fallback) : setValue(flagValue);
   }, [key, fallback, flagValue]);
+  useEffect(() => {
+    if (!client)
+      return;
+    client.checkFlag({ key, fallback }).then((value2) => {
+      setValue(value2);
+    });
+  }, [client, key, fallback]);
   return value;
 };
 export {
+  Schematic,
   SchematicProvider,
   useSchematic,
   useSchematicContext,

package/package.json

@@ -42,9 +42,9 @@
     "test": "jest --config jest.config.js"
   },
   "types": "dist/schematic-react.d.ts",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "dependencies": {
-    "@schematichq/schematic-js": "^0.1.5"
+    "@schematichq/schematic-js": "^0.1.8"
   },
   "peerDependencies": {
     "react": ">=18"