feat(clerk-js): Render `@clerk/ui` #4114

BRKalow · 2024-09-05T22:27:51Z

Description

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-09-05T22:27:54Z

🦋 Changeset detected

Latest commit: 129bc20

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

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/nextjs/src/app-router/client/ClerkProvider.tsx

dstaley · 2024-10-02T18:20:22Z

!snapshot

clerk-cookie · 2024-10-02T18:25:05Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.vd415f19
@clerk/backend	1.13.9-snapshot.vd415f19
@clerk/chrome-extension	1.3.15-snapshot.vd415f19
@clerk/clerk-js	5.27.0-snapshot.vd415f19
@clerk/elements	0.16.0-snapshot.vd415f19
@clerk/clerk-expo	2.2.21-snapshot.vd415f19
@clerk/express	1.2.2-snapshot.vd415f19
@clerk/fastify	1.0.52-snapshot.vd415f19
@clerk/localizations	3.1.3-snapshot.vd415f19
@clerk/nextjs	5.8.0-snapshot.vd415f19
@clerk/clerk-react	5.11.1-snapshot.vd415f19
@clerk/remix	4.2.36-snapshot.vd415f19
@clerk/clerk-sdk-node	5.0.49-snapshot.vd415f19
@clerk/shared	2.10.0-snapshot.vd415f19
@clerk/tanstack-start	0.4.12-snapshot.vd415f19
@clerk/testing	1.3.10-snapshot.vd415f19
@clerk/themes	2.1.36-snapshot.vd415f19
@clerk/types	4.26.0-snapshot.vd415f19

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

dstaley · 2024-10-02T23:12:31Z

!snapshot

clerk-cookie · 2024-10-02T23:18:18Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.v477ee05
@clerk/backend	1.13.9-snapshot.v477ee05
@clerk/chrome-extension	1.3.15-snapshot.v477ee05
@clerk/clerk-js	5.27.0-snapshot.v477ee05
@clerk/elements	0.16.0-snapshot.v477ee05
@clerk/clerk-expo	2.2.21-snapshot.v477ee05
@clerk/express	1.2.2-snapshot.v477ee05
@clerk/fastify	1.0.52-snapshot.v477ee05
@clerk/localizations	3.1.3-snapshot.v477ee05
@clerk/nextjs	5.8.0-snapshot.v477ee05
@clerk/clerk-react	5.11.1-snapshot.v477ee05
@clerk/remix	4.2.36-snapshot.v477ee05
@clerk/clerk-sdk-node	5.0.49-snapshot.v477ee05
@clerk/shared	2.10.0-snapshot.v477ee05
@clerk/tanstack-start	0.4.12-snapshot.v477ee05
@clerk/testing	1.3.10-snapshot.v477ee05
@clerk/themes	2.1.36-snapshot.v477ee05
@clerk/types	4.26.0-snapshot.v477ee05

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

panteliselef · 2024-10-03T13:38:55Z

packages/clerk-js/bundlewatch.config.json

@@ -15,6 +15,6 @@
    { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
    { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
    { "path": "./dist/userverification*.js", "maxSize": "5KB" },
-    { "path": "./dist/onetap*.js", "maxSize": "1KB" }
+    { "path": "./dist/onetap*.js", "maxSize": "2KB" }


❓ how's this affected

Co-authored-by: panteliselef <[email protected]>

jacekradko · 2024-10-03T14:52:43Z

packages/clerk-js/package.json

@@ -53,6 +53,7 @@
    "@clerk/localizations": "3.1.2",
    "@clerk/shared": "2.9.0",
    "@clerk/types": "4.25.0",
+    "@clerk/ui": "0.1.9",


[question] is @clerk/ui considered pre-release since it's still 0.x.x?

Yup, it's an internal-only package essentially. At this point I'm not aware of any plans to make it a publicly consumable package, so we might be able to get away with keeping it private and pinning the version to "*". I'll let @BRKalow confirm though.

The ui package is bundled via Webpack into clerk-js, so we don't need it published to npm in order to consume it.

dstaley · 2024-10-03T21:10:06Z

!snapshot

clerk-cookie · 2024-10-03T21:14:57Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.v860897c
@clerk/backend	1.13.9-snapshot.v860897c
@clerk/chrome-extension	1.3.15-snapshot.v860897c
@clerk/clerk-js	5.27.0-snapshot.v860897c
@clerk/elements	0.16.0-snapshot.v860897c
@clerk/clerk-expo	2.2.21-snapshot.v860897c
@clerk/express	1.2.2-snapshot.v860897c
@clerk/fastify	1.0.52-snapshot.v860897c
@clerk/localizations	3.1.3-snapshot.v860897c
@clerk/nextjs	5.8.0-snapshot.v860897c
@clerk/clerk-react	5.11.1-snapshot.v860897c
@clerk/remix	4.2.36-snapshot.v860897c
@clerk/clerk-sdk-node	5.0.49-snapshot.v860897c
@clerk/shared	2.10.0-snapshot.v860897c
@clerk/tanstack-start	0.4.12-snapshot.v860897c
@clerk/testing	1.3.10-snapshot.v860897c
@clerk/themes	2.1.36-snapshot.v860897c
@clerk/types	4.26.0-snapshot.v860897c

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

dstaley · 2024-10-04T19:11:57Z

!snapshot

clerk-cookie · 2024-10-04T19:16:20Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.v6bae6c3
@clerk/backend	1.13.9-snapshot.v6bae6c3
@clerk/chrome-extension	1.3.16-snapshot.v6bae6c3
@clerk/clerk-js	5.27.0-snapshot.v6bae6c3
@clerk/elements	0.16.0-snapshot.v6bae6c3
@clerk/clerk-expo	2.2.22-snapshot.v6bae6c3
@clerk/express	1.2.2-snapshot.v6bae6c3
@clerk/fastify	1.0.52-snapshot.v6bae6c3
@clerk/localizations	3.2.0-snapshot.v6bae6c3
@clerk/nextjs	5.8.0-snapshot.v6bae6c3
@clerk/clerk-react	5.11.1-snapshot.v6bae6c3
@clerk/remix	4.2.36-snapshot.v6bae6c3
@clerk/clerk-sdk-node	5.0.49-snapshot.v6bae6c3
@clerk/shared	2.10.0-snapshot.v6bae6c3
@clerk/tanstack-start	0.4.12-snapshot.v6bae6c3
@clerk/testing	1.3.10-snapshot.v6bae6c3
@clerk/themes	2.1.36-snapshot.v6bae6c3
@clerk/types	4.26.0-snapshot.v6bae6c3

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

…heet (#4291)

dstaley · 2024-10-07T18:54:06Z

!snapshot

clerk-cookie · 2024-10-07T18:58:50Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.v63f97d3
@clerk/backend	1.13.9-snapshot.v63f97d3
@clerk/chrome-extension	1.3.16-snapshot.v63f97d3
@clerk/clerk-js	5.27.0-snapshot.v63f97d3
@clerk/elements	0.16.0-snapshot.v63f97d3
@clerk/clerk-expo	2.2.22-snapshot.v63f97d3
@clerk/express	1.2.2-snapshot.v63f97d3
@clerk/fastify	1.0.52-snapshot.v63f97d3
@clerk/localizations	3.2.0-snapshot.v63f97d3
@clerk/nextjs	5.8.0-snapshot.v63f97d3
@clerk/clerk-react	5.11.1-snapshot.v63f97d3
@clerk/remix	4.2.36-snapshot.v63f97d3
@clerk/clerk-sdk-node	5.0.49-snapshot.v63f97d3
@clerk/shared	2.10.0-snapshot.v63f97d3
@clerk/tanstack-start	0.4.12-snapshot.v63f97d3
@clerk/testing	1.3.10-snapshot.v63f97d3
@clerk/themes	2.1.36-snapshot.v63f97d3
@clerk/types	4.26.0-snapshot.v63f97d3

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

dstaley · 2024-10-08T18:06:26Z

!snapshot

clerk-cookie · 2024-10-08T18:10:51Z

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

Package	Version
@clerk/astro	1.3.13-snapshot.vc65ea96
@clerk/backend	1.13.9-snapshot.vc65ea96
@clerk/chrome-extension	1.3.17-snapshot.vc65ea96
@clerk/clerk-js	5.27.0-snapshot.vc65ea96
@clerk/elements	0.16.0-snapshot.vc65ea96
@clerk/clerk-expo	2.2.23-snapshot.vc65ea96
@clerk/express	1.2.2-snapshot.vc65ea96
@clerk/fastify	2.0.0-snapshot.vc65ea96
@clerk/localizations	3.2.1-snapshot.vc65ea96
@clerk/nextjs	5.8.0-snapshot.vc65ea96
@clerk/clerk-react	5.11.1-snapshot.vc65ea96
@clerk/remix	4.2.36-snapshot.vc65ea96
@clerk/clerk-sdk-node	5.0.49-snapshot.vc65ea96
@clerk/shared	2.10.0-snapshot.vc65ea96
@clerk/tanstack-start	0.4.12-snapshot.vc65ea96
@clerk/testing	1.3.10-snapshot.vc65ea96
@clerk/themes	2.1.36-snapshot.vc65ea96
@clerk/types	4.26.0-snapshot.vc65ea96

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

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/themes

npm i @clerk/[email protected] --save-exact

@clerk/types

npm i @clerk/[email protected] --save-exact

BRKalow added 3 commits September 5, 2024 17:23

update clerk/ui for rendering

9e71651

fix host router issue

8f3ea4b

new ui renderer

b3ee721

clerk-cookie added clerk-js nextjs elements labels Sep 5, 2024

BRKalow added 3 commits September 5, 2024 21:13

refactor component renderer, add sign up

851f201

remove unused function

371f6ee

add another comment

b8d014f

nikosdouvlis reviewed Sep 6, 2024

View reviewed changes

packages/nextjs/src/app-router/client/ClerkProvider.tsx Show resolved Hide resolved

BRKalow and others added 6 commits September 6, 2024 13:20

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

56af4f5

tweak webpack chunk settings

f0c6f51

fix bring back isSubmitting boolean

2fdd33e

update sideEffects to enable loading css file

5322329

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

b9b3359

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

e3132e3

dstaley mentioned this pull request Sep 20, 2024

feat(clerk-js): Add bundle-check script #4199

Merged

9 tasks

feat(clerk-js,types,shared): Add necessary types for new UI

f000689

clerk-cookie added the types label Sep 24, 2024

dstaley added 10 commits September 23, 2024 21:28

chore(repo): Add changeset

9866b16

fix(clerk-js): Add dependency on @clerk/ui

812035a

chore(clerk-js): Temporarily increase bundlewatch limits

da7ba53

chore(clerk-js): Temporarily increase bundlewatch limits

3fe0bda

fix(clerk-js): Ensure CJS script doesn't contain ESM code

9542bab

fix(ui): Mark package as public

a75375f

fix(nextjs): Pass correct router option

7f71197

fix(clerk-js): Emit CJS chunks as CJS

31d749c

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

4b6c093

fix(clerk-js): Only instantiate new UI if Clerk is loaded

86419e0

fix(clerk-js): Pass __experimental_router to pages router provider

477ee05

panteliselef reviewed Oct 3, 2024

View reviewed changes

feat(ui): Add <RouterLink /> component (#4277)

860897c

Co-authored-by: panteliselef <[email protected]>

jacekradko reviewed Oct 3, 2024

View reviewed changes

panteliselef and others added 2 commits October 4, 2024 13:46

chore(elements): Align clerk dependencies (#4282)

2cc9acd

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

07a26ab

tmilewski assigned BRKalow Oct 4, 2024

dstaley added 2 commits October 4, 2024 12:11

feat(types,ui): Add support for __experimental.appearance prop (#4290)

77bd3e0

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

6bae6c3

dstaley added 3 commits October 4, 2024 13:20

fix(nextjs): Do not export useNextRouter

3d6d9ae

feat(clerk-js): Add support for loading UI styles as first CSS styles…

74c81bf

…heet (#4291)

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

63f97d3

dstaley added 4 commits October 7, 2024 12:10

fix(clerk-js): Ensure import.meta.url isn't used in CJS build

4746fb4

fix(clerk-js): Restore minimization

54a836c

fix(clerk-js): Bundle CSS into CJS and ESM bundles (#4301)

29258d0

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

c65ea96

BRKalow and others added 2 commits October 10, 2024 19:17

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

bab0ad3

Merge branch 'main' into brk.feat/render-ui-in-clerk-js

129bc20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(clerk-js): Render `@clerk/ui` #4114

feat(clerk-js): Render `@clerk/ui` #4114

BRKalow commented Sep 5, 2024

changeset-bot bot commented Sep 5, 2024 •

edited

Loading

dstaley commented Oct 2, 2024

clerk-cookie commented Oct 2, 2024

dstaley commented Oct 2, 2024

clerk-cookie commented Oct 2, 2024

panteliselef Oct 3, 2024

jacekradko Oct 3, 2024

dstaley Oct 3, 2024

dstaley commented Oct 3, 2024

clerk-cookie commented Oct 3, 2024

dstaley commented Oct 4, 2024

clerk-cookie commented Oct 4, 2024

dstaley commented Oct 7, 2024

clerk-cookie commented Oct 7, 2024

dstaley commented Oct 8, 2024

clerk-cookie commented Oct 8, 2024

feat(clerk-js): Render @clerk/ui #4114

Are you sure you want to change the base?

feat(clerk-js): Render @clerk/ui #4114

Conversation

BRKalow commented Sep 5, 2024

Description

Checklist

Type of change

changeset-bot bot commented Sep 5, 2024 • edited Loading

🦋 Changeset detected

dstaley commented Oct 2, 2024

clerk-cookie commented Oct 2, 2024

dstaley commented Oct 2, 2024

clerk-cookie commented Oct 2, 2024

panteliselef Oct 3, 2024

Choose a reason for hiding this comment

jacekradko Oct 3, 2024

Choose a reason for hiding this comment

dstaley Oct 3, 2024

Choose a reason for hiding this comment

dstaley commented Oct 3, 2024

clerk-cookie commented Oct 3, 2024

dstaley commented Oct 4, 2024

clerk-cookie commented Oct 4, 2024

dstaley commented Oct 7, 2024

clerk-cookie commented Oct 7, 2024

dstaley commented Oct 8, 2024

clerk-cookie commented Oct 8, 2024

feat(clerk-js): Render `@clerk/ui` #4114

feat(clerk-js): Render `@clerk/ui` #4114

changeset-bot bot commented Sep 5, 2024 •

edited

Loading