don't pass shiki to client

Author: avivkeller

package-lock.json

@@ -43,8 +43,8 @@
     "@babel/generator": "^7.27.3",
     "@babel/types": "^7.27.3",
     "@clack/prompts": "^0.10.1",
-    "@node-core/rehype-shiki": "^1.0.1-1815fa769361b836fa52cfab9c5bd4991f571c95",
-    "@node-core/ui-components": "^1.0.1-f349d7e1aeb03ea35fd3eca134fd48e02e7bf717",
+    "@node-core/rehype-shiki": "^1.0.1-601b74e6d7dfc706eb99e854fc96120bea42f03a",
+    "@node-core/ui-components": "^1.0.1-6cb8b0a0c75c24f5ccc84bb07a1ea9b4b810abd2",
     "@orama/orama": "^3.1.6",
     "@orama/plugin-data-persistence": "^3.1.6",
     "@orama/react-components": "^0.8.0",

package.json

@@ -1,6 +1,20 @@
 import { useState } from 'react';
 import BaseCodeBox from '@node-core/ui-components/Common/BaseCodeBox';
-import { getLanguageDisplayName } from '@node-core/rehype-shiki';
+import { staticData } from '../data.mjs';
+
+const languageDisplayNameMap = new Map(staticData.shikiDisplayNameMap);
+
+/**
+ * Get the display name of a language
+ * @param {string} language The language ID
+ */
+export const getLanguageDisplayName = language => {
+  const entry = Array.from(languageDisplayNameMap.entries()).find(([aliases]) =>
+    aliases.includes(language.toLowerCase())
+  );
+
+  return entry?.[1] ?? language.toLowerCase();
+};
 
 const MDXCodeBox = ({ className, ...props }) => {
   const matches = className?.match(/language-(?<language>[a-zA-Z]+)/);

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

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-undef
+export const staticData = __STATIC_DATA__;

src/generators/web/client/data.mjs

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

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

@@ -6,7 +6,7 @@ import { estreeToBabel } from 'estree-to-babel';
 import Mustache from 'mustache';
 
 import { ESBUILD_RESOLVE_DIR } from './constants.mjs';
-import createASTBuilder from './utils/build.mjs';
+import createASTBuilder from './utils/astBuilder.mjs';
 import bundleCode from './utils/bundle.mjs';
 
 /**
@@ -17,7 +17,9 @@ import bundleCode from './utils/bundle.mjs';
  */
 async function executeServerCode(serverCode, require) {
   // Bundle the server code for execution
-  const { js: bundledServer } = await bundleCode(serverCode, true);
+  const { js: bundledServer } = await bundleCode(serverCode, {
+    platform: 'node',
+  });
 
   // Create a safe execution context that returns the rendered content
   const executedFunction = new Function(

src/generators/web/index.mjs

@@ -7,6 +7,7 @@ import stylePlugin from 'esbuild-style-plugin';
 import postcssCalc from 'postcss-calc';
 
 import { ESBUILD_RESOLVE_DIR } from '../constants.mjs';
+import staticData from './staticData.mjs';
 
 const uiComponentsResolver = {
   name: 'ui-components-resolver',
@@ -53,25 +54,27 @@ const uiComponentsResolver = {
 /**
  * Bundles JavaScript code and returns JS/CSS content
  * @param {string} code - Source code to bundle
- * @param {boolean} server
+ * @param {import('esbuild').BuildOptions} options
  * @returns {Promise<{js: string, css: string}>}
  */
-export default async (code, server) => {
+export default async (code, options) => {
   const result = await esbuild.build({
     stdin: {
       contents: code,
       resolveDir: ESBUILD_RESOLVE_DIR,
       loader: 'jsx',
     },
     bundle: true,
-    minify: false,
-    sourcemap: 'inline',
+    minify: true,
     format: 'iife',
     target: 'es2020',
-    platform: server ? 'node' : 'browser',
+    platform: 'browser',
     jsx: 'automatic',
     write: false,
-    // This output file is a pseudo-file. It's never written to (`write: false`),
+    define: {
+      __STATIC_DATA__: staticData,
+    },
+    // This output file is a pseudo-file. It's never written (`write: false`),
     // but it gives ESLint a basename for the output.
     outfile: 'output.js',
     plugins: [
@@ -82,6 +85,7 @@ export default async (code, server) => {
       }),
       uiComponentsResolver,
     ],
+    ...options,
   });
 
   const [jsFile, cssFile] = result.outputFiles;

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

@@ -0,0 +1,28 @@
+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.
+ */
+export const createStaticData = () => {
+  const shikiDisplayNameMap = [
+    ...new Map(
+      shiki
+        .getLoadedLanguages()
+        .map(shiki.getLanguage)
+        .map(({ name, _grammar: { aliases = [], displayName } }) => [
+          name,
+          [[...aliases, name], displayName],
+        ])
+    ).values(),
+  ];
+
+  return {
+    /** @type {Array<[string[], string]>} */
+    shikiDisplayNameMap,
+  };
+};
+
+const staticData = JSON.stringify(createStaticData());
+export default staticData;

src/generators/web/utils/bundle.mjs

@@ -1,6 +1,6 @@
 'use strict';
 
-import rehypeShikiji from '@node-core/rehype-shiki';
+import rehypeShikiji from '@node-core/rehype-shiki/plugin';
 import recmaJsx from 'recma-jsx';
 import rehypeRecma from 'rehype-recma';
 import rehypeStringify from 'rehype-stringify';