chore: code review changes

ovflowd · ovflowd · commit b4b495375143 · 2025-11-10T20:21:55.000+01:00
diff --git a/src/generators/web/template.html b/src/generators/web/template.html
@@ -21,6 +21,6 @@
 
 <body>
   <div id="root">{{dehydrated}}</div>
-  <script type="module" src="{{mainJsSrc}}"></script>
+  <script type="module" src="{{entrypoint}}"></script>
 </body>
 </html>
diff --git a/src/generators/web/utils/bundle.mjs b/src/generators/web/utils/bundle.mjs
@@ -13,31 +13,14 @@ import staticData from './data.mjs';
  * @param {boolean} [options.server=false] - Whether this is a server-side build.
  */
 export default async function bundleCode(codeMap, { server = false } = {}) {
-  // Store the import map HTML for later extraction
-  let importMapHtml = '';
-
-  /** @type {import('rolldown').OutputOptions} */
-  const serverOutputConfig = {
-    // Inline all dynamic imports to create a single self-contained bundle
-    inlineDynamicImports: true,
-  };
-
-  /** @type {import('rolldown').InputOptions['experimental']} */
-  const clientExperimentalConfig = {
-    // Generate an import map for cache-busted module resolution in browsers
-    // https://rolldown.rs/options/experimental#chunkimportmap
-    chunkImportMap: {
-      baseUrl: './',
-      fileName: 'importmap.json',
-    },
-  };
-
   const result = await build({
     // Entry points: array of virtual module names that the virtual plugin provides
     input: Array.from(codeMap.keys()),
 
     // Experimental features: import maps for client, none for server
-    experimental: server ? {} : clientExperimentalConfig,
+    experimental: {
+      chunkImportMap: !server,
+    },
 
     // Output configuration
     output: {
@@ -50,8 +33,8 @@ export default async function bundleCode(codeMap, { server = false } = {}) {
       // Server builds are usually not minified to preserve stack traces and debuggability.
       minify: !server,
 
-      // Environment-specific output configuration
-      ...(server ? serverOutputConfig : {}),
+      // Within server builds we want to ensure dynamic imports get inlined whenever possible.
+      inlineDynamicImports: server,
     },
 
     // Platform informs Rolldown of the environment-specific code behavior:
@@ -106,28 +89,6 @@ export default async function bundleCode(codeMap, { server = false } = {}) {
       // Load CSS imports via the custom plugin.
       // This plugin will collect imported CSS files and return them as `source` chunks.
       cssLoader(),
-
-      // Extract and transform the import map generated by Rolldown
-      {
-        name: 'extract-import-map',
-        /**
-         * Extracts import map from bundle and converts to HTML script tag.
-         *
-         * @param {import('rolldown').NormalizedOutputOptions} _ - Output options (unused).
-         * @param {import('rolldown').OutputBundle} bundle - Bundle object containing all output chunks.
-         */
-        generateBundle(_, bundle) {
-          const chunkImportMap = bundle['importmap.json'];
-
-          if (chunkImportMap?.type === 'asset') {
-            // Convert to HTML script tag for inline inclusion
-            importMapHtml = `<script type="importmap">${chunkImportMap.source}</script>`;
-
-            // Remove from bundle to prevent writing as separate file
-            delete bundle['importmap.json'];
-          }
-        },
-      },
     ],
 
     // Enable tree-shaking to remove unused code
@@ -138,16 +99,21 @@ export default async function bundleCode(codeMap, { server = false } = {}) {
   });
 
   // Separate CSS assets from JavaScript chunks
-  const cssFiles = result.output.filter(chunk => chunk.type === 'asset');
-  const jsChunks = result.output.filter(chunk => chunk.type === 'chunk');
+  const assets = result.output.filter(c => c.type === 'asset');
+  const chunks = result.output.filter(c => c.type === 'chunk');
+
+  const importMap = assets.find(c => c.fileName === 'importmap.json');
 
   return {
-    importMapHtml,
-    css: cssFiles.map(f => f.source).join(''),
-    jsChunks: jsChunks.map(({ fileName, code, isEntry }) => ({
+    css: assets
+      .filter(c => c.fileName.endsWith('.css'))
+      .map(f => f.source)
+      .join(''),
+    jsChunks: chunks.map(({ fileName, code, isEntry }) => ({
       fileName: fileName.replace('_virtual_', ''),
-      code,
       isEntry,
+      code,
     })),
+    importMapHtml: `<script type="importmap">${importMap?.source}</script>`,
   };
 }
diff --git a/src/generators/web/utils/chunkHelper.mjs b/src/generators/web/utils/chunkHelper.mjs
@@ -17,11 +17,10 @@ export function createEnhancedRequire(jsChunks, requireFn) {
    * @param {string} modulePath - Module path to require.
    * @returns {*} Module exports.
    */
-  const enhancedRequire = modulePath => {
+  const chunkedRequire = modulePath => {
     // Check virtual file system first for code-split chunks
     if (chunkModules[modulePath]) {
-      const moduleExports = {};
-      const module = { exports: moduleExports };
+      const mod = { exports: {} };
 
       // Execute chunk code in isolated context with its own module.exports
       const chunkFn = new Function(
@@ -31,14 +30,14 @@ export function createEnhancedRequire(jsChunks, requireFn) {
         chunkModules[modulePath]
       );
 
-      chunkFn(module, moduleExports, enhancedRequire);
+      chunkFn(mod, mod.exports, chunkedRequire);
 
-      return module.exports;
+      return mod.exports;
     }
 
     // Fall back to Node.js require for external packages
     return requireFn(modulePath);
   };
 
-  return enhancedRequire;
+  return chunkedRequire;
 }
diff --git a/src/generators/web/utils/processing.mjs b/src/generators/web/utils/processing.mjs
@@ -42,21 +42,14 @@ export async function executeServerCode(serverCodeMap, requireFn) {
 }
 
 /**
- * Processes multiple JSX AST entries to generate complete HTML pages with SSR content,
- * client-side JavaScript bundles (with code splitting), and CSS.
+ * Processes a single JSX AST (Abstract Syntax Tree) entry to generate a complete
+ * HTML page, including server-side rendered content, client-side JavaScript, and CSS.
  *
- * This function:
- * 1. Converts JSX AST to JavaScript code for both server and client
- * 2. Executes server code to get dehydrated (server-rendered) HTML
- * 3. Bundles client code with code splitting and import maps
- * 4. Injects everything into HTML template and minifies
- *
- * @param {import('../../jsx-ast/utils/buildContent.mjs').JSXContent[]} entries - JSX AST entries to process.
- * @param {string} template - HTML template string with placeholders: {{title}}, {{dehydrated}}, {{importMap}}, {{mainJsCode}}.
- * @param {ReturnType<import('./generate.mjs').default>} astBuilders - AST generator functions (buildServerProgram, buildClientProgram).
- * @param {ReturnType<import('node:module').createRequire>} requireFn - Node.js require function.
- * @param {Object} options - Processing options.
- * @param {string} options.version - Documentation version string.
+ * @param {Array<import('../../jsx-ast/utils/buildContent.mjs').JSXContent>} entries - The JSX AST entry to process.
+ * @param {string} template - The HTML template string that serves as the base for the output page.
+ * @param {ReturnType<import('./generate.mjs')>} astBuilders - The AST generators
+ * @param {version} version - The version to generator the documentation for
+ * @param {ReturnType<import('node:module').createRequire>} requireFn - A Node.js `require` function.
  */
 export async function processJSXEntries(
   entries,
@@ -89,22 +82,22 @@ export async function processJSXEntries(
   const clientBundle = await bundleCode(clientCodeMap);
 
   // Process each entry to create final HTML
-  const results = entries.map(entry => {
-    const fileName = `${entry.data.api}.js`;
+  const results = entries.map(({ data }) => {
+    const fileName = `${data.api}.js`;
 
-    const title = `${entry.data.heading.data.name} | Node.js v${version} Documentation`;
+    const title = `${data.heading.data.name} | Node.js v${version} Documentation`;
 
     // Replace template placeholders with actual content
     const renderedHtml = template
       .replace('{{title}}', title)
       .replace('{{dehydrated}}', serverBundle.get(fileName) ?? '')
       .replace('{{importMap}}', clientBundle.importMapHtml)
-      .replace('{{mainJsSrc}}', `./${fileName}?${randomUUID()}`);
+      .replace('{{entrypoint}}', `./${fileName}?${randomUUID()}`);
 
     // Minify HTML (input must be a Buffer)
     const finalHTMLBuffer = HTMLMinifier.minify(Buffer.from(renderedHtml), {});
 
-    return { html: finalHTMLBuffer, api: entry.data.api };
+    return { html: finalHTMLBuffer, api: data.api };
   });
 
   return {
