Merge branch 'canary' into build-deps/update-styled-jsx

.github/workflows/build_test_deploy.yml

@@ -282,7 +282,7 @@ jobs:
   publishRelease:
     name: Potentially publish release
     runs-on: ubuntu-latest
-    needs: [testsPass]
+    needs: build
     env:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:

docs/api-routes/introduction.md

@@ -23,7 +23,7 @@ For example, the following API route `pages/api/user.js` returns a `json` respon
 
 ```js
 export default function handler(req, res) {
-  res.status(200).json({ name: 'John Doe' }))
+  res.status(200).json({ name: 'John Doe' })
 }
 ```
 

docs/migrating/from-create-react-app.md

@@ -48,7 +48,7 @@ Create React App uses the `public` directory for the [entry HTML file](https://c
 
 ## Creating Routes & Linking
 
-With Create React App, you're likely using React Router. Instead of using a third-party library, Next.js includes it's own [file-system based routing](/docs/routing/introduction.md).
+With Create React App, you're likely using React Router. Instead of using a third-party library, Next.js includes its own [file-system based routing](/docs/routing/introduction.md).
 
 - Convert all `Route` components to new files in the `pages` directory.
 - For routes that require dynamic content (e.g. `/blog/:slug`), you can use [Dynamic Routes](/docs/routing/dynamic-routes.md) with Next.js (e.g. `pages/blog/[slug].js`). The value of `slug` is accessible through a [query parameter](/docs/routing/dynamic-routes.md). For example, the route `/blog/first-post` would forward the query object `{ 'slug': 'first-post' }` to `pages/blog/[slug].js` ([learn more here](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation)).

lerna.json

@@ -17,5 +17,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "10.0.6-canary.9"
+  "version": "10.0.7-canary.0"
 }

packages/create-next-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "keywords": [
     "react",
     "next",

packages/eslint-plugin-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

packages/next-bundle-analyzer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/bundle-analyzer",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/codemod",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "license": "MIT",
   "dependencies": {
     "chalk": "4.1.0",

packages/next-env/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/env",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "keywords": [
     "react",
     "next",

packages/next-mdx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/mdx",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "main": "index.js",
   "license": "MIT",
   "repository": {

packages/next-plugin-google-analytics/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-google-analytics",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-google-analytics"

packages/next-plugin-sentry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-sentry",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-sentry"

packages/next-plugin-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/plugin-storybook",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"

packages/next-polyfill-module/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-module",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "description": "A standard library polyfill for ES Modules supporting browsers (Edge 16+, Firefox 60+, Chrome 61+, Safari 10.1+)",
   "main": "dist/polyfill-module.js",
   "license": "MIT",

packages/next-polyfill-nomodule/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/polyfill-nomodule",
-  "version": "10.0.6-canary.9",
+  "version": "10.0.7-canary.0",
   "description": "A polyfill for non-dead, nomodule browsers.",
   "main": "dist/polyfill-nomodule.js",
   "license": "MIT",

packages/next/build/tracer.ts

@@ -2,6 +2,49 @@ import api, { Span } from '@opentelemetry/api'
 
 export const tracer = api.trace.getTracer('next', process.env.__NEXT_VERSION)
 
+const compilerStacks = new WeakMap()
+
+export function stackPush(compiler: any, spanName: string, attrs?: any): any {
+  let stack = compilerStacks.get(compiler)
+  let span
+
+  if (!stack) {
+    compilerStacks.set(compiler, (stack = []))
+    span = tracer.startSpan(spanName, attrs ? attrs() : undefined)
+  } else {
+    const parent = stack[stack.length - 1]
+    tracer.withSpan(parent, () => {
+      span = tracer.startSpan(spanName, attrs ? attrs() : undefined)
+    })
+  }
+
+  stack.push(span)
+  return span
+}
+
+export function stackPop(compiler: any, span: any) {
+  span.end()
+
+  let stack = compilerStacks.get(compiler)
+  if (!stack) {
+    console.warn(
+      'Attempted to pop from non-existent stack. Compiler reference must be bad.'
+    )
+    return
+  }
+  const poppedSpan = stack.pop()
+  if (poppedSpan !== span) {
+    stack.push(poppedSpan)
+    const spanIdx = stack.indexOf(span)
+    console.warn('Attempted to pop span that was not at top of stack.')
+    if (spanIdx !== -1) {
+      console.info(
+        `Span was found at index ${spanIdx} with stack size ${stack.length}`
+      )
+    }
+  }
+}
+
 export function traceFn<T extends (...args: unknown[]) => ReturnType<T>>(
   span: Span,
   fn: T

packages/next/build/webpack-config.ts

@@ -1013,7 +1013,7 @@ export default async function getBaseWebpackConfig(
           config.experimental.optimizeImages
         ),
         'process.env.__NEXT_OPTIMIZE_CSS': JSON.stringify(
-          !!config.experimental.optimizeCss && !dev
+          config.experimental.optimizeCss && !dev
         ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
@@ -1202,6 +1202,7 @@ export default async function getBaseWebpackConfig(
       reactMode: config.experimental.reactMode,
       optimizeFonts: config.experimental.optimizeFonts,
       optimizeImages: config.experimental.optimizeImages,
+      optimizeCss: config.experimental.optimizeCss,
       scrollRestoration: config.experimental.scrollRestoration,
       basePath: config.basePath,
       pageEnv: config.experimental.pageEnv,

packages/next/build/webpack/plugins/profiling-plugin.ts

@@ -1,8 +1,13 @@
-import { tracer } from '../../tracer'
+import { tracer, stackPush, stackPop } from '../../tracer'
 import { webpack, isWebpack5 } from 'next/dist/compiled/webpack/webpack'
+import {
+  Span,
+  trace,
+  ProxyTracerProvider,
+  NoopTracerProvider,
+} from '@opentelemetry/api'
 
 const pluginName = 'ProfilingPlugin'
-
 export const spans = new WeakMap()
 
 function getNormalModuleLoaderHook(compilation: any) {
@@ -14,26 +19,87 @@ function getNormalModuleLoaderHook(compilation: any) {
   return compilation.hooks.normalModuleLoader
 }
 
+function tracingIsEnabled() {
+  const tracerProvider: any = trace.getTracerProvider()
+  if (tracerProvider instanceof ProxyTracerProvider) {
+    const proxyDelegate: any = tracerProvider.getDelegate()
+    return !(proxyDelegate instanceof NoopTracerProvider)
+  }
+  return false
+}
+
 export class ProfilingPlugin {
+  compiler: any
+
   apply(compiler: any) {
-    // Only enabled when instrumentation is loaded
-    const currentSpan = tracer.getCurrentSpan()
-    if (!currentSpan || !currentSpan.isRecording()) {
+    // Only enable plugin when instrumentation is loaded
+    if (!tracingIsEnabled()) {
       return
     }
+    this.traceTopLevelHooks(compiler)
+    this.traceCompilationHooks(compiler)
+    this.compiler = compiler
+  }
 
-    compiler.hooks.compile.tap(pluginName, () => {
-      const span = tracer.startSpan('webpack-compile', {
-        attributes: { name: compiler.name },
-      })
-      spans.set(compiler, span)
+  traceHookPair(
+    spanName: string,
+    startHook: any,
+    stopHook: any,
+    attrs?: any,
+    onSetSpan?: (span: Span | undefined) => void
+  ) {
+    let span: Span | undefined
+    startHook.tap(pluginName, () => {
+      span = stackPush(this.compiler, spanName, attrs)
+      onSetSpan?.(span)
+    })
+    stopHook.tap(pluginName, () => {
+      stackPop(this.compiler, span)
+    })
+  }
+
+  traceLoopedHook(spanName: string, startHook: any, stopHook: any) {
+    let span: Span | undefined
+    startHook.tap(pluginName, () => {
+      if (!span) {
+        span = stackPush(this.compiler, spanName)
+      }
     })
-    compiler.hooks.done.tap(pluginName, () => {
-      spans.get(compiler).end()
+    stopHook.tap(pluginName, () => {
+      stackPop(this.compiler, span)
     })
+  }
+
+  traceTopLevelHooks(compiler: any) {
+    this.traceHookPair(
+      'webpack-compile',
+      compiler.hooks.compile,
+      compiler.hooks.done,
+      () => {
+        return { attributes: { name: compiler.name } }
+      },
+      (span) => spans.set(compiler, span)
+    )
+    this.traceHookPair(
+      'webpack-prepare-env',
+      compiler.hooks.environment,
+      compiler.hooks.afterEnvironment
+    )
+    this.traceHookPair(
+      'webpack-invalidated',
+      compiler.hooks.invalid,
+      compiler.hooks.done
+    )
+  }
+
+  traceCompilationHooks(compiler: any) {
     compiler.hooks.compilation.tap(pluginName, (compilation: any) => {
       compilation.hooks.buildModule.tap(pluginName, (module: any) => {
-        tracer.withSpan(spans.get(compiler), () => {
+        const compilerSpan = spans.get(compiler)
+        if (!compilerSpan) {
+          return
+        }
+        tracer.withSpan(compilerSpan, () => {
           const span = tracer.startSpan('build-module')
           span.setAttribute('name', module.userRequest)
           spans.set(module, span)
@@ -51,6 +117,45 @@ export class ProfilingPlugin {
       compilation.hooks.succeedModule.tap(pluginName, (module: any) => {
         spans.get(module).end()
       })
+
+      if (isWebpack5) {
+        this.traceHookPair(
+          'webpack-compilation',
+          compilation.hooks.beforeCompile,
+          compilation.hooks.afterCompile
+        )
+      }
+
+      this.traceHookPair(
+        'webpack-compilation-chunk-graph',
+        compilation.hooks.beforeChunks,
+        compilation.hooks.afterChunks
+      )
+      this.traceHookPair(
+        'webpack-compilation-optimize',
+        compilation.hooks.optimize,
+        compilation.hooks.reviveModules
+      )
+      this.traceLoopedHook(
+        'webpack-compilation-optimize-modules',
+        compilation.hooks.optimizeModules,
+        compilation.hooks.afterOptimizeModules
+      )
+      this.traceLoopedHook(
+        'webpack-compilation-optimize-chunks',
+        compilation.hooks.optimizeChunks,
+        compilation.hooks.afterOptimizeChunks
+      )
+      this.traceHookPair(
+        'webpack-compilation-optimize-tree',
+        compilation.hooks.optimizeTree,
+        compilation.hooks.afterOptimizeTree
+      )
+      this.traceHookPair(
+        'webpack-compilation-hash',
+        compilation.hooks.beforeHash,
+        compilation.hooks.afterHash
+      )
     })
   }
 }

packages/next/next-server/lib/router/router.ts

@@ -1367,8 +1367,9 @@ export default class Router implements BaseRouter {
 
   scrollToHash(as: string): void {
     const [, hash] = as.split('#')
-    // Scroll to top if the hash is just `#` with no value
-    if (hash === '') {
+    // Scroll to top if the hash is just `#` with no value or `#top`
+    // To mirror browsers
+    if (hash === '' || hash === 'top') {
       window.scrollTo(0, 0)
       return
     }

packages/next/next-server/server/next-server.ts

@@ -1575,6 +1575,8 @@ export default class Server {
               locale,
               locales,
               defaultLocale,
+              optimizeCss: this.renderOpts.optimizeCss,
+              distDir: this.distDir,
               fontManifest: this.renderOpts.fontManifest,
               domainLocales: this.renderOpts.domainLocales,
             }