Merge branch 'canary' into fix-19074

Author: kodiakhq[bot]

packages/next/client/script.tsx

@@ -7,14 +7,19 @@ import { requestIdleCallback } from './request-idle-callback'
 const ScriptCache = new Map()
 const LoadCache = new Set()
 
-export interface Props extends ScriptHTMLAttributes<HTMLScriptElement> {
+export interface ScriptProps extends ScriptHTMLAttributes<HTMLScriptElement> {
   strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive'
   id?: string
   onLoad?: () => void
   onError?: () => void
   children?: React.ReactNode
 }
 
+/**
+ * @deprecated Use `ScriptProps` instead.
+ */
+export type Props = ScriptProps
+
 const ignoreProps = [
   'onLoad',
   'dangerouslySetInnerHTML',
@@ -23,7 +28,7 @@ const ignoreProps = [
   'strategy',
 ]
 
-const loadScript = (props: Props): void => {
+const loadScript = (props: ScriptProps): void => {
   const {
     src,
     id,
@@ -90,7 +95,7 @@ const loadScript = (props: Props): void => {
   document.body.appendChild(el)
 }
 
-function handleClientScriptLoad(props: Props) {
+function handleClientScriptLoad(props: ScriptProps) {
   const { strategy = 'afterInteractive' } = props
   if (strategy === 'afterInteractive') {
     loadScript(props)
@@ -101,7 +106,7 @@ function handleClientScriptLoad(props: Props) {
   }
 }
 
-function loadLazyScript(props: Props) {
+function loadLazyScript(props: ScriptProps) {
   if (document.readyState === 'complete') {
     requestIdleCallback(() => loadScript(props))
   } else {
@@ -111,11 +116,11 @@ function loadLazyScript(props: Props) {
   }
 }
 
-export function initScriptLoader(scriptLoaderItems: Props[]) {
+export function initScriptLoader(scriptLoaderItems: ScriptProps[]) {
   scriptLoaderItems.forEach(handleClientScriptLoad)
 }
 
-function Script(props: Props): JSX.Element | null {
+function Script(props: ScriptProps): JSX.Element | null {
   const {
     src = '',
     onLoad = () => {},

packages/next/pages/_document.tsx

@@ -14,7 +14,7 @@ import {
 import { BuildManifest, getPageFiles } from '../server/get-page-files'
 import { cleanAmpPath } from '../server/utils'
 import { htmlEscapeJsonString } from '../server/htmlescape'
-import Script, { Props as ScriptLoaderProps } from '../client/script'
+import Script, { ScriptProps } from '../client/script'
 
 export { DocumentContext, DocumentInitialProps, DocumentProps }
 
@@ -76,7 +76,7 @@ function getPreNextScripts(context: DocumentProps, props: OriginProps) {
   const { scriptLoader, disableOptimizedLoading } = context
 
   return (scriptLoader.beforeInteractive || []).map(
-    (file: ScriptLoaderProps, index: number) => {
+    (file: ScriptProps, index: number) => {
       const { strategy, ...scriptProps } = file
       return (
         <script
@@ -408,7 +408,7 @@ export class Head extends Component<
 
   handleDocumentScriptLoaderItems(children: React.ReactNode): ReactNode[] {
     const { scriptLoader } = this.context
-    const scriptLoaderItems: ScriptLoaderProps[] = []
+    const scriptLoaderItems: ScriptProps[] = []
     const filteredChildren: ReactNode[] = []
 
     React.Children.forEach(children, (child: any) => {

test/.stats-app/image.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import logo from './nextjs.png'
+
+function ImagePage(props) {
+  return (
+    <>
+      <h1>next/image example</h1>
+      <Image src={logo} placeholder="blur" />
+    </>
+  )
+}
+
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
+
+export default ImagePage

test/.stats-app/pages/index.js

@@ -1,5 +1,11 @@
 const Page = () => 'Hello world 👋'
 
-Page.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default Page

test/.stats-app/pages/link.js

@@ -9,6 +9,12 @@ function aLink(props) {
   )
 }
 
-aLink.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default aLink

test/.stats-app/pages/routerDirect.js

@@ -5,6 +5,12 @@ function routerDirect(props) {
   return <div>I import the router directly</div>
 }
 
-routerDirect.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default routerDirect

test/.stats-app/pages/withRouter.js

@@ -4,6 +4,12 @@ function useWithRouter(props) {
   return <div>I use withRouter</div>
 }
 
-useWithRouter.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default withRouter(useWithRouter)

test/.stats-app/stats-config.js

@@ -1,3 +1,12 @@
+const fs = require('fs')
+const path = require('path')
+// this page is conditionally added when not testing
+// in webpack 4 mode since it's not supported for webpack 4
+const imagePageData = fs.readFileSync(
+  path.join(__dirname, './image.js'),
+  'utf8'
+)
+
 const clientGlobs = [
   {
     name: 'Client Bundles (main, webpack, commons)',
@@ -12,11 +21,11 @@ const clientGlobs = [
   },
   {
     name: 'Client Pages',
-    globs: ['.next/static/*/pages/**/*', '.next/static/css/**/*'],
+    globs: ['.next/static/BUILD_ID/pages/**/*.js', '.next/static/css/**/*'],
   },
   {
     name: 'Client Build Manifests',
-    globs: ['.next/static/*/_buildManifest*'],
+    globs: ['.next/static/BUILD_ID/_buildManifest*'],
   },
   {
     name: 'Rendered Page Sizes',
@@ -26,19 +35,19 @@ const clientGlobs = [
 
 const renames = [
   {
-    srcGlob: '.next/static/*/pages',
+    srcGlob: '.next/static/chunks/pages',
     dest: '.next/static/BUILD_ID/pages',
   },
   {
-    srcGlob: '.next/static/*/pages/**/*',
+    srcGlob: '.next/static/BUILD_ID/pages/**/*.js',
     removeHash: true,
   },
   {
-    srcGlob: '.next/static/runtime/*',
+    srcGlob: '.next/static/runtime/*.js',
     removeHash: true,
   },
   {
-    srcGlob: '.next/static/chunks/*',
+    srcGlob: '.next/static/chunks/*.js',
     removeHash: true,
   },
   {
@@ -60,6 +69,10 @@ module.exports = {
       title: 'Default Build',
       diff: 'onOutputChange',
       diffConfigFiles: [
+        {
+          path: 'pages/image.js',
+          content: imagePageData,
+        },
         {
           path: 'next.config.js',
           content: `
@@ -77,6 +90,10 @@ module.exports = {
       // renames to apply to make file names deterministic
       renames,
       configFiles: [
+        {
+          path: 'pages/image.js',
+          content: imagePageData,
+        },
         {
           path: 'next.config.js',
           content: `