Client component directive: use client (#41333)

Replace `'client'` with `'use client'` as client directive for client
components in RSC

x-ref: [slack
thread](https://vercel.slack.com/archives/C035J346QQL/p1665435520907559)

Co-authored-by: JJ Kasper <jj@jjsweb.site>

packages/next-swc/crates/core/src/react_server_components.rs

@@ -94,7 +94,7 @@ impl<C: Comments> ReactServerComponents<C> {
                             Some(expr_stmt) => {
                                 match &*expr_stmt.expr {
                                     Expr::Lit(Lit::Str(Str { value, .. })) => {
-                                        if &**value == "client" {
+                                        if &**value == "use client" {
                                             is_client_entry = true;
 
                                             // Remove the directive.

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph/client-entry/input.js

@@ -6,17 +6,17 @@
  * This is a comment.
  */
 
-"client";
+"use client";
 
 // This is a comment.
 
 "foo";
 
-"client";
+"use client";
 
 import "fs"
 
-"client";
+"use client";
 
 "bar";
 

packages/next-swc/crates/core/tests/fixture/react-server-components/client-graph/client-entry/output.js

@@ -3,7 +3,7 @@
 // This is a comment.
 "foo";
 import "fs";
-"client";
+"use client";
 "bar";
 // This is a comment.
 1 + 1;

packages/next-swc/crates/core/tests/fixture/react-server-components/server-graph/client-entry/input.js

@@ -6,7 +6,7 @@
  * This is a comment.
  */
 
-"client";
+"use client";
 
 // This is a comment.
 

packages/next/build/webpack/loaders/next-app-loader.ts

@@ -182,9 +182,9 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{
   const result = `
     export ${treeCode}
 
-    export const AppRouter = require('next/dist/client/components/app-router.client.js').default
-    export const LayoutRouter = require('next/dist/client/components/layout-router.client.js').default
-    export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.client.js').default
+    export const AppRouter = require('next/dist/client/components/app-router.js').default
+    export const LayoutRouter = require('next/dist/client/components/layout-router.js').default
+    export const RenderFromTemplateContext = require('next/dist/client/components/render-from-template-context.js').default
 
     export const staticGenerationAsyncStorage = require('next/dist/client/components/static-generation-async-storage.js').staticGenerationAsyncStorage
     export const requestAsyncStorage = require('next/dist/client/components/request-async-storage.js').requestAsyncStorage

packages/next/client/app-next.js

@@ -2,8 +2,8 @@ import { appBootstrap } from './app-bootstrap'
 
 appBootstrap(() => {
   // Include app-router and layout-router in the main chunk
-  import('next/dist/client/components/app-router.client.js')
-  import('next/dist/client/components/layout-router.client.js')
+  import('next/dist/client/components/app-router.js')
+  import('next/dist/client/components/layout-router.js')
 
   const { hydrate } = require('./app-index')
   hydrate()

packages/next/client/components/app-router.client.tsx → packages/next/client/components/app-router.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import type { ReactNode } from 'react'
 import React, { useEffect, useMemo, useCallback } from 'react'

packages/next/client/components/layout-router.client.tsx → packages/next/client/components/layout-router.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React, {
   useContext,
@@ -27,7 +27,7 @@ import {
   TemplateContext,
   AppRouterContext,
 } from '../../shared/lib/app-router-context'
-import { fetchServerResponse } from './app-router.client'
+import { fetchServerResponse } from './app-router'
 import { createInfinitePromise } from './infinite-promise'
 import { ErrorBoundary } from './error-boundary'
 import { matchSegment } from './match-segments'

packages/next/client/components/reducer.ts

@@ -8,7 +8,7 @@ import type {
 } from '../../server/app-render'
 // TODO-APP: change to React.use once it becomes stable
 import { matchSegment } from './match-segments'
-import { fetchServerResponse } from './app-router.client'
+import { fetchServerResponse } from './app-router'
 
 /**
  * Create data fetching record for Promise.

packages/next/client/components/render-from-template-context.client.tsx → packages/next/client/components/render-from-template-context.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React, { useContext } from 'react'
 import { TemplateContext } from '../../shared/lib/app-router-context'

packages/next/client/future/image.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React, {
   useRef,

packages/next/client/image.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React, {
   useRef,

packages/next/client/link.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React from 'react'
 import { UrlObject } from 'url'

packages/next/client/script.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import ReactDOM from 'react-dom'
 import React, { useEffect, useContext, useRef } from 'react'

packages/next/server/app-render.tsx

@@ -808,9 +808,9 @@ export async function renderToHTMLOrFlight(
     stripInternalQueries(query)
 
     const LayoutRouter =
-      ComponentMod.LayoutRouter as typeof import('../client/components/layout-router.client').default
+      ComponentMod.LayoutRouter as typeof import('../client/components/layout-router').default
     const RenderFromTemplateContext =
-      ComponentMod.RenderFromTemplateContext as typeof import('../client/components/render-from-template-context.client').default
+      ComponentMod.RenderFromTemplateContext as typeof import('../client/components/render-from-template-context').default
 
     /**
      * Server Context is specifically only available in Server Components.
@@ -1337,7 +1337,7 @@ export async function renderToHTMLOrFlight(
 
     // AppRouter is provided by next-app-loader
     const AppRouter =
-      ComponentMod.AppRouter as typeof import('../client/components/app-router.client').default
+      ComponentMod.AppRouter as typeof import('../client/components/app-router').default
 
     let serverComponentsInlinedTransformStream: TransformStream<
       Uint8Array,

packages/next/shared/lib/app-router-context.ts

@@ -12,7 +12,7 @@ export type CacheNode = {
    * In-flight request for this node.
    */
   data: ReturnType<
-    typeof import('../../client/components/app-router.client').fetchServerResponse
+    typeof import('../../client/components/app-router').fetchServerResponse
   > | null
   /**
    * React Component for this node.

packages/next/shared/lib/head.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import React, { useContext } from 'react'
 import Effect from './side-effect'

packages/next/taskfile-swc.js

@@ -113,10 +113,10 @@ module.exports = function (task) {
       const output = yield transform(source, options)
       const ext = path.extname(file.base)
 
-      // Make sure the output content keeps the `"client"` directive.
+      // Make sure the output content keeps the `"use client"` directive.
       // TODO: Remove this once SWC fixes the issue.
-      if (/^['"]client['"]/.test(source)) {
-        output.code = '"client";\n' + output.code
+      if (/^['"]use client['"]/.test(source)) {
+        output.code = '"use client";\n' + output.code
       }
 
       // Replace `.ts|.tsx` with `.js` in files with an extension

test/e2e/app-dir/app-edge/app/app-edge/layout.tsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 // TODO-APP: support typing for useSelectedLayoutSegment
 // @ts-ignore

test/e2e/app-dir/app/app/client-component-route/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useState, useEffect } from 'react'
 

test/e2e/app-dir/app/app/client-nested/layout.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useState, useEffect } from 'react'
 

test/e2e/app-dir/app/app/client-with-errors/get-server-side-props/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 // export function getServerSideProps() { { props: {} } }
 

test/e2e/app-dir/app/app/client-with-errors/get-static-props/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 // export function getStaticProps() { return { props: {} }}
 

test/e2e/app-dir/app/app/css/css-client/layout.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import './client-layout.css'
 

test/e2e/app-dir/app/app/css/css-client/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import './client-page.css'
 

test/e2e/app-dir/app/app/css/css-nested/layout.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import './style.css'
 import styles from './style.module.css'

test/e2e/app-dir/app/app/css/css-nested/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 export default function Page() {
   return null

test/e2e/app-dir/app/app/dashboard/client-comp-client.jsx

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import styles from './client-comp.module.css'
 

test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/dynamic-client.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import dynamic from 'next/dynamic'
 

test/e2e/app-dir/app/app/dashboard/index/dynamic-imports/react-lazy-client.js

@@ -1,11 +1,11 @@
-'client'
+'use client'
 
 import { useState, lazy } from 'react'
 
 const Lazy = lazy(() => import('../text-lazy-client.js'))
 
 export function LazyClientComponent() {
-  let [state] = useState('client')
+  let [state] = useState('use client')
   return (
     <>
       <Lazy />

test/e2e/app-dir/app/app/dashboard/index/text-dynamic-client.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useState } from 'react'
 import styles from './dynamic.module.css'

test/e2e/app-dir/app/app/dashboard/index/text-lazy-client.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import styles from './lazy.module.css'
 

test/e2e/app-dir/app/app/error/client-component/error.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 export default function ErrorBoundary({ error, reset }) {
   return (

test/e2e/app-dir/app/app/error/client-component/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useState } from 'react'
 

test/e2e/app-dir/app/app/error/global-error-boundary/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useState } from 'react'
 

test/e2e/app-dir/app/app/error/ssr-error-client-component/client-component.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 export default function Page() {
   throw new Error('Error during SSR')

test/e2e/app-dir/app/app/hooks/use-cookies/client/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { cookies } from 'next/dist/client/components/hooks-server'
 

test/e2e/app-dir/app/app/hooks/use-headers/client/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { headers } from 'next/dist/client/components/hooks-server'
 

test/e2e/app-dir/app/app/hooks/use-layout-segments/server/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 // TODO-APP: enable once test is not skipped.
 // import { useLayoutSegments } from 'next/dist/client/components/hooks-client'
 

test/e2e/app-dir/app/app/hooks/use-pathname/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { usePathname } from 'next/dist/client/components/hooks-client'
 

test/e2e/app-dir/app/app/hooks/use-preview-data/client/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { previewData } from 'next/dist/client/components/hooks-server'
 

test/e2e/app-dir/app/app/hooks/use-router/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useRouter } from 'next/dist/client/components/hooks-client'
 

test/e2e/app-dir/app/app/hooks/use-router/sub-page/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 export default function Page() {
   return <h1 id="router-sub-page">hello from /hooks/use-router/sub-page</h1>

test/e2e/app-dir/app/app/hooks/use-search-params/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useSearchParams } from 'next/dist/client/components/hooks-client'
 

test/e2e/app-dir/app/app/hooks/use-selected-layout-segment/server/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 // TODO-APP: enable once test is not skipped.
 // import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'
 

test/e2e/app-dir/app/app/navigation/link.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useRouter } from 'next/dist/client/components/hooks-client'
 import React from 'react'

test/e2e/app-dir/app/app/nested-navigation/CategoryNav.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { TabNavItem } from './TabNavItem'
 import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'

test/e2e/app-dir/app/app/nested-navigation/[categorySlug]/SubCategoryNav.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { TabNavItem } from '../TabNavItem'
 import { useSelectedLayoutSegment } from 'next/dist/client/components/hooks-client'

test/e2e/app-dir/app/app/not-found/client-side/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { notFound } from 'next/dist/client/components/not-found'
 import React from 'react'

test/e2e/app-dir/app/app/not-found/clientcomponent/client-component.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 import { notFound } from 'next/dist/client/components/not-found'
 
 export default function ClientComp() {

test/e2e/app-dir/app/app/old-router/client-router.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { useRouter, withRouter } from 'next/router'
 import IsNull from './is-null'

test/e2e/app-dir/app/app/param-and-query/[slug]/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 export default function Page({ params, searchParams }) {
   return (

test/e2e/app-dir/app/app/redirect/client-side/page.js

@@ -1,4 +1,4 @@
-'client'
+'use client'
 
 import { redirect } from 'next/dist/client/components/redirect'
 import React from 'react'