79016b879f
## Summary This PR adds a new `worker` strategy to the `<Script />` component that automatically relocates and executes the script in a web worker. ```jsx <Script strategy="worker" ... /> ``` [Partytown](https://partytown.builder.io/) is used under the hood to provide this functionality. ## Behavior - This will land as an experimental feature and will only work behind an opt-in flag in `next.config.js`: ```js experimental: { nextScriptWorkers: true } ``` - This setup use a similar approach to how ESLint and Typescript is used in Next.js by showing an error to the user to install the dependency locally themselves if they've enabled the experimental `nextScriptWorkers` flag. <img width="1068" alt="Screen Shot 2022-03-03 at 2 33 13 PM" src="https://user-images.githubusercontent.com/12476932/156639227-42af5353-a2a6-4126-936e-269112809651.png"> - For Partytown to work, a number of static files must be served directly from the site (see [docs](https://partytown.builder.io/copy-library-files)). In this PR, these files are automatically copied to a `~partytown` directory in `.next/static` during `next build` and `next dev` if the `nextScriptWorkers` flag is set to true. ## Checklist - [X] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [X] Related issues linked using `fixes #number` - [X] Integration tests added - [X] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. This PR fixes #31517.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { BuildManifest } from '../../server/get-page-files'
|
|
import type { NEXT_DATA } from './utils'
|
|
|
|
import { createContext } from 'react'
|
|
|
|
export type HtmlProps = {
|
|
__NEXT_DATA__: NEXT_DATA
|
|
dangerousAsPath: string
|
|
docComponentsRendered: {
|
|
Html?: boolean
|
|
Main?: boolean
|
|
Head?: boolean
|
|
NextScript?: boolean
|
|
}
|
|
buildManifest: BuildManifest
|
|
ampPath: string
|
|
inAmpMode: boolean
|
|
hybridAmp: boolean
|
|
isDevelopment: boolean
|
|
dynamicImports: string[]
|
|
assetPrefix?: string
|
|
canonicalBase: string
|
|
headTags: any[]
|
|
unstable_runtimeJS?: false
|
|
unstable_JsPreload?: false
|
|
devOnlyCacheBusterQueryString: string
|
|
scriptLoader: {
|
|
afterInteractive?: string[]
|
|
beforeInteractive?: any[]
|
|
worker?: any[]
|
|
}
|
|
locale?: string
|
|
disableOptimizedLoading?: boolean
|
|
styles?: React.ReactElement[] | React.ReactFragment
|
|
head?: Array<JSX.Element | null>
|
|
crossOrigin?: string
|
|
optimizeCss?: boolean
|
|
optimizeFonts?: boolean
|
|
nextScriptWorkers?: boolean
|
|
runtime?: 'edge' | 'nodejs'
|
|
}
|
|
|
|
export const HtmlContext = createContext<HtmlProps>(null as any)
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
HtmlContext.displayName = 'HtmlContext'
|
|
}
|