feat: provide more info for languages and themes

docs/.vitepress/components/ShikijiMiniPlayground.vue

@@ -2,33 +2,35 @@
 import { usePlayground } from '../store/playground'
 
 const play = usePlayground()
-
-function randomize() {
-  play.lang = play.allLanguages[Math.floor(Math.random() * play.allLanguages.length)]
-  play.theme = play.allThemes[Math.floor(Math.random() * play.allThemes.length)]
-}
 </script>
 
 <template>
   <div class="language-ts vp-adaptive-theme mini-playground" shadow :style="play.preStyle">
     <div absolute z-10 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5">
       <div i-carbon:chevron-down op50 />
       <select v-model="play.lang" font-mono>
-        <option v-for="lang in play.allLanguages" :key="lang" :value="lang">
-          {{ lang }}
+        <option v-for="lang in play.allLanguages" :key="lang.id" :value="lang.id">
+          {{ lang.name }}
         </option>
       </select>
       <div i-carbon:chevron-down op50 />
       <select v-model="play.theme" font-mono>
-        <option v-for="theme in play.allThemes" :key="theme" :value="theme">
-          {{ theme }}
+        <option v-for="theme in play.allThemes.filter(i => i.type === 'light')" :key="theme.id" :value="theme.id">
+          {{ theme.name }}
+        </option>
+        <option disabled>
+          ──────────
+        </option>
+        <option v-for="theme in play.allThemes.filter(i => i.type === 'dark')" :key="theme.id" :value="theme.id">
+          {{ theme.name }}
         </option>
       </select>
       <div flex-auto />
+      <div v-if="play.isLoading" svg-spinners:270-ring />
       <div op50 text-xs mr-2>
         Playground
       </div>
-      <button title="Randomize" hover="bg-gray/10" p1 rounded @click="randomize">
+      <button title="Randomize" hover="bg-gray/10" p1 rounded @click="play.randomize">
         <div i-carbon:shuffle op50 />
       </button>
     </div>

docs/.vitepress/components/ShikijiPlayground.vue

@@ -6,10 +6,9 @@ const play = usePlayground()
 
 <template>
   <div class="vp-doc">
-    <h1>WIP</h1>
-    <div grid="~ cols-2">
-      <textarea v-model="play.input" />
-      <div v-html="play.output" />
+    <div grid="~ cols-2 gap-4" p4>
+      <textarea v-model="play.input" font-mono rounded p4 my4.5 />
+      <ShikijiMiniPlayground />
     </div>
   </div>
 </template>

docs/.vitepress/store/playground.ts

@@ -1,51 +1,81 @@
 /// <reference types="vite/client" />
 
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import type { BuiltinLanguage, BuiltinTheme } from 'shikiji'
+import type { BuiltinLanguage, BuiltinTheme, BundledLanguageInfo, BundledThemeInfo } from 'shikiji'
 import { useLocalStorage } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 
 export const usePlayground = defineStore('playground', () => {
   const lang = useLocalStorage<BuiltinLanguage>('shikiji-playground-lang', 'typescript')
   const theme = useLocalStorage<BuiltinTheme>('shikiji-playground-theme', 'vitesse-dark')
-  const allThemes = ref<BuiltinTheme[]>([])
-  const allLanguages = ref<BuiltinLanguage[]>([])
-  const input = ref('console.log(\'Hello World\')')
+  const allThemes = shallowRef<BundledThemeInfo[]>([
+    {
+      id: 'vitesse-dark',
+      name: 'Vitesse Dark',
+      type: 'dark',
+      import: undefined!,
+    },
+  ])
+  const allLanguages = shallowRef<BundledLanguageInfo[]>([
+    {
+      id: 'typescript',
+      name: 'TypeScript',
+      import: undefined!,
+    },
+  ])
+  const input = useLocalStorage('shikiji-playground-input', '')
   const output = ref('<pre></pre>')
   const preStyle = ref('')
   const isLoading = ref(true)
 
+  function randomize() {
+    if (allLanguages.value.length && allThemes.value.length) {
+      lang.value = allLanguages.value[Math.floor(Math.random() * allLanguages.value.length)].id as any
+      theme.value = allThemes.value[Math.floor(Math.random() * allThemes.value.length)].id as any
+    }
+  }
+
   if (typeof window !== 'undefined') {
-    import('shikiji').then(async ({ getHighlighter, addClassToHast, bundledLanguages, bundledThemes }) => {
+    (async () => {
+      const { getHighlighter, addClassToHast } = await import('shikiji')
+      const { bundledLanguagesInfo } = await import('shikiji/langs')
+      const { bundledThemesInfo } = await import('shikiji/themes')
       const highlighter = await getHighlighter({
         themes: [theme.value],
-        langs: ['typescript', 'javascript', 'json', 'html', 'css', 'markdown', lang.value as any],
+        langs: ['typescript', 'javascript', lang.value as any],
       })
 
-      const samples = Object.fromEntries(
-        Array.from(
-          Object.entries(import.meta.glob('../../node_modules/shiki/samples/*.sample', {
-            exhaustive: true,
-            as: 'raw',
-          })),
-        ).map(([path, load]) => [path.split(/\//).pop()!.split(/\./).shift()!, load]),
-      )
+      const samplesCache = new Map<string, Promise<string | undefined>>()
+
+      function fetchSample(id: string) {
+        if (!samplesCache.has(id)) {
+          samplesCache.set(id, fetch(`https://raw.githubusercontent.com/shikijs/shiki/main/packages/shiki/samples/${id}.sample`)
+            .then(r => r.text())
+            .catch((e) => {
+              console.error(e)
+              return undefined
+            }))
+        }
+        return samplesCache.get(id)!
+      }
 
-      allThemes.value = Object.keys(bundledThemes) as any
-      allLanguages.value = Object.keys(bundledLanguages) as any
+      allThemes.value = bundledThemesInfo
+      allLanguages.value = bundledLanguagesInfo
 
       watch(input, run, { immediate: true })
 
-      watch([lang, theme], async () => {
+      watch([lang, theme], async (n, o) => {
         isLoading.value = true
         await Promise.all([
           highlighter.loadTheme(theme.value),
           highlighter.loadLanguage(lang.value as any),
         ])
-        const grammar = highlighter.getLangGrammar(lang.value) as any
-        const sample = await samples[grammar?._grammar?.name || lang.value]?.()
-        if (sample)
-          input.value = sample.replace(/\n.*?From.*?$/im, '').trim()
+        // Fetch sample if language changed
+        if ((o[0] || !input.value) && n[0] !== o[0]) {
+          const sample = await fetchSample(lang.value)
+          if (sample)
+            input.value = sample.replace(/\n.*?From.*?$/im, '').trim()
+        }
         run()
       }, { immediate: true })
 
@@ -64,7 +94,7 @@ export const usePlayground = defineStore('playground', () => {
         })
         isLoading.value = false
       }
-    })
+    })()
   }
 
   return {
@@ -76,6 +106,7 @@ export const usePlayground = defineStore('playground', () => {
     output,
     isLoading,
     preStyle,
+    randomize,
   }
 })
 

docs/.vitepress/theme/index.ts

@@ -6,14 +6,11 @@ import 'shikiji-twoslash/style-rich.css'
 import './style.css'
 import './custom.css'
 import { createPinia } from 'pinia'
-import HomeDemo from '../components/HomeDemo.vue'
 
 export default {
   extends: Theme,
   Layout: () => {
-    return h(Theme.Layout, null, {
-      'home-features-after': () => h(HomeDemo),
-    })
+    return h(Theme.Layout, null, {})
   },
   enhanceApp({ app }: any) {
     app.use(createPinia())

docs/index.md

@@ -30,3 +30,5 @@ features:
     icon: 🎄
     details: Fully tree-shakable ESM, runs on any JavaScript runtime, including Browser, Node.js, Cloudflare Workers, etc.
 ---
+
+<HomeDemo />

docs/languages.md

@@ -37,6 +37,7 @@ Inherited from [`shiki`](https://github.com/shikijs/shiki/blob/main/docs/languag
 | `crystal` | Crystal |  |
 | `csharp` | C# | `c#`, `cs` |
 | `css` | CSS |  |
+| `csv` | csv syntax |  |
 | `cue` | CUE |  |
 | `cypher` | Cypher | `cql` |
 | `d` | D |  |
@@ -108,6 +109,7 @@ Inherited from [`shiki`](https://github.com/shikijs/shiki/blob/main/docs/languag
 | `nginx` | Nginx |  |
 | `nim` | Nim |  |
 | `nix` | Nix |  |
+| `nushell` | nushell | `nu` |
 | `objective-c` | Objective-C | `objc` |
 | `objective-cpp` | Objective-C++ |  |
 | `ocaml` | OCaml |  |
@@ -172,7 +174,7 @@ Inherited from [`shiki`](https://github.com/shikijs/shiki/blob/main/docs/languag
 | `wasm` | WebAssembly |  |
 | `wenyan` | Wenyan | `文言` |
 | `wgsl` | WGSL |  |
-| `wolfram` | Wolfram |  |
+| `wolfram` | Wolfram | `wl` |
 | `xml` | XML |  |
 | `xsl` | XSL |  |
 | `yaml` | YAML | `yml` |

docs/package.json

@@ -10,19 +10,16 @@
     "fuse.js": "^7.0.0"
   },
   "devDependencies": {
-    "@types/markdown-it-container": "^2.0.9",
     "@unocss/reset": "^0.58.0",
     "@vueuse/core": "^10.7.0",
-    "gray-matter": "^4.0.3",
-    "markdown-it-container": "^3.0.0",
     "pinia": "^2.1.7",
-    "shiki": "^0.14.6",
+    "shiki": "^0.14.7",
     "shikiji": "workspace:*",
     "shikiji-transformers": "workspace:*",
     "shikiji-twoslash": "workspace:*",
     "unocss": "^0.58.0",
     "unplugin-vue-components": "^0.26.0",
     "vitepress": "1.0.0-rc.30",
-    "vue": "^3.3.10"
+    "vue": "^3.3.11"
   }
 }

docs/themes.md

@@ -7,14 +7,12 @@ Inherited from [`shiki`](https://github.com/shikijs/shiki/blob/main/docs/themes.
 <!--all-themes:start-->
 | ID |
 | --- |
-| `css-variables` |
 | `dark-plus` |
 | `dracula` |
 | `dracula-soft` |
 | `github-dark` |
 | `github-dark-dimmed` |
 | `github-light` |
-| `hc_light` |
 | `light-plus` |
 | `material-theme` |
 | `material-theme-darker` |
@@ -34,6 +32,7 @@ Inherited from [`shiki`](https://github.com/shikijs/shiki/blob/main/docs/themes.
 | `slack-ochin` |
 | `solarized-dark` |
 | `solarized-light` |
+| `vitesse-black` |
 | `vitesse-dark` |
 | `vitesse-light` |
 <!--all-themes:end-->

package.json

@@ -13,7 +13,7 @@
     "docs:build": "pnpm -C docs run docs:build"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.4.5",
+    "@antfu/eslint-config": "^2.4.6",
     "@antfu/ni": "^0.21.12",
     "@antfu/utils": "^0.7.7",
     "@rollup/plugin-alias": "^5.1.0",
@@ -28,8 +28,8 @@
     "@vitest/coverage-v8": "^1.0.4",
     "ansi-sequence-parser": "^1.1.1",
     "bumpp": "^9.2.1",
-    "eslint": "npm:[email protected]",
     "eslint-plugin-format": "^0.1.0",
+    "eslint": "npm:[email protected]",
     "eslint-ts-patch": "8.55.0-1",
     "esno": "^4.0.0",
     "fast-glob": "^3.3.2",
@@ -46,16 +46,16 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-typescript2": "^0.36.0",
-    "shiki": "^0.14.6",
+    "shiki": "^0.14.7",
     "shikiji": "workspace:*",
     "simple-git-hooks": "^2.9.0",
     "taze": "^0.13.0",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
-    "vite": "^5.0.9",
+    "vite": "^5.0.10",
     "vitest": "^1.0.4",
     "vue-tsc": "^1.8.25",
-    "wrangler": "^3.20.0"
+    "wrangler": "^3.21.0"
   },
   "pnpm": {
     "patchedDependencies": {

packages/shikiji-twoslash/package.json

@@ -55,7 +55,7 @@
     "@iconify-json/carbon": "^1.1.26",
     "@iconify-json/codicon": "^1.1.39",
     "hast-util-from-html": "^2.0.1",
-    "shiki": "^0.14.6",
+    "shiki": "^0.14.7",
     "shiki-twoslash": "^3.1.2",
     "typescript": "^5.3.3"
   }

packages/shikiji/package.json

@@ -78,7 +78,7 @@
     "shikiji-core": "workspace:*"
   },
   "devDependencies": {
-    "shiki": "^0.14.6",
+    "shiki": "^0.14.7",
     "vscode-oniguruma": "^1.7.0"
   }
 }

packages/shikiji/rollup.config.mjs

@@ -79,15 +79,15 @@ export default defineConfig([
           await Promise.all(
             langs.map(file => fs.writeFile(
               join(dirname(file), `${basename(file, '.mjs')}.d.mts`),
-              'import { LanguageRegistration } from \'../types.mjs\';declare const reg: LanguageRegistration[];export default reg',
+              'import { LanguageRegistration } from \'shikiji-core\';declare const reg: LanguageRegistration[];export default reg',
               'utf-8',
             )),
           )
           const themes = await fg('dist/themes/*.mjs', { absolute: true })
           await Promise.all(
             themes.map(file => fs.writeFile(
               join(dirname(file), `${basename(file, '.mjs')}.d.mts`),
-              'import { ThemeRegistrationRaw } from \'../types.mjs\';declare const reg: ThemeRegistrationRaw;export default reg',
+              'import { ThemeRegistrationRaw } from \'shikiji-core\';declare const reg: ThemeRegistrationRaw;export default reg',
               'utf-8',
             )),
           )