From 45d68ae5096929a810b02463f21c8103e83eb75e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Thu, 8 Sep 2022 13:43:12 +0200 Subject: [PATCH 01/20] Update README.md Closes #40336 --- packages/next/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/README.md b/packages/next/README.md index a85ea7acb22525b..824aab20421661a 100644 --- a/packages/next/README.md +++ b/packages/next/README.md @@ -46,7 +46,7 @@ Please see our [contributing.md](/contributing.md). ### Good First Issues -We have a list of [good first issues](https://github.com/vercel/next.js/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process. +We have a list of [good first issues](https://github.com/vercel/next.js/labels/good%20first%20issue) that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process. ## Authors From 1aa341f635e0e47e31fd94c3d4504bbb51725c9d Mon Sep 17 00:00:00 2001 From: S0UPernova <79978982+S0UPernova@users.noreply.github.com> Date: Thu, 8 Sep 2022 05:44:38 -0700 Subject: [PATCH 02/20] added type to clientPromise in with-mongodb/lib (#40339) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- examples/with-mongodb/lib/mongodb.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-mongodb/lib/mongodb.ts b/examples/with-mongodb/lib/mongodb.ts index 7aaf63e04cec23c..9397929118bbb17 100644 --- a/examples/with-mongodb/lib/mongodb.ts +++ b/examples/with-mongodb/lib/mongodb.ts @@ -8,7 +8,7 @@ const uri = process.env.MONGODB_URI const options = {} let client -let clientPromise +let clientPromise: Promise if (!process.env.MONGODB_URI) { throw new Error('Please add your Mongo URI to .env.local') From b85fceac635314066b178fa7c7e35edd0da690d9 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Thu, 8 Sep 2022 14:50:53 +0200 Subject: [PATCH 03/20] [Docs] Remove babel from custom-server-typescript example (#40309) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- examples/custom-server-typescript/.babelrc | 3 --- examples/custom-server-typescript/package.json | 18 +++++++++--------- .../custom-server-typescript/tsconfig.json | 3 ++- 3 files changed, 11 insertions(+), 13 deletions(-) delete mode 100644 examples/custom-server-typescript/.babelrc diff --git a/examples/custom-server-typescript/.babelrc b/examples/custom-server-typescript/.babelrc deleted file mode 100644 index 1ff94f7ed28e16b..000000000000000 --- a/examples/custom-server-typescript/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["next/babel"] -} diff --git a/examples/custom-server-typescript/package.json b/examples/custom-server-typescript/package.json index dd8cf92cc482bd6..9e79d47ca0a3cf9 100644 --- a/examples/custom-server-typescript/package.json +++ b/examples/custom-server-typescript/package.json @@ -6,17 +6,17 @@ "start": "cross-env NODE_ENV=production node dist/index.js" }, "dependencies": { - "cross-env": "^7.0.2", + "cross-env": "^7.0.3", "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/node": "^12.0.12", - "@types/react": "^16.9.44", - "@types/react-dom": "^16.9.8", - "nodemon": "^2.0.4", - "ts-node": "^8.10.2", - "typescript": "4.0" + "@types/node": "^18.7.15", + "@types/react": "^18.0.18", + "@types/react-dom": "^18.0.6", + "nodemon": "^2.0.19", + "ts-node": "^10.9.1", + "typescript": "~4.8.2" } } diff --git a/examples/custom-server-typescript/tsconfig.json b/examples/custom-server-typescript/tsconfig.json index 919ea44a15e95dd..4097ef5f16ea81c 100644 --- a/examples/custom-server-typescript/tsconfig.json +++ b/examples/custom-server-typescript/tsconfig.json @@ -19,7 +19,8 @@ "preserveConstEnums": true, "sourceMap": true, "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "incremental": true }, "exclude": ["dist", ".next", "out", "next.config.js"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] From 2b9268a91171f76fb83b45b155b9f9bda3b348c4 Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Thu, 8 Sep 2022 14:56:12 +0200 Subject: [PATCH 04/20] [Docs] Merge with-mobx-state-tree with with-mobx-state-tree-typescript example (#40306) ## Changes see commits ## Context As discussed in https://github.com/vercel/next.js/pull/40302#issuecomment-1239238966 we are going to merge the mobx examples. #40302 ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- .../with-mobx-state-tree-typescript/.babelrc | 4 -- .../.gitignore | 36 ------------- .../with-mobx-state-tree-typescript/README.md | 34 +----------- .../next-env.d.ts | 5 -- .../package.json | 24 --------- examples/with-mobx-state-tree/.babelrc | 4 -- examples/with-mobx-state-tree/README.md | 12 ++--- .../with-mobx-state-tree/components/Clock.js | 25 --------- .../components/Clock.tsx | 0 .../components/SampleComponent.js | 35 ------------- .../components/SampleComponent.tsx | 0 examples/with-mobx-state-tree/package.json | 16 +++--- examples/with-mobx-state-tree/pages/_app.js | 12 ----- .../pages/_app.tsx | 0 examples/with-mobx-state-tree/pages/index.js | 5 -- .../pages/index.tsx | 0 examples/with-mobx-state-tree/pages/other.js | 5 -- .../pages/other.tsx | 0 examples/with-mobx-state-tree/pages/ssg.js | 17 ------ .../pages/ssg.tsx | 0 examples/with-mobx-state-tree/pages/ssr.js | 18 ------- .../pages/ssr.tsx | 0 examples/with-mobx-state-tree/store.js | 52 ------------------- .../store.ts | 0 .../tsconfig.json | 2 +- 25 files changed, 17 insertions(+), 289 deletions(-) delete mode 100644 examples/with-mobx-state-tree-typescript/.babelrc delete mode 100644 examples/with-mobx-state-tree-typescript/.gitignore delete mode 100644 examples/with-mobx-state-tree-typescript/next-env.d.ts delete mode 100644 examples/with-mobx-state-tree-typescript/package.json delete mode 100644 examples/with-mobx-state-tree/.babelrc delete mode 100644 examples/with-mobx-state-tree/components/Clock.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/components/Clock.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/components/SampleComponent.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/components/SampleComponent.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/pages/_app.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/pages/_app.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/pages/index.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/pages/index.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/pages/other.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/pages/other.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/pages/ssg.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/pages/ssg.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/pages/ssr.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/pages/ssr.tsx (100%) delete mode 100644 examples/with-mobx-state-tree/store.js rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/store.ts (100%) rename examples/{with-mobx-state-tree-typescript => with-mobx-state-tree}/tsconfig.json (93%) diff --git a/examples/with-mobx-state-tree-typescript/.babelrc b/examples/with-mobx-state-tree-typescript/.babelrc deleted file mode 100644 index 1bbd4ca8f2cd90e..000000000000000 --- a/examples/with-mobx-state-tree-typescript/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} diff --git a/examples/with-mobx-state-tree-typescript/.gitignore b/examples/with-mobx-state-tree-typescript/.gitignore deleted file mode 100644 index c87c9b392c0200d..000000000000000 --- a/examples/with-mobx-state-tree-typescript/.gitignore +++ /dev/null @@ -1,36 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts diff --git a/examples/with-mobx-state-tree-typescript/README.md b/examples/with-mobx-state-tree-typescript/README.md index 5c169956f27c4b9..ee22d04900168bb 100644 --- a/examples/with-mobx-state-tree-typescript/README.md +++ b/examples/with-mobx-state-tree-typescript/README.md @@ -1,35 +1,3 @@ # MobX State Tree with TypeScript example -Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. - -In this example we are going to display a digital clock that updates every second. The first render is happening in the server and the date will be `00:00:00`, then the browser will take over and it will start updating the date. - -To illustrate SSG and SSR, go to `/ssg` and `/ssr`, those pages are using Next.js data fetching methods to get the date in the server and return it as props to the page, and then the browser will hydrate the store and continue updating the date. - -The trick here for supporting universal mobx is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js` - -The clock, under `components/Clock.js`, has access to the state using the `inject` and `observer` functions from `mobx-react`. In this case Clock is a direct child from the page but it could be deep down the render tree. - -## Deploy your own - -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript) - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript) - -## How to use - -Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: - -```bash -npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -```bash -yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -```bash -pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app -``` - -Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). +**Note:** This example has been moved to [examples/with-mobx-state-tree](../with-mobx-state-tree/) diff --git a/examples/with-mobx-state-tree-typescript/next-env.d.ts b/examples/with-mobx-state-tree-typescript/next-env.d.ts deleted file mode 100644 index 4f11a03dc6cc37f..000000000000000 --- a/examples/with-mobx-state-tree-typescript/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-mobx-state-tree-typescript/package.json b/examples/with-mobx-state-tree-typescript/package.json deleted file mode 100644 index 7e05b342b5063a4..000000000000000 --- a/examples/with-mobx-state-tree-typescript/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "private": true, - "scripts": { - "dev": "next", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "mobx": "^5.9.0", - "mobx-react": "^5.4.3", - "mobx-react-lite": "^2.0.7", - "mobx-state-tree": "^3.11.0", - "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "typescript": "^3.0.1" - }, - "devDependencies": { - "@babel/core": "7.14.3", - "@babel/plugin-proposal-decorators": "^7.3.0", - "@types/node": "^14.0.23", - "@types/react": "^16.4.12" - } -} diff --git a/examples/with-mobx-state-tree/.babelrc b/examples/with-mobx-state-tree/.babelrc deleted file mode 100644 index 1bbd4ca8f2cd90e..000000000000000 --- a/examples/with-mobx-state-tree/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]] -} diff --git a/examples/with-mobx-state-tree/README.md b/examples/with-mobx-state-tree/README.md index af8e00e1306e62d..5c169956f27c4b9 100644 --- a/examples/with-mobx-state-tree/README.md +++ b/examples/with-mobx-state-tree/README.md @@ -1,4 +1,4 @@ -# MobX State Tree example +# MobX State Tree with TypeScript example Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use mobx that also works with our universal rendering approach. @@ -12,24 +12,24 @@ The clock, under `components/Clock.js`, has access to the state using the `injec ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree) +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree&project-name=with-mobx-state-tree&repository-name=with-mobx-state-tree) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-mobx-state-tree-typescript&project-name=with-mobx-state-tree-typescript&repository-name=with-mobx-state-tree-typescript) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash -npx create-next-app --example with-mobx-state-tree with-mobx-state-tree-app +npx create-next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` ```bash -yarn create next-app --example with-mobx-state-tree with-mobx-state-tree-app +yarn create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` ```bash -pnpm create next-app --example with-mobx-state-tree with-mobx-state-tree-app +pnpm create next-app --example with-mobx-state-tree-typescript with-mobx-state-tree-typescript-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/with-mobx-state-tree/components/Clock.js b/examples/with-mobx-state-tree/components/Clock.js deleted file mode 100644 index cfbddeae67ab19e..000000000000000 --- a/examples/with-mobx-state-tree/components/Clock.js +++ /dev/null @@ -1,25 +0,0 @@ -export default function Clock(props) { - return ( -
- {format(new Date(props.lastUpdate))} - -
- ) -} - -const format = (t) => - `${pad(t.getUTCHours())}:${pad(t.getUTCMinutes())}:${pad(t.getUTCSeconds())}` - -const pad = (n) => (n < 10 ? `0${n}` : n) diff --git a/examples/with-mobx-state-tree-typescript/components/Clock.tsx b/examples/with-mobx-state-tree/components/Clock.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/components/Clock.tsx rename to examples/with-mobx-state-tree/components/Clock.tsx diff --git a/examples/with-mobx-state-tree/components/SampleComponent.js b/examples/with-mobx-state-tree/components/SampleComponent.js deleted file mode 100644 index 6478d9319aba811..000000000000000 --- a/examples/with-mobx-state-tree/components/SampleComponent.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import Link from 'next/link' -import { inject, observer } from 'mobx-react' -import Clock from './Clock' - -@inject('store') -@observer -class SampleComponent extends React.Component { - componentDidMount() { - this.props.store.start() - } - - componentWillUnmount() { - this.props.store.stop() - } - - render() { - return ( -
-

{this.props.title}

- - -
- ) - } -} - -export default SampleComponent diff --git a/examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx b/examples/with-mobx-state-tree/components/SampleComponent.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/components/SampleComponent.tsx rename to examples/with-mobx-state-tree/components/SampleComponent.tsx diff --git a/examples/with-mobx-state-tree/package.json b/examples/with-mobx-state-tree/package.json index 819eed5e194c8a4..0a2de828056cb40 100644 --- a/examples/with-mobx-state-tree/package.json +++ b/examples/with-mobx-state-tree/package.json @@ -6,15 +6,17 @@ "start": "next start" }, "dependencies": { - "mobx": "3.3.1", - "mobx-react": "^4.0.4", - "mobx-state-tree": "1.0.1", + "mobx": "^6.6.1", + "mobx-react": "^7.5.2", + "mobx-react-lite": "^3.4.0", + "mobx-state-tree": "^5.1.6", "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "devDependencies": { - "@babel/core": "7.14.5", - "@babel/plugin-proposal-decorators": "^7.1.2" + "@types/node": "^18.7.15", + "@types/react": "^18.0.18", + "typescript": "^4.8.2" } } diff --git a/examples/with-mobx-state-tree/pages/_app.js b/examples/with-mobx-state-tree/pages/_app.js deleted file mode 100644 index e75b81d85556a9b..000000000000000 --- a/examples/with-mobx-state-tree/pages/_app.js +++ /dev/null @@ -1,12 +0,0 @@ -import { Provider } from 'mobx-react' -import { useStore } from '../store' - -export default function App({ Component, pageProps }) { - const store = useStore(pageProps.initialState) - - return ( - - - - ) -} diff --git a/examples/with-mobx-state-tree-typescript/pages/_app.tsx b/examples/with-mobx-state-tree/pages/_app.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/_app.tsx rename to examples/with-mobx-state-tree/pages/_app.tsx diff --git a/examples/with-mobx-state-tree/pages/index.js b/examples/with-mobx-state-tree/pages/index.js deleted file mode 100644 index 00b3a426d77dfed..000000000000000 --- a/examples/with-mobx-state-tree/pages/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import SampleComponent from '../components/SampleComponent' - -export default function Home() { - return -} diff --git a/examples/with-mobx-state-tree-typescript/pages/index.tsx b/examples/with-mobx-state-tree/pages/index.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/index.tsx rename to examples/with-mobx-state-tree/pages/index.tsx diff --git a/examples/with-mobx-state-tree/pages/other.js b/examples/with-mobx-state-tree/pages/other.js deleted file mode 100644 index 64baaaeeddfba91..000000000000000 --- a/examples/with-mobx-state-tree/pages/other.js +++ /dev/null @@ -1,5 +0,0 @@ -import SampleComponent from '../components/SampleComponent' - -export default function Other() { - return -} diff --git a/examples/with-mobx-state-tree-typescript/pages/other.tsx b/examples/with-mobx-state-tree/pages/other.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/other.tsx rename to examples/with-mobx-state-tree/pages/other.tsx diff --git a/examples/with-mobx-state-tree/pages/ssg.js b/examples/with-mobx-state-tree/pages/ssg.js deleted file mode 100644 index 4191006042e6016..000000000000000 --- a/examples/with-mobx-state-tree/pages/ssg.js +++ /dev/null @@ -1,17 +0,0 @@ -import { getSnapshot } from 'mobx-state-tree' -import SampleComponent from '../components/SampleComponent' -import { initializeStore } from '../store' - -export default function Ssg() { - return -} - -// If you build and start the app, the date returned here will have the same -// value for all requests, as this method gets executed at build time. -export function getStaticProps() { - const store = initializeStore() - - store.update() - - return { props: { initialState: getSnapshot(store) } } -} diff --git a/examples/with-mobx-state-tree-typescript/pages/ssg.tsx b/examples/with-mobx-state-tree/pages/ssg.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/ssg.tsx rename to examples/with-mobx-state-tree/pages/ssg.tsx diff --git a/examples/with-mobx-state-tree/pages/ssr.js b/examples/with-mobx-state-tree/pages/ssr.js deleted file mode 100644 index 8bdb3f3e50ad106..000000000000000 --- a/examples/with-mobx-state-tree/pages/ssr.js +++ /dev/null @@ -1,18 +0,0 @@ -import { getSnapshot } from 'mobx-state-tree' -import SampleComponent from '../components/SampleComponent' -import { initializeStore } from '../store' - -export default function Ssr() { - return -} - -// The date returned here will be different for every request that hits the page, -// that is because the page becomes a serverless function instead of being statically -// exported when you use `getServerSideProps` or `getInitialProps` -export function getServerSideProps() { - const store = initializeStore() - - store.update() - - return { props: { initialState: getSnapshot(store) } } -} diff --git a/examples/with-mobx-state-tree-typescript/pages/ssr.tsx b/examples/with-mobx-state-tree/pages/ssr.tsx similarity index 100% rename from examples/with-mobx-state-tree-typescript/pages/ssr.tsx rename to examples/with-mobx-state-tree/pages/ssr.tsx diff --git a/examples/with-mobx-state-tree/store.js b/examples/with-mobx-state-tree/store.js deleted file mode 100644 index 879feca16f04ecc..000000000000000 --- a/examples/with-mobx-state-tree/store.js +++ /dev/null @@ -1,52 +0,0 @@ -import { useMemo } from 'react' -import { types, applySnapshot } from 'mobx-state-tree' - -let store - -const Store = types - .model({ - lastUpdate: types.Date, - light: false, - }) - .actions((self) => { - let timer - function start() { - timer = setInterval(() => { - // mobx-state-tree doesn't allow anonymous callbacks changing data - // pass off to another action instead - self.update() - }, 1000) - } - - function update() { - self.lastUpdate = Date.now() - self.light = true - } - - function stop() { - clearInterval(timer) - } - - return { start, stop, update } - }) - -export function initializeStore(snapshot = null) { - const _store = store ?? Store.create({ lastUpdate: 0 }) - - // If your page has Next.js data fetching methods that use a Mobx store, it will - // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details - if (snapshot) { - applySnapshot(_store, snapshot) - } - // For SSG and SSR always create a new store - if (typeof window === 'undefined') return _store - // Create the store once in the client - if (!store) store = _store - - return store -} - -export function useStore(initialState) { - const store = useMemo(() => initializeStore(initialState), [initialState]) - return store -} diff --git a/examples/with-mobx-state-tree-typescript/store.ts b/examples/with-mobx-state-tree/store.ts similarity index 100% rename from examples/with-mobx-state-tree-typescript/store.ts rename to examples/with-mobx-state-tree/store.ts diff --git a/examples/with-mobx-state-tree-typescript/tsconfig.json b/examples/with-mobx-state-tree/tsconfig.json similarity index 93% rename from examples/with-mobx-state-tree-typescript/tsconfig.json rename to examples/with-mobx-state-tree/tsconfig.json index b5d1e2f17bbe868..e1e1e26feec7c08 100644 --- a/examples/with-mobx-state-tree-typescript/tsconfig.json +++ b/examples/with-mobx-state-tree/tsconfig.json @@ -13,7 +13,7 @@ "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", - "experimentalDecorators": true + "incremental": true }, "exclude": ["node_modules"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] From 66834d5c153f5473859e5a499f5b0cf13d902a5a Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 8 Sep 2022 11:09:46 -0400 Subject: [PATCH 05/20] Fix `image-component` example types (#40352) --- examples/image-component/pages/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/image-component/pages/index.tsx b/examples/image-component/pages/index.tsx index 55e23411e7d21cd..012011cf1ec7805 100644 --- a/examples/image-component/pages/index.tsx +++ b/examples/image-component/pages/index.tsx @@ -5,7 +5,7 @@ import ViewSource from '../components/view-source' import vercel from '../public/vercel.png' import type { PropsWithChildren } from 'react' -const Code = (props: PropsWithChildren) => ( +const Code = (props: PropsWithChildren<{}>) => ( ) From 712d98d3d7ba3ca9849c964aa611e805291a7f7f Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 8 Sep 2022 11:19:55 -0400 Subject: [PATCH 06/20] Update docs for `remotePatterns` image config (#40350) This updates the docs to favor `remotePatterns` image config (instead of `domains`) --- docs/api-reference/next/future/image.md | 4 +++- docs/api-reference/next/image.md | 4 +++- docs/basic-features/image-optimization.md | 12 ++++++------ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index b0a8883262c6e43..2aba62f711adf66 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -151,7 +151,7 @@ Must be one of the following: 2. A path string. This can be either an absolute external URL, or an internal path depending on the [loader](#loader) prop. -When using an external URL, you must add it to [domains](#domains) in `next.config.js`. +When using an external URL, you must add it to [remotePatterns](#remote-patterns) in `next.config.js`. ### width @@ -430,6 +430,8 @@ The `**` syntax does not work in the middle of the pattern. ### Domains +> Note: We recommend using [`remotePatterns`](#remote-patterns) instead so you can restrict protocol and pathname. + Similar to [`remotePatterns`](#remote-patterns), the `domains` configuration can be used to provide a list of allowed hostnames for external images. However, the `domains` configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname. diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 60ffe36f20dac17..5c0bc210e088cae 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -45,7 +45,7 @@ Must be one of the following: or an internal path depending on the [loader](#loader) prop or [loader configuration](#loader-configuration). When using an external URL, you must add it to -[domains](#domains) in +[remotePatterns](#remote-patterns) in `next.config.js`. ### width @@ -393,6 +393,8 @@ The `**` syntax does not work in the middle of the pattern. ### Domains +> Note: We recommend using [`remotePatterns`](#remote-patterns) instead so you can restrict protocol and pathname. + Similar to [`remotePatterns`](#remote-patterns), the `domains` configuration can be used to provide a list of allowed hostnames for external images. However, the `domains` configuration does not support wildcard pattern matching and it cannot restrict protocol, port, or pathname. diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index 1b5ac21aa200c8a..e53e61f8b773250 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -72,7 +72,7 @@ function Home() { ### Remote Images -To use a remote image, the `src` property should be a URL string, which can be [relative](#loaders) or [absolute](/docs/api-reference/next/image.md#domains). Because Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually: +To use a remote image, the `src` property should be a URL string, which can be [relative](#loaders) or [absolute](/docs/api-reference/next/image.md#remote-patterns). Because Next.js does not have access to remote files during the build process, you'll need to provide the [`width`](/docs/api-reference/next/image.md#width), [`height`](/docs/api-reference/next/image.md#height) and optional [`blurDataURL`](/docs/api-reference/next/image.md#blurdataurl) props manually: ```jsx import Image from 'next/image' @@ -97,17 +97,17 @@ export default function Home() { ### Domains -Sometimes you may want to access a remote image, but still use the built-in Next.js Image Optimization API. To do this, leave the `loader` at its default setting and enter an absolute URL for the Image `src`. +Sometimes you may want to optimize a remote image, but still use the built-in Next.js Image Optimization API. To do this, leave the `loader` at its default setting and enter an absolute URL for the Image `src` prop. -To protect your application from malicious users, you must define a list of remote hostnames you intend to allow remote access. +To protect your application from malicious users, you must define a list of remote hostnames you intend to use with the `next/image` component. -> Learn more about [`domains`](/docs/api-reference/next/image.md#domains) configuration. +> Learn more about [`remotePatterns`](/docs/api-reference/next/image.md#remote-patterns) configuration. ### Loaders Note that in the [example earlier](#remote-images), a partial URL (`"/me.png"`) is provided for a remote image. This is possible because of the `next/image` [loader](/docs/api-reference/next/image.md#loader) architecture. -A loader is a function that generates the URLs for your image. It appends a root domain to your provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport. +A loader is a function that generates the URLs for your image. It modifies the provided `src`, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) generation, so that visitors to your site will be served an image that is the right size for their viewport. The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves them directly from the Next.js web server. If you would like to serve your images directly from a CDN or image server, you can use one of the [built-in loaders](/docs/api-reference/next/image.md#built-in-loaders) or write your own with a few lines of JavaScript. @@ -209,7 +209,7 @@ For examples of the Image component used with the various fill modes, see the [I ## Configuration -The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/api-reference/next.config.js/introduction.md). These configurations allow you to [enable remote images](/docs/api-reference/next/image.md#domains), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more. +The `next/image` component and Next.js Image Optimization API can be configured in the [`next.config.js` file](/docs/api-reference/next.config.js/introduction.md). These configurations allow you to [enable remote images](/docs/api-reference/next/image.md#remote-patterns), [define custom image breakpoints](/docs/api-reference/next/image.md#device-sizes), [change caching behavior](/docs/api-reference/next/image.md#caching-behavior) and more. [**Read the full image configuration documentation for more information.**](/docs/api-reference/next/image.md#configuration-options) From 5793301c609036b7845a909e8420e8c0e0778624 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Thu, 8 Sep 2022 17:21:36 +0200 Subject: [PATCH 07/20] fix(lint): disable `react/no-unknown-property` (#40331) ~(PR https://github.com/jsx-eslint/eslint-plugin-react/pull/3377) introduced a change in `eslint-plugin-react@7.31.2` that will now show an error when unknown properties appear on elements. We can opt out of this by overriding the default.~ As discussed internally, we are turning `react/no-unknown-property` off, as it might be confusing even if different props are being used, (eg.: `css` for `emotion`). It's easy to fix https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md#rule-options, but it might not be clear at first glance that Next.js is using `eslint-plugin-react` internally. If the user wants to enforce this rule, they can still add it to their own `rules` config. Fixes #40321, ref: https://github.com/vercel/next.js/discussions/40269, https://github.com/vercel/next.js/issues/38333 --- packages/eslint-config-next/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/eslint-config-next/index.js b/packages/eslint-config-next/index.js index 5c846dee12afd25..24a28c0c523b543 100644 --- a/packages/eslint-config-next/index.js +++ b/packages/eslint-config-next/index.js @@ -60,6 +60,7 @@ module.exports = { plugins: ['import', 'react', 'jsx-a11y'], rules: { 'import/no-anonymous-default-export': 'warn', + 'react/no-unknown-property': 'off', 'react/react-in-jsx-scope': 'off', 'react/prop-types': 'off', 'jsx-a11y/alt-text': [ From 75e5616ce4d20db7f8c58839b806527a03a6d119 Mon Sep 17 00:00:00 2001 From: Carl von Buelow Date: Thu, 8 Sep 2022 11:37:41 -0400 Subject: [PATCH 08/20] Update `onLoadingComplete` for `next/future/image` to receive reference to `` (#40326) * fixes #18398 * fixes #38864 Co-authored-by: Steven --- docs/api-reference/next/future/image.md | 16 +++++++--------- packages/next/client/future/image.tsx | 10 ++-------- .../default/pages/on-loading-complete.js | 6 ++++-- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/docs/api-reference/next/future/image.md b/docs/api-reference/next/future/image.md index 2aba62f711adf66..bd97cbeced80d96 100644 --- a/docs/api-reference/next/future/image.md +++ b/docs/api-reference/next/future/image.md @@ -7,11 +7,11 @@ description: Try the latest Image Optimization with the new `next/future/image`
Version History -| Version | Changes | -| --------- | --------------------------------------------------------------------------------------------------------------------------- | -| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. | -| `v12.2.4` | `fill` property added. | -| `v12.2.0` | Experimental `next/future/image` component introduced. | +| Version | Changes | +| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `v12.3.0` | `next/future/image` component stable. `remotePatterns` config stable. `unoptimized` config stable. `alt` property required. `onLoadingComplete` receives `` | +| `v12.2.4` | `fill` property added. | +| `v12.2.0` | Experimental `next/future/image` component introduced. |
@@ -33,6 +33,7 @@ Compared to `next/image`, the new `next/future/image` component has the followin - Removes `lazyRoot` prop since there is no native equivalent - Removes `loader` config in favor of [`loader`](#loader) prop - Changed `alt` prop from optional to required +- Changed `onLoadingComplete` callback to receive reference to `` element ## Known Browser Bugs @@ -306,10 +307,7 @@ Also keep in mind that the required `width` and `height` props can interact with A callback function that is invoked once the image is completely loaded and the [placeholder](#placeholder) has been removed. -The callback function will be called with one argument, an object with the following properties: - -- [`naturalWidth`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth) -- [`naturalHeight`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalHeight) +The callback function will be called with one argument, a reference to the underlying `` element. ### onLoad diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index bef68231bd7ce57..24081c4b7d7ac05 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -47,10 +47,7 @@ type ImageLoaderPropsWithConfig = ImageLoaderProps & { type PlaceholderValue = 'blur' | 'empty' -type OnLoadingComplete = (result: { - naturalWidth: number - naturalHeight: number -}) => void +type OnLoadingComplete = (img: HTMLImageElement) => void type ImgElementStyle = NonNullable @@ -265,10 +262,7 @@ function handleLoading( setBlurComplete(true) } if (onLoadingCompleteRef?.current) { - const { naturalWidth, naturalHeight } = img - // Pass back read-only primitive values but not the - // underlying DOM element because it could be misused. - onLoadingCompleteRef.current({ naturalWidth, naturalHeight }) + onLoadingCompleteRef.current(img) } if (process.env.NODE_ENV !== 'production') { if (img.getAttribute('data-nimg') === 'future-fill') { diff --git a/test/integration/image-future/default/pages/on-loading-complete.js b/test/integration/image-future/default/pages/on-loading-complete.js index b89d655268e37c2..da60e069f31956e 100644 --- a/test/integration/image-future/default/pages/on-loading-complete.js +++ b/test/integration/image-future/default/pages/on-loading-complete.js @@ -105,13 +105,15 @@ function ImageWithMessage({ id, idToCount, setIdToCount, ...props }) {
{ + onLoadingComplete={(img) => { + const { naturalWidth, naturalHeight, nodeName } = img let count = idToCount[id] || 0 count++ idToCount[id] = count setIdToCount(idToCount) + const name = nodeName.toLocaleLowerCase() setMsg( - `loaded ${count} img${id} with dimensions ${naturalWidth}x${naturalHeight}` + `loaded ${count} ${name}${id} with dimensions ${naturalWidth}x${naturalHeight}` ) }} {...props} From 56c5abd3de120551d65f6d43c385c9c460672f6f Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 8 Sep 2022 08:43:20 -0700 Subject: [PATCH 09/20] Remove warning for swcMinify being enabled (#40359) This removes the warning for `swcMinify` as a release candidate as it is now being marked as stable. x-ref: [slack thread](https://vercel.slack.com/archives/CGU8HUTUH/p1662647498560729) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- packages/next/server/config.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts index e5c1260a8d10535..07406b6b32c0658 100644 --- a/packages/next/server/config.ts +++ b/packages/next/server/config.ts @@ -511,10 +511,6 @@ function assignDefaults(userConfig: { [key: string]: any }) { result.compiler.removeConsole = (result.experimental as any).removeConsole } - if (result.swcMinify) { - Log.info('SWC minify release candidate enabled. https://nextjs.link/swcmin') - } - if (result.experimental?.swcMinifyDebugOptions) { Log.warn( 'SWC minify debug option specified. This option is for debugging minifier issues and will be removed once SWC minifier is stable.' From 0376534a29324ded4b52ad9a39d7fa1938bac1ae Mon Sep 17 00:00:00 2001 From: Leon Si Date: Thu, 8 Sep 2022 11:44:58 -0400 Subject: [PATCH 10/20] docs: fix typo (#40354) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- docs/migrating/incremental-adoption.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/migrating/incremental-adoption.md b/docs/migrating/incremental-adoption.md index a52182e3766711f..4334ad640ec605f 100644 --- a/docs/migrating/incremental-adoption.md +++ b/docs/migrating/incremental-adoption.md @@ -92,4 +92,4 @@ Once your monorepo is set up, push changes to your Git repository as usual and y ## Conclusion -To learn more, read about [subpaths](/docs/api-reference/next.config.js/basepath.md) and [rewrites](/docs/api-reference/next.config.js/rewrites.md) or [deploy a Next.jsmonorepo](https://vercel.com/templates/next.js/monorepo). +To learn more, read about [subpaths](/docs/api-reference/next.config.js/basepath.md) and [rewrites](/docs/api-reference/next.config.js/rewrites.md) or [deploy a Next.js monorepo](https://vercel.com/templates/next.js/monorepo). From 9576a278b6d7b1b1562a095675500497ae6bd6ac Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 8 Sep 2022 08:48:54 -0700 Subject: [PATCH 11/20] v12.2.6-canary.13 --- lerna.json | 2 +- packages/create-next-app/package.json | 2 +- packages/eslint-config-next/package.json | 4 ++-- packages/eslint-plugin-next/package.json | 2 +- packages/next-bundle-analyzer/package.json | 2 +- packages/next-codemod/package.json | 2 +- packages/next-env/package.json | 2 +- packages/next-mdx/package.json | 2 +- packages/next-plugin-storybook/package.json | 2 +- packages/next-polyfill-module/package.json | 2 +- packages/next-polyfill-nomodule/package.json | 2 +- packages/next-swc/package.json | 2 +- packages/next/package.json | 14 +++++++------- packages/react-dev-overlay/package.json | 2 +- packages/react-refresh-utils/package.json | 2 +- pnpm-lock.yaml | 14 +++++++------- 16 files changed, 29 insertions(+), 29 deletions(-) diff --git a/lerna.json b/lerna.json index dc5ab3db5feb157..450e7435427e237 100644 --- a/lerna.json +++ b/lerna.json @@ -16,5 +16,5 @@ "registry": "https://registry.npmjs.org/" } }, - "version": "12.2.6-canary.12" + "version": "12.2.6-canary.13" } diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json index 45f18996dabe481..b87647623a66d45 100644 --- a/packages/create-next-app/package.json +++ b/packages/create-next-app/package.json @@ -1,6 +1,6 @@ { "name": "create-next-app", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "keywords": [ "react", "next", diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json index 4617fbec97a44d6..c9a3d4d58fbd636 100644 --- a/packages/eslint-config-next/package.json +++ b/packages/eslint-config-next/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-next", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "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.2.6-canary.12", + "@next/eslint-plugin-next": "12.2.6-canary.13", "@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 index 80240a5277142e0..e96d8afecb8dc34 100644 --- 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.2.6-canary.12", + "version": "12.2.6-canary.13", "description": "ESLint plugin for NextJS.", "main": "lib/index.js", "license": "MIT", diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json index 18adefc11bdb7b0..39e26ee312a44fe 100644 --- a/packages/next-bundle-analyzer/package.json +++ b/packages/next-bundle-analyzer/package.json @@ -1,6 +1,6 @@ { "name": "@next/bundle-analyzer", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "main": "index.js", "types": "index.d.ts", "license": "MIT", diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json index ae97f89ed5c31b0..4917d36e919c1dd 100644 --- a/packages/next-codemod/package.json +++ b/packages/next-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@next/codemod", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "license": "MIT", "dependencies": { "chalk": "4.1.0", diff --git a/packages/next-env/package.json b/packages/next-env/package.json index 73473cc501c5423..c6886bb1c8174e5 100644 --- a/packages/next-env/package.json +++ b/packages/next-env/package.json @@ -1,6 +1,6 @@ { "name": "@next/env", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "keywords": [ "react", "next", diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json index ec912d883e69624..c6486435da59d9d 100644 --- a/packages/next-mdx/package.json +++ b/packages/next-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@next/mdx", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "main": "index.js", "license": "MIT", "repository": { diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index 945a51992ee1f9b..5ac9ab58f229c18 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@next/plugin-storybook", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "repository": { "url": "vercel/next.js", "directory": "packages/next-plugin-storybook" diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json index 198897f4bf50a41..445d1e498542f52 100644 --- a/packages/next-polyfill-module/package.json +++ b/packages/next-polyfill-module/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-module", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "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", diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json index 6b227552f52f6e0..8d5544828b0209b 100644 --- a/packages/next-polyfill-nomodule/package.json +++ b/packages/next-polyfill-nomodule/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-nomodule", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "description": "A polyfill for non-dead, nomodule browsers.", "main": "dist/polyfill-nomodule.js", "license": "MIT", diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json index 4b5172b8236db42..b8ea7be2130de99 100644 --- a/packages/next-swc/package.json +++ b/packages/next-swc/package.json @@ -1,6 +1,6 @@ { "name": "@next/swc", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "private": true, "scripts": { "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin", diff --git a/packages/next/package.json b/packages/next/package.json index aa572d7b39f533a..6437962bcf9dbfc 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -1,6 +1,6 @@ { "name": "next", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "description": "The React Framework", "main": "./dist/server/next.js", "license": "MIT", @@ -70,7 +70,7 @@ ] }, "dependencies": { - "@next/env": "12.2.6-canary.12", + "@next/env": "12.2.6-canary.13", "@swc/helpers": "0.4.11", "caniuse-lite": "^1.0.30001332", "postcss": "8.4.14", @@ -121,11 +121,11 @@ "@hapi/accept": "5.0.2", "@napi-rs/cli": "2.7.0", "@napi-rs/triples": "1.1.0", - "@next/polyfill-module": "12.2.6-canary.12", - "@next/polyfill-nomodule": "12.2.6-canary.12", - "@next/react-dev-overlay": "12.2.6-canary.12", - "@next/react-refresh-utils": "12.2.6-canary.12", - "@next/swc": "12.2.6-canary.12", + "@next/polyfill-module": "12.2.6-canary.13", + "@next/polyfill-nomodule": "12.2.6-canary.13", + "@next/react-dev-overlay": "12.2.6-canary.13", + "@next/react-refresh-utils": "12.2.6-canary.13", + "@next/swc": "12.2.6-canary.13", "@segment/ajv-human-errors": "2.1.2", "@taskr/clear": "1.1.0", "@taskr/esnext": "1.1.0", diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json index 11602ec757a0375..a1f96790dc5e9aa 100644 --- a/packages/react-dev-overlay/package.json +++ b/packages/react-dev-overlay/package.json @@ -1,6 +1,6 @@ { "name": "@next/react-dev-overlay", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "description": "A development-only overlay for developing React applications.", "repository": { "url": "vercel/next.js", diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json index eb8a3c1762febb8..dd9ea662033826e 100644 --- a/packages/react-refresh-utils/package.json +++ b/packages/react-refresh-utils/package.json @@ -1,6 +1,6 @@ { "name": "@next/react-refresh-utils", - "version": "12.2.6-canary.12", + "version": "12.2.6-canary.13", "description": "An experimental package providing utilities for React Refresh.", "repository": { "url": "vercel/next.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d204490f545aca6..0d6e4f010786c62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -363,7 +363,7 @@ importers: packages/eslint-config-next: specifiers: - '@next/eslint-plugin-next': 12.2.6-canary.12 + '@next/eslint-plugin-next': 12.2.6-canary.13 '@rushstack/eslint-patch': ^1.1.3 '@typescript-eslint/parser': ^5.21.0 eslint-import-resolver-node: ^0.3.6 @@ -419,12 +419,12 @@ importers: '@hapi/accept': 5.0.2 '@napi-rs/cli': 2.7.0 '@napi-rs/triples': 1.1.0 - '@next/env': 12.2.6-canary.12 - '@next/polyfill-module': 12.2.6-canary.12 - '@next/polyfill-nomodule': 12.2.6-canary.12 - '@next/react-dev-overlay': 12.2.6-canary.12 - '@next/react-refresh-utils': 12.2.6-canary.12 - '@next/swc': 12.2.6-canary.12 + '@next/env': 12.2.6-canary.13 + '@next/polyfill-module': 12.2.6-canary.13 + '@next/polyfill-nomodule': 12.2.6-canary.13 + '@next/react-dev-overlay': 12.2.6-canary.13 + '@next/react-refresh-utils': 12.2.6-canary.13 + '@next/swc': 12.2.6-canary.13 '@segment/ajv-human-errors': 2.1.2 '@swc/helpers': 0.4.11 '@taskr/clear': 1.1.0 From ba4c575334796db92c93957afa97ef483cea3f2e Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 8 Sep 2022 09:00:04 -0700 Subject: [PATCH 12/20] v12.3.0 --- lerna.json | 2 +- packages/create-next-app/package.json | 2 +- packages/eslint-config-next/package.json | 4 ++-- packages/eslint-plugin-next/package.json | 2 +- packages/next-bundle-analyzer/package.json | 2 +- packages/next-codemod/package.json | 2 +- packages/next-env/package.json | 2 +- packages/next-mdx/package.json | 2 +- packages/next-plugin-storybook/package.json | 2 +- packages/next-polyfill-module/package.json | 2 +- packages/next-polyfill-nomodule/package.json | 2 +- packages/next-swc/package.json | 2 +- packages/next/package.json | 14 +++++++------- packages/react-dev-overlay/package.json | 2 +- packages/react-refresh-utils/package.json | 2 +- pnpm-lock.yaml | 14 +++++++------- 16 files changed, 29 insertions(+), 29 deletions(-) diff --git a/lerna.json b/lerna.json index 450e7435427e237..2299fc6a2892ba2 100644 --- a/lerna.json +++ b/lerna.json @@ -16,5 +16,5 @@ "registry": "https://registry.npmjs.org/" } }, - "version": "12.2.6-canary.13" + "version": "12.3.0" } diff --git a/packages/create-next-app/package.json b/packages/create-next-app/package.json index b87647623a66d45..9d5d6bbbea59adf 100644 --- a/packages/create-next-app/package.json +++ b/packages/create-next-app/package.json @@ -1,6 +1,6 @@ { "name": "create-next-app", - "version": "12.2.6-canary.13", + "version": "12.3.0", "keywords": [ "react", "next", diff --git a/packages/eslint-config-next/package.json b/packages/eslint-config-next/package.json index c9a3d4d58fbd636..8d1f5a1527f66e4 100644 --- a/packages/eslint-config-next/package.json +++ b/packages/eslint-config-next/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-next", - "version": "12.2.6-canary.13", + "version": "12.3.0", "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.2.6-canary.13", + "@next/eslint-plugin-next": "12.3.0", "@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 index e96d8afecb8dc34..ae49513012eecd5 100644 --- 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.2.6-canary.13", + "version": "12.3.0", "description": "ESLint plugin for NextJS.", "main": "lib/index.js", "license": "MIT", diff --git a/packages/next-bundle-analyzer/package.json b/packages/next-bundle-analyzer/package.json index 39e26ee312a44fe..8e359412211db8d 100644 --- a/packages/next-bundle-analyzer/package.json +++ b/packages/next-bundle-analyzer/package.json @@ -1,6 +1,6 @@ { "name": "@next/bundle-analyzer", - "version": "12.2.6-canary.13", + "version": "12.3.0", "main": "index.js", "types": "index.d.ts", "license": "MIT", diff --git a/packages/next-codemod/package.json b/packages/next-codemod/package.json index 4917d36e919c1dd..7620d642f30f71c 100644 --- a/packages/next-codemod/package.json +++ b/packages/next-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@next/codemod", - "version": "12.2.6-canary.13", + "version": "12.3.0", "license": "MIT", "dependencies": { "chalk": "4.1.0", diff --git a/packages/next-env/package.json b/packages/next-env/package.json index c6886bb1c8174e5..e54b40ee6dfc8df 100644 --- a/packages/next-env/package.json +++ b/packages/next-env/package.json @@ -1,6 +1,6 @@ { "name": "@next/env", - "version": "12.2.6-canary.13", + "version": "12.3.0", "keywords": [ "react", "next", diff --git a/packages/next-mdx/package.json b/packages/next-mdx/package.json index c6486435da59d9d..edc6bc183a99f1f 100644 --- a/packages/next-mdx/package.json +++ b/packages/next-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@next/mdx", - "version": "12.2.6-canary.13", + "version": "12.3.0", "main": "index.js", "license": "MIT", "repository": { diff --git a/packages/next-plugin-storybook/package.json b/packages/next-plugin-storybook/package.json index 5ac9ab58f229c18..aa646820bcba320 100644 --- a/packages/next-plugin-storybook/package.json +++ b/packages/next-plugin-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@next/plugin-storybook", - "version": "12.2.6-canary.13", + "version": "12.3.0", "repository": { "url": "vercel/next.js", "directory": "packages/next-plugin-storybook" diff --git a/packages/next-polyfill-module/package.json b/packages/next-polyfill-module/package.json index 445d1e498542f52..2c5ffae3a4e91de 100644 --- a/packages/next-polyfill-module/package.json +++ b/packages/next-polyfill-module/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-module", - "version": "12.2.6-canary.13", + "version": "12.3.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", diff --git a/packages/next-polyfill-nomodule/package.json b/packages/next-polyfill-nomodule/package.json index 8d5544828b0209b..2393b3243d5e72c 100644 --- a/packages/next-polyfill-nomodule/package.json +++ b/packages/next-polyfill-nomodule/package.json @@ -1,6 +1,6 @@ { "name": "@next/polyfill-nomodule", - "version": "12.2.6-canary.13", + "version": "12.3.0", "description": "A polyfill for non-dead, nomodule browsers.", "main": "dist/polyfill-nomodule.js", "license": "MIT", diff --git a/packages/next-swc/package.json b/packages/next-swc/package.json index b8ea7be2130de99..0a3075d91e242fd 100644 --- a/packages/next-swc/package.json +++ b/packages/next-swc/package.json @@ -1,6 +1,6 @@ { "name": "@next/swc", - "version": "12.2.6-canary.13", + "version": "12.3.0", "private": true, "scripts": { "build-native": "napi build --platform -p next-swc-napi --cargo-name next_swc_napi native --features plugin", diff --git a/packages/next/package.json b/packages/next/package.json index 6437962bcf9dbfc..310749e59a4aafd 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -1,6 +1,6 @@ { "name": "next", - "version": "12.2.6-canary.13", + "version": "12.3.0", "description": "The React Framework", "main": "./dist/server/next.js", "license": "MIT", @@ -70,7 +70,7 @@ ] }, "dependencies": { - "@next/env": "12.2.6-canary.13", + "@next/env": "12.3.0", "@swc/helpers": "0.4.11", "caniuse-lite": "^1.0.30001332", "postcss": "8.4.14", @@ -121,11 +121,11 @@ "@hapi/accept": "5.0.2", "@napi-rs/cli": "2.7.0", "@napi-rs/triples": "1.1.0", - "@next/polyfill-module": "12.2.6-canary.13", - "@next/polyfill-nomodule": "12.2.6-canary.13", - "@next/react-dev-overlay": "12.2.6-canary.13", - "@next/react-refresh-utils": "12.2.6-canary.13", - "@next/swc": "12.2.6-canary.13", + "@next/polyfill-module": "12.3.0", + "@next/polyfill-nomodule": "12.3.0", + "@next/react-dev-overlay": "12.3.0", + "@next/react-refresh-utils": "12.3.0", + "@next/swc": "12.3.0", "@segment/ajv-human-errors": "2.1.2", "@taskr/clear": "1.1.0", "@taskr/esnext": "1.1.0", diff --git a/packages/react-dev-overlay/package.json b/packages/react-dev-overlay/package.json index a1f96790dc5e9aa..fcd9f37f6dcf174 100644 --- a/packages/react-dev-overlay/package.json +++ b/packages/react-dev-overlay/package.json @@ -1,6 +1,6 @@ { "name": "@next/react-dev-overlay", - "version": "12.2.6-canary.13", + "version": "12.3.0", "description": "A development-only overlay for developing React applications.", "repository": { "url": "vercel/next.js", diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json index dd9ea662033826e..ef30d2385de03d4 100644 --- a/packages/react-refresh-utils/package.json +++ b/packages/react-refresh-utils/package.json @@ -1,6 +1,6 @@ { "name": "@next/react-refresh-utils", - "version": "12.2.6-canary.13", + "version": "12.3.0", "description": "An experimental package providing utilities for React Refresh.", "repository": { "url": "vercel/next.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0d6e4f010786c62..268f116d32d91cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -363,7 +363,7 @@ importers: packages/eslint-config-next: specifiers: - '@next/eslint-plugin-next': 12.2.6-canary.13 + '@next/eslint-plugin-next': 12.3.0 '@rushstack/eslint-patch': ^1.1.3 '@typescript-eslint/parser': ^5.21.0 eslint-import-resolver-node: ^0.3.6 @@ -419,12 +419,12 @@ importers: '@hapi/accept': 5.0.2 '@napi-rs/cli': 2.7.0 '@napi-rs/triples': 1.1.0 - '@next/env': 12.2.6-canary.13 - '@next/polyfill-module': 12.2.6-canary.13 - '@next/polyfill-nomodule': 12.2.6-canary.13 - '@next/react-dev-overlay': 12.2.6-canary.13 - '@next/react-refresh-utils': 12.2.6-canary.13 - '@next/swc': 12.2.6-canary.13 + '@next/env': 12.3.0 + '@next/polyfill-module': 12.3.0 + '@next/polyfill-nomodule': 12.3.0 + '@next/react-dev-overlay': 12.3.0 + '@next/react-refresh-utils': 12.3.0 + '@next/swc': 12.3.0 '@segment/ajv-human-errors': 2.1.2 '@swc/helpers': 0.4.11 '@taskr/clear': 1.1.0 From c8d3fa6a77186ec7805261312b0ce406efd46d79 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 8 Sep 2022 20:10:32 +0200 Subject: [PATCH 13/20] Update react-server-dom-webpack (#40356) Bump `react-server-dom-webpack` for support of `experimental_use` API --- package.json | 4 +- ...bpack-writer.browser.development.server.js | 212 +++++++++++++++++- ...ck-writer.browser.production.min.server.js | 72 +++--- .../react-server-dom-webpack.development.js | 9 +- ...react-server-dom-webpack.production.min.js | 4 +- packages/next/package.json | 2 +- pnpm-lock.yaml | 34 +-- 7 files changed, 267 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 5f5ac0dfcb40dcb..758a6b8200aff4e 100644 --- a/package.json +++ b/package.json @@ -177,8 +177,8 @@ "react-17": "npm:react@17.0.2", "react-dom": "18.2.0", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-exp": "npm:react-dom@0.0.0-experimental-0de3ddf56-20220825", - "react-exp": "npm:react@0.0.0-experimental-0de3ddf56-20220825", + "react-dom-exp": "npm:react-dom@0.0.0-experimental-7028ce745-20220907", + "react-exp": "npm:react@0.0.0-experimental-7028ce745-20220907", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js index a4dfaa018c81e2a..b5e1d259afd5267 100644 --- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js +++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js @@ -894,18 +894,109 @@ function readContext(context) { return value; } +// Corresponds to ReactFiberWakeable module. Generally, changes to one module +// should be reflected in the other. +// TODO: Rename this module and the corresponding Fiber one to "Thenable" +// instead of "Wakeable". Or some other more appropriate name. +// TODO: Sparse arrays are bad for performance. +function createThenableState() { + // The ThenableState is created the first time a component suspends. If it + // suspends again, we'll reuse the same state. + return []; +} +function trackSuspendedWakeable(wakeable) { + // If this wakeable isn't already a thenable, turn it into one now. Then, + // when we resume the work loop, we can check if its status is + // still pending. + // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable. + var thenable = wakeable; // We use an expando to track the status and result of a thenable so that we + // can synchronously unwrap the value. Think of this as an extension of the + // Promise API, or a custom interface that is a superset of Thenable. + // + // If the thenable doesn't have a status, set it to "pending" and attach + // a listener that will update its status and result when it resolves. + + switch (thenable.status) { + case 'pending': + // Since the status is already "pending", we can assume it will be updated + // when it resolves, either by React or something in userspace. + break; + + case 'fulfilled': + case 'rejected': + // A thenable that already resolved shouldn't have been thrown, so this is + // unexpected. Suggests a mistake in a userspace data library. Don't track + // this thenable, because if we keep trying it will likely infinite loop + // without ever resolving. + // TODO: Log a warning? + break; + + default: + { + // TODO: Only instrument the thenable if the status if not defined. If + // it's defined, but an unknown value, assume it's been instrumented by + // some custom userspace implementation. + var pendingThenable = thenable; + pendingThenable.status = 'pending'; + pendingThenable.then(function (fulfilledValue) { + if (thenable.status === 'pending') { + var fulfilledThenable = thenable; + fulfilledThenable.status = 'fulfilled'; + fulfilledThenable.value = fulfilledValue; + } + }, function (error) { + if (thenable.status === 'pending') { + var rejectedThenable = thenable; + rejectedThenable.status = 'rejected'; + rejectedThenable.reason = error; + } + }); + break; + } + } +} +function trackUsedThenable(thenableState, thenable, index) { + // This is only a separate function from trackSuspendedWakeable for symmetry + // with Fiber. + // TODO: Disallow throwing a thenable directly. It must go through `use` (or + // some equivalent for internal Suspense implementations). We can't do this in + // Fiber yet because it's a breaking change but we can do it in Server + // Components because Server Components aren't released yet. + thenableState[index] = thenable; +} +function getPreviouslyUsedThenableAtIndex(thenableState, index) { + if (thenableState !== null) { + var thenable = thenableState[index]; + + if (thenable !== undefined) { + return thenable; + } + } + + return null; +} + var currentRequest = null; +var thenableIndexCounter = 0; +var thenableState = null; function prepareToUseHooksForRequest(request) { currentRequest = request; } function resetHooksForRequest() { currentRequest = null; } +function prepareToUseHooksForComponent(prevThenableState) { + thenableIndexCounter = 0; + thenableState = prevThenableState; +} +function getThenableStateAfterSuspending() { + return thenableState; +} function readContext$1(context) { { if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) { - error('Only ServerContext is supported in Flight'); + error('Only createServerContext is supported in Server Components.'); } if (currentCache === null) { @@ -958,7 +1049,8 @@ var Dispatcher = { }, useMemoCache: function (size) { return new Array(size); - } + }, + use: use }; function unsupportedHook() { @@ -990,6 +1082,80 @@ function useId() { return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':'; } +function use(usable) { + if (usable !== null && typeof usable === 'object') { + if (typeof usable.then === 'function') { + // This is a thenable. + var thenable = usable; // Track the position of the thenable within this fiber. + + var index = thenableIndexCounter; + thenableIndexCounter += 1; + + switch (thenable.status) { + case 'fulfilled': + { + var fulfilledValue = thenable.value; + return fulfilledValue; + } + + case 'rejected': + { + var rejectedError = thenable.reason; + throw rejectedError; + } + + default: + { + var prevThenableAtIndex = getPreviouslyUsedThenableAtIndex(thenableState, index); + + if (prevThenableAtIndex !== null) { + switch (prevThenableAtIndex.status) { + case 'fulfilled': + { + var _fulfilledValue = prevThenableAtIndex.value; + return _fulfilledValue; + } + + case 'rejected': + { + var _rejectedError = prevThenableAtIndex.reason; + throw _rejectedError; + } + + default: + { + // The thenable still hasn't resolved. Suspend with the same + // thenable as last time to avoid redundant listeners. + throw prevThenableAtIndex; + } + } + } else { + // This is the first time something has been used at this index. + // Stash the thenable at the current index so we can reuse it during + // the next attempt. + if (thenableState === null) { + thenableState = createThenableState(); + } + + trackUsedThenable(thenableState, thenable, index); // Suspend. + // TODO: Throwing here is an implementation detail that allows us to + // unwind the call stack. But we shouldn't allow it to leak into + // userspace. Throw an opaque placeholder value instead of the + // actual thenable. If it doesn't get captured by the work loop, log + // a warning, because that means something in userspace must have + // caught it. + + throw thenable; + } + } + } + } + } // eslint-disable-next-line react-internal/safe-string-coercion + + + throw new Error('An unsupported type was passed to use(): ' + String(usable)); +} + var ContextRegistry = ReactSharedInternals.ContextRegistry; function getOrCreateServerContext(globalName) { if (!ContextRegistry[globalName]) { @@ -1051,7 +1217,7 @@ function createRootContext(reqContext) { var POP = {}; -function attemptResolveElement(type, key, ref, props) { +function attemptResolveElement(type, key, ref, props, prevThenableState) { if (ref !== null && ref !== undefined) { // When the ref moves to the regular props object this will implicitly // throw for functions. We could probably relax it to a DEV warning for other @@ -1066,6 +1232,7 @@ function attemptResolveElement(type, key, ref, props) { } // This is a server-side component. + prepareToUseHooksForComponent(prevThenableState); return type(props); } else if (typeof type === 'string') { // This is a host element. E.g. HTML. @@ -1094,18 +1261,19 @@ function attemptResolveElement(type, key, ref, props) { var payload = type._payload; var init = type._init; var wrappedType = init(payload); - return attemptResolveElement(wrappedType, key, ref, props); + return attemptResolveElement(wrappedType, key, ref, props, prevThenableState); } case REACT_FORWARD_REF_TYPE: { var render = type.render; + prepareToUseHooksForComponent(prevThenableState); return render(props, undefined); } case REACT_MEMO_TYPE: { - return attemptResolveElement(type.type, key, ref, props); + return attemptResolveElement(type.type, key, ref, props, prevThenableState); } case REACT_PROVIDER_TYPE: @@ -1159,7 +1327,8 @@ function createTask(request, model, context, abortSet) { context: context, ping: function () { return pingTask(request, task); - } + }, + thenableState: null }; abortSet.add(task); return task; @@ -1426,7 +1595,7 @@ function resolveModelToJSON(request, parent, key, value) { // TODO: Concatenate keys of parents onto children. var element = value; // Attempt to render the server component. - value = attemptResolveElement(element.type, element.key, element.ref, element.props); + value = attemptResolveElement(element.type, element.key, element.ref, element.props, null); break; } @@ -1445,6 +1614,9 @@ function resolveModelToJSON(request, parent, key, value) { var newTask = createTask(request, value, getActiveContext(), request.abortableTasks); var ping = newTask.ping; x.then(ping, ping); + var wakeable = x; + trackSuspendedWakeable(wakeable); + newTask.thenableState = getThenableStateAfterSuspending(); return serializeByRefID(newTask.id); } else { logRecoverableError(request, x); // Something errored. We'll still send everything we have up until this point. @@ -1625,14 +1797,29 @@ function retryTask(request, task) { try { var _value3 = task.model; - while (typeof _value3 === 'object' && _value3 !== null && _value3.$$typeof === REACT_ELEMENT_TYPE) { + if (typeof _value3 === 'object' && _value3 !== null && _value3.$$typeof === REACT_ELEMENT_TYPE) { // TODO: Concatenate keys of parents onto children. - var element = _value3; // Attempt to render the server component. + var element = _value3; // When retrying a component, reuse the thenableState from the + // previous attempt. + + var prevThenableState = task.thenableState; // Attempt to render the server component. // Doing this here lets us reuse this same task if the next component // also suspends. task.model = _value3; - _value3 = attemptResolveElement(element.type, element.key, element.ref, element.props); + _value3 = attemptResolveElement(element.type, element.key, element.ref, element.props, prevThenableState); // Successfully finished this component. We're going to keep rendering + // using the same task, but we reset its thenable state before continuing. + + task.thenableState = null; // Keep rendering and reuse the same task. This inner loop is separate + // from the render above because we don't need to reset the thenable state + // until the next time something suspends and retries. + + while (typeof _value3 === 'object' && _value3 !== null && _value3.$$typeof === REACT_ELEMENT_TYPE) { + // TODO: Concatenate keys of parents onto children. + var nextElement = _value3; + task.model = _value3; + _value3 = attemptResolveElement(nextElement.type, nextElement.key, nextElement.ref, nextElement.props, null); + } } var processedChunk = processModelChunk(request, task.id, _value3); @@ -1644,6 +1831,9 @@ function retryTask(request, task) { // Something suspended again, let's pick it back up later. var ping = task.ping; x.then(ping, ping); + var wakeable = x; + trackSuspendedWakeable(wakeable); + task.thenableState = getThenableStateAfterSuspending(); return; } else { request.abortableTasks.delete(task); @@ -1690,7 +1880,7 @@ function abortTask(task, request, errorId) { var ref = serializeByValueID(errorId); var processedChunk = processReferenceChunk(request, task.id, ref); - request.completedJSONChunks.push(processedChunk); + request.completedErrorChunks.push(processedChunk); } function flushCompletedChunks(request, destination) { diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js index 95a6f04e34bb6ab..892fa9bace9be57 100644 --- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js +++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js @@ -7,42 +7,44 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -'use strict';var e=require("react"),l=null,m=0;function n(a,c){if(0!==c.length)if(512