archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor scriptloader option names (#25012)

Browse source
This commit is contained in:
Janicklas Ralph 2021-05-12 04:37:57 -07:00 committed by GitHub
parent b43e996e3f
commit b859c5bdf5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/next/client/experimental-script.tsx
View file

@ -8,12 +8,11 @@ const ScriptCache = new Map()
const LoadCache = new Set()
export interface Props extends ScriptHTMLAttributes<HTMLScriptElement> {
strategy?: 'afterInteraction' | 'lazy' | 'beforeInteraction'
strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
id?: string
onLoad?: () => void
onError?: () => void
children?: React.ReactNode
preload?: boolean
}
const ignoreProps = [
@ -22,7 +21,6 @@ const ignoreProps = [
'children',
'onError',
'strategy',
'preload',
]
const loadScript = (props: Props): void => {
@ -93,10 +91,10 @@ const loadScript = (props: Props): void => {
}
function handleClientScriptLoad(props: Props) {
const { strategy = 'afterInteraction' } = props
if (strategy === 'afterInteraction') {
const { strategy = 'afterInteractive' } = props
if (strategy === 'afterInteractive') {
loadScript(props)
} else if (strategy === 'lazy') {
} else if (strategy === 'lazyOnload') {
window.addEventListener('load', () => {
requestIdleCallback(() => loadScript(props))
})
@ -122,9 +120,8 @@ function Script(props: Props): JSX.Element | null {
src = '',
onLoad = () => {},
dangerouslySetInnerHTML,
strategy = 'afterInteraction',
strategy = 'afterInteractive',
onError,
preload = false,
...restProps
} = props
@ -132,9 +129,9 @@ function Script(props: Props): JSX.Element | null {
const { updateScripts, scripts } = useContext(HeadManagerContext)
useEffect(() => {
if (strategy === 'afterInteraction') {
if (strategy === 'afterInteractive') {
loadScript(props)
} else if (strategy === 'lazy') {
} else if (strategy === 'lazyOnload') {
loadLazyScript(props)
}
}, [props, strategy])
@ -143,14 +140,9 @@ function Script(props: Props): JSX.Element | null {
return null
}
if (strategy === 'afterInteraction') {
if (updateScripts && preload) {
scripts.afterInteraction = (scripts.afterInteraction || []).concat([src])
updateScripts(scripts)
}
} else if (strategy === 'beforeInteraction') {
if (strategy === 'beforeInteractive') {
if (updateScripts) {
scripts.beforeInteraction = (scripts.beforeInteraction || []).concat([
scripts.beforeInteractive = (scripts.beforeInteractive || []).concat([
{
src,
onLoad,

2
packages/next/next-server/lib/utils.ts
View file

@ -191,7 +191,7 @@ export type DocumentProps = DocumentInitialProps & {
unstable_runtimeJS?: false
unstable_JsPreload?: false
devOnlyCacheBusterQueryString: string
scriptLoader: { afterInteraction?: string[]; beforeInteraction?: any[] }
scriptLoader: { afterInteractive?: string[]; beforeInteractive?: any[] }
locale?: string
}

24
packages/next/pages/_document.tsx
View file

@ -256,7 +256,7 @@ export class Head extends Component<
})
return [
...(scriptLoader.beforeInteraction || []).map((file) => (
...(scriptLoader.beforeInteractive || []).map((file) => (
<link
key={file.src}
nonce={this.props.nonce}
@ -282,18 +282,6 @@ export class Head extends Component<
}
/>
)),
...(scriptLoader.afterInteraction || []).map((file: string) => (
<link
key={file}
nonce={this.props.nonce}
rel="preload"
href={file}
as="script"
crossOrigin={
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
}
/>
)),
]
}
@ -304,9 +292,9 @@ export class Head extends Component<
React.Children.forEach(children, (child: any) => {
if (child.type === Script) {
if (child.props.strategy === 'beforeInteraction') {
scriptLoader.beforeInteraction = (
scriptLoader.beforeInteraction || []
if (child.props.strategy === 'beforeInteractive') {
scriptLoader.beforeInteractive = (
scriptLoader.beforeInteractive || []
).concat([
{
...child.props,
@ -314,7 +302,7 @@ export class Head extends Component<
])
return
} else if (
['lazy', 'afterInteraction'].includes(child.props.strategy)
['lazyOnload', 'afterInteractive'].includes(child.props.strategy)
) {
scriptLoaderItems.push(child.props)
return
@ -668,7 +656,7 @@ export class NextScript extends Component<OriginProps> {
getPreNextScripts() {
const { scriptLoader } = this.context
return (scriptLoader.beforeInteraction || []).map(
return (scriptLoader.beforeInteractive || []).map(
(file: ScriptLoaderProps) => {
const { strategy, ...props } = file
return (

18
test/integration/script-loader/pages/_document.js
View file

@ -21,14 +21,14 @@ export default class MyDocument extends Document {
href="https://fonts.googleapis.com/css?family=Voces"
/>
<Script
id="documentAfterInteraction"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentAfterInteraction"
strategy="afterInteraction"
id="documentAfterInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentAfterInteractive"
strategy="afterInteractive"
></Script>
<Script
id="documentLazy"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentLazy"
strategy="lazy"
id="documentLazyOnload"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentLazyOnload"
strategy="lazyOnload"
></Script>
<Script
id="documentBlock"
@ -36,9 +36,9 @@ export default class MyDocument extends Document {
strategy="dangerouslyBlockRendering"
></Script>
<Script
id="documentBeforeInteraction"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentBeforeInteraction"
strategy="beforeInteraction"
id="documentBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=documentBeforeInteractive"
strategy="beforeInteractive"
></Script>
</Head>
<body>

5
test/integration/script-loader/pages/index.js
View file

@ -4,9 +4,8 @@ const Page = () => {
return (
<div class="container">
<Script
id="scriptAfterInteraction"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptAfterInteraction"
preload
id="scriptAfterInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptAfterInteractive"
></Script>
<div>index</div>
</div>

6
test/integration/script-loader/pages/page1.js
View file

@ -4,9 +4,9 @@ const Page = () => {
return (
<div class="container">
<Script
id="scriptBeforeInteraction"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteraction"
strategy="beforeInteraction"
id="scriptBeforeInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptBeforeInteractive"
strategy="beforeInteractive"
></Script>
<div>page1</div>
</div>

6
test/integration/script-loader/pages/page3.js
View file

@ -11,9 +11,9 @@ const Page = () => {
})`}
</Script>
<Script
id="scriptLazy"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptLazy"
strategy="lazy"
id="scriptLazyOnload"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js?a=scriptLazyOnload"
strategy="lazyOnload"
></Script>
<div>page3</div>
</div>

26
test/integration/script-loader/test/index.test.js
View file

@ -34,7 +34,7 @@ describe('Script Loader', () => {
stopApp(server)
})
it('priority afterInteraction', async () => {
it('priority afterInteractive', async () => {
let browser
try {
browser = await webdriver(appPort, '/')
@ -58,16 +58,16 @@ describe('Script Loader', () => {
expect(endPreloads.length).toBe(0)
}
// afterInteraction script in page
await test('scriptAfterInteraction')
// afterInteraction script in _document
await test('documentAfterInteraction')
// afterInteractive script in page
await test('scriptAfterInteractive')
// afterInteractive script in _document
await test('documentAfterInteractive')
} finally {
if (browser) await browser.close()
}
})
it('priority lazy', async () => {
it('priority lazyOnload', async () => {
let browser
try {
browser = await webdriver(appPort, '/page3')
@ -87,16 +87,16 @@ describe('Script Loader', () => {
expect(endScripts.length).toBe(0)
}
// Lazy script in page
await test('scriptLazy')
// Lazy script in _document
await test('documentLazy')
// lazyOnload script in page
await test('scriptLazyOnload')
// lazyOnload script in _document
await test('documentLazyOnload')
} finally {
if (browser) await browser.close()
}
})
it('priority beforeInteraction', async () => {
it('priority beforeInteractive', async () => {
const html = await renderViaHTTP(appPort, '/page1')
const $ = cheerio.load(html)
@ -130,8 +130,8 @@ describe('Script Loader', () => {
).toBeGreaterThan(0)
}
test('scriptBeforeInteraction')
test('documentBeforeInteraction')
test('scriptBeforeInteractive')
test('documentBeforeInteractive')
})
it('onload fires correctly', async () => {