chore(astro,clerk-react,shared,nextjs): Migrate functions that can be reused across JavaScript SDKs by wobsoriano · Pull Request #3849 · clerk/javascript

wobsoriano · 2024-07-31T00:21:43Z

Description

See previous PR here.

This PR aims to migrate ClerkJS script loader functions to the shared package so it can be reused across official and community SDKs.

New functions exported in @clerk/shared:

loadClerkJsScript - Hotloads the Clerk JS script.
deriveState - Renders initial auth state from SSR if available
versionSelector

Closes ECO-4

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-07-31T00:21:46Z

🦋 Changeset detected

Latest commit: 090f0e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 15 packages

Name	Type
@clerk/astro	Patch
@clerk/shared	Patch
@clerk/clerk-react	Patch
@clerk/nextjs	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/elements	Patch
@clerk/clerk-expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/shared/src/loadClerkJsScript.ts

+    scriptHost = parsePublishableKey(publishableKey)?.frontendApi || '';
+  }
+
+  const variant = clerkJSVariant ? `${clerkJSVariant.replace(/\.+$/, '')}.` : '';


packages/shared/src/loadClerkJsScript.ts

panteliselef

If this is not urgent, I can review early next week 😊

wobsoriano · 2024-08-02T14:47:51Z

If this is not urgent, I can review early next week 😊

Definitely not urgent, and thanks!

.changeset/nasty-baboons-cheer.md

packages/shared/src/loadClerkJsScript.ts

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

wobsoriano · 2024-08-05T14:47:46Z

I believe we can drop the usage of PACKAGE_VERSION from versionSelector of clerk-react because for that package PACKAGE_VERSION and JS_PACKAGE_VERSION majors always match

@panteliselef that'd be awesome if that's the case. So we can just set the default packageVersion to JS_PACKAGE_VERSION and completely remove __internal_packageVersion. Just wondering if there any drawbacks in doing this. Same question I asked in the previous PR.

cc @nikosdouvlis

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

LekoArts

Looks good! Some smaller requests

packages/shared/src/__tests__/loadClerkJsScript.test.ts

packages/shared/src/loadClerkJsScript.ts

wobsoriano · 2024-08-07T16:08:32Z

packages/shared/src/loadClerkJsScript.ts

+const errorThrower = buildErrorThrower({ packageName: '@clerk/shared' });
+
+/**
+ * Sets the package name for error messages during ClerkJS script loading.
+ *
+ * @example
+ * setClerkJsLoadingErrorPackage('@clerk/clerk-react');
+ */
+export function setClerkJsLoadingErrorPackageName(packageName: string) {
+  errorThrower.setPackageName({ packageName });
+}


This one is only used inside loadClerkJsScript. I named it like that and not export another setErrorThrowerOptions to avoid confusion. We might also need to add this to frontend SDK spec @LekoArts

I also thought of sharing this errorThrower across SDKs but that would mess with existing error throwers in next and react.

chore(shared): Add deriveState to published files chore(shared): Add deriveState to published files

test(astro): Test script loader version test(astro): Add main script loader test

…k js

…f clerk-js script attribute is undefined

…rkJS script loading fails

…ng script loader

packages/shared/src/loadClerkJsScript.ts

wobsoriano · 2024-08-08T17:16:07Z

!snapshot

clerk-cookie · 2024-08-08T17:20:54Z

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	1.0.11-snapshot.v090f0e7
@clerk/backend	1.6.2-snapshot.v090f0e7
@clerk/chrome-extension	1.1.13-snapshot.v090f0e7
@clerk/clerk-js	5.14.0-snapshot.v090f0e7
@clerk/elements	0.12.4-snapshot.v090f0e7
@clerk/clerk-expo	2.1.0-snapshot.v090f0e7
@clerk/express	0.0.27-snapshot.v090f0e7
@clerk/fastify	1.0.29-snapshot.v090f0e7
@clerk/localizations	2.5.7-snapshot.v090f0e7
@clerk/nextjs	5.3.0-snapshot.v090f0e7
@clerk/clerk-react	5.4.0-snapshot.v090f0e7
@clerk/remix	4.2.13-snapshot.v090f0e7
@clerk/clerk-sdk-node	5.0.26-snapshot.v090f0e7
@clerk/shared	2.5.0-snapshot.v090f0e7
@clerk/tanstack-start	0.2.0-snapshot.v090f0e7
@clerk/testing	1.2.9-snapshot.v090f0e7
@clerk/themes	2.1.19-snapshot.v090f0e7
@clerk/types	4.13.0-snapshot.v090f0e7

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/astro@1.0.11-snapshot.v090f0e7 --save-exact

@clerk/backend

npm i @clerk/backend@1.6.2-snapshot.v090f0e7 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.13-snapshot.v090f0e7 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.14.0-snapshot.v090f0e7 --save-exact

@clerk/elements

npm i @clerk/elements@0.12.4-snapshot.v090f0e7 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.1.0-snapshot.v090f0e7 --save-exact

@clerk/express

npm i @clerk/express@0.0.27-snapshot.v090f0e7 --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.29-snapshot.v090f0e7 --save-exact

@clerk/localizations

npm i @clerk/localizations@2.5.7-snapshot.v090f0e7 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.3.0-snapshot.v090f0e7 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.4.0-snapshot.v090f0e7 --save-exact

@clerk/remix

npm i @clerk/remix@4.2.13-snapshot.v090f0e7 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.26-snapshot.v090f0e7 --save-exact

@clerk/shared

npm i @clerk/shared@2.5.0-snapshot.v090f0e7 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.2.0-snapshot.v090f0e7 --save-exact

@clerk/testing

npm i @clerk/testing@1.2.9-snapshot.v090f0e7 --save-exact

@clerk/themes

npm i @clerk/themes@2.1.19-snapshot.v090f0e7 --save-exact

@clerk/types

npm i @clerk/types@4.13.0-snapshot.v090f0e7 --save-exact

github-advanced-security bot found potential problems Jul 31, 2024

View reviewed changes

wobsoriano force-pushed the rob/eco-4-move-or-use-utilities-from-clerkshared branch from d0eebdd to 2ef2052 Compare August 1, 2024 00:03

wobsoriano commented Aug 1, 2024

View reviewed changes

packages/shared/src/loadClerkJsScript.ts Outdated Show resolved Hide resolved

wobsoriano requested review from LekoArts and panteliselef August 1, 2024 00:15

wobsoriano marked this pull request as ready for review August 1, 2024 00:15

panteliselef reviewed Aug 2, 2024

View reviewed changes

panteliselef reviewed Aug 5, 2024

View reviewed changes

.changeset/nasty-baboons-cheer.md Show resolved Hide resolved

packages/shared/src/loadClerkJsScript.ts Outdated Show resolved Hide resolved

packages/astro/src/internal/create-clerk-instance.ts Show resolved Hide resolved

clerk-cookie added the react label Aug 5, 2024

wobsoriano changed the title ~~chore(astro,shared): Move functions that can be reused across JavaScript SDKs~~ chore(astro,clerk-react,shared): Move functions that can be reused across JavaScript SDKs Aug 5, 2024

wobsoriano changed the title ~~chore(astro,clerk-react,shared): Move functions that can be reused across JavaScript SDKs~~ chore(astro,clerk-react,shared): Migrate functions that can be reused across JavaScript SDKs Aug 5, 2024

wobsoriano commented Aug 5, 2024

View reviewed changes

packages/astro/src/server/build-clerk-hotload-script.ts Show resolved Hide resolved

wobsoriano requested review from anagstef, dimkl and octoper August 6, 2024 18:49

LekoArts suggested changes Aug 7, 2024

View reviewed changes

packages/shared/src/__tests__/loadClerkJsScript.test.ts Outdated Show resolved Hide resolved

packages/shared/src/loadClerkJsScript.ts Outdated Show resolved Hide resolved

packages/shared/src/loadClerkJsScript.ts Outdated Show resolved Hide resolved

wobsoriano force-pushed the rob/eco-4-move-or-use-utilities-from-clerkshared branch from a313653 to 2fab204 Compare August 7, 2024 15:27

clerk-cookie added the nextjs label Aug 7, 2024

wobsoriano commented Aug 7, 2024

View reviewed changes

wobsoriano changed the title ~~chore(astro,clerk-react,shared): Migrate functions that can be reused across JavaScript SDKs~~ chore(astro,clerk-react,shared,nextjs): Migrate functions that can be reused across JavaScript SDKs Aug 7, 2024

wobsoriano added 7 commits August 7, 2024 10:12

chore(shared): Add deriveState function

14129c8

chore(shared): Add deriveState to published files chore(shared): Add deriveState to published files

chore(astro): Use shared deriveState function

4c14780

test(shared): Test deriveState with and without initial state

b181a0c

test(shared): Handle undefined initialState

0cadd2d

chore(shared): Add and export Clerk script hotload function

889fb5c

test(astro): clean up

5fc583a

test(astro): add Clerk script loader tests

64f1987

test(astro): Test script loader version test(astro): Add main script loader test

wobsoriano added 16 commits August 7, 2024 10:12

chore(shared): Improve version selector explanation

883e734

chore(astro): Use shared clerk-js hotload script

7605a54

chore(shared): Update internal package version property name

c9ed36e

chore(astro): Remove unused file

a76dd7b

chore(astro): Clean up param names

9e6c6de

chore(clerk-react): Use shared loadClerkJsScript when hotloading Cler…

3969364

…k js

chore(clerk-react,astro,shared): Update changeset

06ab32e

chore(shared): Make options optional in loadClerkJsScript and throw i…

a6a3a2c

…f clerk-js script attribute is undefined

chore(shared): Update loadClerkJsScript JSDoc

05b2c36

chore(shared,clerk-react): Remove __internal_packageVersion

674f9ae

chore(shared): Use built-in errorThrower when loading clerk script

5195455

chore(shared,astro,react,nextjs): Use built-in error thrower when Cle…

2304335

…rkJS script loading fails

chore(shared,astro,react,nextjs): Update changeset

c7c6651

chore(shared): Update JSDoc function name

e23fa2c

test(shared): Use clerk-js major version from package.json when testi…

19fad8d

…ng script loader

chore(shared): Add nonce prop to script loader options

33c28b6

wobsoriano force-pushed the rob/eco-4-move-or-use-utilities-from-clerkshared branch from b09d148 to 33c28b6 Compare August 7, 2024 17:20

LekoArts suggested changes Aug 8, 2024

View reviewed changes

packages/shared/src/loadClerkJsScript.ts Show resolved Hide resolved

wobsoriano added 3 commits August 8, 2024 06:28

chore(shared): Add nonce prop to to load script

e9f21ab

chore(shared): Remove extra folder

e5e8fba

chore(shared): Add missing nonce to buildClerkJsScriptAttributes

090f0e7

wobsoriano requested a review from nikosdouvlis August 8, 2024 13:43

LekoArts approved these changes Aug 8, 2024

View reviewed changes

wobsoriano mentioned this pull request Aug 8, 2024

feat(astro): Add CSR support #3911

Merged

9 tasks

panteliselef approved these changes Aug 9, 2024

View reviewed changes

wobsoriano merged commit 7e0ced3 into main Aug 9, 2024

wobsoriano deleted the rob/eco-4-move-or-use-utilities-from-clerkshared branch August 9, 2024 14:14

clerk-cookie mentioned this pull request Aug 9, 2024

ci(repo): Version packages #3923

Merged

Conversation

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

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot bot commented Jul 31, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Check failure

Uh oh!

panteliselef left a comment

Choose a reason for hiding this comment

Uh oh!

wobsoriano commented Aug 2, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

LekoArts left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wobsoriano Aug 7, 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!

Uh oh!

wobsoriano commented Aug 8, 2024

Uh oh!

clerk-cookie commented Aug 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wobsoriano commented Jul 31, 2024 •

edited

Loading

changeset-bot bot commented Jul 31, 2024 •

edited

Loading

wobsoriano commented Aug 5, 2024 •

edited

Loading

wobsoriano Aug 7, 2024 •

edited

Loading