use rolldown

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,6 +73,7 @@
     "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,76 +1,52 @@
-import { writeFile } from 'node:fs/promises';
+import virtual from '@rollup/plugin-virtual';
+import { build } from 'rolldown';
 
-import esbuild from 'esbuild';
-
-import { RESOLVE_DIR } from '../constants.mjs';
+import cssLoader from './css.mjs';
 import staticData from './data.mjs';
-import plugins from './plugins.mjs';
-
-/** @typedef {{ server: boolean, debug: boolean }} BundleOptions */
-
-/**
- * Creates the esbuild configuration object
- * @param {string} code - Source code to bundle
- * @param {BundleOptions} options - Options
- * @returns {import('esbuild').BuildOptions} ESBuild configuration
- */
-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,
-});
 
 /**
  * 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}>}
+ * @param {{ server: boolean }} options - Bundle configuration options
+ * @returns {Promise<{ js: string, css: string }>} The bundled code
  */
-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;
+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,
+
+      // 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,
+  });
 
-  if (debug) {
-    await writeFile(
-      `out/meta-${server ? 'server' : 'client'}.json`,
-      JSON.stringify(result.metafile)
-    );
-  }
+  const [js, ...cssFiles] = result.output;
 
-  return {
-    js: jsFile.text,
-    css: cssFile?.text,
-  };
-};
+  return { js: js.code, css: cssFiles.map(f => f.source).join('') };
+}

src/generators/web/build/bundle.mjs

@@ -0,0 +1,62 @@
+import { readFile } from 'node:fs/promises';
+
+import { bundleAsync } from 'lightningcss';
+
+/**
+ * Rolldown plugin to compile `.module.css` files using lightningcss
+ * and emit a single bundled CSS file.
+ *
+ * TODO(avivkeller): Once Rolldown supports CSS Modules natively, we
+ * can remove this
+ *
+ * @returns {import('rolldown').Plugin}
+ */
+export default () => {
+  const cssChunks = new Set();
+
+  return {
+    name: 'css-loader',
+
+    /**
+     * Handles loading and transforming CSS module files
+     * @param {string} id - The file path being loaded
+     */
+    async load(id) {
+      if (!id.endsWith('.module.css')) {
+        return null;
+      }
+
+      const source = await readFile(id, 'utf8');
+
+      const { code, exports } = await bundleAsync({
+        filename: id,
+        code: Buffer.from(source),
+        cssModules: true,
+      });
+
+      cssChunks.add(code.toString());
+
+      const mappedExports = Object.fromEntries(
+        Object.entries(exports).map(([k, v]) => [k, v.name])
+      );
+
+      return {
+        code: `export default ${JSON.stringify(mappedExports)};`,
+        moduleType: 'js',
+      };
+    },
+
+    /**
+     * Emits the collected CSS as a single file at the end of the build
+     */
+    buildEnd() {
+      if (cssChunks.size === 0) return;
+
+      this.emitFile({
+        type: 'asset',
+        name: 'styles.css',
+        source: Array.from(cssChunks).join('\n'),
+      });
+    },
+  };
+};

src/generators/web/build/css.mjs

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

src/generators/web/build/generate.mjs

@@ -1,24 +1,19 @@
-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: './components/NavBar.jsx',
+    source: new URL('./ui/components/NavBar', import.meta.url).pathname,
   },
   SideBar: {
     name: 'SideBar',
-    source: './components/SideBar/index.jsx',
+    source: new URL('./ui/components/SideBar', import.meta.url).pathname,
   },
   MetaBar: {
     name: 'MetaBar',
-    source: './components/MetaBar/index.jsx',
+    source: new URL('./ui/components/MetaBar', import.meta.url).pathname,
   },
   CodeBox: {
     name: 'CodeBox',
-    source: './components/CodeBox.jsx',
+    source: new URL('./ui/components/CodeBox', import.meta.url).pathname,
   },
   CodeTabs: {
     name: 'CodeTabs',

src/generators/web/build/plugins.mjs

@@ -8,7 +8,6 @@ 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
@@ -18,10 +17,11 @@ import { RESOLVE_DIR } from './constants.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 code;${bundledServer}return code;`
+    `let ${variable};${bundledServer}return ${variable};`
   );
 
   return executedFunction(require);
@@ -105,7 +105,7 @@ export default {
       'utf-8'
     );
     const astBuilders = createASTBuilder();
-    const require = createRequire(RESOLVE_DIR);
+    const require = createRequire(import.meta.url);
 
     // Process all entries
     const results = [];