@stytch/react 19.4.4 → 19.5.0

package/dist/index.ui.esm.d.ts

@@ -0,0 +1,17 @@
+import { StytchUIClient } from "@stytch/vanilla-js";
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+declare const createStytchUIClient: <TProjectConfiguration extends Partial<import("@stytch/core/public").StytchProjectConfiguration> = Stytch.DefaultProjectConfiguration>(_PUBLIC_TOKEN: string, options?: import("@stytch/core/public").StytchClientOptions | undefined) => StytchUIClient<TProjectConfiguration>;
+export { createStytchUIClient };

package/dist/index.ui.esm.js

@@ -0,0 +1,25 @@
+import { StytchUIClient } from '@stytch/vanilla-js';
+import { c as createStytchSSRProxy } from './StytchSSRProxy-34c789b5.js';
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return createStytchSSRProxy();
+    }
+    return new StytchUIClient(...args);
+};
+
+export { createStytchUIClient };

package/dist/index.ui.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vanillaJs = require('@stytch/vanilla-js');
+var StytchSSRProxy = require('./StytchSSRProxy-86bc42b3.js');
+
+/**
+ * Creates a Stytch UI client object to call the Stytch APIs and render Stytch UI components.
+ * The Stytch client is not available serverside.
+ * If you do not use Stytch UI components, use {@link createStytchHeadlessClient} to reduce your bundle size.
+ * @example
+ * const stytch = createStytchUIClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchProvider stytch={stytch}>
+ *     <App />
+ *   </StytchProvider>
+ * )
+ * @returns A {@link StytchUIClient}
+ */
+const createStytchUIClient = (...args) => {
+    if (typeof window === 'undefined') {
+        return StytchSSRProxy.createStytchSSRProxy();
+    }
+    return new vanillaJs.StytchUIClient(...args);
+};
+
+exports.createStytchUIClient = createStytchUIClient;

package/dist/useIsomorphicLayoutEffect-1babb81e.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare function invariant(cond: any, message: string): asserts cond;
+// 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 const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, invariant, useAsyncState, mergeWithStableProps };

package/dist/{invariant-568a7633.js → useIsomorphicLayoutEffect-1babb81e.js}

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
 
 const createDeepEqual = ({ KEYS_TO_EXCLUDE = [] } = {}) => {
     // If comparing functions, this may need some work. Not sure the
@@ -68,21 +68,13 @@ const useAsyncState = (initialState) => {
     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 };
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export { useIsomorphicLayoutEffect as a, invariant as i, mergeWithStableProps as m, useAsyncState as u };

package/dist/useIsomorphicLayoutEffect-65746ef3.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction, useEffect } from "react";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare function invariant(cond: any, message: string): asserts cond;
+// 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 const useIsomorphicLayoutEffect: typeof useEffect;
+export { useIsomorphicLayoutEffect as default, invariant, useAsyncState, mergeWithStableProps };

package/dist/{invariant-ae5a5bce.js → useIsomorphicLayoutEffect-65746ef3.js}

@@ -70,28 +70,16 @@ const useAsyncState = (initialState) => {
     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;
+// cc https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 exports.invariant = invariant;
 exports.mergeWithStableProps = mergeWithStableProps;
-exports.noHeadlessClientError = noHeadlessClientError;
-exports.noProviderError = noProviderError;
-exports.noSSRError = noSSRError;
-exports.providerMustBeUniqueError = providerMustBeUniqueError;
 exports.useAsyncState = useAsyncState;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stytch/react",
-  "version": "19.4.4",
+  "version": "19.5.0",
   "description": "Stytch's official React Library",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
@@ -32,11 +32,12 @@
     "user"
   ],
   "devDependencies": {
-    "@babel/runtime": "7.26.10",
+    "@babel/runtime": "7.27.0",
+    "@stytch/internal-react-shared": "0.0.0",
     "@stytch/internal-test-utils": "0.0.0",
     "@stytch/internal-tsconfigs": "0.0.0",
     "@stytch/js-utils": "0.0.1",
-    "@stytch/vanilla-js": "5.22.3",
+    "@stytch/vanilla-js": "5.22.7",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.14",
     "eslint-config-custom": "0.0.1",

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

@@ -1,27 +0,0 @@
-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.d.ts

@@ -1,27 +0,0 @@
-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 };