some changes

Author: avivkeller

package-lock.json

@@ -0,0 +1,76 @@
+import { writeFile } from 'node:fs/promises';
+
+import esbuild from 'esbuild';
+
+import { ESBUILD_RESOLVE_DIR, POLYFILL_PATH } from '../constants.mjs';
+import getPlugins from './plugins.mjs';
+import staticData from '../server/data.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: ESBUILD_RESOLVE_DIR,
+    loader: 'jsx',
+  },
+  bundle: true,
+  minify: true,
+  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)
+    // in order to only run code in
+    // the specific environment, and
+    // drop it otherwise.
+    SERVER: String(server),
+    CLIENT: String(!server),
+  },
+  alias: {
+    react: 'preact/compat',
+    'react-dom': 'preact/compat',
+    // TODO(@avivkeller): Orama _currently_ doesn't support server-side
+    // rendering, but that is supposed to change in the near future.
+    ...(server && { '@orama/react-components': POLYFILL_PATH }),
+  },
+  plugins: getPlugins(server),
+  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}>}
+ */
+export default async (code, { server = false, debug = true } = {}) => {
+  const config = createConfig(code, { server, debug });
+  const result = await esbuild.build(config);
+  const [jsFile, cssFile] = result.outputFiles;
+
+  if (debug) {
+    await writeFile(
+      `out/meta-${server ? 'server' : 'client'}.json`,
+      JSON.stringify(result.metafile)
+    );
+  }
+
+  return {
+    js: jsFile.text,
+    css: cssFile?.text,
+  };
+};

src/generators/web/build/bundle.mjs

@@ -0,0 +1,84 @@
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+
+import tailwindcss from '@tailwindcss/postcss';
+import stylePlugin from 'esbuild-style-plugin';
+import postcssCalc from 'postcss-calc';
+
+/**
+ * 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.
+ * ```
+ */
+export const uiComponentsResolverPlugin = {
+  name: 'ui-components-resolver',
+
+  /**
+   * @param {import('esbuild').PluginBuild} build
+   */
+  setup(build) {
+    build.onResolve(
+      { filter: /^(@node-core\/ui-components|#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/'
+        );
+
+        // Resolution strategy: try index.tsx first, then .tsx
+        const resolutionSuffixes = ['/index.tsx', '.tsx'];
+
+        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;
+      }
+    );
+  },
+};
+
+/**
+ * Creates and returns an array of ESBuild plugins for the build process
+ *
+ * @param {boolean} server - Whether this is running in server mode.
+ */
+export default server => {
+  const plugins = [
+    uiComponentsResolverPlugin,
+    stylePlugin(
+      // We still need to include `stylePlugin` on the server, so that
+      // the hydrated HTML will have the class names we need, however,
+      // we don't need to parse them through PostCSS for performance.
+      server
+        ? {}
+        : {
+            postcss: {
+              plugins: [tailwindcss(), postcssCalc()],
+            },
+          }
+    ),
+  ];
+
+  return plugins;
+};

src/generators/web/utils/astBuilder.mjs renamed to src/generators/web/build/generate.mjs

@@ -2,4 +2,6 @@ import { createStaticData } from '../server/data.mjs';
 
 declare global {
   const __STATIC_DATA__: ReturnType<typeof createStaticData>;
+  const SERVER: boolean;
+  const CLIENT: boolean;
 }

src/generators/web/build/plugins.mjs

@@ -6,10 +6,10 @@ import { estreeToBabel } from 'estree-to-babel';
 import { minify } from 'html-minifier-terser';
 import Mustache from 'mustache';
 
-import { ESBUILD_RESOLVE_DIR, POLYFILL_PATH } from './constants.mjs';
+import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
 import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
-import createASTBuilder from './utils/astBuilder.mjs';
-import bundleCode from './utils/bundle.mjs';
+import bundleCode from './build/bundle.mjs';
+import createASTBuilder from './build/generate.mjs';
 
 /**
  * Executes server-side code in a safe, isolated context
@@ -18,13 +18,7 @@ import bundleCode from './utils/bundle.mjs';
  * @returns {Promise<string>} The rendered HTML output
  */
 async function executeServerCode(serverCode, require) {
-  const { js: bundledServer } = await bundleCode(serverCode, {
-    platform: 'node',
-    alias: {
-      // These can ONLY be loaded on the client
-      '@orama/react-components': POLYFILL_PATH,
-    },
-  });
+  const { js: bundledServer } = await bundleCode(serverCode, { server: true });
 
   const executedFunction = new Function(
     'require',