use improved shiki node version now that we're on static

Author: thejackshelton

apps/website/src/components/highlight/highlight.tsx

@@ -1,23 +1,12 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { ClassList, PropsOf, component$, useSignal, useTask$, $ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { cn } from '@qwik-ui/utils';
-import poimandres from 'shiki/themes/poimandres.mjs';
-import html from 'shiki/langs/html.mjs';
-import css from 'shiki/langs/css.mjs';
-import tsx from 'shiki/langs/tsx.mjs';
-import { createHighlighterCore, BundledLanguage } from 'shiki/index.mjs';
-
-// Create a single highlighter instance
-const highlighterPromise = createHighlighterCore({
-  themes: [poimandres],
-  langs: [html, css, tsx],
-  loadWasm: import('shiki/wasm'),
-});
+import { codeToHtml } from 'shiki';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
   copyCodeClass?: ClassList;
-  language?: BundledLanguage;
+  language?: 'tsx' | 'html' | 'css';
   splitCommentStart?: string;
   splitCommentEnd?: string;
 };
@@ -33,26 +22,31 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    useTask$(async ({ track }) => {
-      track(() => code);
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[1];
       }
 
       partsOfCode = modifiedCode.split(splitCommentEnd);
+
       if (partsOfCode.length > 1) {
         modifiedCode = partsOfCode[0];
       }
 
-      const highlighter = await highlighterPromise;
-      const str = highlighter.codeToHtml(modifiedCode, {
+      const str = await codeToHtml(modifiedCode, {
         lang: language,
         theme: 'poimandres',
       });
-      codeSig.value = str;
+
+      codeSig.value = str.toString();
+    });
+
+    useTask$(async () => {
+      await addShiki$();
     });
 
     return (

apps/website/vite.config.ts

@@ -105,5 +105,10 @@ export default defineConfig(async () => {
         'Cache-Control': 'public, max-age=600',
       },
     },
+    optimizeDeps: {
+      // Put problematic deps that break bundling here, mostly those with binaries.
+      // For example ['better-sqlite3'] if you use that in server functions.
+      exclude: ['shiki'],
+    },
   };
 });