feat: Update partial hydration directive (#36868)

* chore: Update client directive to "use client" * Bump react-server-dom-webpack * Adjust react-server-dom-webpack import paths * Revert everything except directive change
gatsbyjs · Oct 25, 2022 · 7f1b57c · 7f1b57c
1 parent db92b17
commit 7f1b57c
Show file tree

Hide file tree

Showing 18 changed files with 20 additions and 20 deletions.
diff --git a/packages/gatsby-cli/src/structured-errors/error-map.ts b/packages/gatsby-cli/src/structured-errors/error-map.ts
@@ -887,9 +887,9 @@ const errors = {
         context?.path ? ` for path "${context.path}"` : ``
       }
 
-      This can happen if interactive elements like "useEffect", "useState", "createContext" or event handlers are used in a component without declaring the "client export" directive at the top of the file.
+      This can happen if interactive elements like "useEffect", "useState", "createContext" or event handlers are used in a component without declaring the "use client" directive at the top of the file.
       
-      Consider adding "client export" to the top of your file if your component is interactive, otherwise refactor your component so it can be statically rendered with React Server Components (RSC).
+      Consider adding "use client" to the top of your file if your component is interactive, otherwise refactor your component so it can be statically rendered with React Server Components (RSC).
     `),
     level: Level.ERROR,
     docsUrl: `https://gatsby.dev/partial-hydration-error`,

diff --git a/packages/gatsby-link/package.json b/packages/gatsby-link/package.json
@@ -16,7 +16,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "npm-run-all --npm-path npm -s build:cjs build:esm",
-    "postbuild": "prepend-directive --files=dist/index.js,dist/index.modern.mjs --directive=\"client export\"",
+    "postbuild": "prepend-directive --files=dist/index.js,dist/index.modern.mjs --directive=\"use client\"",
     "build:cjs": "microbundle -f cjs --jsx React.createElement --generateTypes false  -i src/index-cjs.js -o dist/index.js",
     "build:esm": "microbundle -f modern --jsx React.createElement --generateTypes false -o dist/index.mjs",
     "watch": "npm-run-all --npm-path npm -p watch:cjs watch:esm",

diff --git a/packages/gatsby-plugin-image/package.json b/packages/gatsby-plugin-image/package.json
@@ -3,7 +3,7 @@
   "version": "3.0.0-next.3",
   "scripts": {
     "build": "npm-run-all --npm-path npm -s clean -p build:*",
-    "postbuild": "prepend-directive --files=dist/gatsby-image.browser.js,dist/gatsby-image.browser.modern.js --directive=\"client export\"",
+    "postbuild": "prepend-directive --files=dist/gatsby-image.browser.js,dist/gatsby-image.browser.modern.js --directive=\"use client\"",
     "build:gatsby-node": "tsc --jsx react --downlevelIteration true --skipLibCheck true --esModuleInterop true --outDir dist/ src/gatsby-node.ts src/babel-plugin-parse-static-images.ts src/resolver-utils.ts src/types.d.ts -d --declarationDir dist/src",
     "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --jsxFragment React.Fragment --no-compress --external=common-tags,react --no-sourcemap",
     "build:server": "microbundle -f cjs,es --jsx React.createElement --jsxFragment React.Fragment --define SERVER=true",

diff --git a/packages/gatsby-script/package.json b/packages/gatsby-script/package.json
@@ -16,7 +16,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "microbundle -f cjs,modern --jsx React.createElement && tsc --emitDeclarationOnly --declaration --declarationDir dist",
-    "postbuild": "prepend-directive --files=dist/index.js,dist/index.modern.mjs --directive=\"client export\"",
+    "postbuild": "prepend-directive --files=dist/index.js,dist/index.modern.mjs --directive=\"use client\"",
     "watch": "microbundle watch -f cjs,modern --jsx React.createElement --no-compress",
     "prepare": "cross-env NODE_ENV=production npm run clean && npm run build",
     "clean": "del-cli dist/*"

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/cjs-exports.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/cjs-exports.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 exports.a = {
   b: 1

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/cjs-module-exports.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/cjs-module-exports.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 // TODO: Handle, otherwise remove and document if we decide not to support or it's not supported by React's implementation
 

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-aggregation.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-aggregation.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 // TODO: Handle, otherwise remove and document if we decide not to support or it's not supported by React's implementation
 

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-declaration.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-declaration.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 export let a, b
 export var c, d

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-class-anonymous.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-class-anonymous.js
@@ -1,3 +1,3 @@
-"client export"
+"use client"
 
 export default class {}
diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-class-named.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-class-named.js
@@ -1,3 +1,3 @@
-"client export"
+"use client"
 
 export default class ClassName {}
diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-expression.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-expression.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 const a = 1
 

diff --git a/...ges/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-function-anonymous.js b/...ges/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-function-anonymous.js
@@ -1,3 +1,3 @@
-"client export"
+"use client"
 
 export default function () {}
diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-function-named.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-default-function-named.js
@@ -1,3 +1,3 @@
-"client export"
+"use client"
 
 export default function functionName() {}
diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-list.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/esm-list.js
@@ -1,4 +1,4 @@
-"client export"
+"use client"
 
 const a = 1, b = 2, c = 3
 

diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/no-client-export-no-export.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/no-client-export-no-export.js
@@ -1,3 +1,3 @@
 function noClientExport() {
-  return `No "client export" found in this file, and the function itself is not exported`
+  return `No "use client" found in this file, and the function itself is not exported`
 }
diff --git a/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/no-client-export.js b/packages/gatsby/src/utils/webpack/loaders/__tests__/fixtures/no-client-export.js
@@ -1,3 +1,3 @@
 export function noClientExport() {
-  return `No "client export" found in this file`
+  return `No "use client" found in this file`
 }
diff --git a/packages/gatsby/src/utils/webpack/loaders/partial-hydration-reference-loader.ts b/packages/gatsby/src/utils/webpack/loaders/partial-hydration-reference-loader.ts
@@ -36,7 +36,7 @@ function createDefaultReference(
 const partialHydrationReferenceLoader: LoaderDefinitionFunction<
   Record<string, unknown>
 > = async function partialHydrationReferenceLoader(content) {
-  if (!content.includes(`client export`)) {
+  if (!content.includes(`use client`)) {
     return content
   }
 
@@ -52,7 +52,7 @@ const partialHydrationReferenceLoader: LoaderDefinitionFunction<
     ExpressionStatement(plainAcornNode: Node) {
       const node = plainAcornNode as unknown as Directive
 
-      if (node.directive === `client export`) {
+      if (node.directive === `use client`) {
         hasClientExportDirective = true
       }
     },

diff --git a/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts b/packages/gatsby/src/utils/webpack/plugins/partial-hydration.ts
@@ -232,7 +232,7 @@ export class PartialHydrationPlugin {
             const hasClientExportDirective = ast.body.find(
               statement =>
                 statement.type === `ExpressionStatement` &&
-                (statement as IDirective).directive === `client export`
+                (statement as IDirective).directive === `use client`
             )
 
             const module = parser.state.module