fix(rsc): fix cjs transform to preserve module.exports on require side and allow exports assignment + expose cjsModuleRunnerPlugin (#833)

Author: hi-ogawa

packages/plugin-rsc/src/transforms/cjs.test.ts

@@ -22,7 +22,7 @@ describe(transformCjsToEsm, () => {
 exports.ok = true;
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
-      "const exports = {}; const module = { exports };
+      "let exports = {}; const module = { exports };
       exports.ok = true;
       "
     `)
@@ -37,11 +37,11 @@ if (true) {
 }
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
-      "const exports = {}; const module = { exports };
+      "let exports = {}; const module = { exports };
       if (true) {
-        module.exports = (await import('./cjs/use-sync-external-store.production.js'));
+        module.exports = ((await import('./cjs/use-sync-external-store.production.js')).default);
       } else {
-        module.exports = (await import('./cjs/use-sync-external-store.development.js'));
+        module.exports = ((await import('./cjs/use-sync-external-store.development.js')).default);
       }
       "
     `)
@@ -56,9 +56,9 @@ if (true) {
 })()
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
-      "const exports = {}; const module = { exports };
-      const __cjs_to_esm_hoist_0 = await import("react");
-      const __cjs_to_esm_hoist_1 = await import("react-dom");
+      "let exports = {}; const module = { exports };
+      const __cjs_to_esm_hoist_0 = (await import("react")).default;
+      const __cjs_to_esm_hoist_1 = (await import("react-dom")).default;
       "production" !== process.env.NODE_ENV && (function() { 
         var React = __cjs_to_esm_hoist_0;
         var ReactDOM = __cjs_to_esm_hoist_1;
@@ -81,13 +81,13 @@ function test() {
 }
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
-      "const exports = {}; const module = { exports };
-      const __cjs_to_esm_hoist_0 = await import("te" + "st");
-      const __cjs_to_esm_hoist_1 = await import("test");
-      const __cjs_to_esm_hoist_2 = await import("test");
-      const x1 = (await import("te" + "st"));
-      const x2 = (await import("test"))().test;
-      console.log((await import("test")))
+      "let exports = {}; const module = { exports };
+      const __cjs_to_esm_hoist_0 = (await import("te" + "st")).default;
+      const __cjs_to_esm_hoist_1 = (await import("test")).default;
+      const __cjs_to_esm_hoist_2 = (await import("test")).default;
+      const x1 = ((await import("te" + "st")).default);
+      const x2 = ((await import("test")).default)().test;
+      console.log(((await import("test")).default))
 
       function test() {
         const y1 = __cjs_to_esm_hoist_0;
@@ -106,7 +106,7 @@ function test() {
 }
 `
     expect(await testTransform(input)).toMatchInlineSnapshot(`
-      "const exports = {}; const module = { exports };
+      "let exports = {}; const module = { exports };
       {
         const require = () => {};
         require("test");
@@ -150,6 +150,11 @@ export default module.exports;
           "a": "a",
           "b": "b",
         },
+        "depExports": {},
+        "depFn": [Function],
+        "depFnRequire": {
+          "value": 3,
+        },
         "depNamespace": {
           "a": "a",
           "b": "b",
@@ -158,6 +163,7 @@ export default module.exports;
             "b": "b",
           },
         },
+        "depPrimitive": "[ok]",
       }
     `)
   })

packages/plugin-rsc/src/transforms/cjs.ts

@@ -41,16 +41,18 @@ export function transformCjsToEsm(
         if (isTopLevel) {
           // top-level scope `require` to dynamic import
           // (this allows handling react development/production re-export within top-level if branch)
-          output.update(node.start, node.callee.end, '(await import')
-          output.appendRight(node.end, ')')
+          output.update(node.start, node.callee.end, '((await import')
+          output.appendRight(node.end, ').default)')
         } else {
           // hoist non top-level `require` to top-level
           const hoisted = `__cjs_to_esm_hoist_${hoistIndex}`
           const importee = code.slice(
             node.arguments[0]!.start,
             node.arguments[0]!.end,
           )
-          hoistedCodes.push(`const ${hoisted} = await import(${importee});\n`)
+          hoistedCodes.push(
+            `const ${hoisted} = (await import(${importee})).default;\n`,
+          )
           output.update(node.start, node.end, hoisted)
           hoistIndex++
         }
@@ -63,6 +65,7 @@ export function transformCjsToEsm(
   for (const hoisted of hoistedCodes.reverse()) {
     output.prepend(hoisted)
   }
-  output.prepend(`const exports = {}; const module = { exports };\n`)
+  // https://nodejs.org/docs/v22.19.0/api/modules.html#exports-shortcut
+  output.prepend(`let exports = {}; const module = { exports };\n`)
   return { output }
 }

packages/plugin-rsc/src/transforms/fixtures/cjs/entry.mjs

@@ -1,3 +1,14 @@
 import depDefault from './dep1.cjs'
 import * as depNamespace from './dep2.cjs'
-export { depDefault, depNamespace }
+import depFn from './function.cjs'
+import depPrimitive from './primitive.cjs'
+import depExports from './exports.cjs'
+import depFnRequire from './function-require.cjs'
+export {
+  depDefault,
+  depNamespace,
+  depFn,
+  depPrimitive,
+  depExports,
+  depFnRequire,
+}

packages/plugin-rsc/src/transforms/fixtures/cjs/exports.cjs

@@ -0,0 +1 @@
+exports = '[not-exports]'

packages/plugin-rsc/src/transforms/fixtures/cjs/function-require.cjs

@@ -0,0 +1,2 @@
+const lib = require('./function.cjs')
+exports.value = lib(1, 2)

packages/plugin-rsc/src/transforms/fixtures/cjs/function.cjs

@@ -0,0 +1 @@
+module.exports = (x, y) => x + y

packages/plugin-rsc/src/transforms/fixtures/cjs/primitive.cjs

@@ -0,0 +1 @@
+module.exports = '[ok]'

packages/plugin-rsc/tsdown.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
     'src/extra/ssr.tsx',
     'src/extra/rsc.tsx',
     'src/transforms/index.ts',
+    'src/plugins/cjs.ts',
     'src/rsc-html-stream/ssr.ts',
     'src/rsc-html-stream/browser.ts',
     'src/utils/rpc.ts',