@schematichq/schematic-react 1.0.0-rc.0 → 1.0.2

package/README.md

@@ -0,0 +1,86 @@
+# schematic-react
+
+`schematic-react` is a client-side React library for [Schematic](https://schematichq.com) which provides hooks to track events, check flags, and more. `schematic-react` provides the same capabilities as [schematic-js](https://github.com/schematichq/schematic-js/tree/main/js), for React apps.
+
+## Install
+
+```bash
+npm install @schematichq/schematic-react
+# or
+yarn add @schematichq/schematic-react
+# or
+pnpm add @schematichq/schematic-react
+```
+
+## Usage
+
+You can use the `SchematicProvider` to wrap your application and provide the Schematic instance to all components:
+
+```tsx
+import { SchematicProvider } from "@schematichq/schematic-react";
+
+ReactDOM.render(
+    <SchematicProvider publishableKey="your-publishable-key">
+        <App />
+    </SchematicProvider>,
+    document.getElementById("root"),
+);
+```
+
+To set the user context for events and flag checks, you can use the `identify` function provided by the `useSchematicEvents` hook:
+
+```tsx
+import { useSchematicEvents } from "@schematichq/schematic-react";
+
+const MyComponent = () => {
+    const { identify } = useSchematicEvents();
+
+    useEffect(() => {
+        identify({
+            keys: { id: "my-user-id" },
+            company: {
+                keys: { id: "my-company-id" },
+                traits: { location: "Atlanta, GA" },
+            },
+        });
+    }, []);
+
+    return <div>My Component</div>;
+};
+```
+
+Once you've set the context with `identify`, you can track events:
+
+```tsx
+import { useSchematicEvents } from "@schematichq/schematic-react";
+
+const MyComponent = () => {
+    const { track } = useSchematicEvents();
+
+    useEffect(() => {
+        track({ event: "query" });
+    }, []);
+
+    return <div>My Component</div>;
+};
+```
+
+To check a flag, you can use the `useSchematicFlags` hook:
+
+```tsx
+import { useSchematicFlag } from "@schematichq/schematic-react";
+
+const MyComponent = () => {
+    const isFeatureEnabled = useSchematicFlag("my-flag-key");
+
+    return isFeatureEnabled ? <Feature /> : <Fallback />;
+};
+```
+
+## License
+
+MIT
+
+## Support
+
+Need help? Please open a GitHub issue or reach out to [support@schematichq.com](mailto:support@schematichq.com) and we'll be happy to assist.

package/dist/schematic-react.cjs.js

@@ -230,8 +230,8 @@ var require_browser_polyfill = __commonJS({
         function readArrayBufferAsText(buf) {
           var view = new Uint8Array(buf);
           var chars = new Array(view.length);
-          for (var i = 0; i < view.length; i++) {
-            chars[i] = String.fromCharCode(view[i]);
+          for (var i2 = 0; i2 < view.length; i2++) {
+            chars[i2] = String.fromCharCode(view[i2]);
           }
           return chars.join("");
         }
@@ -566,6 +566,14 @@ var require_browser_polyfill = __commonJS({
     })(typeof self !== "undefined" ? self : exports);
   }
 });
+var byteToHex = [];
+for (i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+var i;
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -577,13 +585,6 @@ function rng() {
   }
   return getRandomValues(rnds8);
 }
-var byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = {
   randomUUID
@@ -593,13 +594,13 @@ function v4(options, buf, offset) {
     return native_default.randomUUID();
   }
   options = options || {};
-  const rnds = options.random || (options.rng || rng)();
+  var rnds = options.random || (options.rng || rng)();
   rnds[6] = rnds[6] & 15 | 64;
   rnds[8] = rnds[8] & 63 | 128;
   if (buf) {
     offset = offset || 0;
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
+    for (var i2 = 0; i2 < 16; ++i2) {
+      buf[offset + i2] = rnds[i2];
     }
     return buf;
   }
@@ -623,6 +624,7 @@ function contextString(context) {
 }
 var anonymousIdKey = "schematicId";
 var Schematic = class {
+  additionalHeaders = {};
   apiKey;
   apiUrl = "https://api.schematichq.com";
   conn = null;
@@ -642,6 +644,9 @@ var Schematic = class {
     this.eventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.flagListener = options?.flagListener;
+    if (options?.additionalHeaders) {
+      this.additionalHeaders = options.additionalHeaders;
+    }
     if (options?.storage) {
       this.storage = options.storage;
     } else if (typeof localStorage !== "undefined") {
@@ -675,8 +680,9 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
-        "X-Schematic-Api-Key": this.apiKey,
-        "Content-Type": "application/json;charset=UTF-8"
+        ...this.additionalHeaders ?? {},
+        "Content-Type": "application/json;charset=UTF-8",
+        "X-Schematic-Api-Key": this.apiKey
       },
       body: JSON.stringify(context)
     }).then((response) => {
@@ -699,6 +705,7 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
+        ...this.additionalHeaders ?? {},
         "Content-Type": "application/json;charset=UTF-8",
         "X-Schematic-Api-Key": this.apiKey
       },
@@ -804,6 +811,7 @@ var Schematic = class {
       await fetch(captureUrl, {
         method: "POST",
         headers: {
+          ...this.additionalHeaders ?? {},
           "Content-Type": "application/json;charset=UTF-8"
         },
         body: payload
@@ -853,8 +861,7 @@ var Schematic = class {
   wsSendMessage = (socket, context) => {
     return new Promise((resolve, reject) => {
       if (contextString(context) == contextString(this.context)) {
-        resolve();
-        return;
+        return resolve(this.setIsPending(false));
       }
       this.context = context;
       const sendMessage = () => {
@@ -867,7 +874,7 @@ var Schematic = class {
           (message.flags ?? []).forEach(
             (flag) => {
               this.values[contextString(context)][flag.flag] = flag.value;
-              this.notifyFlagValueListeners(flag.flag);
+              this.notifyFlagValueListeners(flag.flag, flag.value);
             }
           );
           if (this.flagListener) {
@@ -911,7 +918,9 @@ var Schematic = class {
   };
   setIsPending = (isPending) => {
     this.isPending = isPending;
-    this.isPendingListeners.forEach((listener) => listener());
+    this.isPendingListeners.forEach(
+      (listener) => notifyListener(listener, isPending)
+    );
   };
   // flagValues state
   getFlagValue = (flagKey) => {
@@ -931,11 +940,18 @@ var Schematic = class {
       this.flagValueListeners[flagKey].delete(listener);
     };
   };
-  notifyFlagValueListeners = (flagKey) => {
+  notifyFlagValueListeners = (flagKey, value) => {
     const listeners = this.flagValueListeners?.[flagKey] ?? [];
-    listeners.forEach((listener) => listener());
+    listeners.forEach((listener) => notifyListener(listener, value));
   };
 };
+var notifyListener = (listener, value) => {
+  if (listener.length > 0) {
+    listener(value);
+  } else {
+    listener();
+  }
+};
 
 // src/context/schematic.tsx
 var import_react = __toESM(require("react"));

package/dist/schematic-react.esm.js

@@ -188,8 +188,8 @@ var require_browser_polyfill = __commonJS({
         function readArrayBufferAsText(buf) {
           var view = new Uint8Array(buf);
           var chars = new Array(view.length);
-          for (var i = 0; i < view.length; i++) {
-            chars[i] = String.fromCharCode(view[i]);
+          for (var i2 = 0; i2 < view.length; i2++) {
+            chars[i2] = String.fromCharCode(view[i2]);
           }
           return chars.join("");
         }
@@ -524,6 +524,14 @@ var require_browser_polyfill = __commonJS({
     })(typeof self !== "undefined" ? self : exports);
   }
 });
+var byteToHex = [];
+for (i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+var i;
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -535,13 +543,6 @@ function rng() {
   }
   return getRandomValues(rnds8);
 }
-var byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr, offset = 0) {
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
-}
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = {
   randomUUID
@@ -551,13 +552,13 @@ function v4(options, buf, offset) {
     return native_default.randomUUID();
   }
   options = options || {};
-  const rnds = options.random || (options.rng || rng)();
+  var rnds = options.random || (options.rng || rng)();
   rnds[6] = rnds[6] & 15 | 64;
   rnds[8] = rnds[8] & 63 | 128;
   if (buf) {
     offset = offset || 0;
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
+    for (var i2 = 0; i2 < 16; ++i2) {
+      buf[offset + i2] = rnds[i2];
     }
     return buf;
   }
@@ -581,6 +582,7 @@ function contextString(context) {
 }
 var anonymousIdKey = "schematicId";
 var Schematic = class {
+  additionalHeaders = {};
   apiKey;
   apiUrl = "https://api.schematichq.com";
   conn = null;
@@ -600,6 +602,9 @@ var Schematic = class {
     this.eventQueue = [];
     this.useWebSocket = options?.useWebSocket ?? false;
     this.flagListener = options?.flagListener;
+    if (options?.additionalHeaders) {
+      this.additionalHeaders = options.additionalHeaders;
+    }
     if (options?.storage) {
       this.storage = options.storage;
     } else if (typeof localStorage !== "undefined") {
@@ -633,8 +638,9 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
-        "X-Schematic-Api-Key": this.apiKey,
-        "Content-Type": "application/json;charset=UTF-8"
+        ...this.additionalHeaders ?? {},
+        "Content-Type": "application/json;charset=UTF-8",
+        "X-Schematic-Api-Key": this.apiKey
       },
       body: JSON.stringify(context)
     }).then((response) => {
@@ -657,6 +663,7 @@ var Schematic = class {
     return fetch(requestUrl, {
       method: "POST",
       headers: {
+        ...this.additionalHeaders ?? {},
         "Content-Type": "application/json;charset=UTF-8",
         "X-Schematic-Api-Key": this.apiKey
       },
@@ -762,6 +769,7 @@ var Schematic = class {
       await fetch(captureUrl, {
         method: "POST",
         headers: {
+          ...this.additionalHeaders ?? {},
           "Content-Type": "application/json;charset=UTF-8"
         },
         body: payload
@@ -811,8 +819,7 @@ var Schematic = class {
   wsSendMessage = (socket, context) => {
     return new Promise((resolve, reject) => {
       if (contextString(context) == contextString(this.context)) {
-        resolve();
-        return;
+        return resolve(this.setIsPending(false));
       }
       this.context = context;
       const sendMessage = () => {
@@ -825,7 +832,7 @@ var Schematic = class {
           (message.flags ?? []).forEach(
             (flag) => {
               this.values[contextString(context)][flag.flag] = flag.value;
-              this.notifyFlagValueListeners(flag.flag);
+              this.notifyFlagValueListeners(flag.flag, flag.value);
             }
           );
           if (this.flagListener) {
@@ -869,7 +876,9 @@ var Schematic = class {
   };
   setIsPending = (isPending) => {
     this.isPending = isPending;
-    this.isPendingListeners.forEach((listener) => listener());
+    this.isPendingListeners.forEach(
+      (listener) => notifyListener(listener, isPending)
+    );
   };
   // flagValues state
   getFlagValue = (flagKey) => {
@@ -889,11 +898,18 @@ var Schematic = class {
       this.flagValueListeners[flagKey].delete(listener);
     };
   };
-  notifyFlagValueListeners = (flagKey) => {
+  notifyFlagValueListeners = (flagKey, value) => {
     const listeners = this.flagValueListeners?.[flagKey] ?? [];
-    listeners.forEach((listener) => listener());
+    listeners.forEach((listener) => notifyListener(listener, value));
   };
 };
+var notifyListener = (listener, value) => {
+  if (listener.length > 0) {
+    listener(value);
+  } else {
+    listener();
+  }
+};
 
 // src/context/schematic.tsx
 import React, { createContext, useEffect, useMemo } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-react",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.2",
   "main": "dist/schematic-react.cjs.js",
   "module": "dist/schematic-react.esm.js",
   "types": "dist/schematic-react.d.ts",
@@ -17,23 +17,21 @@
   },
   "scripts": {
     "dev": "yarn tsc --watch",
-    "build": "yarn tsc && yarn openapi && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
+    "build": "yarn tsc && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
     "build:cjs": "npx esbuild src/index.ts --bundle --external:react --format=cjs --outfile=dist/schematic-react.cjs.js",
     "build:esm": "npx esbuild src/index.ts --bundle --external:react --format=esm --outfile=dist/schematic-react.esm.js",
     "build:types": "npx tsc && npx api-extractor run",
     "clean": "rm -rf dist",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix",
-    "openapi": "rm -rf src/api/ && npx openapi-generator-cli generate -c openapi-config.yaml && prettier --write \"src/api/**/*.{ts,tsx}\"",
     "test": "jest --config jest.config.js",
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@schematichq/schematic-js": "^0.1.14"
+    "@schematichq/schematic-js": "^1.0.2"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.9",
-    "@openapitools/openapi-generator-cli": "^2.13.9",
     "@types/jest": "^29.5.13",
     "@types/react": "^18.3.9",
     "@typescript-eslint/eslint-plugin": "^8.7.0",