fix: optimize deps errors in global installation mode (#1559)

Author: kermanx

.github/workflows/smoke.yml

@@ -14,15 +14,55 @@ on:
   workflow_dispatch:
 
 jobs:
+  pack:
+    timeout-minutes: 10
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set git to use LF
+        run: |
+          git config --global core.autocrlf false
+          git config --global core.eol lf
+
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+
+      - name: Install
+        run: nci
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+
+      - name: Build
+        run: nr build
+
+      - name: Pack
+        run: node ./scripts/pack.mjs /tmp/slidev-pkgs
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: slidev-packages
+          path: /tmp/slidev-pkgs
+
   test:
+    needs: pack
     timeout-minutes: 10
     runs-on: ${{ matrix.os }}
 
     strategy:
       matrix:
         node-version: [18.x]
         os: [ubuntu-latest, windows-latest]
-        pm: [yarn, npm, pnpm]
+        pm: [npm, pnpm] # yarn not working in this CI
         hoist: [true, false]
 
     steps:
@@ -33,10 +73,10 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 20.x
 
       - name: Setup
         run: npm i -g @antfu/ni
@@ -47,15 +87,15 @@ jobs:
       - name: Install
         run: nci
 
-      - name: Build
-        run: nr build
-
-      - name: Pack
-        run: node ./scripts/pack.mjs ../temp/slidev-pkgs
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: slidev-packages
+          path: /tmp/slidev-pkgs
 
       - name: Create new project
         run: |
-          npm i -g ../temp/slidev-pkgs/create-app.tgz
+          npm i -g /tmp/slidev-pkgs/create-app.tgz
           echo "N" | create-slidev ../temp/slidev-project
 
       - name: Remove npmrc
@@ -68,12 +108,12 @@ jobs:
         working-directory: ../temp/slidev-project
 
       - name: Install project (npm, pnpm)
-        run: ${{ matrix.pm }} i ../slidev-pkgs/cli.tgz playwright-chromium
+        run: ${{ matrix.pm }} i /tmp/slidev-pkgs/cli.tgz playwright-chromium
         working-directory: ../temp/slidev-project
         if: ${{ matrix.pm != 'yarn' }}
 
       - name: Install project (yarn)
-        run: yarn add ../slidev-pkgs/cli.tgz playwright-chromium
+        run: yarn add /tmp/slidev-pkgs/cli.tgz playwright-chromium
         working-directory: ../temp/slidev-project
         if: ${{ matrix.pm == 'yarn' }}
 
@@ -92,7 +132,7 @@ jobs:
 
       - name: Install globally
         run: |
-          ${{ matrix.pm }} i -g ${{ github.workspace }}/../temp/slidev-pkgs/cli.tgz playwright-chromium
+          ${{ matrix.pm }} i -g /tmp/slidev-pkgs/cli.tgz playwright-chromium
           ${{ matrix.pm }} i -g @slidev/theme-seriph
         if: ${{ matrix.pm != 'yarn' }}
 

packages/client/package.json

@@ -59,7 +59,6 @@
     "typescript": "^5.4.5",
     "unocss": "^0.59.3",
     "vue": "^3.4.22",
-    "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
     "yaml": "^2.4.1"
   },

packages/client/uno.config.ts

@@ -9,6 +9,7 @@ import {
   transformerVariantGroup,
 } from 'unocss'
 import { variantMatcher } from '@unocss/preset-mini/utils'
+import extractorMdc from '@unocss/extractor-mdc'
 
 export default defineConfig({
   safelist: [
@@ -48,4 +49,7 @@ export default defineConfig({
     transformerDirectives({ enforce: 'pre' }),
     transformerVariantGroup(),
   ],
+  extractors: [
+    extractorMdc(),
+  ],
 })

packages/parser/package.json

@@ -44,6 +44,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@antfu/utils": "^0.7.7",
     "@slidev/types": "workspace:*",
     "yaml": "^2.4.1"
   }

packages/slidev/node/cli.ts

@@ -11,7 +11,6 @@ import yargs from 'yargs'
 import { blue, bold, cyan, dim, gray, green, underline, yellow } from 'kolorist'
 import type { LogLevel, ViteDevServer } from 'vite'
 import type { ResolvedSlidevOptions, SlidevConfig, SlidevData, SlidevPreparserExtension } from '@slidev/types'
-import isInstalledGlobally from 'is-installed-globally'
 import equal from 'fast-deep-equal'
 import { verifyConfig } from '@slidev/parser'
 import { injectPreparserExtensionLoader } from '@slidev/parser/fs'
@@ -23,7 +22,7 @@ import { resolveOptions } from './options'
 import { getThemeMeta, resolveTheme } from './integrations/themes'
 import { parser } from './parser'
 import { loadSetups } from './setups/load'
-import { getRoots, resolveEntry } from './resolver'
+import { getRoots, isInstalledGlobally, resolveEntry } from './resolver'
 import { resolveAddons } from './integrations/addons'
 
 const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
@@ -623,7 +622,7 @@ function printInfo(
   console.log()
   console.log()
   console.log(`  ${cyan('●') + blue('■') + yellow('▲')}`)
-  console.log(`${bold('  Slidev')}  ${blue(`v${version}`)} ${isInstalledGlobally ? yellow('(global)') : ''}`)
+  console.log(`${bold('  Slidev')}  ${blue(`v${version}`)} ${isInstalledGlobally.value ? yellow('(global)') : ''}`)
   console.log()
 
   verifyConfig(options.data.config, options.data.themeMeta, v => console.warn(yellow(`  ! ${v}`)))

packages/slidev/node/resolver.ts

@@ -1,11 +1,10 @@
-import { dirname, join, resolve } from 'node:path'
+import { dirname, join, relative, resolve } from 'node:path'
 import * as fs from 'node:fs'
 import process from 'node:process'
 import { fileURLToPath } from 'node:url'
 import { ensurePrefix, slash } from '@antfu/utils'
-import isInstalledGlobally from 'is-installed-globally'
 import { resolveGlobal } from 'resolve-global'
-import { findDepPkgJsonPath } from 'vitefu'
+import { findClosestPkgJsonPath, findDepPkgJsonPath } from 'vitefu'
 import { resolvePath } from 'mlly'
 import globalDirs from 'global-directory'
 import prompts from 'prompts'
@@ -15,6 +14,8 @@ import type { RootsInfo } from '@slidev/types'
 
 const cliRoot = fileURLToPath(new URL('..', import.meta.url))
 
+export const isInstalledGlobally: { value?: boolean } = {}
+
 /**
  * Resolve path for import url on Vite client side
  */
@@ -39,7 +40,7 @@ export async function resolveImportPath(importName: string, ensure = false) {
   }
   catch { }
 
-  if (isInstalledGlobally) {
+  if (isInstalledGlobally.value) {
     try {
       return resolveGlobal(importName)
     }
@@ -57,7 +58,7 @@ export async function findPkgRoot(dep: string, parent: string, ensure: true): Pr
 export async function findPkgRoot(dep: string, parent: string, ensure?: boolean): Promise<string | undefined>
 export async function findPkgRoot(dep: string, parent: string, ensure = false) {
   const pkgJsonPath = await findDepPkgJsonPath(dep, parent)
-  const path = pkgJsonPath ? dirname(pkgJsonPath) : isInstalledGlobally ? await findGlobalPkgRoot(dep, false) : undefined
+  const path = pkgJsonPath ? dirname(pkgJsonPath) : isInstalledGlobally.value ? await findGlobalPkgRoot(dep, false) : undefined
   if (ensure && !path)
     throw new Error(`Failed to resolve package "${dep}"`)
   return path
@@ -104,13 +105,13 @@ export function createResolver(type: 'theme' | 'addon', officials: Record<string
       name: 'confirm',
       initial: 'Y',
       type: 'confirm',
-      message: `The ${type} "${pkgName}" was not found ${underline(isInstalledGlobally ? 'globally' : 'in your project')}, do you want to install it now?`,
+      message: `The ${type} "${pkgName}" was not found ${underline(isInstalledGlobally.value ? 'globally' : 'in your project')}, do you want to install it now?`,
     })
 
     if (!confirm)
       process.exit(1)
 
-    if (isInstalledGlobally)
+    if (isInstalledGlobally.value)
       await run(parseNi, ['-g', pkgName])
     else
       await run(parseNi, [pkgName])
@@ -227,10 +228,14 @@ export async function getRoots(entry?: string): Promise<RootsInfo> {
     return rootsInfo
   if (!entry)
     throw new Error('[slidev] Cannot find roots without entry')
-  const clientRoot = await findPkgRoot('@slidev/client', cliRoot, true)
   const userRoot = dirname(entry)
-  const userPkgJson = getUserPkgJson(userRoot)
-  const userWorkspaceRoot = searchForWorkspaceRoot(userRoot)
+  isInstalledGlobally.value
+    = !/^(\.\.\/)*node_modules\//i.test(slash(relative(userRoot, cliRoot)))
+    || (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)
   rootsInfo = {
     cliRoot,
     clientRoot,