@schematichq/schematic-react 0.1.4 → 0.1.6

package/dist/schematic-react.cjs.js

@@ -72,8 +72,9 @@ var v4_default = v4;
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   apiKey;
-  apiUrl = "api.schematichq.com";
-  eventUrl = "c.schematichq.com";
+  apiUrl = "https://api.schematichq.com";
+  webSocketUrl = "wss://api.schematichq.com";
+  eventUrl = "https://c.schematichq.com";
   conn = null;
   context = {};
   eventQueue;
@@ -97,7 +98,10 @@ var Schematic = class {
     if (options?.eventUrl !== void 0) {
       this.eventUrl = options.eventUrl;
     }
-    if (typeof window !== "undefined") {
+    if (options?.webSocketUrl !== void 0) {
+      this.webSocketUrl = options.webSocketUrl;
+    }
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
@@ -110,7 +114,7 @@ var Schematic = class {
       const contextVals = this.values[contextString(context)] ?? {};
       return typeof contextVals[key] === "undefined" ? fallback : contextVals[key];
     }
-    const requestUrl = this.getUrl(this.apiUrl, `flags/${key}/check`);
+    const requestUrl = `${this.apiUrl}/flags/${key}/check`;
     return fetch(requestUrl, {
       method: "POST",
       headers: {
@@ -133,7 +137,7 @@ var Schematic = class {
   // Make a REST API call to fetch all flag values for a given context
   checkFlags = async (context) => {
     context = context || this.context;
-    const requestUrl = this.getUrl(this.apiUrl, "flags/check");
+    const requestUrl = `${this.apiUrl}/flags/check`;
     const requestBody = JSON.stringify(context);
     return fetch(requestUrl, {
       method: "POST",
@@ -189,16 +193,6 @@ var Schematic = class {
   track = (body) => {
     this.handleEvent("track", body);
   };
-  getUrl = (domain, path, urlType) => {
-    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}`;
-  };
   flushEventQueue = () => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -228,14 +222,14 @@ 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);
     }
   };
   sendEvent = (event) => {
-    const captureUrl = this.getUrl(this.eventUrl, "e");
+    const captureUrl = `${this.eventUrl}/e`;
     const payload = JSON.stringify(event);
     fetch(captureUrl, {
       method: "POST",
@@ -261,7 +255,7 @@ var Schematic = class {
       if (this.conn) {
         resolve();
       }
-      const wsUrl = this.getUrl(this.apiUrl, "flags/bootstrap", "ws");
+      const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
       const webSocket = new WebSocket(wsUrl);
       this.conn = webSocket;
       webSocket.onopen = () => {
@@ -343,24 +337,29 @@ var SchematicContext = (0, import_react.createContext)({
   flagValues: {}
 });
 var SchematicProvider = ({
-  apiUrl,
   children,
+  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,
+    const newClient = new Schematic(publishableKey, {
+      ...clientOpts,
       flagListener: setFlagValues,
       useWebSocket: true
     });
-    setClient(client2);
-    return client2.cleanup;
-  }, [publishableKey]);
+    setClient(newClient);
+    return newClient.cleanup;
+  }, [clientOpts, providedClient, publishableKey]);
   const contextValue = {
     client,
     flagValues
@@ -368,23 +367,36 @@ 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]);
+  if (client) {
+    return client.checkFlag({ 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,27 +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;
 }
 
 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 | Promise<boolean>;
+
+export declare type UseSchematicFlagOpts = SchematicHookOpts & {
+    fallback?: boolean;
+};
 
 export { }

package/dist/schematic-react.esm.js

@@ -42,8 +42,9 @@ var v4_default = v4;
 var anonymousIdKey = "schematicId";
 var Schematic = class {
   apiKey;
-  apiUrl = "api.schematichq.com";
-  eventUrl = "c.schematichq.com";
+  apiUrl = "https://api.schematichq.com";
+  webSocketUrl = "wss://api.schematichq.com";
+  eventUrl = "https://c.schematichq.com";
   conn = null;
   context = {};
   eventQueue;
@@ -67,7 +68,10 @@ var Schematic = class {
     if (options?.eventUrl !== void 0) {
       this.eventUrl = options.eventUrl;
     }
-    if (typeof window !== "undefined") {
+    if (options?.webSocketUrl !== void 0) {
+      this.webSocketUrl = options.webSocketUrl;
+    }
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
@@ -80,7 +84,7 @@ var Schematic = class {
       const contextVals = this.values[contextString(context)] ?? {};
       return typeof contextVals[key] === "undefined" ? fallback : contextVals[key];
     }
-    const requestUrl = this.getUrl(this.apiUrl, `flags/${key}/check`);
+    const requestUrl = `${this.apiUrl}/flags/${key}/check`;
     return fetch(requestUrl, {
       method: "POST",
       headers: {
@@ -103,7 +107,7 @@ var Schematic = class {
   // Make a REST API call to fetch all flag values for a given context
   checkFlags = async (context) => {
     context = context || this.context;
-    const requestUrl = this.getUrl(this.apiUrl, "flags/check");
+    const requestUrl = `${this.apiUrl}/flags/check`;
     const requestBody = JSON.stringify(context);
     return fetch(requestUrl, {
       method: "POST",
@@ -159,16 +163,6 @@ var Schematic = class {
   track = (body) => {
     this.handleEvent("track", body);
   };
-  getUrl = (domain, path, urlType) => {
-    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}`;
-  };
   flushEventQueue = () => {
     while (this.eventQueue.length > 0) {
       const event = this.eventQueue.shift();
@@ -198,14 +192,14 @@ 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);
     }
   };
   sendEvent = (event) => {
-    const captureUrl = this.getUrl(this.eventUrl, "e");
+    const captureUrl = `${this.eventUrl}/e`;
     const payload = JSON.stringify(event);
     fetch(captureUrl, {
       method: "POST",
@@ -231,7 +225,7 @@ var Schematic = class {
       if (this.conn) {
         resolve();
       }
-      const wsUrl = this.getUrl(this.apiUrl, "flags/bootstrap", "ws");
+      const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
       const webSocket = new WebSocket(wsUrl);
       this.conn = webSocket;
       webSocket.onopen = () => {
@@ -318,24 +312,29 @@ var SchematicContext = createContext({
   flagValues: {}
 });
 var SchematicProvider = ({
-  apiUrl,
   children,
+  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,
+    const newClient = new Schematic(publishableKey, {
+      ...clientOpts,
       flagListener: setFlagValues,
       useWebSocket: true
     });
-    setClient(client2);
-    return client2.cleanup;
-  }, [publishableKey]);
+    setClient(newClient);
+    return newClient.cleanup;
+  }, [clientOpts, providedClient, publishableKey]);
   const contextValue = {
     client,
     flagValues
@@ -343,23 +342,36 @@ 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]);
+  if (client) {
+    return client.checkFlag({ key, fallback });
+  }
   return value;
 };
 export {

package/package.json

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