@schematichq/schematic-react 0.1.5 → 0.1.6

package/dist/schematic-react.cjs.js

@@ -101,7 +101,7 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
-    if (typeof window !== "undefined") {
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
@@ -222,7 +222,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);
@@ -337,28 +337,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 +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,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 | Promise<boolean>;
+
+export declare type UseSchematicFlagOpts = SchematicHookOpts & {
+    fallback?: boolean;
+};
 
 export { }

package/dist/schematic-react.esm.js

@@ -71,7 +71,7 @@ var Schematic = class {
     if (options?.webSocketUrl !== void 0) {
       this.webSocketUrl = options.webSocketUrl;
     }
-    if (typeof window !== "undefined") {
+    if (window?.addEventListener) {
       window.addEventListener("beforeunload", () => {
         this.flushEventQueue();
       });
@@ -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);
@@ -312,28 +312,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,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.5",
+  "version": "0.1.6",
   "dependencies": {
-    "@schematichq/schematic-js": "^0.1.5"
+    "@schematichq/schematic-js": "^0.1.7"
   },
   "peerDependencies": {
     "react": ">=18"