fix(build): add `@vue/devtools-api` to `optimizeDeps.include` (#2543)

1 year ago · b2a129f49b
parent 76d5e0a706
commit b2a129f49b
14 changed files with 364 additions and 364 deletions
--- a/.github/contributing.md
+++ b/.github/contributing.md
@ -30,6 +30,8 @@ After cloning the repo, run:
 ```sh
 # install the dependencies of the project
 $ pnpm install
+# setup git hooks
+$ pnpm simple-git-hooks
 ```

 ### Setup VitePress Dev Environment
--- a/.prettierignore
+++ b/.prettierignore
@ -5,3 +5,4 @@ pnpm-lock.yaml
 cache
 template
 temp
+!CHANGELOG.md
--- a/tests/e2e/package.json
+++ b/tests/e2e/package.json
@ -1,6 +1,12 @@
 {
+  "name": "tests-e2e",
  "private": true,
  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "watch": "DEBUG=1 vitest",
+    "site": "vitepress"
+  },
  "devDependencies": {
    "vitepress": "workspace:*"
  }
--- a/tests/e2e/vitest.config.ts
+++ b/tests/e2e/vitest.config.ts
@ -5,7 +5,7 @@ const timeout = 60_000
 export default defineConfig({
  test: {
    setupFiles: ['vitestSetup.ts'],
-    globalSetup: ['__tests__/e2e/vitestGlobalSetup.ts'],
+    globalSetup: ['vitestGlobalSetup.ts'],
    testTimeout: timeout,
    hookTimeout: timeout,
    teardownTimeout: timeout,
--- a/tests/e2e/vitestGlobalSetup.ts
+++ b/tests/e2e/vitestGlobalSetup.ts
@ -7,7 +7,7 @@ import type { Server } from 'net'
 let browserServer: BrowserServer
 let server: ViteDevServer | Server

-const root = '__tests__/e2e'
+const root = '.'

 export async function setup() {
  browserServer = await chromium.launchServer({
--- a/tests/init/init.test.ts
+++ b/tests/init/init.test.ts
@ -1,57 +1,50 @@
-import { chromium, type Browser, type Page } from 'playwright-chromium'
-import { fileURLToPath } from 'url'
-import path from 'path'
 import fs from 'fs-extra'
-import {
-  scaffold,
-  build,
-  createServer,
-  serve,
-  ScaffoldThemeType,
-  type ScaffoldOptions
-} from 'vitepress'
-import type { ViteDevServer } from 'vite'
-import type { Server } from 'net'
 import getPort from 'get-port'
+import { chromium } from 'playwright-chromium'
+import { fileURLToPath, URL } from 'url'
+import { createServer, scaffold, ScaffoldThemeType } from 'vitepress'

-let browser: Browser
-let page: Page
+const root = fileURLToPath(new URL('./.temp', import.meta.url))

-beforeAll(async () => {
-  browser = await chromium.connect(process.env['WS_ENDPOINT']!)
-  page = await browser.newPage()
+const browser = await chromium.launch({
+  headless: !process.env.DEBUG,
+  args: process.env.CI
+    ? ['--no-sandbox', '--disable-setuid-sandbox']
+    : undefined
 })

+const page = await browser.newPage()
+
+const themes = [
+  ScaffoldThemeType.Default,
+  ScaffoldThemeType.DefaultCustom,
+  ScaffoldThemeType.Custom
+]
+const usingTs = [false, true]
+const variations = themes.flatMap((theme) =>
+  usingTs.map(
+    (useTs) => [`${theme}${useTs ? ' + ts' : ''}`, { theme, useTs }] as const
+  )
+)
+
 afterAll(async () => {
  await page.close()
  await browser.close()
 })

-const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'temp')
-
-async function testVariation(options: ScaffoldOptions) {
-  fs.removeSync(root)
-  scaffold({
-    ...options,
-    root
-  })
+test.each(variations)('init %s', async (_, { theme, useTs }) => {
+  await fs.remove(root)
+  scaffold({ root, theme, useTs, injectNpmScripts: false })

-  let server: ViteDevServer | Server
  const port = await getPort()
+  const server = await createServer(root, { port })
+  await server.listen()

  async function goto(path: string) {
    await page.goto(`http://localhost:${port}${path}`)
    await page.waitForSelector('#app div')
  }

-  if (process.env['VITE_TEST_BUILD']) {
-    await build(root)
-    server = (await serve({ root, port })).server
-  } else {
-    server = await createServer(root, { port })
-    await server!.listen()
-  }
-
  try {
    await goto('/')
    expect(await page.textContent('h1')).toMatch('My Awesome Project')
@ -66,33 +59,10 @@ async function testVariation(options: ScaffoldOptions) {
    await page.click('a[href="/api-examples.html"]')
    await page.waitForSelector('pre code')
    expect(await page.textContent('h1')).toMatch('Runtime API Examples')
-  } finally {
-    fs.removeSync(root)
-    if ('ws' in server) {
-      await server.close()
-    } else {
-      await new Promise<void>((resolve, reject) => {
-        server.close((error) => (error ? reject(error) : resolve()))
-      })
-    }
-  }
-}

-const themes = [
-  ScaffoldThemeType.Default,
-  ScaffoldThemeType.DefaultCustom,
-  ScaffoldThemeType.Custom
-]
-const usingTs = [false, true]
-
-for (const theme of themes) {
-  for (const useTs of usingTs) {
-    test(`${theme}${useTs ? ` + TypeScript` : ``}`, () =>
-      testVariation({
-        root: '.',
-        theme,
-        useTs,
-        injectNpmScripts: false
-      }))
+    // teardown
+  } finally {
+    await fs.remove(root)
+    await server.close()
  }
-}
+})
--- a/tests/init/package.json
+++ b/tests/init/package.json
@ -1,6 +1,11 @@
 {
+  "name": "tests-init",
  "private": true,
  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "watch": "DEBUG=1 vitest"
+  },
  "devDependencies": {
    "vitepress": "workspace:*"
  }
--- a/tests/init/vitest.config.ts
+++ b/tests/init/vitest.config.ts
@ -1,20 +1,9 @@
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
 import { defineConfig } from 'vitest/config'

-const dir = dirname(fileURLToPath(import.meta.url))
-
 const timeout = 60_000

 export default defineConfig({
-  resolve: {
-    alias: {
-      node: resolve(dir, '../../src/node')
-    }
-  },
  test: {
-    watchExclude: ['**/node_modules/**', '**/temp/**'],
-    globalSetup: ['__tests__/init/vitestGlobalSetup.ts'],
    testTimeout: timeout,
    hookTimeout: timeout,
    teardownTimeout: timeout,
--- a/tests/init/vitestGlobalSetup.ts
+++ b/tests/init/vitestGlobalSetup.ts
@ -1,17 +0,0 @@
-import { chromium, type BrowserServer } from 'playwright-chromium'
-
-let browserServer: BrowserServer
-
-export async function setup() {
-  browserServer = await chromium.launchServer({
-    headless: !process.env.DEBUG,
-    args: process.env.CI
-      ? ['--no-sandbox', '--disable-setuid-sandbox']
-      : undefined
-  })
-  process.env['WS_ENDPOINT'] = browserServer.wsEndpoint()
-}
-
-export async function teardown() {
-  await browserServer.close()
-}
--- a/docs/package.json
+++ b/docs/package.json
@ -1,6 +1,12 @@
 {
+  "name": "docs",
  "private": true,
  "type": "module",
+  "scripts": {
+    "dev": "vitepress",
+    "build": "vitepress build",
+    "preview": "vitepress preview"
+  },
  "devDependencies": {
    "vitepress": "workspace:*"
  }
--- a/netlify.toml
+++ b/netlify.toml
@ -3,4 +3,4 @@

 [build]
  publish = "docs/.vitepress/dist"
-  command = "pnpm docs-build"
+  command = "pnpm docs:build"
--- a/package.json
+++ b/package.json
@ -55,37 +55,38 @@
    "url": "https://github.com/vuejs/vitepress/issues"
  },
  "scripts": {
-    "dev": "rimraf dist && run-s dev-shared dev-start",
-    "dev-start": "run-p dev-client dev-node dev-watch",
-    "dev-client": "tsc --sourcemap -w -p src/client",
-    "dev-node": "DEV=true pnpm build-node -w",
-    "dev-shared": "node scripts/copyShared",
-    "dev-watch": "node scripts/watchAndCopy",
-    "build": "run-s build-prepare build-client build-node",
-    "build-prepare": "rimraf dist && node scripts/copyShared",
-    "build-client": "vue-tsc --noEmit -p src/client && tsc -p src/client && node scripts/copyClient",
-    "build-node": "tsc -p src/node --noEmit && rollup --config rollup.config.ts --configPlugin esbuild",
+    "dev": "rimraf dist && run-s dev:shared dev:start",
+    "dev:start": "run-p dev:client dev:node dev:watch",
+    "dev:client": "tsc --sourcemap -w -p src/client",
+    "dev:node": "DEV=true pnpm build:node -w",
+    "dev:shared": "node scripts/copyShared",
+    "dev:watch": "node scripts/watchAndCopy",
+    "build": "run-s build:prepare build:client build:node",
+    "build:prepare": "rimraf dist && node scripts/copyShared",
+    "build:client": "vue-tsc --noEmit -p src/client && tsc -p src/client && node scripts/copyClient",
+    "build:node": "tsc -p src/node --noEmit && rollup --config rollup.config.ts --configPlugin esbuild",
+    "test": "run-p --aggregate-output test:unit test:e2e test:init",
+    "test:unit": "vitest run -r __tests__/unit",
+    "test:unit:watch": "vitest -r __tests__/unit",
+    "test:e2e": "run-s test:e2e-dev test:e2e-build",
+    "test:e2e:site": "pnpm -F=tests-e2e site",
+    "test:e2e-dev": "pnpm -F=tests-e2e test",
+    "test:e2e-dev:watch": "pnpm -F=tests-e2e watch",
+    "test:e2e-build": "VITE_TEST_BUILD=1 pnpm test:e2e-dev",
+    "test:e2e-build:watch": "VITE_TEST_BUILD=1 pnpm test:e2e-dev:watch",
+    "test:init": "pnpm -F=tests-init test",
+    "test:init:watch": "pnpm -F=tests-init watch",
+    "docs": "run-p dev docs:dev",
+    "docs:dev": "wait-on -d 100 dist/node/cli.js && pnpm -F=docs dev",
+    "docs:debug": "NODE_OPTIONS='--inspect-brk' pnpm docs:dev",
+    "docs:build": "run-s build docs:build:only",
+    "docs:build:only": "pnpm -F=docs build",
+    "docs:preview": "pnpm -F=docs preview",
    "format": "prettier --check --write .",
-    "format-fail": "prettier --check .",
-    "check": "run-s format-fail build test",
-    "test": "pnpm test-unit",
-    "test-unit": "vitest run -r __tests__/unit",
-    "test-e2e": "vitest run -r __tests__/e2e",
-    "test-e2e-build": "VITE_TEST_BUILD=1 pnpm test-e2e",
-    "test-init": "vitest run -r __tests__/init",
-    "test-init-build": "VITE_TEST_BUILD=1 pnpm test-init",
-    "debug-e2e": "DEBUG=1 vitest -r __tests__/e2e",
-    "debug-e2e-build": "VITE_TEST_BUILD=1 pnpm debug-e2e",
-    "unit-dev": "vitest -r __tests__/unit",
-    "e2e-dev": "wait-on -d 100 dist/node/cli.js && node ./bin/vitepress dev __tests__/e2e",
+    "format:fail": "prettier --check .",
+    "check": "run-s format:fail build test",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-    "release": "node scripts/release.js",
-    "docs": "run-p dev docs-dev",
-    "docs-dev": "wait-on -d 100 dist/node/cli.js && node ./bin/vitepress dev docs",
-    "docs-debug": "node --inspect-brk ./bin/vitepress dev docs",
-    "docs-build": "run-s build docs-build-only",
-    "docs-build-only": "node ./bin/vitepress build docs",
-    "docs-preview": "node ./bin/vitepress preview docs"
+    "release": "node scripts/release.js"
  },
  "dependencies": {
    "@docsearch/css": "^3.5.1",
@ -99,7 +100,7 @@
    "mark.js": "8.11.1",
    "minisearch": "^6.1.0",
    "shiki": "^0.14.2",
-    "vite": "^4.3.9",
+    "vite": "4.4.0-beta.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
@ -136,7 +137,7 @@
    "conventional-changelog-cli": "^2",
    "cross-spawn": "^7.0.3",
    "debug": "^4.3.4",
-    "esbuild": "^0.18.5",
+    "esbuild": "^0.18.7",
    "escape-html": "^1.0.3",
    "execa": "^7.1.1",
    "fast-glob": "^3.2.12",
@ -168,14 +169,14 @@
    "rollup": "^3.25.1",
    "rollup-plugin-dts": "^5.3.0",
    "rollup-plugin-esbuild": "^5.0.0",
-    "semver": "^7.5.2",
+    "semver": "^7.5.3",
    "shiki-processor": "^0.1.3",
    "simple-git-hooks": "^2.8.1",
    "sirv": "^2.0.3",
    "supports-color": "^9.3.1",
    "typescript": "^5.1.3",
    "vitest": "^0.32.2",
-    "vue-tsc": "^1.8.0",
+    "vue-tsc": "^1.8.1",
    "wait-on": "^7.0.1"
  },
  "simple-git-hooks": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/node/plugin.ts
+++ b/src/node/plugin.ts
@ -133,7 +133,7 @@ export async function createVitePressPlugin(
        },
        optimizeDeps: {
          // force include vue to avoid duplicated copies when linked + optimized
-          include: ['vue'],
+          include: ['vue', 'vitepress > @vue/devtools-api'],
          exclude: ['@docsearch/js', 'vitepress']
        },
        server: {