feat: support .js extension and reduce sync fs operations (#2369)

Author: kermanx

packages/slidev/node/commands/shared.ts

@@ -1,9 +1,8 @@
 import type { ResolvedSlidevOptions, SlidevData, SlidevServerOptions } from '@slidev/types'
 import type { ConfigEnv, InlineConfig } from 'vite'
-import { existsSync } from 'node:fs'
-import { join } from 'node:path'
 import MarkdownIt from 'markdown-it'
 import { loadConfigFromFile, mergeConfig } from 'vite'
+import { resolveSourceFiles } from '../resolver'
 import markdownItLink from '../syntax/markdown-it/markdown-it-link'
 import { stringifyMarkdownTokens } from '../utils'
 import { ViteSlidevPlugin } from '../vite'
@@ -25,22 +24,20 @@ export async function resolveViteConfigs(
   command: 'serve' | 'build',
   serverOptions?: SlidevServerOptions,
 ) {
+  // Merge theme & addon & user configs
   const configEnv: ConfigEnv = {
     mode: command === 'build' ? 'production' : 'development',
     command,
   }
-  // Merge theme & addon & user configs
-  const files = options.roots.map(i => join(i, 'vite.config.ts'))
-
-  for (const file of files) {
-    if (!existsSync(file))
-      continue
-    const viteConfig = await loadConfigFromFile(configEnv, file)
-    if (!viteConfig?.config)
+  const files = resolveSourceFiles(options.roots, 'vite.config')
+  const configs = await Promise.all(files.map(file => loadConfigFromFile(configEnv, file)))
+  for (const config of configs) {
+    if (!config?.config)
       continue
-    baseConfig = mergeConfig(baseConfig, viteConfig.config)
+    baseConfig = mergeConfig(baseConfig, config.config)
   }
 
+  // Merge command-specific overrides
   baseConfig = mergeConfig(baseConfig, overrideConfigs)
 
   // Merge common overrides

packages/slidev/node/options.ts

@@ -79,7 +79,7 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
     .map(i => pm.makeRe(i))
 
   let _layouts_cache_time = 0
-  let _layouts_cache: Record<string, string> = {}
+  let _layouts_cache: Promise<Record<string, string>> | null = null
 
   return {
     ...await setupShiki(resolved.roots),
@@ -90,28 +90,27 @@ export async function createDataUtils(resolved: Omit<ResolvedSlidevOptions, 'uti
     isMonacoTypesIgnored: pkg => monacoTypesIgnorePackagesMatches.some(i => i.test(pkg)),
     getLayouts: () => {
       const now = Date.now()
-      if (now - _layouts_cache_time < 2000)
+      if (_layouts_cache && now - _layouts_cache_time < 2000)
         return _layouts_cache
-
-      const layouts: Record<string, string> = {}
-
-      for (const root of [resolved.clientRoot, ...resolved.roots]) {
-        const layoutPaths = fg.sync('layouts/**/*.{vue,ts}', {
-          cwd: root,
-          absolute: true,
-          suppressErrors: true,
-        })
-
-        for (const layoutPath of layoutPaths) {
+      _layouts_cache_time = now
+      return _layouts_cache = worker()
+
+      async function worker() {
+        const layouts: Record<string, string> = {}
+        const layoutPaths = await Promise.all(
+          [resolved.clientRoot, ...resolved.roots]
+            .map(root => fg('layouts/**/*.{vue,js,mjs,ts,mts}', {
+              cwd: root,
+              absolute: true,
+              suppressErrors: true,
+            })),
+        )
+        for (const layoutPath of layoutPaths.flat(1)) {
           const layoutName = path.basename(layoutPath).replace(/\.\w+$/, '')
           layouts[layoutName] = layoutPath
         }
+        return layouts
       }
-
-      _layouts_cache_time = now
-      _layouts_cache = layouts
-
-      return layouts
     },
   }
 }

packages/slidev/node/resolver.ts

@@ -1,5 +1,6 @@
 import type { RootsInfo } from '@slidev/types'
-import * as fs from 'node:fs'
+import { existsSync } from 'node:fs'
+import { copyFile, readFile } from 'node:fs/promises'
 import { dirname, join, relative, resolve } from 'node:path'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
@@ -68,28 +69,28 @@ export async function findGlobalPkgRoot(name: string, ensure: true): Promise<str
 export async function findGlobalPkgRoot(name: string, ensure?: boolean): Promise<string | undefined>
 export async function findGlobalPkgRoot(name: string, ensure = false) {
   const yarnPath = join(globalDirs.yarn.packages, name)
-  if (fs.existsSync(`${yarnPath}/package.json`))
+  if (existsSync(`${yarnPath}/package.json`))
     return yarnPath
   const npmPath = join(globalDirs.npm.packages, name)
-  if (fs.existsSync(`${npmPath}/package.json`))
+  if (existsSync(`${npmPath}/package.json`))
     return npmPath
   if (ensure)
     throw new Error(`Failed to resolve global package "${name}"`)
 }
 
 export async function resolveEntry(entryRaw: string) {
-  if (!fs.existsSync(entryRaw) && !entryRaw.endsWith('.md') && !/[/\\]/.test(entryRaw))
+  if (!existsSync(entryRaw) && !entryRaw.endsWith('.md') && !/[/\\]/.test(entryRaw))
     entryRaw += '.md'
   const entry = resolve(entryRaw)
-  if (!fs.existsSync(entry)) {
+  if (!existsSync(entry)) {
     const { create } = await prompts({
       name: 'create',
       type: 'confirm',
       initial: 'Y',
       message: `Entry file ${yellow(`"${entry}"`)} does not exist, do you want to create it?`,
     })
     if (create)
-      fs.copyFileSync(resolve(cliRoot, 'template.md'), entry)
+      await copyFile(resolve(cliRoot, 'template.md'), entry)
     else
       process.exit(0)
   }
@@ -161,24 +162,20 @@ export function createResolver(type: 'theme' | 'addon', officials: Record<string
   }
 }
 
-function getUserPkgJson(userRoot: string) {
+async function getUserPkgJson(userRoot: string) {
   const path = resolve(userRoot, 'package.json')
-  if (fs.existsSync(path))
-    return JSON.parse(fs.readFileSync(path, 'utf-8')) as Record<string, any>
+  if (existsSync(path))
+    return JSON.parse(await readFile(path, 'utf-8')) as Record<string, any>
   return {}
 }
 
 // npm: https://docs.npmjs.com/cli/v7/using-npm/workspaces#installing-workspaces
 // yarn: https://classic.yarnpkg.com/en/docs/workspaces/#toc-how-to-use-it
-function hasWorkspacePackageJSON(root: string): boolean {
+async function hasWorkspacePackageJSON(root: string): Promise<boolean> {
   const path = join(root, 'package.json')
-  try {
-    fs.accessSync(path, fs.constants.R_OK)
-  }
-  catch {
+  if (!existsSync(path))
     return false
-  }
-  const content = JSON.parse(fs.readFileSync(path, 'utf-8')) || {}
+  const content = JSON.parse(await readFile(path, 'utf-8')) || {}
   return !!content.workspaces
 }
 
@@ -198,19 +195,19 @@ function hasRootFile(root: string): boolean {
     // 'nx.json'
   ]
 
-  return ROOT_FILES.some(file => fs.existsSync(join(root, file)))
+  return ROOT_FILES.some(file => existsSync(join(root, file)))
 }
 
 /**
  * Search up for the nearest workspace root
  */
-function searchForWorkspaceRoot(
+async function searchForWorkspaceRoot(
   current: string,
   root = current,
-): string {
+): Promise<string> {
   if (hasRootFile(current))
     return current
-  if (hasWorkspacePackageJSON(current))
+  if (await hasWorkspacePackageJSON(current))
     return current
 
   const dir = dirname(current)
@@ -234,8 +231,8 @@ export async function getRoots(entry?: string): Promise<RootsInfo> {
       || (await import('is-installed-globally')).default
   const clientRoot = await findPkgRoot('@slidev/client', cliRoot, true)
   const closestPkgRoot = dirname(await findClosestPkgJsonPath(userRoot) || userRoot)
-  const userPkgJson = getUserPkgJson(closestPkgRoot)
-  const userWorkspaceRoot = searchForWorkspaceRoot(closestPkgRoot)
+  const userPkgJson = await getUserPkgJson(closestPkgRoot)
+  const userWorkspaceRoot = await searchForWorkspaceRoot(closestPkgRoot)
   rootsInfo = {
     cliRoot,
     clientRoot,
@@ -245,3 +242,21 @@ export async function getRoots(entry?: string): Promise<RootsInfo> {
   }
   return rootsInfo
 }
+
+export function resolveSourceFiles(
+  roots: string[],
+  subpath: string,
+  extensions = ['.mjs', '.js', '.mts', '.ts'], // The same order as https://vite.dev/config/shared-options#resolve-extensions
+) {
+  const results: string[] = []
+  for (const root of roots) {
+    for (const ext of extensions) {
+      const fullPath = join(root, subpath + ext)
+      if (existsSync(fullPath)) {
+        results.push(fullPath)
+        break
+      }
+    }
+  }
+  return results
+}

packages/slidev/node/setups/indexHtml.ts

@@ -1,6 +1,7 @@
 import type { ResolvedSlidevOptions, SeoMeta } from '@slidev/types'
 import type { ResolvableLink } from 'unhead/types'
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import { slash } from '@antfu/utils'
 import { white, yellow } from 'ansis'
@@ -16,7 +17,7 @@ function toAttrValue(unsafe: unknown) {
 }
 
 export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot, roots, data, base }: Omit<ResolvedSlidevOptions, 'utils'>): Promise<string> {
-  let main = readFileSync(join(clientRoot, 'index.html'), 'utf-8')
+  let main = await readFile(join(clientRoot, 'index.html'), 'utf-8')
   let body = ''
 
   const inputs: any[] = []
@@ -26,7 +27,7 @@ export default async function setupIndexHtml({ mode, entry, clientRoot, userRoot
     if (!existsSync(path))
       continue
 
-    const html = readFileSync(path, 'utf-8')
+    const html = await readFile(path, 'utf-8')
 
     if (root === userRoot && html.includes('<!DOCTYPE')) {
       console.error(yellow(`[Slidev] Ignored provided index.html with doctype declaration. (${white(path)})`))

packages/slidev/node/setups/unocss.ts

@@ -1,7 +1,8 @@
 import type { ResolvedSlidevOptions, UnoSetup } from '@slidev/types'
 import type { UserConfig } from '@unocss/core'
 import type { Theme } from '@unocss/preset-uno'
-import { existsSync, readFileSync } from 'node:fs'
+import { existsSync } from 'node:fs'
+import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
 import { mergeConfigs, presetIcons } from 'unocss'
 import { loadSetups } from '../setups/load'
@@ -34,7 +35,7 @@ export default async function setupUnocss(
           collectionsNodeResolvePath: utils.iconsResolvePath,
           collections: {
             slidev: {
-              logo: () => readFileSync(resolve(clientRoot, 'assets/logo.svg'), 'utf-8'),
+              logo: () => readFile(resolve(clientRoot, 'assets/logo.svg'), 'utf-8'),
             },
           },
         }),

packages/slidev/node/virtual/layouts.ts

@@ -4,10 +4,10 @@ import { toAtFS } from '../resolver'
 
 export const templateLayouts: VirtualModuleTemplate = {
   id: '/@slidev/layouts',
-  getContent({ utils }) {
+  async getContent({ utils }) {
     const imports: string[] = []
     const layouts = objectMap(
-      utils.getLayouts(),
+      await utils.getLayouts(),
       (k, v) => {
         imports.push(`import __layout_${k} from "${toAtFS(v)}"`)
         return [k, `__layout_${k}`]

packages/slidev/node/virtual/setups.ts

@@ -1,18 +1,11 @@
 import type { VirtualModuleTemplate } from './types'
-import { existsSync } from 'node:fs'
-import { join } from 'node:path'
-import { toAtFS } from '../resolver'
+import { resolveSourceFiles, toAtFS } from '../resolver'
 
 function createSetupTemplate(name: string): VirtualModuleTemplate {
   return {
     id: `/@slidev/setups/${name}`,
     getContent({ roots }) {
-      const setups = roots
-        .flatMap((i) => {
-          const path = join(i, 'setup', name)
-          return ['.ts', '.mts', '.js', '.mjs'].map(ext => path + ext)
-        })
-        .filter(i => existsSync(i))
+      const setups = resolveSourceFiles(roots, `setup/${name}`)
 
       const imports: string[] = []
 

packages/slidev/node/virtual/slides.ts

@@ -4,8 +4,8 @@ export const VIRTUAL_SLIDE_PREFIX = '/@slidev/slides/'
 
 export const templateSlides: VirtualModuleTemplate = {
   id: '/@slidev/slides',
-  getContent({ data, utils }) {
-    const layouts = utils.getLayouts()
+  async getContent({ data, utils }) {
+    const layouts = await utils.getLayouts()
     const statements = [
       `import { defineAsyncComponent, shallowRef } from 'vue'`,
       `import SlideError from '${layouts.error}'`,

packages/slidev/node/vite/layoutWrapper.ts

@@ -23,7 +23,7 @@ export function createLayoutWrapperPlugin(
         if (type !== 'md')
           return
         const index = +no - 1
-        const layouts = utils.getLayouts()
+        const layouts = await 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]) {

packages/types/src/options.ts

@@ -64,7 +64,7 @@ export interface ResolvedSlidevUtils {
   define: Record<string, string>
   iconsResolvePath: string[]
   isMonacoTypesIgnored: (pkg: string) => boolean
-  getLayouts: () => Record<string, string>
+  getLayouts: () => Promise<Record<string, string>>
 }
 
 export interface SlidevServerOptions {