dehydrate code

Author: avivkeller

package-lock.json

@@ -79,7 +79,6 @@
     "remark-stringify": "^11.0.0",
     "semver": "^7.7.1",
     "shiki": "^3.4.2",
-    "sval": "^0.6.7",
     "tailwindcss": "^4.1.8",
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",

package.json

@@ -5,7 +5,6 @@ import styles from '@node-core/ui-components/Containers/NavBar/index.module.css'
 import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 
 import { useTheme } from '../hooks/useTheme.mjs';
-import SearchBox from './SearchBox';
 
 const MDXNavBar = () => {
   const [theme, toggleTheme] = useTheme();
@@ -16,7 +15,6 @@ const MDXNavBar = () => {
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
       navItems={[]}
     >
-      <SearchBox />
       <ThemeToggle
         onClick={toggleTheme}
         aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}

src/generators/web/client/components/NavBar.jsx

@@ -1,67 +1,102 @@
 import { readFile, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import { join } from 'node:path';
 
-import { generate } from '@babel/generator';
 import { estreeToBabel } from 'estree-to-babel';
 import Mustache from 'mustache';
 
+import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
 import createASTBuilder from './utils/build.mjs';
 import bundleCode from './utils/bundle.mjs';
 
 /**
- * This generator generates a JavaScript / HTML / CSS bundle from the input JSX AST
- *
- * @typedef {Array<ApiDocMetadataEntry>} Input
- *
- * @type {GeneratorMetadata<Input, string>}
+ * 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
+ * @returns {Promise<string>} The rendered HTML output
+ */
+async function executeServerCode(serverCode, require) {
+  // Bundle the server code for execution
+  const { js: bundledServer } = await bundleCode(serverCode, true);
+
+  // Create a safe execution context that returns the rendered content
+  const executedFunction = new Function(
+    'require',
+    `
+    let code;
+    ${bundledServer}
+    return code;
+  `
+  );
+
+  return executedFunction(require);
+}
+
+/**
+ * Web bundle generator - converts JSX AST entries into HTML/CSS/JS bundles
+ * Generates static HTML files with embedded JavaScript and CSS
  */
 export default {
   name: 'web',
   version: '1.0.0',
-  description:
-    'Generates a JavaScript / HTML / CSS bundle from the input JSX AST',
+  description: 'Generates HTML/CSS/JS bundles from JSX AST entries',
   dependsOn: 'jsx-ast',
 
   /**
-   * Generates a JavaScript / HTML / CSS bundle
-   *
-   * @param {import('../jsx-ast/utils/buildContent.mjs').JSXContent[]} entries
-   * @param {Partial<GeneratorOptions>} options
+   * Main generation function - processes JSX entries into web bundles
+   * @param {Array} entries - JSX content entries to process
+   * @param {Object} options - Generation options
+   * @param {string} options.output - Output directory path
+   * @returns {Promise<string[]>} Array of rendered HTML strings
    */
   async generate(entries, { output }) {
+    // Load the HTML template
     const template = await readFile(
       new URL('template.html', import.meta.url),
       'utf-8'
     );
 
-    const { buildClientProgram } = createASTBuilder();
+    // Set up AST builders for server and client code
+    const { buildServerProgram, buildClientProgram } = createASTBuilder();
+    const require = createRequire(ESBUILD_RESOLVE_DIR);
 
-    let css;
+    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);
-        const clientCode = generate(buildClientProgram(program)).code;
 
-        const bundled = await bundleCode(clientCode);
+        // 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 from first bundle only
-        css ??= bundled.css;
+        // Extract CSS only from the first bundle to avoid duplicates
+        css ??= clientBundle.css;
 
-        // TODO: Remove mustache
-        const rendered = Mustache.render(template, {
+        // Render the final HTML using the template
+        const finalHTML = Mustache.render(template, {
           title: entry.data.heading.data.name,
-          javascript: bundled.js,
+          javascript: clientBundle.js,
+          dehydrated: serverRenderedHTML,
         });
 
+        // Write individual HTML file if output directory is specified
         if (output) {
-          await writeFile(join(output, `${entry.data.api}.html`), rendered);
+          const filename = `${entry.data.api}.html`;
+          await writeFile(join(output, filename), finalHTML);
         }
 
-        return rendered;
+        return finalHTML;
       })
     );
 
+    // Write shared CSS file if we have CSS and an output directory
     if (output && css) {
       await writeFile(join(output, 'styles.css'), css);
     }

src/generators/web/client/components/SearchBox/constants.mjs

@@ -5,7 +5,7 @@
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
-  <div id="root">{{{htmlContent}}}</div>
+  <div id="root">{{{dehydrated}}}</div>
   <script>{{{javascript}}}</script>
 </body>
 </html>