Skip to content

Commit 7e0ced3

Browse files
wobsorianowobsoriano
authored
chore(astro,clerk-react,shared,nextjs): Migrate functions that can be reused across JavaScript SDKs (clerk#3849)
1 parent def3a38 commit 7e0ced3

23 files changed

Lines changed: 370 additions & 110 deletions

‎.changeset/nasty-baboons-cheer.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@clerk/astro": patch
3+
"@clerk/shared": patch
4+
"@clerk/clerk-react": patch
5+
"@clerk/nextjs": patch
6+
---
7+
8+
Introduce functions that can be reused across front-end SDKs

‎packages/astro/src/internal/create-clerk-instance.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
import { loadClerkJsScript, setClerkJsLoadingErrorPackageName } from '@clerk/shared/loadClerkJsScript';
12
import type { ClerkOptions } from '@clerk/types';
23

34
import { $clerk, $csrState } from '../stores/internal';
4-
import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
5+
import type { AstroClerkCreateInstanceParams, AstroClerkUpdateOptions } from '../types';
56
import { invokeClerkAstroJSFunctions } from './invoke-clerk-astro-js-functions';
67
import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
78
import { runOnce } from './run-once';
8-
import { waitForClerkScript } from './utils/loadClerkJSScript';
99

1010
let initOptions: ClerkOptions | undefined;
1111

1212
// TODO-SHARED: copied from `clerk-js`
1313
export const CLERK_BEFORE_UNLOAD_EVENT = 'clerk:beforeunload';
1414

15+
setClerkJsLoadingErrorPackageName(PACKAGE_NAME);
16+
1517
function windowNavigate(to: URL | string): void {
1618
const toURL = new URL(to, window.location.href);
1719
window.dispatchEvent(new CustomEvent(CLERK_BEFORE_UNLOAD_EVENT));
@@ -35,10 +37,10 @@ function createNavigationHandler(
3537
*/
3638
const createClerkInstance = runOnce(createClerkInstanceInternal);
3739

38-
async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
40+
async function createClerkInstanceInternal(options?: AstroClerkCreateInstanceParams) {
3941
let clerkJSInstance = window.Clerk;
4042
if (!clerkJSInstance) {
41-
await waitForClerkScript();
43+
await loadClerkJsScript(options);
4244

4345
if (!window.Clerk) {
4446
throw new Error('Failed to download latest ClerkJS. Contact support@clerk.com.');
@@ -47,7 +49,6 @@ async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams
4749
}
4850

4951
if (!$clerk.get()) {
50-
// @ts-ignore
5152
$clerk.set(clerkJSInstance);
5253
}
5354

@@ -57,8 +58,7 @@ async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams
5758
routerReplace: createNavigationHandler(window.history.replaceState.bind(window.history)),
5859
};
5960

60-
// TODO: Update Clerk type from @clerk/types to include this method
61-
return (clerkJSInstance as any)
61+
return clerkJSInstance
6262
.load(initOptions)
6363
.then(() => {
6464
$csrState.setKey('isLoaded', true);

‎packages/astro/src/internal/utils/loadClerkJSScript.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎packages/astro/src/internal/utils/versionSelector.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/astro/src/server/build-clerk-hotload-script.ts‎

Lines changed: 5 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,8 @@
1-
import { createDevOrStagingUrlCache, parsePublishableKey } from '@clerk/shared/keys';
2-
import { isValidProxyUrl, proxyUrlToAbsoluteURL } from '@clerk/shared/proxy';
3-
import { addClerkPrefix } from '@clerk/shared/url';
1+
import { clerkJsScriptUrl } from '@clerk/shared/loadClerkJsScript';
42
import type { APIContext } from 'astro';
53

6-
import { versionSelector } from '../internal/utils/versionSelector';
74
import { getSafeEnv } from './get-safe-env';
85

9-
const { isDevOrStagingUrl } = createDevOrStagingUrlCache();
10-
11-
type BuildClerkJsScriptOptions = {
12-
proxyUrl: string;
13-
domain: string;
14-
clerkJSUrl?: string;
15-
clerkJSVariant?: 'headless' | '';
16-
clerkJSVersion?: string;
17-
publishableKey: string;
18-
};
19-
20-
const clerkJsScriptUrl = (opts: BuildClerkJsScriptOptions) => {
21-
const { clerkJSUrl, clerkJSVariant, clerkJSVersion, proxyUrl, domain, publishableKey } = opts;
22-
23-
if (clerkJSUrl) {
24-
return clerkJSUrl;
25-
}
26-
27-
let scriptHost = '';
28-
if (!!proxyUrl && isValidProxyUrl(proxyUrl)) {
29-
scriptHost = proxyUrlToAbsoluteURL(proxyUrl).replace(/http(s)?:\/\//, '');
30-
} else if (domain && !isDevOrStagingUrl(parsePublishableKey(publishableKey)?.frontendApi || '')) {
31-
scriptHost = addClerkPrefix(domain);
32-
} else {
33-
scriptHost = parsePublishableKey(publishableKey)?.frontendApi || '';
34-
}
35-
36-
const variant = clerkJSVariant ? `${clerkJSVariant.replace(/\.+$/, '')}.` : '';
37-
const version = versionSelector(clerkJSVersion);
38-
return `https://${scriptHost}/npm/@clerk/clerk-js@${version}/dist/clerk.${variant}browser.js`;
39-
};
40-
416
function buildClerkHotloadScript(locals: APIContext['locals']) {
427
const publishableKey = getSafeEnv(locals).pk!;
438
const proxyUrl = getSafeEnv(locals).proxyUrl!;
@@ -51,10 +16,10 @@ function buildClerkHotloadScript(locals: APIContext['locals']) {
5116
publishableKey,
5217
});
5318
return `
54-
<script src="${scriptSrc}"
55-
data-clerk-script
56-
async
57-
crossOrigin='anonymous'
19+
<script src="${scriptSrc}"
20+
data-clerk-js-script
21+
async
22+
crossOrigin='anonymous'
5823
${publishableKey ? `data-clerk-publishable-key="${publishableKey}"` : ``}
5924
${proxyUrl ? `data-clerk-proxy-url="${proxyUrl}"` : ``}
6025
${domain ? `data-clerk-domain="${domain}"` : ``}

‎packages/astro/src/stores/external.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import { deriveState } from '@clerk/shared/deriveState';
12
import { eventMethodCalled } from '@clerk/shared/telemetry';
23
import { computed, onMount, type Store } from 'nanostores';
34

45
import { $clerk, $csrState, $initialState } from './internal';
5-
import { deriveState } from './utils';
66

77
/**
88
* A client side store that is prepopulated with the authentication context during SSR.

‎packages/nextjs/src/pages/ClerkProvider.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ClerkProvider as ReactClerkProvider } from '@clerk/clerk-react';
22
// Override Clerk React error thrower to show that errors come from @clerk/nextjs
3-
import { setErrorThrowerOptions } from '@clerk/clerk-react/internal';
3+
import { setClerkJsLoadingErrorPackageName, setErrorThrowerOptions } from '@clerk/clerk-react/internal';
44
import { useRouter } from 'next/router';
55
import React from 'react';
66

@@ -12,6 +12,7 @@ import { invalidateNextRouterCache } from '../utils/invalidateNextRouterCache';
1212
import { mergeNextClerkPropsWithEnv } from '../utils/mergeNextClerkPropsWithEnv';
1313

1414
setErrorThrowerOptions({ packageName: PACKAGE_NAME });
15+
setClerkJsLoadingErrorPackageName(PACKAGE_NAME);
1516

1617
export function ClerkProvider({ children, ...props }: NextClerkProviderProps): JSX.Element {
1718
const { __unstable_invokeMiddlewareOnAuthStateChange = true } = props;

‎packages/react/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import './polyfills';
22

3+
import { setClerkJsLoadingErrorPackageName } from '@clerk/shared/loadClerkJsScript';
4+
35
import { setErrorThrowerOptions } from './errors/errorThrower';
46

57
export * from './components';
@@ -10,3 +12,4 @@ export { useEmailLink } from './hooks/useEmailLink';
1012
export type { BrowserClerk, ClerkProp, HeadlessBrowserClerk, ClerkProviderProps } from './types';
1113

1214
setErrorThrowerOptions({ packageName: PACKAGE_NAME });
15+
setClerkJsLoadingErrorPackageName(PACKAGE_NAME);

‎packages/react/src/internal.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,8 @@ export { setErrorThrowerOptions } from './errors/errorThrower';
22
export { MultisessionAppSupport } from './components/controlComponents';
33
export { useRoutingProps } from './hooks/useRoutingProps';
44

5-
export { clerkJsScriptUrl, buildClerkJsScriptAttributes } from './utils/loadClerkJsScript';
5+
export {
6+
clerkJsScriptUrl,
7+
buildClerkJsScriptAttributes,
8+
setClerkJsLoadingErrorPackageName,
9+
} from '@clerk/shared/loadClerkJsScript';

‎packages/react/src/isomorphicClerk.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { inBrowser } from '@clerk/shared/browser';
22
import { handleValueOrFn } from '@clerk/shared/handleValueOrFn';
3+
import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
34
import type { TelemetryCollector } from '@clerk/shared/telemetry';
45
import type {
56
ActiveSessionResource,
@@ -49,7 +50,7 @@ import type {
4950
HeadlessBrowserClerkConstructor,
5051
IsomorphicClerkOptions,
5152
} from './types';
52-
import { isConstructor, loadClerkJsScript } from './utils';
53+
import { isConstructor } from './utils';
5354

5455
const SDK_METADATA = {
5556
name: PACKAGE_NAME,

0 commit comments

Comments
 (0)