@stytch/nextjs 11.0.0 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @stytch/nextjs
 
+## 12.0.0
+
+### Major Changes
+
+- 5dd9d24: Change export of B2B Headless Client to seperate subpackage to improve tree-shaking performance
+
+  Two public export locations have changed:
+
+  ```javascript
+  import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b';
+  ```
+
+  Is now updated to
+
+  ```javascript
+  import { createStytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';
+  ```
+
+  ```javascript
+  import { createStytchB2BUIClient } from '@stytch/nextjs/b2b';
+  ```
+
+  Is now updated to
+
+  ```javascript
+  import { createStytchB2BUIClient } from '@stytch/vanilla-js/b2b/ui';
+  ```
+
+### Patch Changes
+
+- Updated dependencies [5dd9d24]
+  - @stytch/vanilla-js@3.0.0
+
 ## 11.0.0
 
 ### Patch Changes

package/README.md

@@ -9,6 +9,22 @@ With `npm`
 
 ## Documentation
 
+This package contains several entrypoints, depending on if you are using the B2B or B2C stytch product.
+
+```javascript
+// Stytch B2C Product
+import { StytchProvider } from '@stytch/nextjs';
+import { createStytchUIClient } from '@stytch/nextjs/ui';
+// The headless client does not bundle UI elements, and is a much smaller package
+import { createStytchHeadlessClient } from '@stytch/nextjs/headless';
+
+// Stytch B2B Product
+import { StytchB2B } from '@stytch/nextjs/b2b';
+import { createStytchB2BUIClient } from '@stytch/nextjs/b2b/ui';
+// The headless client does not bundle UI elements, and is a much smaller package
+import { createStytchB2BHeadlessClient } from '@stytch/nextjs/b2b/headless';
+```
+
 For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.
 
 ## Example Usage

package/b2b/headless/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/b2b/index.headless.js",
+  "module": "../../dist/b2b/index.headless.esm.js",
+  "types": "../../dist/b2b/index.headless.d.ts"
+}

package/b2b/ui/package.json

@@ -0,0 +1,6 @@
+{
+  "internal": true,
+  "main": "../../dist/b2b/index.ui.js",
+  "module": "../../dist/b2b/index.ui.esm.js",
+  "types": "../../dist/b2b/index.ui.d.ts"
+}

package/dist/b2b/index.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
-import { StytchB2BUIClient as StytchB2BUIClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -205,34 +204,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-/**
- * Creates a Headless Stytch client object to call the stytch B2B APIs.
- * The Stytch client is not available serverside.
- * @example
- * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchHeadlessClient}
- */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-/**
- * 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 createStytchB2BHeadlessClient} to reduce your bundle size.
- * @example
- * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchB2BUIClient}
- */
-declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient, createStytchB2BUIClient };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B };
 export type { StytchB2BProviderProps };

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

@@ -1,10 +1,9 @@
 /// <reference types="react" />
 import React from "react";
 import { ReactNode } from "react";
-import { StytchB2BHeadlessClient, StytchB2BUIClient, Member, MemberSession } from "@stytch/vanilla-js/b2b/";
+import { Member, MemberSession, StytchB2BUIClient } from "@stytch/vanilla-js/b2b";
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
 import { Callbacks, StyleConfig, StytchB2BUIConfig } from "@stytch/vanilla-js";
-import { StytchB2BHeadlessClient as StytchB2BHeadlessClient$0 } from "@stytch/vanilla-js/b2b";
-import { StytchB2BUIClient as StytchB2BUIClient$0 } from "@stytch/vanilla-js/b2b";
 /**
  * The Stytch Client object passed in to <StytchProvider /> in your `_app.js`.
  * Either a StytchUIClient or StytchHeadlessClient.
@@ -205,34 +204,5 @@ interface StytchB2BProps {
  * @param props {@link StytchB2BProps}
  */
 declare const StytchB2B: ({ styles, callbacks, config }: StytchB2BProps) => React.JSX.Element;
-/**
- * Creates a Headless Stytch client object to call the stytch B2B APIs.
- * The Stytch client is not available serverside.
- * @example
- * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchHeadlessClient}
- */
-declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient$0;
-/**
- * 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 createStytchB2BHeadlessClient} to reduce your bundle size.
- * @example
- * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchB2BUIClient}
- */
-declare const createStytchB2BUIClient: (_PUBLIC_TOKEN: string, options?: import("@stytch/core/dist/public").StytchClientOptions | undefined) => StytchB2BUIClient$0;
-export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B, createStytchB2BHeadlessClient, createStytchB2BUIClient };
+export { StytchB2BProvider, useStytchB2BClient, useStytchMemberSession, useStytchMember, withStytchB2BClient, withStytchMemberSession, withStytchMember, StytchB2B };
 export type { StytchB2BProviderProps };

package/dist/b2b/index.esm.js

@@ -1,28 +1,9 @@
 import React, { useRef, useState, useEffect, useCallback, createContext, useContext, useMemo, useLayoutEffect } from 'react';
-import { StytchB2BHeadlessClient, StytchB2BUIClient } from '@stytch/vanilla-js/b2b';
 
 const noProviderError = (item, provider = 'StytchProvider') => `${item} can only be used inside <${provider}>.`;
 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 createStytchHeadlessClient from @stytch/nextjs/ui and not from @stytch/nextjs/headless.`;
-const cannotInvokeMethodOnServerError = (path) => `[Stytch] Invalid serverside function call to ${path}.
-The Stytch Javascript SDK is intended to ony be used on the client side.
-Make sure to wrap your API calls in a hook to ensure they are executed on the client.
-\`\`\`
-const myComponent = () => {
-  const stytch = useStytch();
-  // This will error out on the server.
-  stytch.magicLinks.authenticate(...);
-  useEffect(() => {
-    // This will work well
-    stytch.magicLinks.authenticate(...);
-  }, []);
-}
-\`\`\`
-
-If you want to make API calls from server environments, please use the Stytch Node Library
-https://www.npmjs.com/package/stytch.
-`;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function invariant(cond, message) {
@@ -52,23 +33,6 @@ const SSRStubKey = Symbol('__stytch_SSRStubKey');
 const isStytchSSRProxy = (proxy) => {
     return !!proxy[SSRStubKey];
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createProxy = (path) => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const noop = () => { };
-    return new Proxy(noop, {
-        get(target, p) {
-            if (p === SSRStubKey) {
-                return true;
-            }
-            return createProxy(path + '.' + String(p));
-        },
-        apply() {
-            throw new Error(cannotInvokeMethodOnServerError(path));
-        },
-    });
-};
-const createStytchSSRProxy = () => createProxy('stytch');
 
 const initialMember = {
     member: null,
@@ -268,45 +232,4 @@ const StytchB2B = ({ styles, callbacks, config }) => {
     return React.createElement("div", { ref: containerEl });
 };
 
-/**
- * Creates a Headless Stytch client object to call the stytch B2B APIs.
- * The Stytch client is not available serverside.
- * @example
- * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchHeadlessClient}
- */
-const createStytchB2BHeadlessClient = (...args) => {
-    if (typeof window === 'undefined') {
-        return createStytchSSRProxy();
-    }
-    return new StytchB2BHeadlessClient(...args);
-};
-
-/**
- * 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 createStytchB2BHeadlessClient} to reduce your bundle size.
- * @example
- * const stytch = createStytchB2BUIClient('public-token-<find yours in the stytch dashboard>')
- *
- * return (
- *   <StytchB2BProvider stytch={stytch}>
- *     <App />
- *   </StytchB2BProvider>
- * )
- * @returns A {@link StytchB2BUIClient}
- */
-const createStytchB2BUIClient = (...args) => {
-    if (typeof window === 'undefined') {
-        return createStytchSSRProxy();
-    }
-    return new StytchB2BUIClient(...args);
-};
-
-export { StytchB2B, StytchB2BProvider, createStytchB2BHeadlessClient, createStytchB2BUIClient, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };
+export { StytchB2B, StytchB2BProvider, useStytchB2BClient, useStytchMember, useStytchMemberSession, withStytchB2BClient, withStytchMember, withStytchMemberSession };

package/dist/b2b/index.headless.d.ts

@@ -0,0 +1,16 @@
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch B2B APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BHeadlessClient}
+ */
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+export { createStytchB2BHeadlessClient };

package/dist/b2b/index.headless.esm.d.ts

@@ -0,0 +1,16 @@
+import { StytchB2BHeadlessClient } from "@stytch/vanilla-js/b2b/headless";
+/**
+ * Creates a Headless Stytch client object to call the stytch B2B APIs.
+ * The Stytch client is not available serverside.
+ * @example
+ * const stytch = createStytchB2BHeadlessClient('public-token-<find yours in the stytch dashboard>')
+ *
+ * return (
+ *   <StytchB2BProvider stytch={stytch}>
+ *     <App />
+ *   </StytchB2BProvider>
+ * )
+ * @returns A {@link StytchB2BHeadlessClient}
+ */
+declare const createStytchB2BHeadlessClient: (_PUBLIC_TOKEN: string, options?: import("core/dist/public").StytchClientOptions | undefined) => StytchB2BHeadlessClient;
+export { createStytchB2BHeadlessClient };