improve client-side rendering, plus add todos

Author: avivkeller

src/generators/jsx-ast/index.mjs

@@ -17,7 +17,7 @@ export default {
   name: 'jsx-ast',
   version: '1.0.0',
   description: 'Generates JSX AST from the input MDAST',
-  dependsOn: 'ast',
+  dependsOn: 'metadata',
 
   /**
    * Generates a JSX AST

src/generators/web/build/bundle.mjs

@@ -2,9 +2,9 @@ import { writeFile } from 'node:fs/promises';
 
 import esbuild from 'esbuild';
 
-import { ESBUILD_RESOLVE_DIR, POLYFILL_PATH } from '../constants.mjs';
+import { RESOLVE_DIR } from '../constants.mjs';
+import staticData from './data.mjs';
 import getPlugins from './plugins.mjs';
-import staticData from '../server/data.mjs';
 
 /** @typedef {{ server: boolean, debug: boolean }} BundleOptions */
 
@@ -17,7 +17,7 @@ import staticData from '../server/data.mjs';
 const createConfig = (code, { server, debug }) => ({
   stdin: {
     contents: code,
-    resolveDir: ESBUILD_RESOLVE_DIR,
+    resolveDir: RESOLVE_DIR,
     loader: 'jsx',
   },
   bundle: true,
@@ -27,25 +27,24 @@ const createConfig = (code, { server, debug }) => ({
   jsx: 'automatic',
   write: false,
   outfile: 'output.js',
-  // When updating the `define` object,
-  // also update client/types.d.ts to
+  // 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.
+    // 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',
-    // 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,

src/generators/web/server/data.mjs src/generators/web/build/data.mjssrc/generators/web/server/data.mjs renamed to src/generators/web/build/data.mjs

@@ -36,6 +36,8 @@ const generateCode = ast => generate(ast).code;
  */
 export default () => {
   // Create base imports from JSX_IMPORTS configuration
+  // TODO(@avivkeller): A lot of these imports aren't interactive (i.e. the MetaBar),
+  // so it would be nice to not pass them to the client at all.
   const baseImports = Object.values(JSX_IMPORTS).map(({ name, source }) =>
     createImportDeclaration(name, source)
   );

src/generators/web/build/generate.mjs

@@ -16,7 +16,8 @@ const MDXNavBar = () => {
       sidebarItemTogglerAriaLabel="Toggle navigation menu"
       navItems={[]}
     >
-      <SearchBox />
+      {/* TODO(@avivkeller): Orama doesn't support Server-Side rendering yet */}
+      {CLIENT && <SearchBox />}
       <ThemeToggle
         onClick={toggleTheme}
         aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}

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

@@ -0,0 +1,3 @@
+{
+  "sideEffects": false
+}

src/generators/web/client/package.json

@@ -1,14 +1,8 @@
 import { fileURLToPath } from 'node:url';
 
-export const ESBUILD_RESOLVE_DIR = fileURLToPath(
-  new URL('./client', import.meta.url)
-);
+export const RESOLVE_DIR = fileURLToPath(new URL('./client', import.meta.url));
 
-export const POLYFILL_PATH = fileURLToPath(
-  new URL('./server/polyfill.mjs', import.meta.url)
-);
-
-// Imports are relative to ESBUILD_RESOLVE_DIR
+// Imports are relative to RESOLVE_DIR
 export const JSX_IMPORTS = {
   NavBar: {
     name: 'NavBar',

src/generators/web/constants.mjs

@@ -6,7 +6,7 @@ import { estreeToBabel } from 'estree-to-babel';
 import { minify } from 'html-minifier-terser';
 import Mustache from 'mustache';
 
-import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
+import { RESOLVE_DIR } from './constants.mjs';
 import { TERSER_MINIFY_OPTIONS } from '../../constants.mjs';
 import bundleCode from './build/bundle.mjs';
 import createASTBuilder from './build/generate.mjs';
@@ -103,7 +103,7 @@ export default {
       'utf-8'
     );
     const astBuilders = createASTBuilder();
-    const require = createRequire(ESBUILD_RESOLVE_DIR);
+    const require = createRequire(RESOLVE_DIR);
 
     // Process all entries in parallel
     const results = await Promise.all(