fixup some comments and types

Author: avivkeller

src/generators/web/client/components/SearchBox/index.jsx

@@ -43,7 +43,6 @@ const MDXSearchBox = () => {
         Search documentation
       </OramaSearchButton>
       <OramaSearchBox
-        disabled={!client || isLoading}
         disableChat={true}
         linksTarget="_self"
         clientInstance={client}

src/generators/web/client/types.d.ts

@@ -1,4 +1,4 @@
-import { createStaticData } from '../utils/staticData.mjs';
+import { createStaticData } from '../server/data.mjs';
 
 declare global {
   const __STATIC_DATA__: ReturnType<typeof createStaticData>;

src/generators/web/constants.mjs

@@ -8,12 +8,6 @@ export const POLYFILL_PATH = fileURLToPath(
   new URL('./server/polyfill.mjs', import.meta.url)
 );
 
-export const TEMPLATE_PLACEHOLDERS = {
-  TITLE: '__TITLE__',
-  DEHYDRATED: '__DEHYDRATED__',
-  JAVASCRIPT: '__JAVASCRIPT__',
-};
-
 // Imports are relative to ESBUILD_RESOLVE_DIR
 export const JSX_IMPORTS = {
   NavBar: {

src/generators/web/index.mjs

@@ -59,23 +59,24 @@ async function processEntry(
 
   // Generate and execute server-side code for SSR
   const serverCode = buildServerProgram(program);
-  const serverRenderedHTML = await executeServerCode(serverCode, require);
+  const dehydrated = await executeServerCode(serverCode, require);
 
   // Generate and bundle client-side code
   const clientCode = buildClientProgram(program);
   const clientBundle = await bundleCode(clientCode);
 
   // Render the final HTML using the template
   const finalHTML = await minify(
+    // TODO(@avivkeller): Don't depend on mustache
     Mustache.render(template, {
       title: entry.data.heading.data.name,
-      dehydrated: serverRenderedHTML,
+      dehydrated: dehydrated,
       javascript: clientBundle.js,
     }),
     TERSER_MINIFY_OPTIONS
   );
 
-  // Write HTML file immediately if output directory is specified
+  // Write HTML file if output directory is specified
   if (output) {
     await writeFile(join(output, `${entry.data.api}.html`), finalHTML, 'utf-8');
   }

src/generators/web/server/data.mjs

@@ -1,9 +1,10 @@
 import { shiki } from '@node-core/rehype-shiki';
 
 /**
- * This creates the static data for the client. For example,
- * the map of language display names, without loading Shiki,
- * a very large module, on the client.
+ * This creates static data that the server can pass to the client,
+ * since there are cases (for example, Shiki's display name map) where
+ * we want to load a large set of data on the server, and only pass
+ * a small subset of information to the client.
  */
 export const createStaticData = () => {
   const shikiDisplayNameMap = [

src/generators/web/utils/bundle.mjs

@@ -48,7 +48,7 @@ const uiComponentsResolver = {
  * Bundles JavaScript code and returns JS/CSS content
  * @param {string} code - Source code to bundle
  * @param {import('esbuild').BuildOptions} [options={}]
- * @returns {Promise<{js: string, css: string}>}
+ * @returns {Promise<{js: string, css?: string}>}
  */
 export default async (code, options = {}) => {
   const result = await esbuild.build({
@@ -77,6 +77,8 @@ export default async (code, options = {}) => {
     ],
     ...options,
     alias: {
+      // Preact is much smaller than react, so we
+      // use it instead
       react: 'preact/compat',
       'react-dom': 'preact/compat',
       ...options.alias,