feat(elements): Update exports and prep for public builds #2676

tmilewski · 2024-01-29T21:01:38Z

Description

95% of this PR is simply moving components out of single index.tsx files and updating imports and the specific imported component names.

Adding comments to call-out specific points of interest.

Splits out components into their respective files from one large index.tsx.
Enable export subpaths for:
- /common
- /sign-in
- /sign-up
Enable the ability to publish builds.
Rename component exports to better handle the case where we don't want to use import * as ___ from ___
Adds analysis capabilites via npm run build:analyze

Components can now be imported into applications using the following structures:

import { GlobalError, Submit } from '@clerk/elements/common';
import { Continue, Factor, SignIn, SocialProvider, Start, Verification } from '@clerk/elements/sign-in';

import * as Clerk from '@clerk/elements/common';
import * as SignIn from '@clerk/elements/sign-in';

Note: Root also maps to SignIn allowing for SignIn.Root rather than SignIn.SignIn

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

Packages affected

changeset-bot · 2024-01-29T21:01:41Z

🦋 Changeset detected

Latest commit: 30f98f8

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

tmilewski · 2024-01-29T21:04:57Z

packages/elements/package.json

@@ -49,6 +61,8 @@
    "app:e2e": "(cd examples/nextjs && npm run e2e)",
    "app:lint": "(cd examples/nextjs && npm run lint)",
    "build": "tsup",
+    "build:analyze": "tsup --metafile; open https://esbuild.github.io/analyze/",


Enables easy analysis of generated packages.

tmilewski · 2024-01-29T21:05:40Z

packages/elements/src/index.ts

-export { useSignUpFlow, useSignUpFlowSelector } from '~/internals/machines/sign-up/sign-up.context';
-export { useSignInFlow, useSignInFlowSelector } from '~/internals/machines/sign-in/sign-in.context';
-export { useNextRouter };
+throw new Error('Please import specific subpaths instead. See documentation for more details: https://clerk.com/docs/'); // TODO: Add link to docs


As-is, we don't need to make anything available at the top-level of the package.

tmilewski · 2024-01-29T21:06:41Z

packages/elements/tsup.config.ts

@@ -17,6 +17,9 @@ export default defineConfig(overrideOptions => {
    dts: true,
    entry: {
      index: 'src/index.ts',
+      'react/common/index': 'src/react/common/index.ts',
+      'react/sign-in/index': 'src/react/sign-in/index.ts',
+      'react/sign-up/index': 'src/react/sign-up/index.ts',


Create specific entrypoints

tmilewski · 2024-01-29T21:07:40Z

packages/elements/package.json

@@ -26,6 +26,16 @@
  "author": "Clerk",
  "sideEffects": false,
  "exports": {
+    "./*": {


All React-specific code is contained within dist/react but available at the top-level by default, per previous conversations.

tmilewski · 2024-01-29T21:07:45Z

packages/elements/examples/nextjs/components/form.tsx

@@ -43,6 +43,7 @@ export const CustomField = forwardRef<Input, { name: string; label: string }>(fu
        }
      : {
          className: 'bg-tertiary rounded-sm px-2 py-1 border border-foreground data-[invalid]:border-red-500',
+          ref: forwardedRef,


forwardedRef only applies to the non-otp input at this point.

tmilewski · 2024-01-29T21:18:30Z

packages/elements/package.json

    "@radix-ui/react-form": "^0.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@statelyai/inspect": "^0.1.0",
    "@xstate/react": "^4.0.2",
-    "clsx": "^2.1.0",


Wasn't used.

tmilewski · 2024-01-29T21:38:38Z

!snapshot

clerk-cookie · 2024-01-29T21:42:49Z

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

Package	Version
@clerk/backend	1.0.1-snapshot.v59b1e3b
@clerk/chrome-extension	1.0.1-snapshot.v59b1e3b
@clerk/clerk-js	5.0.1-snapshot.v59b1e3b
@clerk/elements	0.0.2-snapshot.v59b1e3b
@clerk/clerk-expo	1.0.1-snapshot.v59b1e3b
@clerk/fastify	1.0.1-snapshot.v59b1e3b
gatsby-plugin-clerk	5.0.1-snapshot.v59b1e3b
@clerk/localizations	2.0.1-snapshot.v59b1e3b
@clerk/nextjs	5.0.1-snapshot.v59b1e3b
@clerk/clerk-react	5.0.1-snapshot.v59b1e3b
@clerk/remix	4.0.1-snapshot.v59b1e3b
@clerk/clerk-sdk-node	5.0.1-snapshot.v59b1e3b
@clerk/shared	2.0.1-snapshot.v59b1e3b
@clerk/themes	2.0.1-snapshot.v59b1e3b
@clerk/types	4.0.1-snapshot.v59b1e3b

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

npm i @clerk/backend@1.0.1-snapshot.v59b1e3b --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.1-snapshot.v59b1e3b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.0.1-snapshot.v59b1e3b --save-exact

@clerk/elements

npm i @clerk/elements@0.0.2-snapshot.v59b1e3b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.0.1-snapshot.v59b1e3b --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.1-snapshot.v59b1e3b --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.1-snapshot.v59b1e3b --save-exact

@clerk/localizations

npm i @clerk/localizations@2.0.1-snapshot.v59b1e3b --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.0.1-snapshot.v59b1e3b --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.0.1-snapshot.v59b1e3b --save-exact

@clerk/remix

npm i @clerk/remix@4.0.1-snapshot.v59b1e3b --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.1-snapshot.v59b1e3b --save-exact

@clerk/shared

npm i @clerk/shared@2.0.1-snapshot.v59b1e3b --save-exact

@clerk/themes

npm i @clerk/themes@2.0.1-snapshot.v59b1e3b --save-exact

@clerk/types

npm i @clerk/types@4.0.1-snapshot.v59b1e3b --save-exact

tmilewski · 2024-01-29T22:03:06Z

packages/elements/package.json

@@ -40,7 +49,9 @@
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
-    "dist"
+    "dist",
+    "!dist/metafile-*.json",


Generated for bundle analysis and unable to configure where they're generated. This ensures we don't include them in the resulting package.

tmilewski · 2024-01-29T23:53:46Z

packages/elements/src/react/common/third-party-providers/social-provider.tsx

@@ -33,11 +33,13 @@ export function SocialProvider({ asChild, provider, ...rest }: SocialProviderPro
  }

  const Comp = asChild ? Slot : 'button';
+  const defaultProps = asChild ? {} : { type: 'button' as const };


When encapsulated in form elements, buttons without a type default to submit causing issues when hitting enter.

…map, adjust scripts

chore(elements): Prep for public builds

a43fdeb

tmilewski self-assigned this Jan 29, 2024

clerk-cookie added the elements label Jan 29, 2024

tmilewski commented Jan 29, 2024

View reviewed changes

tmilewski changed the title ~~chore(elements): Update imports and prep for public builds~~ chore(elements): Update exports and prep for public builds Jan 29, 2024

tmilewski commented Jan 29, 2024

View reviewed changes

fix(elements): Re-add missing Clerk React pkg

e81605b

tmilewski force-pushed the tm.elements/react-components branch from cf43412 to e81605b Compare January 29, 2024 21:19

tmilewski changed the title ~~chore(elements): Update exports and prep for public builds~~ feat(elements): Update exports and prep for public builds Jan 29, 2024

build(elements): Make package public

59b1e3b

chore(elements): Clean up

6575e8d

tmilewski commented Jan 29, 2024

View reviewed changes

tmilewski requested a review from LekoArts January 29, 2024 22:03

fix(elements): SocialProviders acting like submit buttons

7b4b3ff

tmilewski commented Jan 29, 2024

View reviewed changes

LekoArts added 8 commits January 30, 2024 10:47

fix(elements): Improve error msg on index

71ea116

chore(elements): Misc

344fb65

chore(elements): Move ignore to npmignore, remove index from exports …

2069202

…map, adjust scripts

fix(elements): Remove todos from valid errors

ac35145

chore(elements): Update next dep in example

ec9fb80

chore(elements): Readd index to exports map

627fba2

fix(elements): Do not publish under beta-v5 tag

1be9fea

chore(repo): Fix ci

0508cc8

clerk-cookie added the actions label Jan 30, 2024

Delete .changeset/popular-experts-roll.md

a95511b

LekoArts approved these changes Jan 30, 2024

View reviewed changes

chore(elements): Add empty changeset

30f98f8

LekoArts enabled auto-merge January 30, 2024 10:52

LekoArts added this pull request to the merge queue Jan 30, 2024

Merged via the queue into main with commit 25a8ff7 Jan 30, 2024

LekoArts deleted the tm.elements/react-components branch January 30, 2024 11:02

LekoArts added this to the @clerk/elements (Alpha) milestone Feb 1, 2024

LekoArts mentioned this pull request Feb 5, 2024

feat(elements): Add /sign-in export, remove hardcoded paths #2662

Closed

24 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(elements): Update exports and prep for public builds #2676

feat(elements): Update exports and prep for public builds #2676

tmilewski commented Jan 29, 2024 •

edited

Loading

changeset-bot bot commented Jan 29, 2024 •

edited

Loading

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski commented Jan 29, 2024

clerk-cookie commented Jan 29, 2024

tmilewski Jan 29, 2024

tmilewski Jan 29, 2024

feat(elements): Update exports and prep for public builds #2676

feat(elements): Update exports and prep for public builds #2676

Conversation

tmilewski commented Jan 29, 2024 • edited Loading

Description

Checklist

Type of change

Packages affected

changeset-bot bot commented Jan 29, 2024 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmilewski commented Jan 29, 2024

clerk-cookie commented Jan 29, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmilewski commented Jan 29, 2024 •

edited

Loading

changeset-bot bot commented Jan 29, 2024 •

edited

Loading