diff --git a/package-lock.json b/package-lock.json index 865501923bb..14c0b6323be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34892,11 +34892,11 @@ }, "packages/expo": { "name": "@clerk/clerk-expo", - "version": "0.9.18", + "version": "0.9.19-staging.0", "license": "MIT", "dependencies": { "@clerk/clerk-js": "^3.10.0", - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "base-64": "^1.0.0" }, "devDependencies": { @@ -34958,6 +34958,21 @@ "tslib": "^2.3.1" } }, + "packages/gatsby-plugin-clerk/node_modules/@clerk/clerk-react": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-3.2.11.tgz", + "integrity": "sha512-rtTUagchK0029yz7hU5GVNcuihX5N3Wo4KIVg7W6DtS+zJC1Jr6CePGf7EARCLJAZsrkL8SaGJ+uisA1pfsPGw==", + "dependencies": { + "@clerk/types": "^2.8.0", + "tslib": "^2.3.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16" + } + }, "packages/gatsby-plugin-clerk/node_modules/@clerk/clerk-sdk-node": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-3.3.5.tgz", @@ -35045,10 +35060,10 @@ }, "packages/nextjs": { "name": "@clerk/nextjs", - "version": "3.5.1", + "version": "3.5.2-staging.0", "license": "MIT", "dependencies": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/edge": "^1.3.8", "@clerk/types": "^2.9.0", @@ -35081,7 +35096,7 @@ }, "packages/react": { "name": "@clerk/clerk-react", - "version": "3.2.12", + "version": "3.2.13-staging.0", "license": "MIT", "dependencies": { "@clerk/types": "^2.9.0", @@ -35121,10 +35136,10 @@ }, "packages/remix": { "name": "@clerk/remix", - "version": "0.3.16", + "version": "0.3.17-staging.0", "license": "MIT", "dependencies": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/types": "^2.9.0", "cookie": "^0.5.0", @@ -36580,7 +36595,7 @@ "version": "file:packages/expo", "requires": { "@clerk/clerk-js": "^3.10.0", - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/types": "^2.9.0", "@types/jest": "^27.4.0", "@types/node": "^16.11.9", @@ -36807,7 +36822,7 @@ "@clerk/nextjs": { "version": "file:packages/nextjs", "requires": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/edge": "^1.3.8", "@clerk/types": "^2.9.0", @@ -36835,7 +36850,7 @@ "@clerk/remix": { "version": "file:packages/remix", "requires": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/types": "^2.9.0", "@types/cookie": "^0.5.0", @@ -49666,6 +49681,15 @@ "tslib": "^2.3.1" } }, + "@clerk/clerk-react": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-3.2.11.tgz", + "integrity": "sha512-rtTUagchK0029yz7hU5GVNcuihX5N3Wo4KIVg7W6DtS+zJC1Jr6CePGf7EARCLJAZsrkL8SaGJ+uisA1pfsPGw==", + "requires": { + "@clerk/types": "^2.8.0", + "tslib": "^2.3.1" + } + }, "@clerk/clerk-sdk-node": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/@clerk/clerk-sdk-node/-/clerk-sdk-node-3.3.5.tgz", diff --git a/packages/expo/CHANGELOG.md b/packages/expo/CHANGELOG.md index debb00add12..e9778daf699 100644 --- a/packages/expo/CHANGELOG.md +++ b/packages/expo/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.9.19-staging.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.18...@clerk/clerk-expo@0.9.19-staging.0) (2022-05-05) + +**Note:** Version bump only for package @clerk/clerk-expo + ### [0.9.18](https://github.com/clerkinc/javascript/compare/@clerk/clerk-expo@0.9.18-staging.0...@clerk/clerk-expo@0.9.18) (2022-05-05) **Note:** Version bump only for package @clerk/clerk-expo diff --git a/packages/expo/package.json b/packages/expo/package.json index ba085561389..eb51388fd5b 100644 --- a/packages/expo/package.json +++ b/packages/expo/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-expo", - "version": "0.9.18", + "version": "0.9.19-staging.0", "license": "MIT", "description": "Clerk.dev React Native/Expo library", "keywords": [ @@ -27,7 +27,7 @@ }, "dependencies": { "@clerk/clerk-js": "^3.10.0", - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "base-64": "^1.0.0" }, "devDependencies": { diff --git a/packages/nextjs/CHANGELOG.md b/packages/nextjs/CHANGELOG.md index c513bd7463e..29c98f359ef 100644 --- a/packages/nextjs/CHANGELOG.md +++ b/packages/nextjs/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [3.5.2-staging.0](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@3.5.1...@clerk/nextjs@3.5.2-staging.0) (2022-05-05) + +**Note:** Version bump only for package @clerk/nextjs + ### [3.5.1](https://github.com/clerkinc/javascript/compare/@clerk/nextjs@3.5.1-staging.0...@clerk/nextjs@3.5.1) (2022-05-05) **Note:** Version bump only for package @clerk/nextjs diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index dcd5d8020d1..f368fd1ae6d 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/nextjs", - "version": "3.5.1", + "version": "3.5.2-staging.0", "license": "MIT", "description": "Clerk.dev SDK for NextJS", "keywords": [ @@ -32,7 +32,7 @@ "dev": "tsc -p tsconfig.build.json --watch" }, "dependencies": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/edge": "^1.3.8", "@clerk/types": "^2.9.0", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index fc020ca4dff..fae8625f84c 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [3.2.13-staging.0](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@3.2.12...@clerk/clerk-react@3.2.13-staging.0) (2022-05-05) + +### Bug Fixes + +- **clerk-react:** Make getOrCreateInstance handle both SSR and CSR instantiation ([8f9481c](https://github.com/clerkinc/javascript/commit/8f9481cf088c63b3cd3192cb1396596a98b11980)) +- **clerk-react:** Make isomorphicClerk loading idempotent ([221919c](https://github.com/clerkinc/javascript/commit/221919ceab5ad1631073f8ba7564c869ebf7a890)) +- **clerk-react:** Pass initialState directly to ClerkContextProvider ([cb777d4](https://github.com/clerkinc/javascript/commit/cb777d4651710fda248036fdc5398e0dac7aa337)) + ### [3.2.12](https://github.com/clerkinc/javascript/compare/@clerk/clerk-react@3.2.12-staging.0...@clerk/clerk-react@3.2.12) (2022-05-05) **Note:** Version bump only for package @clerk/clerk-react diff --git a/packages/react/package.json b/packages/react/package.json index 23d0b9ef577..63747db1e0e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/clerk-react", - "version": "3.2.12", + "version": "3.2.13-staging.0", "license": "MIT", "description": "Clerk.dev React library", "keywords": [ diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx index 3e42636d9ed..02d766e5f5b 100644 --- a/packages/react/src/contexts/ClerkContextProvider.tsx +++ b/packages/react/src/contexts/ClerkContextProvider.tsx @@ -1,29 +1,25 @@ import { ActiveSessionResource, ClientResource, InitialState, Resources, UserResource } from '@clerk/types'; import React from 'react'; -import IsomorphicClerk from '../isomorphicClerk'; +import IsomorphicClerk, { NewIsomorphicClerkParams } from '../isomorphicClerk'; import { AuthContext } from './AuthContext'; import { ClientContext } from './ClientContext'; import { IsomorphicClerkContext } from './IsomorphicClerkContext'; import { SessionContext } from './SessionContext'; import { UserContext } from './UserContext'; -type ClerkContextWrapperProps = { - isomorphicClerk: IsomorphicClerk; +type ClerkContextProvider = { + isomorphicClerkOptions: NewIsomorphicClerkParams; + initialState: InitialState | undefined; children: React.ReactNode; - clerkLoaded: boolean; }; type ClerkContextProviderState = Resources; -export function ClerkContextProvider({ - isomorphicClerk, - children, - clerkLoaded, -}: ClerkContextWrapperProps): JSX.Element | null { - const clerk = isomorphicClerk; +export function ClerkContextProvider(props: ClerkContextProvider): JSX.Element | null { + const { isomorphicClerkOptions, initialState, children } = props; + const { isomorphicClerk: clerk, loaded: clerkLoaded } = useLoadedIsomorphicClerk(isomorphicClerkOptions); - const initialState = clerk.initialState; const [state, setState] = React.useState({ client: clerk.client as ClientResource, session: clerk.session, @@ -65,6 +61,17 @@ export function ClerkContextProvider({ ); } +const useLoadedIsomorphicClerk = (options: NewIsomorphicClerkParams) => { + const [loaded, setLoaded] = React.useState(false); + const isomorphicClerk = React.useMemo(() => IsomorphicClerk.getOrCreateInstance(options), []); + + React.useEffect(() => { + isomorphicClerk.addOnLoaded(() => setLoaded(true)); + }, []); + + return { isomorphicClerk, loaded }; +}; + // This should be provided from isomorphicClerk // TODO: move inside isomorphicClerk function deriveState( diff --git a/packages/react/src/contexts/ClerkProvider.tsx b/packages/react/src/contexts/ClerkProvider.tsx index d85b5ec1ddd..bb78782d808 100644 --- a/packages/react/src/contexts/ClerkProvider.tsx +++ b/packages/react/src/contexts/ClerkProvider.tsx @@ -1,8 +1,7 @@ import { InitialState } from '@clerk/types'; -import React, { useEffect, useMemo, useState } from 'react'; +import React from 'react'; import { multipleClerkProvidersError } from '../errors'; -import IsomorphicClerk from '../isomorphicClerk'; import type { IsomorphicClerkOptions } from '../types'; import { withMaxAllowedInstancesGuard } from '../utils'; import { ClerkContextProvider } from './ClerkContextProvider'; @@ -15,24 +14,15 @@ export interface ClerkProviderProps extends IsomorphicClerkOptions { } function ClerkProviderBase(props: ClerkProviderProps): JSX.Element { - const [clerkLoaded, setClerkLoaded] = useState(false); - - const clerk = useMemo(() => { - const { frontendApi = '', Clerk: ClerkConstructor, initialState, ...options } = props; - return IsomorphicClerk.getOrCreateInstance({ frontendApi, options, Clerk: ClerkConstructor, initialState }); - }, []); - - useEffect(() => { - void clerk.loadClerkJS().then(() => setClerkLoaded(true)); - }, []); + const { initialState, children, Clerk, frontendApi, ...options } = props; return ( - {props.children} + {children} ); diff --git a/packages/react/src/info.ts b/packages/react/src/info.ts index 358fb5bbddb..7a3ec7960bf 100644 --- a/packages/react/src/info.ts +++ b/packages/react/src/info.ts @@ -1,3 +1,3 @@ /** DO NOT EDIT: This file is automatically generated by ../scripts/info.js */ -export const LIB_VERSION = '3.2.12'; +export const LIB_VERSION = '3.2.13-staging.0'; export const LIB_NAME = '@clerk/clerk-react'; diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts index 17ec79d976c..516ba6cc5d2 100644 --- a/packages/react/src/isomorphicClerk.ts +++ b/packages/react/src/isomorphicClerk.ts @@ -5,7 +5,6 @@ import type { CreateOrganizationParams, HandleMagicLinkVerificationParams, HandleOAuthCallbackParams, - InitialState, OrganizationMembershipResource, OrganizationResource, RedirectOptions, @@ -35,15 +34,14 @@ type MethodName = { }[keyof T]; type MethodCallback = () => void; -type NewIsomorphicClerkParams = { +export type NewIsomorphicClerkParams = { frontendApi: string; options: IsomorphicClerkOptions; Clerk: ClerkProp | null; - initialState?: InitialState; }; export default class IsomorphicClerk { - private mode: string; + private mode: 'browser' | 'server'; private frontendApi: string; private options: IsomorphicClerkOptions; private Clerk: ClerkProp; @@ -59,8 +57,6 @@ export default class IsomorphicClerk { #loaded = false; - initialState: InitialState | undefined; - get loaded(): boolean { return this.#loaded; } @@ -68,27 +64,26 @@ export default class IsomorphicClerk { static #instance: IsomorphicClerk; static getOrCreateInstance(params: NewIsomorphicClerkParams) { - if (!this.#instance) { + // During SSR: a new instance should be created for every request + // During CSR: use the cached instance for the whole lifetime of the app + // This method should be idempotent in both scenarios + if (!inClientSide() || !this.#instance) { this.#instance = new IsomorphicClerk(params); } return this.#instance; } constructor(params: NewIsomorphicClerkParams) { - if (IsomorphicClerk.#instance) { - throw new Error('An IsomorphicClerk instance already exists. Use IsomorphicClerk.getOrCreateInstance instead'); - } - - const { Clerk = null, frontendApi, initialState, options = {} } = params || {}; + const { Clerk = null, frontendApi, options = {} } = params || {}; this.frontendApi = frontendApi; this.options = options; this.Clerk = Clerk; - this.initialState = initialState; this.mode = inClientSide() ? 'browser' : 'server'; + void this.loadClerkJS(); } async loadClerkJS(): Promise { - if (this.#loaded) { + if (this.mode !== 'browser' || this.#loaded) { return; } diff --git a/packages/remix/CHANGELOG.md b/packages/remix/CHANGELOG.md index 4bf92980237..9b0582c7d95 100644 --- a/packages/remix/CHANGELOG.md +++ b/packages/remix/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +### [0.3.17-staging.0](https://github.com/clerkinc/javascript/compare/@clerk/remix@0.3.16...@clerk/remix@0.3.17-staging.0) (2022-05-05) + +**Note:** Version bump only for package @clerk/remix + ### [0.3.16](https://github.com/clerkinc/javascript/compare/@clerk/remix@0.3.16-staging.0...@clerk/remix@0.3.16) (2022-05-05) **Note:** Version bump only for package @clerk/remix diff --git a/packages/remix/package.json b/packages/remix/package.json index bc27a427567..8bf490418e5 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -1,6 +1,6 @@ { "name": "@clerk/remix", - "version": "0.3.16", + "version": "0.3.17-staging.0", "license": "MIT", "description": "Clerk.dev SDK for Remix", "keywords": [ @@ -32,7 +32,7 @@ "dev": "tsc -p tsconfig.build.json --watch" }, "dependencies": { - "@clerk/clerk-react": "^3.2.12", + "@clerk/clerk-react": "^3.2.13-staging.0", "@clerk/clerk-sdk-node": "^3.3.11", "@clerk/types": "^2.9.0", "cookie": "^0.5.0",