docs(interactive): improve chunk spliting

interactive/components/Config.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { evaluateUserConfig } from '@unocss/shared-docs'
 import type { UserConfig } from '@unocss/core'
-import CodeMirror from '../../packages/inspector/client/components/CodeMirror.vue'
+
+const CodeMirror = defineAsyncComponent(() => import('../../packages/inspector/client/components/CodeMirror.vue'))
 
 let raw = $ref(userConfigRaw.value || defaultConfigRaw)
 let config = $ref<UserConfig | undefined>()
@@ -68,7 +69,14 @@ function save() {
     </div>
   </div>
   <div text-left of-hidden grid="~ rows-[1fr_max-content]" pb5>
-    <CodeMirror v-model="raw" mode="ts" h-auto font-mono border="~ base" pl2 w-full of-auto />
+    <Suspense>
+      <CodeMirror v-model="raw" mode="ts" h-auto font-mono border="~ base" pl2 w-full of-auto />
+      <template #fallback>
+        <div border="~ base" pl2 w-full flex text-center justify-center italtic op50>
+          loading...
+        </div>
+      </template>
+    </Suspense>
     <div flex-none w-full of-hidden>
       <div
         v-if="isLoading"

interactive/components/Search.vue

@@ -20,7 +20,8 @@ watch(
 )
 
 async function excuteSearch() {
-  isSearching.value = true
+  if (input.value)
+    isSearching.value = true
   try {
     searchResult.value = await searcher.search(input.value)
   }

interactive/composables/shiki.ts

@@ -1,21 +1,21 @@
 import type { Highlighter, Lang } from 'shiki'
-import { getHighlighter, setCDN } from 'shiki'
-
-setCDN('/shiki/')
 
 export const shiki = ref<Highlighter>()
 
-getHighlighter({
-  themes: [
-    'vitesse-dark',
-    'vitesse-light',
-  ],
-  langs: [
-    'css',
-    'javascript',
-  ],
-})
-  .then(i => shiki.value = i)
+import('shiki')
+  .then(async (r) => {
+    r.setCDN('/shiki/')
+    shiki.value = await r.getHighlighter({
+      themes: [
+        'vitesse-dark',
+        'vitesse-light',
+      ],
+      langs: [
+        'css',
+        'javascript',
+      ],
+    })
+  })
 
 export function highlight(code: string, lang: Lang) {
   if (!shiki.value)

interactive/composables/utils.ts

@@ -2,5 +2,5 @@ import type { RuleItem } from '~/types'
 import { mdnIndex } from '~/data/mdn-index'
 
 export function getDocs(item: RuleItem) {
-  return item.features?.map(i => mdnIndex.find(s => s.title === i)!) || []
+  return item.features?.map(i => mdnIndex.value.find(s => s.title === i)!) || []
 }

interactive/data/mdn-index.ts

@@ -1,8 +1,12 @@
 import type { DocItem } from '../types'
-import index from './mdn-index.json'
 
-export const mdnIndex = (index as DocItem[])
-  .map((i) => {
-    i.type = 'mdn'
-    return i
+export const mdnIndex = ref<DocItem[]>([])
+
+import('./mdn-index.json')
+  .then((r) => {
+    mdnIndex.value = (r.default as DocItem[])
+      .map((i) => {
+        i.type = 'mdn'
+        return i
+      })
   })

interactive/nuxt.config.ts

@@ -41,6 +41,7 @@ export default defineNuxtConfig({
     },
   },
   vite: {
+    logLevel: 'info',
     // @ts-expect-error any
     vue: {
       include: [/\.vue$/, /\.md$/],

packages/shared-docs/src/search.ts

@@ -1,16 +1,16 @@
 import type { Rule, UnoGenerator, Variant } from '@unocss/core'
 import { notNull, uniq } from '@unocss/core'
+import { watchAtMost } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { createAutocomplete } from '@unocss/autocomplete'
-import { reactive, toRaw } from '@vue/reactivity'
-import prettier from 'prettier/standalone'
-import parserCSS from 'prettier/parser-postcss'
+import type { Ref } from 'vue'
+import { computed, reactive, toRaw } from 'vue'
 import type { DocItem, GuideItem, ResultItem, RuleItem } from './types'
-import { extractColors, sampleArray } from './utils'
+import { extractColors, formatCSS, sampleArray } from './utils'
 
 export interface SearchState {
   uno: UnoGenerator
-  docs: DocItem[]
+  docs: Ref<DocItem[]>
   guides: GuideItem[]
   limit?: number
 }
@@ -22,10 +22,7 @@ export function createSearch(
   const matchedMap = reactive(new Map<string, RuleItem>())
   const featuresMap = reactive(new Map<string, Set<RuleItem>>())
 
-  let fuseCollection: ResultItem[] = [
-    ...guides,
-    ...docs,
-  ]
+  let fuseCollection: ResultItem[] = []
 
   const fuse = new Fuse<ResultItem>(
     fuseCollection,
@@ -53,7 +50,7 @@ export function createSearch(
       includeScore: true,
     },
   )
-  const docsFuse = new Fuse<ResultItem>(docs, { keys: ['title', 'summary'], isCaseSensitive: false })
+  const docsFuse = computed(() => new Fuse<ResultItem>(docs.value, { keys: ['title', 'summary'], isCaseSensitive: false }))
   const guideFuse = new Fuse<ResultItem>(guides, { keys: ['title'], isCaseSensitive: false })
 
   const az09 = Array.from('abcdefghijklmnopqrstuvwxyz01234567890')
@@ -71,8 +68,8 @@ export function createSearch(
     if (input.match(/^(mdn|doc):/)) {
       input = input.slice(4).trim()
       if (!input)
-        return docs.slice(0, limit)
-      return docsFuse.search(input, { limit }).map(i => i.item)
+        return docs.value.slice(0, limit)
+      return docsFuse.value.search(input, { limit }).map(i => i.item)
     }
 
     // guide
@@ -155,15 +152,7 @@ export function createSearch(
     const last = token[token.length - 1]!
 
     const generate = await uno.generate(new Set([input]), { preflights: false, minify: true })
-
-    const css = prettier.format(
-      generate.css,
-      {
-        parser: 'css',
-        plugins: [parserCSS],
-        printWidth: Infinity,
-      },
-    )
+    const css = await formatCSS(generate.css)
 
     // props
     const features = getFeatureUsage(css)
@@ -219,7 +208,7 @@ export function createSearch(
     const functions = uniq([...css.matchAll(/\b(\w+)\(/mg)].map(i => `${i[1]}()`))
     const pseudo = uniq([...css.matchAll(/\:([\w-]+)/mg)].map(i => `:${i[1]}`))
     return [...props, ...functions, ...pseudo]
-      .filter(i => docs.find(s => s.title === i))
+      .filter(i => docs.value.find(s => s.title === i))
   }
 
   function getUrls(css: string) {
@@ -263,14 +252,24 @@ export function createSearch(
     ac.reset()
     _fusePrepare = undefined
     _generatePromiseMap.clear()
-    fuseCollection = [...guides, ...docs]
+    fuseCollection = [...guides, ...docs.value]
     fuse.setCollection(fuseCollection)
   }
 
   function getSearchCount() {
     return fuseCollection.length
   }
 
+  // docs is lazy loaded
+  watchAtMost(
+    () => docs.value,
+    () => {
+      fuseCollection = [...guides, ...docs.value]
+      fuse.setCollection(fuseCollection)
+    },
+    { count: 1 },
+  )
+
   return {
     uno,
     reset,

packages/shared-docs/src/utils.ts

@@ -15,3 +15,21 @@ export function extractColors(css: string) {
     .filter(Boolean)
 }
 
+let prettier: typeof import('prettier/standalone')['format']
+let prettierParserCSS: typeof import('prettier/parser-postcss')
+
+export async function formatCSS(input: string) {
+  await Promise.all([
+    import('prettier/standalone').then(r => prettier = r.format),
+    import('prettier/parser-postcss').then(r => prettierParserCSS = r.default),
+  ])
+  return prettier(
+    input,
+    {
+      parser: 'css',
+      plugins: [prettierParserCSS],
+      printWidth: Infinity,
+    },
+  )
+}
+