feat(clerk-js): Introduce legacy browser variant #5495
Conversation
🦋 Changeset detectedLatest commit: 1b53f83 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
!snapshot |
|
Hey @dstaley - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact
npm i @clerk/[email protected] --save-exact |
| @@ -158,7 +160,13 @@ const typescriptLoaderProd = () => { | |||
| loader: 'builtin:swc-loader', | |||
| options: { | |||
| env: { | |||
| targets: packageJSON.browserslist, | |||
| targets, | |||
| ...(useCoreJs | |||
There was a problem hiding this comment.
Because core-js will inject polyfills even in our more modern targets, we only enable it when we know we're targeting legacy browsers.
| ], | ||
| optimization: { | ||
| splitChunks: false, | ||
| const clerkEsm = merge( |
There was a problem hiding this comment.
none of this was actually changed, it's just a formatting thing
There was a problem hiding this comment.
Where does the formatting change come from then? Your personal prettier settings? If I open the file in my editor ESLint doesn't want to format the file.
Ideally such unintended formatting changes don't make it into the PR as it's quite possible that another PR will undo them later again.
There was a problem hiding this comment.
Previously Prettier kept everything on one line since it was below our max line length threshold. Since the line is longer (due to the inclusion of the { targets: packageJSON.browserslist } argument), it splits the arguments to merge into separate lines. This confuses the GitHub diff formatter into thinking the lines have changed due to how the final argument to merge is now indented. So this is Prettier working as expected! I just wanted to make sure folks weren't struggling to find the difference between the two :)
| ], | ||
| optimization: { | ||
| splitChunks: false, | ||
| const clerkEsm = merge( |
There was a problem hiding this comment.
Where does the formatting change come from then? Your personal prettier settings? If I open the file in my editor ESLint doesn't want to format the file.
Ideally such unintended formatting changes don't make it into the PR as it's quite possible that another PR will undo them later again.
I absolutely agree with this, but it might break other customers who were relying on the transformations that SWC was applying to fit those targets. We're going to be discussing this more during the SDK Infra meeting this week to determine if we're okay accepting that. The current plan is to opt instances into the legacy bundle via CF worker, so we might be hesitant to suddenly break previously working browsers during a minor update. |
Description
This PR introduces a new
legacyvariant ofclerk.browser, intended to be used for instances that require compatibility with browsers released in mid-2019 or newer. This is achieved through the use ofcore-js, which polyfills modern JavaScript APIs, in addition to the language-level transformations provided by SWC.We now emit two primary
clerk.browserbundles:clerk.browser.js: This is our "modern"/default bundle that adheres to our browser support policy as specified bybrowserslistinpackage.json. This bundle includes language-level transformations for supported browsers, but does not includecore-jspolyfills. This is becausecore-jswill polyfill divergent behaviors between browsers, inflating our bundle size.clerk.legacy.browser.js: This is our legacy bundle that adheres to the browser support policy specified bybrowserslistLegacyinpackage.json, which supports browsers released in mid-2019 and later. It includes language-level transformations from SWC in addition tocore-jspolyfills. It is an additional 35KB gzipped compared to the defaultclerk.browser.jsbundle.In addition to the bundles, we also emit separate chunks for the
legacyvariant, although they're not differentiated by filename.clerk.legacy.browser.jswill load legacy-compatible chunks, whereasclerk.browser.jswill load modern-compatible chunks.As of writing, it's not intended for customers to be able to manually switch to the
legacybundle since it's outside our official browser support matrix. We will be enabling this at the Cloudflare proxy level only for specific customers who have an agreement with us and a demonstrated need for legacy browser compatibility.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change