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

[dstaley]

Description

This PR adds a new script, bundle-check.mjs, to clerk-js. This allows us to confirm which chunks are dynamically loaded during a particular invocation of Clerk, and to see their gzipped sizes. This will be useful when comparing the total loaded JavaScript sizes of the new versus the old components when they're both in the clerk-js package.

Example output:

➜  clerk-js CLERK_PUBLISHABLE_KEY=pk_test_... node bundle-check.mjs

/sign-in
┌────────────────────────────┬─────────┐
│ (index)                    │ size    │
├────────────────────────────┼─────────┤
│ clerk.browser.js           │ '68KB'  │
│ framework_79b6b2_5.22.3.js │ '43KB'  │
│ vendors_79b6b2_5.22.3.js   │ '27KB'  │
│ ui-common_79b6b2_5.22.3.js │ '100KB' │
│ 215_79b6b2_5.22.3.js       │ '2.8KB' │
│ signin_79b6b2_5.22.3.js    │ '9.4KB' │
│ 7_79b6b2_5.22.3.js         │ '925B'  │
│ (total)                    │ '252KB' │
└────────────────────────────┴─────────┘

/sign-up
┌────────────────────────────┬─────────┐
│ (index)                    │ size    │
├────────────────────────────┼─────────┤
│ clerk.browser.js           │ '68KB'  │
│ framework_79b6b2_5.22.3.js │ '43KB'  │
│ vendors_79b6b2_5.22.3.js   │ '27KB'  │
│ ui-common_79b6b2_5.22.3.js │ '100KB' │
│ signup_79b6b2_5.22.3.js    │ '6.2KB' │
│ 7_79b6b2_5.22.3.js         │ '925B'  │
│ (total)                    │ '246KB' │
└────────────────────────────┴─────────┘

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

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 8534ed0

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

[dstaley]

This router option is not actually used in this version of clerk-js. It's being introduced in #4114 but it doesn't hurt anything to have it here now. Happy to remove it if it gives anyone heartburn!

[LauraBeatris]

CLERK_PUBLISHABLE_KEY is not exported from some frameworks such as Next.js, right? In this case, would be NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - how do we forward it to clerk-js?

[dstaley]

This script is purely for our own use, and doesn't come into play for any runtime behaviors. We'll be manually running it like node bundle-check.mjs. I honestly want to just embed a key into the file, but we've never done that (and the few that are embedded point to lclclerk.dev domains, so the AIO components won't render with them). I don't know of a reason why embedding a publishable key would be bad, but I wanted to get confirmation before I did that. I would strongly prefer we not have to set an environment variable to run the script.

[LauraBeatris]

We're not checking if req.url is defined here - It might be an impossible case to lead to issues since fs.existsSync(filePath) would fail, but maybe it's better to safeguard for it.

[dstaley]

Yeah this is actually because the TypeScript types are not great. req.url is always defined for incoming messages received by the HTTP server. But I agree that there's no harm in still checking! I'll add that.