put client in folder

Author: avivkeller

eslint.config.mjs

@@ -76,8 +76,7 @@ export default [
   {
     files: [
       'src/generators/legacy-html/assets/*.js',
-      'src/generators/web/hooks/*',
-      'src/generators/web/components/*',
+      'src/generators/web/client/**/*',
     ],
     languageOptions: { globals: { ...globals.browser } },
   },

package-lock.json

@@ -79,6 +79,7 @@
     "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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { getLanguageDisplayName } from '@node-core/rehype-shiki';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
+import { getLanguageDisplayName } from '@node-core/rehype-shiki';
 
 const MDXCodeBox = ({ className, ...props }) => {
   const matches = className?.match(/language-(?<language>[a-zA-Z]+)/);

src/generators/web/components/ChangeHistory.jsx renamed to src/generators/web/client/components/ChangeHistory.jsx

@@ -1,42 +1,42 @@
 import { fileURLToPath } from 'node:url';
 
 export const ESBUILD_RESOLVE_DIR = fileURLToPath(
-  new URL('./components', import.meta.url)
+  new URL('./client', import.meta.url)
 );
 
 // Imports are relative to ESBUILD_RESOLVE_DIR
 export const JSX_IMPORTS = {
   NavBar: {
     name: 'NavBar',
-    source: './NavBar.jsx',
+    source: './components/NavBar.jsx',
   },
   SideBar: {
     name: 'SideBar',
-    source: './SideBar.jsx',
+    source: './components/SideBar.jsx',
   },
   MetaBar: {
     name: 'MetaBar',
-    source: './MetaBar.jsx',
+    source: './components/MetaBar.jsx',
   },
   Footer: {
     name: 'Footer',
-    source: './Footer.jsx',
+    source: './components/Footer.jsx',
   },
   ChangeHistory: {
     name: 'ChangeHistory',
-    source: './ChangeHistory.jsx',
+    source: './components/ChangeHistory.jsx',
   },
   CircularIcon: {
     name: 'CircularIcon',
-    source: './CircularIcon.jsx',
+    source: './components/CircularIcon.jsx',
   },
   CodeBox: {
     name: 'CodeBox',
-    source: './CodeBox.jsx',
+    source: './components/CodeBox.jsx',
   },
   CodeTabs: {
     name: 'CodeTabs',
-    source: './CodeTabs.jsx',
+    source: './components/CodeTabs.jsx',
   },
   Article: {
     name: 'Article',

src/generators/web/components/CircularIcon.jsx renamed to src/generators/web/client/components/CircularIcon.jsx

@@ -2,10 +2,11 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 import { generate } from '@babel/generator';
+import { estreeToBabel } from 'estree-to-babel';
 import Mustache from 'mustache';
 
-import buildProgram from './utils/buildProgram.mjs';
-import bundleCode from './utils/bundleCode.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
@@ -33,19 +34,21 @@ export default {
       'utf-8'
     );
 
+    const { buildClientProgram } = createASTBuilder();
+
     let css;
 
     const bundles = await Promise.all(
       entries.map(async entry => {
-        const program = buildProgram(entry);
-        const { code } = generate(program);
-        const bundled = await bundleCode(code);
+        const { program } = estreeToBabel(entry);
+        const clientCode = generate(buildClientProgram(program)).code;
 
-        // All bundles share the same CSS
-        if (!css) {
-          css = bundled.css;
-        }
+        const bundled = await bundleCode(clientCode);
+
+        // Extract CSS from first bundle only
+        css ??= bundled.css;
 
+        // TODO: Remove mustache
         const rendered = Mustache.render(template, {
           title: entry.data.heading.data.name,
           javascript: bundled.js,
@@ -59,7 +62,7 @@ export default {
       })
     );
 
-    if (output) {
+    if (output && css) {
       await writeFile(join(output, 'styles.css'), css);
     }
 

src/generators/web/components/CodeBox.jsx renamed to src/generators/web/client/components/CodeBox.jsx

@@ -1,13 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="./styles.css" />
   <title>{{title}}</title>
+  <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
-  <div id="root"></div>
+  <div id="root">{{{htmlContent}}}</div>
   <script>{{{javascript}}}</script>
 </body>
 </html>

src/generators/web/components/CodeTabs.jsx renamed to src/generators/web/client/components/CodeTabs.jsx

@@ -0,0 +1,70 @@
+import * as t from '@babel/types';
+
+import { JSX_IMPORTS } from '../constants.mjs';
+
+/**
+ * Creates an import declaration AST node
+ * @param {string|null} defaultImport - The default import identifier name, or null for side-effect imports
+ * @param {string} source - The module path to import from
+ */
+const importDeclaration = (defaultImport, source) =>
+  t.importDeclaration(
+    defaultImport
+      ? [t.importDefaultSpecifier(t.identifier(defaultImport))]
+      : [],
+    t.stringLiteral(source)
+  );
+
+/**
+ * Creates standard React import declarations including React core and JSX components
+ */
+const reactImports = () => [
+  importDeclaration('React', 'react'),
+  ...Object.values(JSX_IMPORTS).map(({ name, source }) =>
+    importDeclaration(name, source)
+  ),
+];
+
+/**
+ * Creates an AST builder with hardcoded configuration for React SSR/hydration
+ */
+export default () => {
+  const imports = reactImports();
+  /**
+   * Generates code that hydrates a server-rendered React component on the client
+   * @param {import('@babel/types').Expression} component - The React component AST node to hydrate
+   */
+  const buildClientProgram = component =>
+    t.program([
+      ...imports,
+      importDeclaration(null, '@node-core/ui-components/styles/index.css'),
+      importDeclaration('ReactDOM', 'react-dom/client'),
+      t.expressionStatement(
+        t.callExpression(
+          t.memberExpression(
+            t.callExpression(
+              t.memberExpression(
+                t.identifier('ReactDOM'),
+                t.identifier('createRoot')
+              ),
+              [
+                t.callExpression(
+                  t.memberExpression(
+                    t.identifier('document'),
+                    t.identifier('getElementById')
+                  ),
+                  [t.stringLiteral('root')]
+                ),
+              ]
+            ),
+            t.identifier('render')
+          ),
+          [component]
+        )
+      ),
+    ]);
+
+  return {
+    buildClientProgram,
+  };
+};

src/generators/web/components/Footer.jsx renamed to src/generators/web/client/components/Footer.jsx

@@ -53,9 +53,10 @@ const uiComponentsResolver = {
 /**
  * Bundles JavaScript code and returns JS/CSS content
  * @param {string} code - Source code to bundle
+ * @param {boolean} server
  * @returns {Promise<{js: string, css: string}>}
  */
-export default async code => {
+export default async (code, server) => {
   const result = await esbuild.build({
     stdin: {
       contents: code,
@@ -66,7 +67,7 @@ export default async code => {
     sourcemap: 'inline',
     format: 'iife',
     target: 'es2020',
-    platform: 'browser',
+    platform: server ? 'node' : 'browser',
     jsx: 'automatic',
     write: false,
     // This output file is a pseudo-file. It's never written to (`write: false`),