fix(shadcn): fix transformRsc to account for ' (#5518)

* fix(shadcn): fix transformRsc to account for '

* chore: add changeset

---------

Co-authored-by: shadcn <m@shadcn.com>

Author: bcorbold

.changeset/friendly-mangos-fetch.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix transofmrRsc for handling use client

packages/shadcn/src/utils/transformers/transform-rsc.ts

@@ -1,14 +1,16 @@
 import { Transformer } from "@/src/utils/transformers"
 import { SyntaxKind } from "ts-morph"
 
+const directiveRegex = /^["']use client["']$/g
+
 export const transformRsc: Transformer = async ({ sourceFile, config }) => {
   if (config.rsc) {
     return sourceFile
   }
 
   // Remove "use client" from the top of the file.
   const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement)
-  if (first?.getText() === `"use client"`) {
+  if (first && directiveRegex.test(first.getText())) {
     first.remove()
   }
 

packages/shadcn/test/utils/__snapshots__/transform-rsc.test.ts.snap

@@ -29,3 +29,27 @@ import { Foo } from "bar"
 "use client"
     "
 `;
+
+exports[`transform rsc 5`] = `
+"'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    "
+`;
+
+exports[`transform rsc 6`] = `
+"import * as React from 'react'
+import { Foo } from 'bar'
+    "
+`;
+
+exports[`transform rsc 7`] = `
+"'use foo'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+
+'use client'
+    "
+`;

packages/shadcn/test/utils/transform-rsc.test.ts

@@ -62,4 +62,52 @@ import { Foo } from "bar"
       },
     })
   ).toMatchSnapshot()
+
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    `,
+      config: {
+        tsx: true,
+        rsc: true,
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use client'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+    `,
+      config: {
+        tsx: true,
+        rsc: false,
+      },
+    })
+  ).toMatchSnapshot()
+
+  expect(
+    await transform({
+      filename: "test.ts",
+      raw: `'use foo'
+
+      import * as React from 'react'
+import { Foo } from 'bar'
+
+'use client'
+    `,
+      config: {
+        tsx: true,
+        rsc: false,
+      },
+    })
+  ).toMatchSnapshot()
 })