chore: update shiki (#1074)

Author: maiieul

apps/component-tests/tsconfig.json

@@ -9,7 +9,7 @@
     "jsxImportSource": "@builder.io/qwik",
     "strict": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "incremental": true,

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

@@ -1,62 +1,25 @@
-import {
-  type ClassList,
-  type PropsOf,
-  component$,
-  useSignal,
-  useTask$,
-  $,
-} from '@builder.io/qwik';
+import { type ClassList, type PropsOf, component$ } from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
 import { cn } from '@qwik-ui/utils';
-import { codeToHtml } from 'shiki';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import { createHighlighter } from 'shiki/bundle/web';
+
+const jsEngine = createJavaScriptRegexEngine();
+
+const shiki = await createHighlighter({
+  themes: ['poimandres'],
+  langs: ['tsx', 'html', 'css'],
+  engine: jsEngine,
+});
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
   copyCodeClass?: ClassList;
   language?: 'tsx' | 'html' | 'css';
-  splitCommentStart?: string;
-  splitCommentEnd?: string;
 };
 
 export const Highlight = component$(
-  ({
-    code,
-    copyCodeClass,
-    language = 'tsx',
-    splitCommentStart = '{/* start */}',
-    splitCommentEnd = '{/* end */}',
-    ...props
-  }: HighlightProps) => {
-    const codeSig = useSignal('');
-
-    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 str = await codeToHtml(modifiedCode, {
-        lang: language,
-        theme: 'poimandres',
-      });
-
-      codeSig.value = str.toString();
-    });
-
-    useTask$(async ({ track }) => {
-      track(() => code);
-      await addShiki$();
-    });
-
+  ({ code, copyCodeClass, language = 'tsx', ...props }: HighlightProps) => {
     return (
       <div class="code-example data-pagefind-ignore relative max-h-[31.25rem] rounded-base">
         <CodeCopy
@@ -74,7 +37,12 @@ export const Highlight = component$(
           )}
           data-pagefind-ignore="all"
         >
-          <div dangerouslySetInnerHTML={codeSig.value} />
+          <div
+            dangerouslySetInnerHTML={shiki.codeToHtml(code, {
+              lang: language,
+              theme: 'poimandres',
+            })}
+          />
         </div>
       </div>
     );

apps/website/src/components/mdx-components/index.tsx

@@ -109,14 +109,14 @@ export const components: Record<string, Component> = {
     );
   }),
   pre: component$<{
-    __rawString__?: string;
-  }>(({ __rawString__ }) => {
+    rawCodeString?: string;
+  }>(({ rawCodeString }) => {
     return (
       <div
         class="code-example data-pagefind-ignore relative mb-6 max-h-[31.25rem] rounded-base"
         data-pagefind-ignore="all"
       >
-        <CodeCopy class="absolute right-3 top-3" code={__rawString__} />
+        <CodeCopy class="absolute right-3 top-3" code={rawCodeString} />
         <div
           class={cn(
             'max-h-[31.25rem] max-w-full overflow-y-auto rounded-base border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',

apps/website/tsconfig.json

@@ -9,7 +9,7 @@
     "jsxImportSource": "@builder.io/qwik",
     "strict": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "incremental": true,

apps/website/vite.config.ts

@@ -4,10 +4,10 @@ import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { recmaProvideComponents } from './recma-provide-components';
 import autoAPI from './auto-api';
+import { ShikiTransformer } from 'shiki';
 
 export default defineConfig(async () => {
-  const { default: rehypePrettyCode } = await import('rehype-pretty-code');
-  const { visit } = await import('unist-util-visit');
+  const { default: shikiRehype } = await import('@shikijs/rehype');
 
   return {
     plugins: [
@@ -22,37 +22,13 @@ export default defineConfig(async () => {
           providerImportSource: '~/_state/MDXProvider',
           recmaPlugins: [recmaProvideComponents],
           rehypePlugins: [
-            () => (tree) => {
-              visit(tree, (node) => {
-                if (node?.type === 'element' && node?.tagName === 'pre') {
-                  const [codeEl] = node.children;
-                  if (codeEl.tagName !== 'code') {
-                    return;
-                  }
-                  node.__rawString__ = codeEl.children?.[0].value;
-                }
-              });
-            },
             [
-              rehypePrettyCode,
+              shikiRehype,
               {
                 theme: 'poimandres',
+                transformers: [transformerSourceAsPreProp()],
               },
             ],
-            () => (tree) => {
-              visit(tree, (node) => {
-                if (node?.type === 'element' && node?.tagName === 'figure') {
-                  if (!('data-rehype-pretty-code-figure' in node.properties)) {
-                    return;
-                  }
-                  const preElement = node.children.at(-1);
-                  if (preElement.tagName !== 'pre') {
-                    return;
-                  }
-                  preElement.properties['__rawString__'] = node.__rawString__;
-                }
-              });
-            },
           ],
         },
       }),
@@ -101,10 +77,13 @@ 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'],
-    },
   };
 });
+
+function transformerSourceAsPreProp(): ShikiTransformer {
+  return {
+    pre(node) {
+      node.properties.rawCodeString = this.source;
+    },
+  };
+}

package.json

@@ -72,6 +72,8 @@
     "@oddbird/popover-polyfill": "0.4.3",
     "@playwright/test": "^1.44.1",
     "@qwikest/icons": "^0.0.13",
+    "@shikijs/rehype": "3.4.2",
+    "@shikijs/transformers": "3.4.2",
     "@swc-node/register": "^1.9.1",
     "@swc/core": "^1.5.7",
     "@types/decompress": "4.2.7",
@@ -114,10 +116,8 @@
     "prettier-plugin-tailwindcss": "^0.5.14",
     "pretty-quick": "^4.0.0",
     "qwik-nx": "^2.3.0",
-    "qwik-themes": "^0.2.0",
-    "rehype-pretty-code": "^0.13.2",
     "sass": "^1.77.2",
-    "shiki": "^1.21.0",
+    "shiki": "^3.4.2",
     "simple-git-hooks": "2.11.1",
     "specificity": "^1.0.0",
     "tailwind-merge": "^2.3.0",
@@ -130,7 +130,6 @@
     "typescript": "5.4.5",
     "undici": "5.28.4",
     "unified": "^11.0.4",
-    "unist-util-visit": "^5.0.0",
     "verdaccio": "^5.31.0",
     "vite": "5.2.11",
     "vite-plugin-dts": "^3.9.1",

packages/kit-headless/tsconfig.json

@@ -12,7 +12,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "incremental": true,

packages/kit-styled/tsconfig.json

@@ -12,7 +12,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "incremental": true,

packages/themes/project.json

@@ -5,12 +5,17 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nx/js:tsc",
+      "executor": "@nx/vite:build",
       "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
       "options": {
-        "main": "src/index.ts",
         "outputPath": "dist/packages/themes",
-        "tsConfig": "packages/themes/tsconfig.lib.json"
+        "configFile": "packages/themes/vite.config.ts",
+        "mode": "lib"
+      },
+      "configurations": {
+        "development": {},
+        "production": {}
       }
     },
     "lint": {

packages/themes/tsconfig.json

@@ -12,7 +12,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "incremental": true,