Merge pull request #596 from maiieul/shikiji

thejackshelton · web-flow · commit 87c0a05bc7ef · 2024-01-12T11:11:01.000-06:00
refactor(shikiji): remove shiki and use shikiji as a package
diff --git a/apps/website/src/_state/app-state.type.ts b/apps/website/src/_state/app-state.type.ts
@@ -1,9 +1,5 @@
-import { NoSerialize } from '@builder.io/qwik';
-import type { Highlighter } from 'shiki';
-
 export interface AppState {
   mode: 'light' | 'dark';
-  highlighter?: NoSerialize<Highlighter>;
   isSidebarOpened: boolean;
   featureFlags?: {
     showFluffy?: boolean;
diff --git a/apps/website/src/components/highlight/get-or-create-highlighter.ts b/apps/website/src/components/highlight/get-or-create-highlighter.ts
diff --git a/apps/website/src/components/highlight/highlight.tsx b/apps/website/src/components/highlight/highlight.tsx
@@ -7,6 +7,7 @@ import {
 } from '@builder.io/qwik';
 import { OmitSignalClass } from '@qwik-ui/utils';
 import { CodeCopy } from '../code-copy/code-copy';
+import { codeToHtml } from 'shikiji';
 
 export type HighlightProps = OmitSignalClass<QwikIntrinsicElements['div']> & {
   code: string;
@@ -29,8 +30,6 @@ export const Highlight = component$(
 
     useVisibleTask$(
       async function createHighlightedCode() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const highlighter = await (window as any).shikiji;
         let modifiedCode: string = code;
 
         let partsOfCode = modifiedCode.split(splitCommentStart);
@@ -43,7 +42,7 @@ export const Highlight = component$(
           modifiedCode = partsOfCode[0];
         }
 
-        const str = await highlighter.codeToHtml(modifiedCode, {
+        const str = await codeToHtml(modifiedCode, {
           lang: language,
           themes: {
             light: 'poimandres',
diff --git a/apps/website/src/components/mdx-components/index.tsx b/apps/website/src/components/mdx-components/index.tsx
@@ -95,20 +95,11 @@ export const components: Record<string, any> = {
       <div
         {...props}
         class={[
-          cn(
-            'code-example relative -mx-6 mb-6 max-h-[31.25rem] rounded-xl bg-slate-900 lg:-mx-8',
-            props.class,
-          ),
+          cn('relative -mx-6 mb-6 max-h-[31.25rem] rounded-xl lg:-mx-8', props.class),
         ]}
       >
-        <CodeCopy
-          class="absolute right-4 top-4 border-2 text-slate-50 hover:bg-slate-800 hover:text-slate-50"
-          code={__rawString__}
-        />
-        <div
-          style={''} // required to override shiki's
-          class="tab-size max-h-[31.25rem] max-w-full overflow-auto rounded-xl border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm"
-        >
+        <CodeCopy class="absolute right-4 top-4" code={__rawString__} />
+        <div class="max-h-[31.25rem] max-w-full overflow-auto rounded-xl border bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm">
           <pre>
             <Slot />
           </pre>
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
@@ -63,14 +63,6 @@ export default component$(() => {
         <meta charSet="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
-        <script
-          type="module"
-          dangerouslySetInnerHTML={
-            /*javascript*/ `
-            window.shikiji = import('https://esm.sh/shikiji@0.5.0');
-        `
-          }
-        />
       </head>
       <body
         lang="en"
diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
@@ -5,21 +5,10 @@ import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { recmaProvideComponents } from './recma-provide-components';
 
-import { getHighlighter, type Highlighter } from 'shiki';
-
-let highlighter: Highlighter;
-
 export default defineConfig(async () => {
   const { default: rehypePrettyCode } = await import('rehype-pretty-code');
   const { visit } = await import('unist-util-visit');
 
-  async function getOrCreateHighlighter() {
-    if (highlighter) {
-      return highlighter;
-    }
-    highlighter = await getHighlighter({ theme: 'poimandres' });
-    return highlighter;
-  }
   return {
     plugins: [
       qwikNxVite(),
@@ -31,6 +20,7 @@ export default defineConfig(async () => {
         },
         mdx: {
           providerImportSource: '~/_state/MDXProvider',
+          // @ts-ignore
           recmaPlugins: [recmaProvideComponents],
           rehypePlugins: [
             () => (tree) => {
@@ -46,9 +36,10 @@ export default defineConfig(async () => {
               });
             },
             [
+              // @ts-ignore
               rehypePrettyCode,
               {
-                getHighlighter: getOrCreateHighlighter,
+                theme: 'poimandres',
                 onVisitLine(node: any) {
                   // Prevent lines from collapsing in `display: grid` mode, and allow empty
                   // lines to be copy/pasted
diff --git a/package.json b/package.json
@@ -127,7 +127,7 @@
     "react-dom": "18.2.0",
     "rehype-pretty-code": "^0.10.2",
     "sass": "^1.66.1",
-    "shiki": "0.14.5",
+    "shikiji": "0.9.18",
     "storybook": "^7.4.0",
     "storybook-framework-qwik": "^0.2.3",
     "tailwind-merge": "^1.14.0",
@@ -138,7 +138,7 @@
     "tsm": "2.3.0",
     "typescript": "^5.2.2",
     "undici": "^5.23.0",
-    "unified": "^10.1.2",
+    "unified": "^11.0.4",
     "unist-util-visit": "^5.0.0",
     "verdaccio": "^5.0.4",
     "vite": "^5.0.4",
diff --git a/packages/kit-fluffy/src/components/badge/badge.tsx b/packages/kit-fluffy/src/components/badge/badge.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
