Revert "use rolldown"

This reverts commit d87cc3b.

Author: avivkeller

package-lock.json

@@ -48,18 +48,18 @@
     "@orama/orama": "^3.1.10",
     "@orama/plugin-data-persistence": "^3.1.10",
     "@orama/react-components": "^0.8.1",
-    "@rollup/plugin-virtual": "^3.0.2",
     "acorn": "^8.15.0",
     "commander": "^14.0.0",
     "dedent": "^1.6.0",
+    "esbuild": "^0.25.6",
+    "esbuild-style-plugin": "^1.6.3",
     "estree-util-to-js": "^2.0.0",
     "estree-util-value-to-estree": "^3.4.0",
     "estree-util-visit": "^2.0.0",
     "github-slugger": "^2.0.0",
     "glob": "^11.0.3",
     "hast-util-to-string": "^3.0.1",
     "hastscript": "^9.0.1",
-    "lightningcss": "^1.30.1",
     "mdast-util-slice-markdown": "^1.1.0",
     "mustache": "^4.2.0",
     "preact": "^10.26.9",
@@ -73,7 +73,6 @@
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",
-    "rolldown": "^1.0.0-beta.24",
     "semver": "^7.7.1",
     "shiki": "^3.7.0",
     "unified": "^11.0.5",

package.json

@@ -1,52 +1,76 @@
-import virtual from '@rollup/plugin-virtual';
-import { build } from 'rolldown';
+import { writeFile } from 'node:fs/promises';
 
-import cssLoader from './css.mjs';
+import esbuild from 'esbuild';
+
+import { RESOLVE_DIR } from '../constants.mjs';
 import staticData from './data.mjs';
+import plugins from './plugins.mjs';
+
+/** @typedef {{ server: boolean, debug: boolean }} BundleOptions */
 
 /**
- * Bundles JavaScript code and returns JS/CSS content
+ * Creates the esbuild configuration object
  * @param {string} code - Source code to bundle
- * @param {{ server: boolean }} options - Bundle configuration options
- * @returns {Promise<{ js: string, css: string }>} The bundled code
+ * @param {BundleOptions} options - Options
+ * @returns {import('esbuild').BuildOptions} ESBuild configuration
  */
-export default async function bundle(code, { server = false } = {}) {
-  const result = await build({
-    input: 'entrypoint.jsx',
-    output: {
-      format: server ? 'cjs' : 'iife',
-      minify: server ? undefined : true,
-    },
-    platform: server ? 'node' : 'browser',
-    external: server ? ['preact'] : [],
-    define: {
-      // Inject static data at build time
-      __STATIC_DATA__: staticData,
+const createConfig = (code, { server, debug }) => ({
+  stdin: {
+    contents: code,
+    resolveDir: RESOLVE_DIR,
+    loader: 'jsx',
+  },
+  bundle: true,
+  minify: !debug,
+  format: 'iife',
+  platform: server ? 'node' : 'browser',
+  jsx: 'automatic',
+  write: false,
+  outfile: 'output.js',
+  // When updating the `define` object, also update client/types.d.ts to
+  // include the newly defined globals
+  define: {
+    // Inject static data at build time
+    __STATIC_DATA__: staticData,
+    // Use `if (CLIENT)` or `if (SERVER)` to conditionally run code for specific environments,
+    // and omit it otherwise. The `client/package.json` includes `sideEffects: false` to let
+    // ESBuild safely tree-shake that directory. However, this doesn't affect dependencies,
+    // so our tree-shaking ability is limited.
+    //
+    // TODO(@avivkeller): Consider switching to Rolldown once it's stable, as it offers
+    // improved tree-shaking support, with the high-speed of ESBuild.
+    SERVER: String(server),
+    CLIENT: String(!server),
+  },
+  alias: {
+    react: 'preact/compat',
+    'react-dom': 'preact/compat',
+  },
+  external: server ? ['preact'] : [],
+  plugins,
+  metafile: debug,
+});
 
-      // Environment flags for conditional code
-      // Use `if (CLIENT)` or `if (SERVER)` to target specific environments
-      // The unused code will be removed during tree-shaking
-      SERVER: String(server),
-      CLIENT: String(!server),
-    },
-    jsx: 'react-jsx',
-    resolve: {
-      alias: {
-        react: 'preact/compat',
-        'react-dom': 'preact/compat',
-      },
-    },
-    plugins: [
-      virtual({
-        'entrypoint.jsx': code,
-      }),
-      cssLoader(),
-    ],
-    treeshake: true,
-    write: false,
-  });
+/**
+ * Bundles JavaScript code and returns JS/CSS content
+ * @param {string} code - Source code to bundle
+ * @param {BundleOptions} options - Options
+ * @returns {Promise<{js: string, css?: string}>}
+ */
+export default async (code, { server = false, debug = false } = {}) => {
+  const config = createConfig(code, { server, debug });
+  const result = await esbuild.build(config);
+  const [jsFile, cssFile] = result.outputFiles;
 
-  const [js, ...cssFiles] = result.output;
+  if (debug) {
+    await writeFile(
+      `out/meta-${server ? 'server' : 'client'}.json`,
+      JSON.stringify(result.metafile)
+    );
+  }
 
-  return { js: js.code, css: cssFiles.map(f => f.source).join('') };
-}
+  return {
+    js: jsFile.text,
+    css: cssFile?.text,
+  };
+};

src/generators/web/build/bundle.mjs

@@ -40,10 +40,7 @@ export default () => {
   const buildClientProgram = componentCode => {
     return [
       ...baseImports,
-      createImportDeclaration(
-        null,
-        new URL('../ui/index.css', import.meta.url).pathname
-      ),
+      createImportDeclaration(null, './index.css'),
       createImportDeclaration('hydrate', 'preact', false),
       '',
       `hydrate(${componentCode}, document.getElementById("root"));`,

src/generators/web/build/css.mjs

@@ -0,0 +1,54 @@
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+import stylePlugin from 'esbuild-style-plugin';
+
+/**
+ * ESBuild plugin that resolves UI component imports
+ *
+ * This plugin intercepts imports starting with '@node-core/ui-components' or '#ui/'
+ * and resolves them to the corresponding TypeScript files. It follows a resolution
+ * strategy where it first tries to find an index.tsx file, then falls back to a
+ * .tsx file with the same name.
+ */
+const uiComponentsResolverPlugin = {
+  name: 'ui-components-resolver',
+
+  /**
+   * @param {import('esbuild').PluginBuild} build
+   */
+  setup(build) {
+    build.onResolve({ filter: /^#ui\// }, ({ path }) => {
+      // Skip paths that already have file extensions
+      if (/\.[a-zA-Z0-9]+$/.test(path)) return;
+
+      // Normalize the import path by converting #ui/ alias to the full package name
+      const normalizedPath = path.replace(
+        /^#ui\//,
+        '@node-core/ui-components/'
+      );
+
+      const resolutionSuffixes = ['/index.js', '.js'];
+
+      for (const suffix of resolutionSuffixes) {
+        try {
+          const resolvedPath = fileURLToPath(
+            import.meta.resolve(normalizedPath + suffix)
+          );
+
+          if (existsSync(resolvedPath)) {
+            return { path: resolvedPath };
+          }
+        } catch {
+          // Silently ignore resolution errors and try the next suffix
+          continue;
+        }
+      }
+
+      // If no resolution found, let ESBuild handle it with default behavior
+      return undefined;
+    });
+  },
+};
+
+export default [uiComponentsResolverPlugin, stylePlugin()];

src/generators/web/build/generate.mjs

@@ -1,19 +1,24 @@
+import { fileURLToPath } from 'node:url';
+
+export const RESOLVE_DIR = fileURLToPath(new URL('./ui', import.meta.url));
+
+// Imports are relative to RESOLVE_DIR, and must be complete paths (w/ file extensions)
 export const JSX_IMPORTS = {
   NavBar: {
     name: 'NavBar',
-    source: new URL('./ui/components/NavBar', import.meta.url).pathname,
+    source: './components/NavBar.jsx',
   },
   SideBar: {
     name: 'SideBar',
-    source: new URL('./ui/components/SideBar', import.meta.url).pathname,
+    source: './components/SideBar/index.jsx',
   },
   MetaBar: {
     name: 'MetaBar',
-    source: new URL('./ui/components/MetaBar', import.meta.url).pathname,
+    source: './components/MetaBar/index.jsx',
   },
   CodeBox: {
     name: 'CodeBox',
-    source: new URL('./ui/components/CodeBox', import.meta.url).pathname,
+    source: './components/CodeBox.jsx',
   },
   CodeTabs: {
     name: 'CodeTabs',

src/generators/web/build/plugins.mjs

@@ -8,6 +8,7 @@ import Mustache from 'mustache';
 
 import bundleCode from './build/bundle.mjs';
 import createASTBuilder from './build/generate.mjs';
+import { RESOLVE_DIR } from './constants.mjs';
 
 /**
  * Executes server-side code in a safe, isolated context
@@ -17,11 +18,10 @@ import createASTBuilder from './build/generate.mjs';
  */
 export async function executeServerCode(serverCode, require) {
   const { js: bundledServer } = await bundleCode(serverCode, { server: true });
-  const variable = Math.random().toString(36).slice(2);
 
   const executedFunction = new Function(
     'require',
-    `let ${variable};${bundledServer}return ${variable};`
+    `let code;${bundledServer}return code;`
   );
 
   return executedFunction(require);
@@ -105,7 +105,7 @@ export default {
       'utf-8'
     );
     const astBuilders = createASTBuilder();
-    const require = createRequire(import.meta.url);
+    const require = createRequire(RESOLVE_DIR);
 
     // Process all entries
     const results = [];