handle directives by traversing tokens

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-21.input.tsx

@@ -0,0 +1,7 @@
+/* this is a comment */
+'use client'
+export default function Page(props: {
+  params: any
+}): JSX.Element {
+  return <div {...props.params} />
+}

packages/next-codemod/transforms/__testfixtures__/next-async-request-api-dynamic-props/access-props-21.output.tsx

@@ -0,0 +1,9 @@
+/* this is a comment */
+'use client';
+import { use } from "react";
+export default function Page(props: {
+  params: Promise<any>
+}): JSX.Element {
+  const params = use(props.params);
+  return <div {...params} />;
+}

packages/next-codemod/transforms/lib/async-request-api/next-async-dynamic-api.ts

@@ -208,7 +208,7 @@ export function transformDynamicAPI(
       })
   }
 
-  const isClientComponent = determineClientDirective(root, j, source)
+  const isClientComponent = determineClientDirective(root)
 
   // Only transform the valid calls in server or shared components
   if (isClientComponent) return null

packages/next-codemod/transforms/lib/async-request-api/next-async-dynamic-prop.ts

@@ -651,7 +651,7 @@ export function transformDynamicProps(
     })
   }
 
-  const isClientComponent = determineClientDirective(root, j, source)
+  const isClientComponent = determineClientDirective(root)
 
   // Apply to `params` and `searchParams`
   processAsyncPropOfEntryFile(isClientComponent)

packages/next-codemod/transforms/lib/async-request-api/utils.ts

@@ -7,7 +7,6 @@ import type {
   ExportNamedDeclaration,
   FunctionDeclaration,
   FunctionExpression,
-  JSCodeshift,
 } from 'jscodeshift'
 
 export type FunctionScope =
@@ -103,46 +102,25 @@ export function isMatchedFunctionExported(
   return isNamedExport
 }
 
-export function determineClientDirective(
-  root: Collection<any>,
-  j: JSCodeshift,
-  source: string
-) {
-  const hasStringDirective =
-    root
-      .find(j.Literal)
-      .filter((path) => {
-        const expr = path.node
-
-        return (
-          expr.value === 'use client' && path.parentPath.node.type === 'Program'
-        )
-      })
-      .size() > 0
-
-  // 'use client';
-  const hasStringDirectiveWithSemicolon =
-    root
-      .find(j.StringLiteral)
-      .filter((path) => {
-        const expr = path.node
-        return (
-          expr.type === 'StringLiteral' &&
-          expr.value === 'use client' &&
-          path.parentPath.node.type === 'Program'
-        )
-      })
-      .size() > 0
-
-  if (hasStringDirective || hasStringDirectiveWithSemicolon) return true
-
-  // Since the client detection is not reliable with AST in jscodeshift,
-  // determine if 'use client' or "use client" is leading in the source code.
-  const trimmedSource = source.trim()
-  const containsClientDirective =
-    /^'use client'/.test(trimmedSource) || /^"use client"/g.test(trimmedSource)
+// directive is not parsed into AST, so we need to manually find it
+// by going through the tokens. Use the 1st string token as the directive
+export function determineClientDirective(root: Collection<any>) {
+  const { tokens } = root.get().node
+  let directive = undefined
+  for (const token of tokens) {
+    if (token.type === 'CommentBlock') {
+      continue
+    } else if (token.type?.label === 'string') {
+      // Skip 'use strict' directive
+      if (token.value === 'use strict') continue
+      directive = token.value
+      break
+    } else {
+      break
+    }
+  }
 
-  return containsClientDirective
+  return directive === 'use client'
 }
 
 export function isPromiseType(typeAnnotation) {