chore(astro,shared): Move functions that can be reused by different SDKs #3681

LekoArts · 2024-07-11T07:18:49Z

We'll need to remove this, I'll explain it in https://github.com/clerk/javascript/pull/3681/files#r1672868119

LekoArts · 2024-07-11T07:20:08Z

The as any is a code smell, ideally the options has the correct type, could be a footgun in the future

LekoArts · 2024-07-11T07:21:36Z

Nit: Use block comments (https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments-1) because then it's more concise

wobsoriano · 2024-07-10T23:10:53Z

We are no longer attaching the hotload script to the Response since we're using the loadClerkJsScript shared function in client instead.

If for some reason the current implementation is performant than this one, we can adjust to 3-4 commits back where I only used the script builders to clean up some repeating logic but still build the hotload script on the server

We definitely prefer the current implementation because it will result in faster loading times.

You can still use loadClerkJsScript in the client but we will expect to read the existing script.

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    ---
+    "@clerk/astro": patch
+    "@clerk/shared": patch
+    ---
+    Introduce functions that can be reused across front-end SDKs

-Original file line number
+Diff line change
@@ Expand Up @@
       let clerkJSInstance = window.Clerk as unknown as Clerk;
       if (!clerkJSInstance) {
         clerkJSInstance = new Clerk(options!.publishableKey);
-        // @ts-ignore
         $clerk.set(clerkJSInstance);
-        // @ts-ignore
         window.Clerk = clerkJSInstance;
       }
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,11 +1,14 @@
-    import { waitForClerkScript } from '../internal/utils/loadClerkJSScript';
+    import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
     import { $clerk, $csrState } from '../stores/internal';
     import type { AstroClerkIntegrationParams, AstroClerkUpdateOptions } from '../types';
     import { mountAllClerkAstroJSComponents } from './mount-clerk-astro-js-components';
     import { runOnce } from './run-once';
     let initOptions: AstroClerkIntegrationParams | undefined;
+    const HARDCODED_LATEST_CLERK_JS_VERSION = '5';
     /**
      * Prevents firing clerk.load multiple times
      */
@@ Expand All @@
     export async function createClerkInstanceInternal(options?: AstroClerkIntegrationParams) {
       let clerkJSInstance = window.Clerk;
       if (!clerkJSInstance) {
-        await waitForClerkScript();
+        await loadClerkJsScript({
+          clerkJSVersion: HARDCODED_LATEST_CLERK_JS_VERSION,
+          ...(options as any),
+        });
         if (!window.Clerk) {
           throw new Error('Failed to download latest ClerkJS. Contact [email protected].');
@@ Expand All @@
       }
       if (!$clerk.get()) {
-        // @ts-ignore
         $clerk.set(clerkJSInstance);
       }
       initOptions = options;
-      // TODO: Update Clerk type from @clerk/types to include this method
-      return (clerkJSInstance as any)
+      return clerkJSInstance
         .load(options)
         .then(() => {
           $csrState.setKey('isLoaded', true);
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up @@
         ...rest
       } = params || {};
+      // We have an eslint config that requires us to declare env variables in the turbo.json file.
+      // We're skipping/disabling it below as we use it only for the Astro integration.
       return {
-        signInUrl: paramSignIn || import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_IN_URL,
-        signUpUrl: paramSignUp || import.meta.env.PUBLIC_ASTRO_APP_CLERK_SIGN_UP_URL,
-        isSatellite: paramSatellite || import.meta.env.PUBLIC_ASTRO_APP_CLERK_IS_SATELLITE,
-        proxyUrl: paramProxy || import.meta.env.PUBLIC_ASTRO_APP_CLERK_PROXY_URL,
-        domain: paramDomain || import.meta.env.PUBLIC_ASTRO_APP_CLERK_DOMAIN,
-        publishableKey: paramPublishableKey || import.meta.env.PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY || '',
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        signInUrl: paramSignIn || import.meta.env.PUBLIC_CLERK_SIGN_IN_URL,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        signUpUrl: paramSignUp || import.meta.env.PUBLIC_CLERK_SIGN_UP_URL,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        isSatellite: paramSatellite || import.meta.env.PUBLIC_CLERK_IS_SATELLITE,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        proxyUrl: paramProxy || import.meta.env.PUBLIC_CLERK_PROXY_URL,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        domain: paramDomain || import.meta.env.PUBLIC_CLERK_DOMAIN,
+        // eslint-disable-next-line turbo/no-undeclared-env-vars
+        publishableKey: paramPublishableKey || import.meta.env.PUBLIC_CLERK_PUBLISHABLE_KEY || '',
         ...rest,
       };
     };
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ import type { APIContext } from 'astro'; @@
     // @ts-ignore
     import { authAsyncStorage } from '#async-local-storage';
-    import { buildClerkHotloadScript } from './build-clerk-hotload-script';
     import { clerkClient } from './clerk-client';
     import { createCurrentUser } from './current-user';
     import { getAuth } from './get-auth';
@@ Expand Down Expand Up / @@ -263,7 +262,6 @@ async function decorateRequest( @@
         const clerkSafeEnvVariables = encoder.encode(
           `<script id="__CLERK_ASTRO_SAFE_VARS__" type="application/json">${JSON.stringify(getClientSafeEnv(locals))}</script>\n`,
         );
-        const hotloadScript = encoder.encode(buildClerkHotloadScript(locals));
         const stream = res.body!.pipeThrough(
           new TransformStream({
@@ Expand All / @@ -279,10 +277,6 @@ async function decorateRequest( @@
                 controller.enqueue(clerkAstroData);
                 controller.enqueue(clerkSafeEnvVariables);
-                if (__HOTLOAD__) {
-                  controller.enqueue(hotloadScript);
-                }
                 controller.enqueue(closingHeadTag);
                 controller.enqueue(chunk.slice(index + closingHeadTag.length));
               } else {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(astro,shared): Move functions that can be reused by different SDKs #3681

Uh oh!

Diff view

Diff view

There are no files selected for viewing

LekoArts Jul 11, 2024

Uh oh!

LekoArts Jul 11, 2024

Uh oh!

Uh oh!

LekoArts Jul 11, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wobsoriano Jul 10, 2024 •

edited

Loading

Uh oh!

panteliselef Jul 11, 2024

Uh oh!

panteliselef Jul 11, 2024

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -1,8 +1,8 @@
+    import { deriveState } from '@clerk/shared/deriveState';
     import { eventMethodCalled } from '@clerk/shared/telemetry';
     import { computed, onMount, type Store } from 'nanostores';
     import { $clerk, $csrState, $initialState } from './internal';
-    import { deriveState } from './utils';
     /**
      * A client side store that is prepopulated with the authentication context during SSR.
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,5 +2,6 @@ export {}; @@
     declare global {
       const PACKAGE_VERSION: string;
+      const JS_PACKAGE_VERSION: string;
       const __DEV__: boolean;
     }

-Original file line number
+Diff line change
@@ -1,4 +1,5 @@
     const { name } = require('./package.json');
+    const { version: clerkJsVersion } = require('../clerk-js/package.json');
     /** @type {import('ts-jest').JestConfigWithTsJest} */
     const config = {
@@ Expand All / @@ -17,6 +18,10 @@ const config = { @@
       transform: {
         '^.+\\.m?tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json', diagnostics: false }],
       },
+      globals: {
+        JS_PACKAGE_VERSION: clerkJsVersion,
+      },
     };
     module.exports = config;

-Original file line number
+Diff line change
@@ Expand Up / @@ -51,19 +51,22 @@ @@
         "cookie",
         "date",
         "deprecated",
+        "deriveState",
         "error",
         "file",
         "globs",
         "handleValueOrFn",
         "isomorphicAtob",
         "isomorphicBtoa",
         "keys",
+        "loadClerkJsScript",
         "loadScript",
         "localStorageBroadcastChannel",
         "poller",
         "proxy",
         "underscore",
         "url",
+        "versionSelector",
         "react",
         "constants",
         "apiUrlFromPublishableKey",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    import type { InitialState, Resources } from '@clerk/types';
+    import { deriveState } from '../deriveState';
+    describe('deriveState', () => {
+      const mockInitialState = {
+        userId: 'user_2U330vGHg3llBga8Oi0fzzeNAaG',
+        sessionId: 'sess_2j1R7g3AUeKMx9M23dBO0XLEQGY',
+        orgId: 'org_2U330vGHg3llBga8Oi0fzzeNAaG',
+      } as InitialState;
+      const mockResources = {
+        client: {},
+        user: { id: mockInitialState.userId },
+        session: { id: mockInitialState.sessionId },
+        organization: { id: mockInitialState.orgId },
+      } as Resources;
+      it('uses SSR state when !clerkLoaded and initialState is provided', () => {
+        expect(deriveState(false, {} as Resources, mockInitialState)).toEqual(mockInitialState);
+      });
+      it('uses CSR state when clerkLoaded', () => {
+        const result = deriveState(true, mockResources, undefined);
+        expect(result.userId).toBe(mockInitialState.userId);
+        expect(result.sessionId).toBe(mockInitialState.sessionId);
+        expect(result.orgId).toBe(mockInitialState.orgId);
+      });
+      it('handles !clerkLoaded and undefined initialState', () => {
+        const result = deriveState(false, {} as Resources, undefined);
+        expect(result.userId).toBeUndefined();
+        expect(result.sessionId).toBeUndefined();
+        expect(result.orgId).toBeUndefined();
+      });
+    });

chore(astro,shared): Move functions that can be reused by different SDKs #3681

Uh oh!

chore(astro,shared): Move functions that can be reused by different SDKs #3681

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

LekoArts Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

LekoArts Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LekoArts Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wobsoriano Jul 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

panteliselef Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Jul 11, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

wobsoriano Jul 10, 2024 •

edited

Loading