vercel · ijjk · Oct 11, 2022 · Oct 11, 2022 · Oct 11, 2022
@@ -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.

@@ -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";
 

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

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

@@ -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

@@ -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()

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

@@ -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'

@@ -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.

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

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

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

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

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

@@ -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,

@@ -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.

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

@@ -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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 />

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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>

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

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

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

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

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

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

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

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

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

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