Repository: wakujs/waku
Pull request #1308 (2025-03-14 06:21:10)

generate source maps in plugins
This may slow down a bit though.

codesandbox-ci[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/wakujs/waku/pr/1308/builds/600238) or the icon next to each commit SHA.

Patch:
diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts
index 69e9c3ef..88e9dc50 100644
--- a/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts
+++ b/packages/waku/src/lib/plugins/vite-plugin-rsc-rsdw.ts
@@ -1,4 +1,5 @@
 import type { Plugin } from 'vite';
+import * as swc from '@swc/core';
 
 const patchRsdw = (code: string, type: 'SERVER' | 'CLIENT') => {
   code = code.replace(
@@ -68,7 +69,9 @@ export function rscRsdwPlugin(): Plugin {
           '/react-server-dom-webpack_server__edge.js',
         ].some((suffix) => file!.endsWith(suffix))
       ) {
-        return patchRsdw(code, 'SERVER');
+        return swc.transformSync(patchRsdw(code, 'SERVER'), {
+          sourceMaps: true,
+        });
       }
       if (
         [
@@ -80,7 +83,9 @@ export function rscRsdwPlugin(): Plugin {
           '/react-server-dom-webpack_client__edge.js',
         ].some((suffix) => file!.endsWith(suffix))
       ) {
-        return patchRsdw(code, 'CLIENT');
+        return swc.transformSync(patchRsdw(code, 'CLIENT'), {
+          sourceMaps: true,
+        });
       }
       if (code.includes('function requireAsyncModule(id)')) {
         throw new Error('rscRsdwPlugin: Untransformed file: ' + file);
diff --git a/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts b/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts
index a443fc32..8d294ac0 100644
--- a/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts
+++ b/packages/waku/src/lib/plugins/vite-plugin-rsc-transform.ts
@@ -68,7 +68,10 @@ import { unstable_callServerRsc as callServerRsc } from 'waku/minimal/client';
 export ${name === 'default' ? name : `const ${name} =`} createServerReference('${getServerId()}#${name}', callServerRsc);
 `;
     }
-    return newCode;
+    return swc.transformSync(newCode, {
+      jsc: { parser: parseOpts(ext), target: 'esnext' },
+      sourceMaps: true,
+    });
   }
 };
 
@@ -100,7 +103,10 @@ export ${name === 'default' ? name : `const ${name} =`} () => {
 };
 `;
     }
-    return newCode;
+    return swc.transformSync(newCode, {
+      jsc: { parser: parseOpts(ext), target: 'esnext' },
+      sourceMaps: true,
+    });
   }
 };
 
@@ -773,15 +779,17 @@ import { registerClientReference as __waku_registerClientReference } from 'react
 export ${name === 'default' ? name : `const ${name} =`} __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: ${getClientId()}#${name}'); }, '${getClientId()}', '${name}');
 `;
     }
-    return newCode;
+    return swc.transformSync(newCode, {
+      jsc: { parser: parseOpts(ext), target: 'esnext' },
+      sourceMaps: true,
+    });
   }
   let transformed =
     hasUseServer && transformExportedServerFunctions(mod, getServerId);
   transformed = transformInlineServerFunctions(mod, getServerId) || transformed;
   if (transformed) {
     mod.body.splice(findLastImportIndex(mod), 0, ...serverInitCode);
-    const newCode = swc.printSync(mod).code;
-    return newCode;
+    return swc.printSync(mod, { sourceMaps: true });
   }
 };
 


Test patch:
diff --git a/packages/waku/tests/vite-plugin-rsc-transform-internals.test.ts b/packages/waku/tests/vite-plugin-rsc-transform-internals.test.ts
index 0debb656..a99cb7fb 100644
--- a/packages/waku/tests/vite-plugin-rsc-transform-internals.test.ts
+++ b/packages/waku/tests/vite-plugin-rsc-transform-internals.test.ts
@@ -12,7 +12,7 @@ describe('internal transform function for server environment', () => {
       code: string,
       id: string,
       options?: { ssr?: boolean },
-    ): Promise<string | undefined>;
+    ): Promise<{ code: string; map?: string } | undefined>;
   };
 
   test('no transformation', async () => {
@@ -75,31 +75,36 @@ export default function App() {
   );
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
-        "
-        import { registerClientReference as __waku_registerClientReference } from 'react-server-dom-webpack/server.edge';
-        import { atom } from 'jotai/vanilla';
-        const initialCount = 1;
-        const TWO = 2;
-        function double(x: number) {
-            return x * TWO;
-        }
-        export const countAtom = __waku_registerClientReference(atom(double(initialCount)), "/src/App.tsx", "countAtom");
-
-        export const Empty = __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#Empty'); }, '/src/App.tsx', 'Empty');
-
-        export const Greet = __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#Greet'); }, '/src/App.tsx', 'Greet');
-
-        export const MyComponent = __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#MyComponent'); }, '/src/App.tsx', 'MyComponent');
-
-        export const useMyContext = __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#useMyContext'); }, '/src/App.tsx', 'useMyContext');
-
-        export const NAME = __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#NAME'); }, '/src/App.tsx', 'NAME');
-
-        export default __waku_registerClientReference(() => { throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#default'); }, '/src/App.tsx', 'default');
-        "
-      `);
+      "import { registerClientReference as __waku_registerClientReference } from 'react-server-dom-webpack/server.edge';
+      import { atom } from 'jotai/vanilla';
+      const initialCount = 1;
+      const TWO = 2;
+      function double(x) {
+          return x * TWO;
+      }
+      export const countAtom = __waku_registerClientReference(atom(double(initialCount)), "/src/App.tsx", "countAtom");
+      export const Empty = __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#Empty');
+      }, '/src/App.tsx', 'Empty');
+      export const Greet = __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#Greet');
+      }, '/src/App.tsx', 'Greet');
+      export const MyComponent = __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#MyComponent');
+      }, '/src/App.tsx', 'MyComponent');
+      export const useMyContext = __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#useMyContext');
+      }, '/src/App.tsx', 'useMyContext');
+      export const NAME = __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#NAME');
+      }, '/src/App.tsx', 'NAME');
+      export default __waku_registerClientReference(()=>{
+          throw new Error('It is not possible to invoke a client function from the server: /src/App.tsx#default');
+      }, '/src/App.tsx', 'default');
+      "
+    `);
   });
 
   test('top-level use server', async () => {
@@ -120,7 +125,7 @@ export default async function() {
   return Date.now();
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         const privateFunction = ()=>'Secret';
@@ -156,7 +161,7 @@ export function ServerProvider({ children }: { children: ReactNode }) {
   return <AI>{children}</AI>;
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import type { ReactNode } from 'react';
         import { createAI } from 'ai/rsc';
@@ -201,7 +206,7 @@ export async function exportedAction() {
 
 export default async () => null;
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { InternalProvider } from './shared.js';
         import { jsx } from 'react/jsx-runtime';
@@ -235,7 +240,7 @@ export default function App({ a }) {
   return <Hello log={log} />;
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         export async function __waku_func1(a, mesg) {
@@ -261,7 +266,7 @@ export default function App() {
   return <Hello log={log} />;
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         export const __waku_func1 = __waku_registerServerReference(async function(rand, mesg, rand) {
@@ -287,7 +292,7 @@ export default function App() {
   return <Hello log={log} />;
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         export const __waku_func1 = __waku_registerServerReference(async (mesg)=>{
@@ -312,7 +317,7 @@ export default function App() {
   }} />;
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         export const __waku_func1 = __waku_registerServerReference((mesg)=>{
@@ -359,7 +364,7 @@ export default async function(mesg) {
   console.log(mesg);
 }
 `;
-    expect(await transform(code, '/src/App.tsx', { ssr: true }))
+    expect((await transform(code, '/src/App.tsx', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
         "import { registerServerReference as __waku_registerServerReference } from 'react-server-dom-webpack/server.edge';
         export const __waku_func1 = __waku_registerServerReference(async (mesg)=>{
@@ -399,7 +404,7 @@ describe('internal transform function for client environment', () => {
       code: string,
       id: string,
       options?: { ssr?: boolean },
-    ): Promise<string | undefined>;
+    ): Promise<{ code: string; map?: string } | undefined>;
   };
 
   test('no transformation', async () => {
@@ -437,17 +442,13 @@ export default async function log4(mesg) {
   console.log(mesg);
 }
 `;
-    expect(await transform(code, '/src/func.ts')).toMatchInlineSnapshot(`
-      "
-      import { createServerReference } from 'react-server-dom-webpack/client';
+    expect((await transform(code, '/src/func.ts'))?.code)
+      .toMatchInlineSnapshot(`
+      "import { createServerReference } from 'react-server-dom-webpack/client';
       import { unstable_callServerRsc as callServerRsc } from 'waku/minimal/client';
-
       export const log1 = createServerReference('/src/func.ts#log1', callServerRsc);
-
       export const log2 = createServerReference('/src/func.ts#log2', callServerRsc);
-
       export const log3 = createServerReference('/src/func.ts#log3', callServerRsc);
-
       export default createServerReference('/src/func.ts#default', callServerRsc);
       "
     `);
@@ -465,11 +466,10 @@ export async function log(mesg) {
   console.log(mesg);
 }
 `;
-    expect(await transform(code, '/src/func.ts', { ssr: true }))
+    expect((await transform(code, '/src/func.ts', { ssr: true }))?.code)
       .toMatchInlineSnapshot(`
-      "
-      export const log = () => {
-        throw new Error('You cannot call server functions during SSR');
+      "export const log = ()=>{
+          throw new Error('You cannot call server functions during SSR');
       };
       "
     `);