@stytch/react 17.0.0 → 18.1.0

package/dist/invariant-568a7633.d.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react";
+declare const noProviderError: (item: string, provider?: string) => string;
+declare const providerMustBeUniqueError = "You cannot render a <StytchProvider> inside another <StytchProvider>.";
+declare const B2BProviderMustBeUniqueError = "You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.";
+declare const noSSRError = "The @stytch/react library is not meant for use with serverside environments like NextJS.\nUse the @stytch/nextjs library instead - \nnpm remove @stytch/react && npm install @stytch/nextjs\n";
+declare const noHeadlessClientError = "Tried to create a Stytch Login UI element using the Stytch Headless SDK.\nYou must use the UI SDK to use UI elements.\nPlease make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
+declare function invariant(cond: any, message: string): asserts cond;
+export { noProviderError, providerMustBeUniqueError, B2BProviderMustBeUniqueError, noSSRError, noHeadlessClientError, useAsyncState, mergeWithStableProps, invariant };

package/dist/invariant-568a7633.js

@@ -0,0 +1,88 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+const useAsyncState = (initialState) => {
+    const isMounted = useRef(true);
+    const [state, setState] = useState(initialState);
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+export { B2BProviderMustBeUniqueError as B, noSSRError as a, noHeadlessClientError as b, invariant as i, mergeWithStableProps as m, noProviderError as n, providerMustBeUniqueError as p, useAsyncState as u };

package/dist/invariant-ae5a5bce.d.ts

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction } from "react";
+declare const noProviderError: (item: string, provider?: string) => string;
+declare const providerMustBeUniqueError = "You cannot render a <StytchProvider> inside another <StytchProvider>.";
+declare const B2BProviderMustBeUniqueError = "You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.";
+declare const noSSRError = "The @stytch/react library is not meant for use with serverside environments like NextJS.\nUse the @stytch/nextjs library instead - \nnpm remove @stytch/react && npm install @stytch/nextjs\n";
+declare const noHeadlessClientError = "Tried to create a Stytch Login UI element using the Stytch Headless SDK.\nYou must use the UI SDK to use UI elements.\nPlease make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.";
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+declare const useAsyncState: <T>(initialState: T | (() => T)) => [
+    T,
+    Dispatch<SetStateAction<T>>
+];
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+declare const mergeWithStableProps: <T extends Record<string, unknown>, U extends Record<string, unknown> = T>(oldValue: U, newValue: T) => T;
+declare function invariant(cond: any, message: string): asserts cond;
+export { noProviderError, providerMustBeUniqueError, B2BProviderMustBeUniqueError, noSSRError, noHeadlessClientError, useAsyncState, mergeWithStableProps, invariant };

package/dist/invariant-ae5a5bce.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var React = require('react');
+
+const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
+    // If comparing functions, this may need some work. Not sure the
+    // best path for this: compare instance (what it currently does),
+    // stringify and compare, etc.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const deepEqual = (a, b) => {
+        // Ensures type is the same
+        if (typeof a !== typeof b)
+            return false;
+        // arrays, null, and objects all have type 'object'
+        if (a === null || b === null)
+            return a === b;
+        if (typeof a === 'object') {
+            if (Object.keys(a).length !== Object.keys(b).length || Object.keys(a).some((k) => !(k in b)))
+                return false;
+            return Object.entries(a)
+                .filter(([k]) => !KEYS_TO_EXCLUDE.includes(k))
+                .every(([k, v]) => deepEqual(v, b[k]));
+        }
+        // boolean, string, number, undefined
+        return a === b;
+    };
+    return deepEqual;
+};
+
+const deepEqual = createDeepEqual();
+/**
+ * Returns a version of `newValue` whose properties that are deeply equal to
+ * those in `oldValue` are replaced with those from `oldValue`. This provides a
+ * limited form of "structural sharing" that provides a stable reference for
+ * unchanged slices of the object.
+ *
+ * If `oldValue` and `newValue` are referentially equal, the same value is
+ * returned.
+ *
+ * @param oldValue The old value
+ * @param newValue The new value
+ */
+const mergeWithStableProps = (oldValue, newValue) => {
+    // If the values are already referentially the same, just return the new value
+    if (oldValue === newValue) {
+        return newValue;
+    }
+    return Object.keys(oldValue).reduce((acc, key) => {
+        if (key in newValue && deepEqual(oldValue[key], newValue[key])) {
+            acc[key] = oldValue[key];
+        }
+        return acc;
+    }, Object.assign({}, newValue));
+};
+
+// useState can cause memory leaks if it is set after the component unmounted. For example, if it is
+// set after `await`, or in a `then`, `catch`, or `finally`, or in a setTimout/setInterval.
+const useAsyncState = (initialState) => {
+    const isMounted = React.useRef(true);
+    const [state, setState] = React.useState(initialState);
+    React.useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    const setStateAction = React.useCallback((newState) => {
+        isMounted.current && setState(newState);
+    }, []);
+    return [state, setStateAction];
+};
+
+const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
+const providerMustBeUniqueError = 'You cannot render a <StytchProvider> inside another <StytchProvider>.';
+const B2BProviderMustBeUniqueError = 'You cannot render a <StytchB2BProvider> inside another <StytchB2BProvider>.';
+const noSSRError = `The @stytch/react library is not meant for use with serverside environments like NextJS.
+Use the @stytch/nextjs library instead - 
+npm remove @stytch/react && npm install @stytch/nextjs
+`;
+const noHeadlessClientError = `Tried to create a Stytch Login UI element using the Stytch Headless SDK.
+You must use the UI SDK to use UI elements.
+Please make sure you are importing from @stytch/vanilla-js and not from the @stytch/vanilla-js/headless.`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function invariant(cond, message) {
+    if (!cond)
+        throw new Error(message);
+}
+
+exports.B2BProviderMustBeUniqueError = B2BProviderMustBeUniqueError;
+exports.invariant = invariant;
+exports.mergeWithStableProps = mergeWithStableProps;
+exports.noHeadlessClientError = noHeadlessClientError;
+exports.noProviderError = noProviderError;
+exports.noSSRError = noSSRError;
+exports.providerMustBeUniqueError = providerMustBeUniqueError;
+exports.useAsyncState = useAsyncState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "17.0.0",
+  "version": "18.1.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/runtime": "7.18.6",
     "@stytch/js-utils": "0.0.0",
-    "@stytch/vanilla-js": "4.9.0",
+    "@stytch/vanilla-js": "4.13.0",
     "@testing-library/react": "14.0.0",
     "eslint-config-custom": "0.0.1",
     "react": "18.2.0",
@@ -45,7 +45,7 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@stytch/vanilla-js": "^4.9.0",
+    "@stytch/vanilla-js": "^4.13.0",
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   }