feat: Add support for strategy="worker" in App Router #70212
Conversation
|
Allow CI Workflow Run
Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer |
| dir: string, | ||
| targetDir: string | ||
| { | ||
| targetDir, | ||
| appDir, | ||
| }: { | ||
| targetDir: string | ||
| appDir?: string | ||
| } |
There was a problem hiding this comment.
Not sure why changing the signature here. I'd go with either verifyPartytownSetup(dir, targetDir, appDir) which would be non-breaking for this fn (not sure if that matters) or verifyPartytownSetup({dir, targetDir, appDir}) if this fn is not in some hot path, rather than mixing both
There was a problem hiding this comment.
You're absolutely right, keeping dir as a separate argument was unnecessary, not sure what I had in mind there. I’ve changed it to an object to maintain consistency with the other verifyX functions, which use objects when there is more than one argument
|
|
||
| if (!rootLayoutPath || !rootLayoutContent) return | ||
|
|
||
| const hasPartytownComponent = /<Partytown/i.test(rootLayoutContent) |
There was a problem hiding this comment.
This regex would also catch a comment saying // we're not using <Partytown /> here, can you make sure the comments are excluded?
| @@ -352,6 +352,10 @@ function Script(props: ScriptProps): JSX.Element | null { | |||
| /> | |||
| ) | |||
| } | |||
| } else if (strategy === 'worker') { | |||
| return ( | |||
| <script nonce={nonce} type="text/partytown" {...restProps} id={id} /> | |||
There was a problem hiding this comment.
There was a problem hiding this comment.
Could we add tests to verify this is working as expected maybe alongside the existing ones here https://github.com/vercel/next.js/tree/canary/test/integration/script-loader/partytown
What?
This PR adds support for the
'worker'strategy in the<Script>component when using the App Router withnextScriptWorkersenabled. It also introduces a verification step to ensure that the Partytown component is properly set up in the root layout when using the App Router.Why?
Previously, using
strategy="worker"in the<Script>component worked in the Pages Router but not in the App Router. In the App Router, the<Script>component would fail silently without any warning or error, causing scripts intended to run in a web worker to not execute. Developers might be unaware that they need to include the Partytown component in their root layout for the setup to work correctly, and this requirement was only documented, which could be easily overlooked. This PR addresses these issues to improve developer experience and ensure consistent script handling in both routing systems.How?
Script Component Update: Modified the
<Script>component to handle the'worker'strategy in the App Router by rendering a<script>tag withtype="text/partytown"and passing the appropriate properties.Verification Function Enhancement: Updated
verifyPartytownSetupto check if the Partytown component is imported and used in the root layout file when using the App Router. If not, it logs a warning to inform the developer.Bundler Setup Adjustment: Modified
setup-dev-bundlerto passappDirtoverifyPartytownSetup, enabling the new verification step during development.Fixes #54431