chore: simplify shiki setup

packages/panda/src/utils/create-variables.ts

@@ -18,17 +18,17 @@ export const createVariables = (color: ColorPalette): string => {
   const lightTheme = `
   :where(:root, .light) {
     ${
-      // @ts-expect-error
-      semanticTokens.light.join('\n    ')
+      // biome-ignore lint/complexity/useLiteralKeys: <explanation>
+      semanticTokens['light'].join('\n    ')
     }
   }
   `
 
   const darkTheme = `
   .dark {
     ${
-      // @ts-expect-error
-      semanticTokens.dark.join('\n    ')
+      // biome-ignore lint/complexity/useLiteralKeys: <explanation>
+      semanticTokens['dark'].join('\n    ')
     }
   }
   `

website/next.config.mjs

@@ -3,9 +3,11 @@ const nextConfig = {
   experimental: {
     optimizePackageImports: ['@ark-ui/react'],
   },
-  transpilePackages: ['shiki'],
   outputFileTracingIncludes: {
-    '/*': ['../components/**/*', '../packages/panda/src/theme/recipes/**/*'],
+    '/*': [
+      // '../components/**/*',
+      '../packages/panda/src/theme/recipes/**/*',
+    ],
   },
 }
 

website/package.json

@@ -26,14 +26,14 @@
     "@park-ui/panda-preset": "workspace:*",
     "@prisma/client": "6.0.0",
     "@types/file-saver": "2.0.7",
-    "file-saver": "2.0.5",
-    "jszip": "3.10.1",
     "@types/node": "22.10.1",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@uidotdev/usehooks": "2.4.1",
     "effect": "3.10.19",
+    "file-saver": "2.0.5",
     "globby": "14.0.2",
+    "jszip": "3.10.1",
     "lucide-react": "0.462.0",
     "next": "15.0.3",
     "next-auth": "5.0.0-beta.25",

website/src/components/docs/installation-guide.tsx

@@ -1,18 +1,15 @@
-import { codeToHtml } from 'shiki'
 import { Box } from 'styled-system/jsx'
 import { Tabs } from '~/components/ui/tabs'
 import { getServerContext } from '~/lib/server-context'
+import { highlight } from '~/lib/shiki'
 import { CodePreview } from '../code-preview'
 import { ManualIntallationGuide } from './manual-installation-guide'
 
 export const InstallationGuide = async () => {
   const { component } = getServerContext()
 
   const code = `npx @park-ui/cli components add ${component}`
-  const html = await codeToHtml(code, {
-    lang: 'bash',
-    theme: 'github-dark-default',
-  })
+  const html = await highlight(code)
 
   return (
     <Tabs.Root defaultValue="cli">

website/src/components/docs/manual-installation-guide.tsx

@@ -1,14 +1,11 @@
 import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { Array, Effect, pipe } from 'effect'
-import { is } from 'effect/Match'
-import { Box } from 'styled-system/jsx'
 import { Code } from '~/components/ui/code'
 import { Step, Steps } from '~/components/ui/stepper'
 import { Text } from '~/components/ui/text'
 import { getServerContext } from '~/lib/server-context'
 import { highlight } from '~/lib/shiki'
-import { CodePreview } from '../code-preview'
 import { CodePreviewTabs } from '../code-preview-tabs'
 import { Recipe } from './recipe'
 

website/src/components/ui/pre.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react'
-import { codeToHtml } from 'shiki'
 import { Box } from 'styled-system/jsx'
 import { CodePreview } from '~/components/code-preview'
+import { highlight } from '~/lib/shiki'
 import { LivePreview } from '../live-preview'
 
 export const Pre = async (props: PropsWithChildren) => {
@@ -11,13 +11,9 @@ export const Pre = async (props: PropsWithChildren) => {
   const rawCode = props.children?.props.children.toString() as string
 
   const hasPreview = rawCode.startsWith('// live')
+  const html = await highlight(rawCode)
   const code = rawCode.replace('// live', '').trim()
 
-  const html = await codeToHtml(code, {
-    lang,
-    theme: 'github-dark-default',
-  })
-
   return (
     <Box borderWidth="1px" borderRadius="l3" overflow="hidden">
       {hasPreview && (

website/src/lib/blocks.ts

@@ -3,7 +3,7 @@ import { basename, join } from 'node:path'
 import { Schema } from '@effect/schema'
 import { Effect, pipe } from 'effect'
 import { globby } from 'globby'
-import { highlight } from './shiki'
+import { highlight } from '~/lib/shiki'
 
 const SourceFile = Schema.Struct({
   filename: Schema.String,

website/src/lib/shiki.ts

@@ -1,9 +1,12 @@
-import { codeToHtml } from 'shiki'
+import { createHighlighter } from 'shiki'
 
-export const highlight = async (code: string, framework?: string) => {
-  const lang = framework === 'vue' ? 'vue' : 'tsx'
-  return codeToHtml(code, {
-    lang,
+const highlighter = createHighlighter({
+  themes: ['github-dark-default'],
+  langs: ['vue', 'tsx'],
+})
+
+export const highlight = async (code: string, framework?: string) =>
+  (await highlighter).codeToHtml(code, {
+    lang: framework === 'vue' ? 'vue' : 'tsx',
     theme: 'github-dark-default',
   })
-}