react-server-dom-webpack 19.0.0-rc.0 → 19.0.0-rc.1

package/esm/react-server-dom-webpack-node-loader.production.js

@@ -9,6 +9,8 @@
  */
 
 import * as acorn from 'acorn-loose';
+import readMappings from 'webpack-sources/lib/helpers/readMappings.js';
+import createMappingsSerializer from 'webpack-sources/lib/helpers/createMappingsSerializer.js';
 
 const assign = Object.assign;
 
@@ -39,47 +41,67 @@ async function getSource(url, context, defaultGetSource) {
   return defaultGetSource(url, context, defaultGetSource);
 }
 
-function addLocalExportedNames(names, node) {
+function addExportedEntry(exportedEntries, localNames, localName, exportedName, type, loc) {
+  if (localNames.has(localName)) {
+    // If the same local name is exported more than once, we only need one of the names.
+    return;
+  }
+
+  exportedEntries.push({
+    localName,
+    exportedName,
+    type,
+    loc,
+    originalLine: -1,
+    originalColumn: -1,
+    originalSource: -1,
+    nameIndex: -1
+  });
+}
+
+function addLocalExportedNames(exportedEntries, localNames, node) {
   switch (node.type) {
     case 'Identifier':
-      names.set(node.name, node.name);
+      addExportedEntry(exportedEntries, localNames, node.name, node.name, null, node.loc);
       return;
 
     case 'ObjectPattern':
-      for (let i = 0; i < node.properties.length; i++) addLocalExportedNames(names, node.properties[i]);
+      for (let i = 0; i < node.properties.length; i++) addLocalExportedNames(exportedEntries, localNames, node.properties[i]);
 
       return;
 
     case 'ArrayPattern':
       for (let i = 0; i < node.elements.length; i++) {
         const element = node.elements[i];
-        if (element) addLocalExportedNames(names, element);
+        if (element) addLocalExportedNames(exportedEntries, localNames, element);
       }
 
       return;
 
     case 'Property':
-      addLocalExportedNames(names, node.value);
+      addLocalExportedNames(exportedEntries, localNames, node.value);
       return;
 
     case 'AssignmentPattern':
-      addLocalExportedNames(names, node.left);
+      addLocalExportedNames(exportedEntries, localNames, node.left);
       return;
 
     case 'RestElement':
-      addLocalExportedNames(names, node.argument);
+      addLocalExportedNames(exportedEntries, localNames, node.argument);
       return;
 
     case 'ParenthesizedExpression':
-      addLocalExportedNames(names, node.expression);
+      addLocalExportedNames(exportedEntries, localNames, node.expression);
       return;
   }
 }
 
-function transformServerModule(source, body, url, loader) {
-  // If the same local name is exported more than once, we only need one of the names.
-  const localNames = new Map();
-  const localTypes = new Map();
+function transformServerModule(source, program, url, sourceMap, loader) {
+  const body = program.body; // This entry list needs to be in source location order.
+
+  const exportedEntries = []; // Dedupe set.
+
+  const localNames = new Set();
 
   for (let i = 0; i < body.length; i++) {
     const node = body[i];
@@ -91,11 +113,10 @@ function transformServerModule(source, body, url, loader) {
 
       case 'ExportDefaultDeclaration':
         if (node.declaration.type === 'Identifier') {
-          localNames.set(node.declaration.name, 'default');
+          addExportedEntry(exportedEntries, localNames, node.declaration.name, 'default', null, node.declaration.loc);
         } else if (node.declaration.type === 'FunctionDeclaration') {
           if (node.declaration.id) {
-            localNames.set(node.declaration.id.name, 'default');
-            localTypes.set(node.declaration.id.name, 'function');
+            addExportedEntry(exportedEntries, localNames, node.declaration.id.name, 'default', 'function', node.declaration.id.loc);
           }
         }
 
@@ -107,15 +128,11 @@ function transformServerModule(source, body, url, loader) {
             const declarations = node.declaration.declarations;
 
             for (let j = 0; j < declarations.length; j++) {
-              addLocalExportedNames(localNames, declarations[j].id);
+              addLocalExportedNames(exportedEntries, localNames, declarations[j].id);
             }
           } else {
             const name = node.declaration.id.name;
-            localNames.set(name, name);
-
-            if (node.declaration.type === 'FunctionDeclaration') {
-              localTypes.set(name, 'function');
-            }
+            addExportedEntry(exportedEntries, localNames, name, name, node.declaration.type === 'FunctionDeclaration' ? 'function' : null, node.declaration.id.loc);
           }
         }
 
@@ -124,7 +141,7 @@ function transformServerModule(source, body, url, loader) {
 
           for (let j = 0; j < specifiers.length; j++) {
             const specifier = specifiers[j];
-            localNames.set(specifier.local.name, specifier.exported.name);
+            addExportedEntry(exportedEntries, localNames, specifier.local.name, specifier.exported.name, null, specifier.local.loc);
           }
         }
 
@@ -132,22 +149,159 @@ function transformServerModule(source, body, url, loader) {
     }
   }
 
-  if (localNames.size === 0) {
-    return source;
-  }
+  let mappings = sourceMap && typeof sourceMap.mappings === 'string' ? sourceMap.mappings : '';
+  let newSrc = source;
+
+  if (exportedEntries.length > 0) {
+    let lastSourceIndex = 0;
+    let lastOriginalLine = 0;
+    let lastOriginalColumn = 0;
+    let lastNameIndex = 0;
+    let sourceLineCount = 0;
+    let lastMappedLine = 0;
+
+    if (sourceMap) {
+      // We iterate source mapping entries and our matched exports in parallel to source map
+      // them to their original location.
+      let nextEntryIdx = 0;
+      let nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+      let nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+      readMappings(mappings, (generatedLine, generatedColumn, sourceIndex, originalLine, originalColumn, nameIndex) => {
+        if (generatedLine > nextEntryLine || generatedLine === nextEntryLine && generatedColumn > nextEntryColumn) {
+          // We're past the entry which means that the best match we have is the previous entry.
+          if (lastMappedLine === nextEntryLine) {
+            // Match
+            exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+            exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+            exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+            exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+          }
+
+          nextEntryIdx++;
+
+          if (nextEntryIdx < exportedEntries.length) {
+            nextEntryLine = exportedEntries[nextEntryIdx].loc.start.line;
+            nextEntryColumn = exportedEntries[nextEntryIdx].loc.start.column;
+          } else {
+            nextEntryLine = -1;
+            nextEntryColumn = -1;
+          }
+        }
+
+        lastMappedLine = generatedLine;
+
+        if (sourceIndex > -1) {
+          lastSourceIndex = sourceIndex;
+        }
+
+        if (originalLine > -1) {
+          lastOriginalLine = originalLine;
+        }
+
+        if (originalColumn > -1) {
+          lastOriginalColumn = originalColumn;
+        }
+
+        if (nameIndex > -1) {
+          lastNameIndex = nameIndex;
+        }
+      });
+
+      if (nextEntryIdx < exportedEntries.length) {
+        if (lastMappedLine === nextEntryLine) {
+          // Match
+          exportedEntries[nextEntryIdx].originalLine = lastOriginalLine;
+          exportedEntries[nextEntryIdx].originalColumn = lastOriginalColumn;
+          exportedEntries[nextEntryIdx].originalSource = lastSourceIndex;
+          exportedEntries[nextEntryIdx].nameIndex = lastNameIndex;
+        }
+      }
+
+      for (let lastIdx = mappings.length - 1; lastIdx >= 0 && mappings[lastIdx] === ';'; lastIdx--) {
+        // If the last mapped lines don't contain any segments, we don't get a callback from readMappings
+        // so we need to pad the number of mapped lines, with one for each empty line.
+        lastMappedLine++;
+      }
+
+      sourceLineCount = program.loc.end.line;
+
+      if (sourceLineCount < lastMappedLine) {
+        throw new Error('The source map has more mappings than there are lines.');
+      } // If the original source string had more lines than there are mappings in the source map.
+      // Add some extra padding of unmapped lines so that any lines that we add line up.
 
-  let newSrc = source + '\n\n;';
-  newSrc += 'import {registerServerReference} from "react-server-dom-webpack/server";\n';
-  localNames.forEach(function (exported, local) {
-    if (localTypes.get(local) !== 'function') {
-      // We first check if the export is a function and if so annotate it.
-      newSrc += 'if (typeof ' + local + ' === "function") ';
+
+      for (let extraLines = sourceLineCount - lastMappedLine; extraLines > 0; extraLines--) {
+        mappings += ';';
+      }
+    } else {
+      // If a file doesn't have a source map then we generate a blank source map that just
+      // contains the original content and segments pointing to the original lines.
+      sourceLineCount = 1;
+      let idx = -1;
+
+      while ((idx = source.indexOf('\n', idx + 1)) !== -1) {
+        sourceLineCount++;
+      }
+
+      mappings = 'AAAA' + ';AACA'.repeat(sourceLineCount - 1);
+      sourceMap = {
+        version: 3,
+        sources: [url],
+        sourcesContent: [source],
+        mappings: mappings,
+        sourceRoot: ''
+      };
+      lastSourceIndex = 0;
+      lastOriginalLine = sourceLineCount;
+      lastOriginalColumn = 0;
+      lastNameIndex = -1;
+      lastMappedLine = sourceLineCount;
+
+      for (let i = 0; i < exportedEntries.length; i++) {
+        // Point each entry to original location.
+        const entry = exportedEntries[i];
+        entry.originalSource = 0;
+        entry.originalLine = entry.loc.start.line; // We use column zero since we do the short-hand line-only source maps above.
+
+        entry.originalColumn = 0; // entry.loc.start.column;
+      }
     }
 
-    newSrc += 'registerServerReference(' + local + ',';
-    newSrc += JSON.stringify(url) + ',';
-    newSrc += JSON.stringify(exported) + ');\n';
-  });
+    newSrc += '\n\n;';
+    newSrc += 'import {registerServerReference} from "react-server-dom-webpack/server";\n';
+
+    if (mappings) {
+      mappings += ';;';
+    }
+
+    const createMapping = createMappingsSerializer(); // Create an empty mapping pointing to where we last left off to reset the counters.
+
+    let generatedLine = 1;
+    createMapping(generatedLine, 0, lastSourceIndex, lastOriginalLine, lastOriginalColumn, lastNameIndex);
+
+    for (let i = 0; i < exportedEntries.length; i++) {
+      const entry = exportedEntries[i];
+      generatedLine++;
+
+      if (entry.type !== 'function') {
+        // We first check if the export is a function and if so annotate it.
+        newSrc += 'if (typeof ' + entry.localName + ' === "function") ';
+      }
+
+      newSrc += 'registerServerReference(' + entry.localName + ',';
+      newSrc += JSON.stringify(url) + ',';
+      newSrc += JSON.stringify(entry.exportedName) + ');\n';
+      mappings += createMapping(generatedLine, 0, entry.originalSource, entry.originalLine, entry.originalColumn, entry.nameIndex);
+    }
+  }
+
+  if (sourceMap) {
+    // Override with an new mappings and serialize an inline source map.
+    sourceMap.mappings = mappings;
+    newSrc += '//# sourceMappingURL=data:application/json;charset=utf-8;base64,' + Buffer.from(JSON.stringify(sourceMap)).toString('base64');
+  }
+
   return newSrc;
 }
 
@@ -277,7 +431,8 @@ async function parseExportNamesInto(body, names, parentURL, loader) {
   }
 }
 
-async function transformClientModule(body, url, loader) {
+async function transformClientModule(program, url, sourceMap, loader) {
+  const body = program.body;
   const names = [];
   await parseExportNamesInto(body, names, url, loader);
 
@@ -293,7 +448,7 @@ async function transformClientModule(body, url, loader) {
     if (name === 'default') {
       newSrc += 'export default ';
       newSrc += 'registerClientReference(function() {';
-      newSrc += 'throw new Error(' + JSON.stringify("Attempted to call the default export of " + url + " from the server" + "but it's on the client. It's not possible to invoke a client function from " + "the server, it can only be rendered as a Component or passed to props of a" + "Client Component.") + ');';
+      newSrc += 'throw new Error(' + JSON.stringify("Attempted to call the default export of " + url + " from the server " + "but it's on the client. It's not possible to invoke a client function from " + "the server, it can only be rendered as a Component or passed to props of a " + "Client Component.") + ');';
     } else {
       newSrc += 'export const ' + name + ' = ';
       newSrc += 'registerClientReference(function() {';
@@ -303,7 +458,9 @@ async function transformClientModule(body, url, loader) {
     newSrc += '},';
     newSrc += JSON.stringify(url) + ',';
     newSrc += JSON.stringify(name) + ');\n';
-  }
+  } // TODO: Generate source maps for Client Reference functions so they can point to their
+  // original locations.
+
 
   return newSrc;
 }
@@ -336,13 +493,28 @@ async function transformModuleIfNeeded(source, url, loader) {
     return source;
   }
 
-  let body;
+  let sourceMappingURL = null;
+  let sourceMappingStart = 0;
+  let sourceMappingEnd = 0;
+  let sourceMappingLines = 0;
+  let program;
 
   try {
-    body = acorn.parse(source, {
+    program = acorn.parse(source, {
       ecmaVersion: '2024',
-      sourceType: 'module'
-    }).body;
+      sourceType: 'module',
+      locations: true,
+
+      onComment(block, text, start, end, startLoc, endLoc) {
+        if (text.startsWith('# sourceMappingURL=') || text.startsWith('@ sourceMappingURL=')) {
+          sourceMappingURL = text.slice(19);
+          sourceMappingStart = start;
+          sourceMappingEnd = end;
+          sourceMappingLines = endLoc.line - startLoc.line;
+        }
+      }
+
+    });
   } catch (x) {
     // eslint-disable-next-line react-internal/no-production-logging
     console.error('Error parsing %s %s', url, x.message);
@@ -351,6 +523,7 @@ async function transformModuleIfNeeded(source, url, loader) {
 
   let useClient = false;
   let useServer = false;
+  const body = program.body;
 
   for (let i = 0; i < body.length; i++) {
     const node = body[i];
@@ -376,11 +549,32 @@ async function transformModuleIfNeeded(source, url, loader) {
     throw new Error('Cannot have both "use client" and "use server" directives in the same file.');
   }
 
+  let sourceMap = null;
+
+  if (sourceMappingURL) {
+    const sourceMapResult = await loader(sourceMappingURL, // $FlowFixMe
+    {
+      format: 'json',
+      conditions: [],
+      importAssertions: {
+        type: 'json'
+      },
+      importAttributes: {
+        type: 'json'
+      }
+    }, loader);
+    const sourceMapString = typeof sourceMapResult.source === 'string' ? sourceMapResult.source : // $FlowFixMe
+    sourceMapResult.source.toString('utf8');
+    sourceMap = JSON.parse(sourceMapString); // Strip the source mapping comment. We'll re-add it below if needed.
+
+    source = source.slice(0, sourceMappingStart) + '\n'.repeat(sourceMappingLines) + source.slice(sourceMappingEnd);
+  }
+
   if (useClient) {
-    return transformClientModule(body, url, loader);
+    return transformClientModule(program, url, sourceMap, loader);
   }
 
-  return transformServerModule(source, body, url);
+  return transformServerModule(source, program, url, sourceMap);
 }
 
 async function transformSource(source, context, defaultTransformSource) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-server-dom-webpack",
   "description": "React Server Components bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
-  "version": "19.0.0-rc.0",
+  "version": "19.0.0-rc.1",
   "keywords": [
     "react"
   ],
@@ -23,6 +23,11 @@
     "server.edge.js",
     "server.node.js",
     "server.node.unbundled.js",
+    "static.js",
+    "static.browser.js",
+    "static.edge.js",
+    "static.node.js",
+    "static.node.unbundled.js",
     "node-register.js",
     "cjs/",
     "esm/"
@@ -63,6 +68,23 @@
     "./server.edge": "./server.edge.js",
     "./server.node": "./server.node.js",
     "./server.node.unbundled": "./server.node.unbundled.js",
+    "./static": {
+      "react-server": {
+        "workerd": "./static.edge.js",
+        "deno": "./static.browser.js",
+        "node": {
+          "webpack": "./static.node.js",
+          "default": "./static.node.unbundled.js"
+        },
+        "edge-light": "./static.edge.js",
+        "browser": "./static.browser.js"
+      },
+      "default": "./static.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.edge": "./static.edge.js",
+    "./static.node": "./static.node.js",
+    "./static.node.unbundled": "./static.node.unbundled.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.production.js",
     "./node-register": "./node-register.js",
     "./package.json": "./package.json"
@@ -77,12 +99,13 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "19.0.0-rc.0",
-    "react-dom": "19.0.0-rc.0",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "webpack": "^5.59.0"
   },
   "dependencies": {
     "acorn-loose": "^8.3.0",
-    "neo-async": "^2.6.1"
+    "neo-async": "^2.6.1",
+    "webpack-sources": "^3.2.0"
   }
 }

package/server.browser.js

@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;

package/server.edge.js

@@ -1,7 +1,17 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
 }
+
+exports.renderToReadableStream = s.renderToReadableStream;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;

package/server.node.js

@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;

package/server.node.unbundled.js

@@ -1,7 +1,18 @@
 'use strict';
 
+var s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
 }
+
+exports.renderToPipeableStream = s.renderToPipeableStream;
+exports.decodeReplyFromBusboy = s.decodeReplyFromBusboy;
+exports.decodeReply = s.decodeReply;
+exports.decodeAction = s.decodeAction;
+exports.decodeFormState = s.decodeFormState;
+exports.registerServerReference = s.registerServerReference;
+exports.registerClientReference = s.registerClientReference;
+exports.createClientModuleProxy = s.createClientModuleProxy;
+exports.createTemporaryReferenceSet = s.createTemporaryReferenceSet;

package/static.browser.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.browser.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.browser.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}

package/static.edge.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.edge.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.edge.development.js');
+}
+
+if (s.prerender) {
+  exports.prerender = s.prerender;
+}

package/static.js

@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);

package/static.node.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}

package/static.node.unbundled.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var s;
+if (process.env.NODE_ENV === 'production') {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.production.js');
+} else {
+  s = require('./cjs/react-server-dom-webpack-server.node.unbundled.development.js');
+}
+
+if (s.prerenderToNodeStream) {
+  exports.prerenderToNodeStream = s.prerenderToNodeStream;
+}