perf: avoid loading parser in client and cache define (#1812)

Co-authored-by: Anthony Fu <[email protected]>
slidevjs · Oct 26, 2024 · c8711ca · c8711ca
1 parent 66bbde7
commit c8711ca
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 50 deletions.
diff --git a/packages/client/builtin/KaTexBlockWrapper.vue b/packages/client/builtin/KaTexBlockWrapper.vue
@@ -21,7 +21,7 @@ Learn more: https://sli.dev/guide/syntax.html#latex-line-highlighting
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { parseRangeString } from '@slidev/parser'
+import { parseRangeString } from '@slidev/parser/utils'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET, CLICKS_MAX } from '../constants'
 import { useSlideContext } from '../context'

diff --git a/packages/client/internals/PrintContainer.vue b/packages/client/internals/PrintContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/core'
+import { parseRangeString } from '@slidev/parser/utils'
 import { provideLocal } from '@vueuse/core'
 import { computed } from 'vue'
 import { useNav } from '../composables/useNav'

diff --git a/packages/parser/package.json b/packages/parser/package.json
@@ -23,6 +23,10 @@
     "./fs": {
       "types": "./dist/fs.d.mts",
       "import": "./dist/fs.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.mts",
+      "import": "./dist/utils.mjs"
     }
   },
   "main": "dist/index.mjs",
@@ -36,7 +40,7 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build": "rimraf dist && tsup src/index.ts src/core.ts src/fs.ts",
+    "build": "rimraf dist && tsup src/index.ts src/core.ts src/fs.ts src/utils.ts",
     "dev": "nr build --watch",
     "prepublishOnly": "npm run build"
   },

diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
@@ -7,7 +7,7 @@ import mm from 'micromatch'
 import { resolveAddons } from './integrations/addons'
 import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { parser } from './parser'
-import { getRoots, resolveEntry } from './resolver'
+import { getRoots, resolveEntry, toAtFS } from './resolver'
 import setupIndexHtml from './setups/indexHtml'
 import setupShiki from './setups/shiki'
 
@@ -80,6 +80,7 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
   return {
     ...await setupShiki(resolved.roots),
     indexHtml: setupIndexHtml(resolved),
+    define: getDefine(resolved),
     iconsResolvePath: [resolved.clientRoot, ...resolved.roots].reverse(),
     isMonacoTypesIgnored: pkg => monacoTypesIgnorePackagesMatches.some(i => i(pkg)),
     getLayouts: () => {
@@ -109,3 +110,19 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
     },
   }
 }
+
+function getDefine(options: Omit<ResolvedSlidevOptions, 'utils'>): Record<string, string> {
+  return {
+    __DEV__: options.mode === 'dev' ? 'true' : 'false',
+    __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(options.clientRoot)),
+    __SLIDEV_HASH_ROUTE__: JSON.stringify(options.data.config.routerMode === 'hash'),
+    __SLIDEV_FEATURE_DRAWINGS__: JSON.stringify(options.data.config.drawings.enabled === true || options.data.config.drawings.enabled === options.mode),
+    __SLIDEV_FEATURE_EDITOR__: JSON.stringify(options.mode === 'dev' && options.data.config.editor !== false),
+    __SLIDEV_FEATURE_DRAWINGS_PERSIST__: JSON.stringify(!!options.data.config.drawings.persist === true),
+    __SLIDEV_FEATURE_RECORD__: JSON.stringify(options.data.config.record === true || options.data.config.record === options.mode),
+    __SLIDEV_FEATURE_PRESENTER__: JSON.stringify(options.data.config.presenter === true || options.data.config.presenter === options.mode),
+    __SLIDEV_FEATURE_PRINT__: JSON.stringify(options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download))),
+    __SLIDEV_FEATURE_WAKE_LOCK__: JSON.stringify(options.data.config.wakeLock === true || options.data.config.wakeLock === options.mode),
+    __SLIDEV_HAS_SERVER__: options.mode !== 'build' ? 'true' : 'false',
+  }
+}
diff --git a/packages/slidev/node/vite/compilerFlagsVue.ts b/packages/slidev/node/vite/compilerFlagsVue.ts
@@ -1,29 +1,26 @@
 import type { ResolvedSlidevOptions } from '@slidev/types'
 import type { Plugin } from 'vite'
 import { objectEntries } from '@antfu/utils'
-import { getDefine } from './extendConfig'
 
 /**
  * Replace compiler flags like `__DEV__` in Vue SFC
  */
 export function createVueCompilerFlagsPlugin(
   options: ResolvedSlidevOptions,
-): Plugin[] {
-  const define = objectEntries(getDefine(options))
-  return [
-    {
-      name: 'slidev:flags',
-      enforce: 'pre',
-      transform(code, id) {
-        if (id.match(/\.vue($|\?)/)) {
-          const original = code
-          define.forEach(([from, to]) => {
-            code = code.replace(new RegExp(from, 'g'), to)
-          })
-          if (original !== code)
-            return code
-        }
-      },
+): Plugin {
+  const define = objectEntries(options.utils.define)
+  return {
+    name: 'slidev:flags',
+    enforce: 'pre',
+    transform(code, id) {
+      if (!id.match(/\.vue($|\?)/) && !id.includes('?vue&'))
+        return
+      const original = code
+      define.forEach(([from, to]) => {
+        code = code.replaceAll(from, to)
+      })
+      if (original !== code)
+        return code
     },
-  ]
+  }
 }
diff --git a/packages/slidev/node/vite/extendConfig.ts b/packages/slidev/node/vite/extendConfig.ts
@@ -1,5 +1,5 @@
 import type { ResolvedSlidevOptions } from '@slidev/types'
-import type { InlineConfig, Plugin } from 'vite'
+import type { Plugin, UserConfig } from 'vite'
 import { join } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { slash, uniq } from '@antfu/utils'
@@ -69,8 +69,8 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
   return {
     name: 'slidev:config',
     async config(config) {
-      const injection: InlineConfig = {
-        define: getDefine(options),
+      const injection: UserConfig = {
+        define: options.utils.define,
         resolve: {
           alias: [
             {
@@ -171,6 +171,7 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
             },
           },
         },
+        cacheDir: isInstalledGlobally.value ? join(options.cliRoot, 'node_modules/.vite') : undefined,
       }
 
       function isSlidevClient(id: string) {
@@ -183,11 +184,6 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
       //     return nodeModuelsMatch[nodeModuelsMatch.length - 1][1]
       // }
 
-      if (isInstalledGlobally.value) {
-        injection.cacheDir = join(options.cliRoot, 'node_modules/.vite')
-        injection.root = options.cliRoot
-      }
-
       return mergeConfig(injection, config)
     },
     configureServer(server) {
@@ -206,19 +202,3 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
     },
   }
 }
-
-export function getDefine(options: ResolvedSlidevOptions): Record<string, string> {
-  return {
-    __DEV__: options.mode === 'dev' ? 'true' : 'false',
-    __SLIDEV_CLIENT_ROOT__: JSON.stringify(toAtFS(options.clientRoot)),
-    __SLIDEV_HASH_ROUTE__: JSON.stringify(options.data.config.routerMode === 'hash'),
-    __SLIDEV_FEATURE_DRAWINGS__: JSON.stringify(options.data.config.drawings.enabled === true || options.data.config.drawings.enabled === options.mode),
-    __SLIDEV_FEATURE_EDITOR__: JSON.stringify(options.mode === 'dev' && options.data.config.editor !== false),
-    __SLIDEV_FEATURE_DRAWINGS_PERSIST__: JSON.stringify(!!options.data.config.drawings.persist === true),
-    __SLIDEV_FEATURE_RECORD__: JSON.stringify(options.data.config.record === true || options.data.config.record === options.mode),
-    __SLIDEV_FEATURE_PRESENTER__: JSON.stringify(options.data.config.presenter === true || options.data.config.presenter === options.mode),
-    __SLIDEV_FEATURE_PRINT__: JSON.stringify(options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download))),
-    __SLIDEV_FEATURE_WAKE_LOCK__: JSON.stringify(options.data.config.wakeLock === true || options.data.config.wakeLock === options.mode),
-    __SLIDEV_HAS_SERVER__: options.mode !== 'build' ? 'true' : 'false',
-  }
-}
diff --git a/packages/slidev/node/vite/hmrPatch.ts b/packages/slidev/node/vite/hmrPatch.ts
@@ -6,7 +6,7 @@ import { regexSlideSourceId } from './common'
  */
 export function createHmrPatchPlugin(): Plugin {
   return {
-    name: 'slidev:slide-transform:post',
+    name: 'slidev:hmr-patch',
     transform(code, id) {
       if (!id.match(regexSlideSourceId))
         return

diff --git a/packages/slidev/node/vite/index.ts b/packages/slidev/node/vite/index.ts
@@ -18,7 +18,7 @@ import { createStaticCopyPlugin } from './staticCopy'
 import { createUnocssPlugin } from './unocss'
 import { createVuePlugin } from './vue'
 
-export async function ViteSlidevPlugin(
+export function ViteSlidevPlugin(
   options: ResolvedSlidevOptions,
   pluginOptions: SlidevPluginOptions = {},
   serverOptions: SlidevServerOptions = {},

diff --git a/packages/slidev/node/vite/layoutWrapper.ts b/packages/slidev/node/vite/layoutWrapper.ts
@@ -17,7 +17,7 @@ export function createLayoutWrapperPlugin(
       if (type !== 'md')
         return
       const index = +no - 1
-      const layouts = await utils.getLayouts()
+      const layouts = utils.getLayouts()
       const rawLayoutName = data.slides[index]?.frontmatter?.layout ?? data.slides[0]?.frontmatter?.defaults?.layout
       let layoutName = rawLayoutName || (index === 0 ? 'cover' : 'default')
       if (!layouts[layoutName]) {

diff --git a/packages/slidev/node/vite/vue.ts b/packages/slidev/node/vite/vue.ts
@@ -48,12 +48,13 @@ export async function createVuePlugin(
     exclude: [],
     ...vueOptions,
     template: {
+      ...vueOptions?.template,
       compilerOptions: {
+        ...vueOptions?.template?.compilerOptions,
         isCustomElement(tag) {
           return customElements.has(tag) || vueOptions?.template?.compilerOptions?.isCustomElement?.(tag)
         },
       },
-      ...vueOptions?.template,
     },
   })
   const VueJsxPlugin = VueJsx(vuejsxOptions)

diff --git a/packages/types/src/options.ts b/packages/types/src/options.ts
@@ -49,6 +49,7 @@ export interface ResolvedSlidevUtils {
   shiki: HighlighterGeneric<any, any>
   shikiOptions: MarkdownItShikiOptions
   indexHtml: string
+  define: Record<string, string>
   iconsResolvePath: string[]
   isMonacoTypesIgnored: (pkg: string) => boolean
   getLayouts: () => Record<string, string>