Merge branch 'canary' into edge-runtime

vercel · Sep 23, 2022 · ea4db73 · ea4db73
2 parents 85e7771 + 5d9f390
commit ea4db73
Show file tree

Hide file tree

Showing 75 changed files with 1,043 additions and 161 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -1008,7 +1008,7 @@ jobs:
       - run: npm i -g pnpm@${PNPM_VERSION}
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
       - run: ./scripts/publish-native.js $GITHUB_REF
-      - run: ./scripts/publish-release.sh
+      - run: ./scripts/publish-release.js
 
   testDeployE2E:
     name: E2E (deploy)

diff --git a/docs/advanced-features/static-html-export.md b/docs/advanced-features/static-html-export.md
@@ -45,7 +45,7 @@ The majority of core Next.js features needed to build a static site are supporte
 - [Client-side data fetching](/docs/basic-features/data-fetching/client-side.md)
 - [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md)
 - [`getStaticPaths`](/docs/basic-features/data-fetching/get-static-paths.md)
-- [Image Optimization](/docs/basic-features/image-optimization.md) using a [custom loader](/docs/basic-features/image-optimization.md#loader)
+- [Image Optimization](/docs/basic-features/image-optimization.md) using a [custom loader](/docs/basic-features/image-optimization.md#loaders)
 
 ## Unsupported Features
 

diff --git a/errors/react-hydration-error.md b/errors/react-hydration-error.md
@@ -37,6 +37,40 @@ function MyComponent() {
 }
 ```
 
+Another example:
+
+Invalid HTML may cause hydration mismatch such as div inside p.
+
+```jsx
+export const IncorrectComponent = () => {
+  return (
+    <p>
+      <div>
+        This is not correct and should never be done because the p tag has been
+        abused
+      </div>
+      <Image src="/vercel.svg" alt="" width="30" height="30" />
+    </p>
+  )
+}
+```
+
+How to fix it:
+
+```jsx
+export const CorrectComponent = () => {
+  return (
+    <div>
+      <div>
+        This is correct and should work because a div is really good for this
+        task.
+      </div>
+      <Image src="/vercel.svg" alt="" width="30" height="30" />
+    </div>
+  )
+}
+```
+
 Common causes with css-in-js libraries:
 
 - When using Styled Components / Emotion

diff --git a/examples/with-google-analytics/pages/_document.js b/examples/with-google-analytics/pages/_document.js
@@ -0,0 +1,25 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+
+        {/* Global Site Tag (gtag.js) - Google Analytics */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+          `,
+          }}
+        />
+      </body>
+    </Html>
+  )
+}
diff --git a/lerna.json b/lerna.json
@@ -16,5 +16,5 @@
       "registry": "https://registry.npmjs.org/"
     }
   },
-  "version": "12.3.2-canary.3"
+  "version": "12.3.2-canary.7"
 }
diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-next-app",
-  "version": "12.3.2-canary.3",
+  "version": "12.3.2-canary.7",
   "keywords": [
     "react",
     "next",

diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-next",
-  "version": "12.3.2-canary.3",
+  "version": "12.3.2-canary.7",
   "description": "ESLint configuration used by NextJS.",
   "main": "index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "directory": "packages/eslint-config-next"
   },
   "dependencies": {
-    "@next/eslint-plugin-next": "12.3.2-canary.3",
+    "@next/eslint-plugin-next": "12.3.2-canary.7",
     "@rushstack/eslint-patch": "^1.1.3",
     "@typescript-eslint/parser": "^5.21.0",
     "eslint-import-resolver-node": "^0.3.6",

diff --git a/packages/eslint-plugin-next/package.json b/packages/eslint-plugin-next/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@next/eslint-plugin-next",
-  "version": "12.3.2-canary.3",
+  "version": "12.3.2-canary.7",
   "description": "ESLint plugin for NextJS.",
   "main": "lib/index.js",
   "license": "MIT",

diff --git a/packages/font/local/index.d.ts b/packages/font/local/index.d.ts
@@ -0,0 +1 @@
+export { default } from '../dist/local/index'
diff --git a/packages/font/local/index.js b/packages/font/local/index.js
@@ -0,0 +1 @@
+throw new Error('@next/font/local is not correctly setup')
diff --git a/packages/font/local/loader.d.ts b/packages/font/local/loader.d.ts
@@ -0,0 +1 @@
+export { default } from '../dist/local/loader'
diff --git a/packages/font/local/loader.js b/packages/font/local/loader.js
@@ -0,0 +1 @@
+module.exports = require('../dist/local/loader')
diff --git a/packages/font/package.json b/packages/font/package.json
@@ -1,22 +1,20 @@
 {
   "name": "@next/font",
-  "version": "12.3.2-canary.3",
+  "version": "12.3.2-canary.7",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/font"
   },
   "files": [
     "dist",
-    "google"
+    "google",
+    "local"
   ],
   "license": "MIT",
   "scripts": {
     "build": "rm -rf dist && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
     "dev": "tsc -d -w -p tsconfig.json",
     "typescript": "tsec --noEmit -p tsconfig.json"
-  },
-  "publishConfig": {
-    "access": "public"
   }
 }
diff --git a/packages/font/src/google/index.ts b/packages/font/src/google/index.ts
@@ -1,9 +1,5 @@
+import type { FontModule } from 'next/font'
 type Display = 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
-type FontModule = {
-  className: string
-  variable: string
-  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
-}
 export declare function ABeeZee(options: {
   variant: '400' | '400-italic'
   display?: Display

diff --git a/packages/font/src/google/loader.ts b/packages/font/src/google/loader.ts
@@ -1,3 +1,4 @@
+import type { FontLoader } from 'next/font'
 // @ts-ignore
 import fetch from 'next/dist/compiled/node-fetch'
 // @ts-ignore
@@ -9,19 +10,12 @@ import {
   validateData,
 } from './utils'
 
-type FontLoaderOptions = {
-  functionName: string
-  data: any[]
-  config: any
-  emitFontFile: (content: Buffer, ext: string, preload: boolean) => string
-}
-
-export default async function downloadGoogleFonts({
+const downloadGoogleFonts: FontLoader = async ({
   functionName,
   data,
   config,
   emitFontFile,
-}: FontLoaderOptions) {
+}) => {
   if (!config?.subsets) {
     throw new Error(
       'Please specify subsets for `@next/font/google` in your `next.config.js`'
@@ -119,3 +113,5 @@ export default async function downloadGoogleFonts({
     fallbackFonts: fallback,
   }
 }
+
+export default downloadGoogleFonts
diff --git a/packages/font/src/local/index.ts b/packages/font/src/local/index.ts
@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { FontModule } from 'next/font'
+type Display = 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
+type LocalFont = {
+  src: string | Array<{ file: string; unicodeRange: string }>
+  display?: Display
+  weight?: string
+  style?: string
+  fallback?: string[]
+  preload?: boolean
+
+  ascentOverride?: string
+  descentOverride?: string
+  fontStretch?: string
+  fontVariant?: string
+  fontFeatureSettings?: string
+  fontVariationSettings?: string
+  lineGapOverride?: string
+  sizeAdjust?: string
+}
+
+export default function localFont(options: LocalFont): FontModule {
+  throw new Error()
+}
diff --git a/packages/font/src/local/loader.ts b/packages/font/src/local/loader.ts
@@ -0,0 +1,67 @@
+import type { FontLoader } from 'next/font'
+
+import { promisify } from 'util'
+import { validateData } from './utils'
+
+const fetchFonts: FontLoader = async ({
+  functionName,
+  data,
+  emitFontFile,
+  resolve,
+  fs,
+}) => {
+  const {
+    family,
+    files,
+    display,
+    weight,
+    style,
+    fallback,
+    preload,
+    ascentOverride,
+    descentOverride,
+    lineGapOverride,
+    fontStretch,
+    fontFeatureSettings,
+    sizeAdjust,
+  } = validateData(functionName, data)
+
+  const fontFaces = await Promise.all(
+    files.map(async ({ file, ext, format, unicodeRange }) => {
+      const resolved = await resolve(file)
+      const fileBuffer = await promisify(fs.readFile)(resolved)
+
+      const fontUrl = emitFontFile(fileBuffer, ext, preload)
+
+      const fontFaceProperties = [
+        ['font-family', `'${family}'`],
+        ['src', `url(${fontUrl}) format('${format}')`],
+        ['font-display', display],
+        ...(weight ? [['font-weight', weight]] : []),
+        ...(style ? [['font-style', style]] : []),
+        ...(ascentOverride ? [['ascent-override', ascentOverride]] : []),
+        ...(descentOverride ? [['descent-override', descentOverride]] : []),
+        ...(lineGapOverride ? [['line-gap-override', lineGapOverride]] : []),
+        ...(fontStretch ? [['font-stretch', fontStretch]] : []),
+        ...(fontFeatureSettings
+          ? [['font-feature-settings', fontFeatureSettings]]
+          : []),
+        ...(sizeAdjust ? [['size-adjust', sizeAdjust]] : []),
+        ...(unicodeRange ? [['unicode-range', unicodeRange]] : ''),
+      ]
+
+      return `@font-face {
+${fontFaceProperties
+  .map(([property, value]) => `${property}: ${value};`)
+  .join('\n')}
+}`
+    })
+  )
+
+  return {
+    css: fontFaces.join('\n'),
+    fallbackFonts: fallback,
+  }
+}
+
+export default fetchFonts