remove mustache

Author: avivkeller

package-lock.json

@@ -63,7 +63,6 @@
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
     "html-minifier-terser": "^7.2.0",
-    "mustache": "^4.2.0",
     "postcss": "^8.5.3",
     "postcss-calc": "^10.1.1",
     "react": "^19.1.0",

package.json

@@ -20,3 +20,10 @@ export const DOC_API_BLOB_EDIT_BASE_URL =
 
 // Base URL for a specific Node.js version within the Node.js API docs
 export const DOC_API_BASE_URL_VERSION = 'https://nodejs.org/docs/latest-v';
+
+// Options for Terser
+export const TERSER_MINIFY_OPTIONS = {
+  collapseWhitespace: true,
+  minifyJS: true,
+  minifyCSS: true,
+};

src/constants.mjs

@@ -5,6 +5,7 @@ import { join, resolve } from 'node:path';
 
 import { minify } from 'html-minifier-terser';
 
+import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
 import { getRemarkRehype } from '../../utils/remark.mjs';
 import dropdowns from '../legacy-html/utils/buildDropdowns.mjs';
 import tableOfContents from '../legacy-html/utils/tableOfContents.mjs';
@@ -95,11 +96,7 @@ export default {
       .replace('__EDIT_ON_GITHUB__', '');
 
     // We minify the html result to reduce the file size and keep it "clean"
-    const minified = await minify(generatedAllTemplate, {
-      collapseWhitespace: true,
-      minifyJS: true,
-      minifyCSS: true,
-    });
+    const minified = await minify(generatedAllTemplate, TERSER_MINIFY_OPTIONS);
 
     if (output) {
       await writeFile(join(output, 'all.html'), minified);

src/generators/legacy-html-all/index.mjs

@@ -8,6 +8,7 @@ import { minify } from 'html-minifier-terser';
 import buildContent from './utils/buildContent.mjs';
 import dropdowns from './utils/buildDropdowns.mjs';
 import tableOfContents from './utils/tableOfContents.mjs';
+import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
 import { groupNodesByModule } from '../../utils/generators.mjs';
 import { getRemarkRehype } from '../../utils/remark.mjs';
 
@@ -155,11 +156,7 @@ export default {
 
       if (output) {
         // We minify the html result to reduce the file size and keep it "clean"
-        const minified = await minify(result, {
-          collapseWhitespace: true,
-          minifyJS: true,
-          minifyCSS: true,
-        });
+        const minified = await minify(result, TERSER_MINIFY_OPTIONS);
 
         await writeFile(join(output, `${node.api}.html`), minified);
       }

src/generators/legacy-html/index.mjs

@@ -4,6 +4,12 @@ export const ESBUILD_RESOLVE_DIR = fileURLToPath(
   new URL('./client', import.meta.url)
 );
 
+export const TEMPLATE_PLACEHOLDERS = {
+  TITLE: '__TITLE__',
+  DEHYDRATED: '__DEHYDRATED__',
+  JAVASCRIPT: '__JAVASCRIPT__',
+};
+
 // Imports are relative to ESBUILD_RESOLVE_DIR
 export const JSX_IMPORTS = {
   NavBar: {

src/generators/web/constants.mjs

@@ -3,25 +3,24 @@ import { createRequire } from 'node:module';
 import { join } from 'node:path';
 
 import { estreeToBabel } from 'estree-to-babel';
-import Mustache from 'mustache';
+import { minify } from 'html-minifier-terser';
 
-import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
+import { ESBUILD_RESOLVE_DIR, TEMPLATE_PLACEHOLDERS } from './constants.mjs';
+import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
 import createASTBuilder from './utils/astBuilder.mjs';
 import bundleCode from './utils/bundle.mjs';
 
 /**
  * Executes server-side code in a safe, isolated context
  * @param {string} serverCode - The server code to execute
- * @param {Function} require - Node.js require function for dependencies
+ * @param {ReturnType<createRequire>} require - Node.js require function for dependencies
  * @returns {Promise<string>} The rendered HTML output
  */
 async function executeServerCode(serverCode, require) {
-  // Bundle the server code for execution
   const { js: bundledServer } = await bundleCode(serverCode, {
     platform: 'node',
   });
 
-  // Create a safe execution context that returns the rendered content
   const executedFunction = new Function(
     'require',
     `
@@ -34,6 +33,53 @@ async function executeServerCode(serverCode, require) {
   return executedFunction(require);
 }
 
+/**
+ * Processes a single entry and writes the HTML file immediately
+ * @param {import('../jsx-ast/utils/buildContent.mjs').JSXContent} entry - JSX AST entry
+ * @param {string} template - HTML template
+ * @param {ReturnType<createASTBuilder>} astBuilders - AST builder functions
+ * @param {ReturnType<createRequire>} require - Node.js require function
+ * @param {string} output - Output directory path
+ * @returns {Promise<{html: string, css?: string}>}
+ */
+async function processEntry(
+  entry,
+  template,
+  { buildServerProgram, buildClientProgram },
+  require,
+  output
+) {
+  // Convert JSX AST to Babel AST
+  const { program } = estreeToBabel(entry);
+
+  // Generate and execute server-side code for SSR
+  const serverCode = buildServerProgram(program);
+  const serverRenderedHTML = await executeServerCode(serverCode, require);
+
+  // Generate and bundle client-side code
+  const clientCode = buildClientProgram(program);
+  const clientBundle = await bundleCode(clientCode);
+
+  // Render the final HTML using the template
+  const finalHTML = await minify(
+    template
+      .replace(TEMPLATE_PLACEHOLDERS.TITLE, entry.data.heading.data.name)
+      .replace(TEMPLATE_PLACEHOLDERS.DEHYDRATED, serverRenderedHTML)
+      .replace(TEMPLATE_PLACEHOLDERS.JAVASCRIPT, clientBundle.js),
+    TERSER_MINIFY_OPTIONS
+  );
+
+  // Write HTML file immediately if output directory is specified
+  if (output) {
+    await writeFile(join(output, `${entry.data.api}.html`), finalHTML, 'utf-8');
+  }
+
+  return {
+    html: finalHTML,
+    css: clientBundle.css,
+  };
+}
+
 /**
  * This generator generates a JavaScript / HTML / CSS bundle from the input JSX AST
  *
@@ -54,57 +100,26 @@ export default {
    * @param {Partial<GeneratorOptions>} options
    */
   async generate(entries, { output }) {
-    // Load the HTML template
+    // Load template and set up dependencies
     const template = await readFile(
       new URL('template.html', import.meta.url),
       'utf-8'
     );
-
-    // Set up AST builders for server and client code
-    const { buildServerProgram, buildClientProgram } = createASTBuilder();
+    const astBuilders = createASTBuilder();
     const require = createRequire(ESBUILD_RESOLVE_DIR);
 
-    let css; // Will store CSS from the first bundle
-
-    // Process each entry in parallel
-    const bundles = await Promise.all(
-      entries.map(async entry => {
-        // Convert JSX AST to Babel AST
-        const { program } = estreeToBabel(entry);
-
-        // Generate and execute server-side code for SSR
-        const serverCode = buildServerProgram(program);
-        const serverRenderedHTML = await executeServerCode(serverCode, require);
-
-        // Generate and bundle client-side code
-        const clientCode = buildClientProgram(program);
-        const clientBundle = await bundleCode(clientCode);
-
-        // Extract CSS only from the first bundle to avoid duplicates
-        css ??= clientBundle.css;
-
-        // Render the final HTML using the template
-        const finalHTML = Mustache.render(template, {
-          title: entry.data.heading.data.name,
-          javascript: clientBundle.js,
-          dehydrated: serverRenderedHTML,
-        });
-
-        // Write individual HTML file if output directory is specified
-        if (output) {
-          const filename = `${entry.data.api}.html`;
-          await writeFile(join(output, filename), finalHTML);
-        }
-
-        return finalHTML;
-      })
+    // Process all entries in parallel
+    const results = await Promise.all(
+      entries.map(entry => processEntry(entry, template, astBuilders, require))
     );
 
-    // Write shared CSS file if we have CSS and an output directory
-    if (output && css) {
-      await writeFile(join(output, 'styles.css'), css);
+    if (output) {
+      await writeFile(
+        join(output, 'styles.css'),
+        results.find(result => result.css).css
+      );
     }
 
-    return bundles;
+    return results.map(result => result.html);
   },
 };

src/generators/web/index.mjs

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>{{title}}</title>
+  <title>__TITLE__</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
-  <div id="root">{{{dehydrated}}}</div>
-  <script>{{{javascript}}}</script>
+  <div id="root">__DEHYDRATED__</div>
+  <script>__JAVASCRIPT__</script>
 </body>
 </html>