From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Wed, 6 Nov 2024 08:53:36 +0000 (+0800)
Subject: feat: enable devtools v7 integration by default (#602)
X-Git-Tag: v3.12.1~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1950a1ce03a0855bf4ecce9f95131c37cce84332;p=thirdparty%2Fvuejs%2Fcreate-vue.git

feat: enable devtools v7 integration by default (#602)
---

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ae3af631..338b2599 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -67,7 +67,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 18
             os: macos-latest
@@ -78,7 +77,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 20
             os: ubuntu-latest
@@ -89,7 +87,6 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
 
           - node-version: 22
             os: ubuntu-latest
@@ -100,11 +97,10 @@ jobs:
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
             flag-for-eslint: '--eslint'
-            flag-for-devtools: '--devtools'
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ matrix.os == 'windows-latest' }}
     env:
-      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}} ${{matrix.flag-for-devtools}}
+      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-eslint}}
       # Sometimes the Linux runner can't verify Cypress in 30s
       CYPRESS_VERIFY_TIMEOUT: 60000
     steps:
diff --git a/index.ts b/index.ts
index aea4f3b9..40f70304 100755
--- a/index.ts
+++ b/index.ts
@@ -83,7 +83,6 @@ async function init() {
   // --playwright
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
-  // --vue-devtools / --devtools
   // --force (for force overwriting)
 
   const args = process.argv.slice(2)
@@ -96,8 +95,6 @@ async function init() {
     tests: { type: 'boolean' },
     'vue-router': { type: 'boolean' },
     router: { type: 'boolean' },
-    'vue-devtools': { type: 'boolean' },
-    devtools: { type: 'boolean' },
   } as const
 
   const { values: argv, positionals } = parseArgs({
@@ -120,8 +117,7 @@ async function init() {
       argv.nightwatch ??
       argv.playwright ??
       argv.eslint ??
-      argv['eslint-with-prettier'] ??
-      (argv.devtools || argv['vue-devtools'])
+      argv['eslint-with-prettier']
     ) === 'boolean'
 
   let targetDir = positionals[0]
@@ -144,7 +140,6 @@ async function init() {
     needsEslint?: false | 'eslintOnly' | 'speedUpWithOxlint'
     needsOxlint?: boolean
     needsPrettier?: boolean
-    needsDevTools?: boolean
   } = {}
 
   try {
@@ -161,7 +156,6 @@ async function init() {
     // - Add Playwright for end-to-end testing?
     // - Add ESLint for code quality?
     // - Add Prettier for code formatting?
-    // - Add Vue DevTools 7 extension for debugging? (experimental)
     result = await prompts(
       [
         {
@@ -306,14 +300,6 @@ async function init() {
           active: language.defaultToggleOptions.active,
           inactive: language.defaultToggleOptions.inactive,
         },
-        {
-          name: 'needsDevTools',
-          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: language.needsDevTools.message,
-          initial: false,
-          active: language.defaultToggleOptions.active,
-          inactive: language.defaultToggleOptions.inactive,
-        },
       ],
       {
         onCancel: () => {
@@ -338,7 +324,6 @@ async function init() {
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
     needsPrettier = argv['eslint-with-prettier'],
-    needsDevTools = argv.devtools || argv['vue-devtools'],
   } = result
 
   const needsEslint = Boolean(argv.eslint || argv['eslint-with-prettier'] || result.needsEslint)
@@ -488,9 +473,6 @@ async function init() {
     render('config/prettier')
   }
 
-  if (needsDevTools) {
-    render('config/devtools')
-  }
   // Render code template.
   // prettier-ignore
   const codeTemplate =
diff --git a/locales/en-US.json b/locales/en-US.json
index 2f55f972..d1f8a169 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Add Prettier for code formatting?"
   },
-  "needsDevTools": {
-    "message": "Add Vue DevTools 7 extension for debugging? (experimental)"
-  },
   "errors": {
     "operationCancelled": "Operation cancelled"
   },
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 1b61b561..9ff6d131 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Ajouter Prettier pour le formatage du code\u00a0?"
   },
-  "needsDevTools": {
-    "message": "Ajouter l'extension Vue DevTools 7 pour le débogage\u00a0? (expérimental)"
-  },
   "errors": {
     "operationCancelled": "Operation annulée"
   },
diff --git a/locales/tr-TR.json b/locales/tr-TR.json
index 3700fbec..323acac1 100644
--- a/locales/tr-TR.json
+++ b/locales/tr-TR.json
@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "Kod formatlama için Prettier eklensin mi?"
   },
-  "needsDevTools": {
-    "message": "Hata ayıklama için Vue DevTools 7 eklentisi eklensin mi? (deneysel)"
-  },
   "errors": {
     "operationCancelled": "İşlem iptal edildi"
   },
diff --git a/locales/zh-Hans.json b/locales/zh-Hans.json
index b27f1c02..c74002f0 100644
--- a/locales/zh-Hans.json
+++ b/locales/zh-Hans.json
@@ -59,9 +59,6 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用于代码格式化？"
   },
-  "needsDevTools": {
-    "message": "是否引入 Vue DevTools 7 扩展用于调试? (试验阶段)"
-  },
   "errors": {
     "operationCancelled": "操作取消"
   },
diff --git a/locales/zh-Hant.json b/locales/zh-Hant.json
index a22be426..4837230e 100644
--- a/locales/zh-Hant.json
+++ b/locales/zh-Hant.json
@@ -63,9 +63,6 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用於程式碼格式化？"
   },
-  "needsDevTools": {
-    "message": "是否引入 Vue DevTools 7 擴充元件以協助偵錯？（試驗性功能）"
-  },
   "errors": {
     "operationCancelled": "操作取消"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f9bd3b4..b2984089 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -69,6 +69,9 @@ importers:
       vite:
         specifier: ^5.4.10
         version: 5.4.10(@types/node@22.7.5)
+      vite-plugin-vue-devtools:
+        specifier: ^7.5.4
+        version: 7.5.4(rollup@4.24.0)(vite@5.4.10(@types/node@22.7.5))(vue@3.5.12(typescript@5.6.3))
 
   template/config/cypress:
     devDependencies:
@@ -89,12 +92,6 @@ importers:
         specifier: ^13.15.1
         version: 13.15.1
 
-  template/config/devtools:
-    devDependencies:
-      vite-plugin-vue-devtools:
-        specifier: ^7.5.4
-        version: 7.5.4(rollup@4.24.0)(vite@5.4.10(@types/node@22.7.5))(vue@3.5.12(typescript@5.6.3))
-
   template/config/jsx:
     dependencies:
       vue:
@@ -7662,7 +7659,7 @@ snapshots:
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.8)
       '@vue/compiler-dom': 3.5.12
       kolorist: 1.8.0
-      magic-string: 0.30.11
+      magic-string: 0.30.12
       vite: 5.4.10(@types/node@22.7.5)
     transitivePeerDependencies:
       - supports-color
diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
index 5eaa8a03..de5de0b0 100644
--- a/scripts/snapshot.mjs
+++ b/scripts/snapshot.mjs
@@ -56,7 +56,7 @@ function fullCombination(arr) {
 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
   ['default'],
-  ['devtools', 'router', 'pinia'],
+  ['router', 'pinia'],
   ['eslint'],
   ['eslint-with-prettier'],
 )
diff --git a/template/base/package.json b/template/base/package.json
index 6db86c91..3469265c 100644
--- a/template/base/package.json
+++ b/template/base/package.json
@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-vue-devtools": "^7.5.4"
   }
 }
diff --git a/template/base/vite.config.js.data.mjs b/template/base/vite.config.js.data.mjs
index 39f55e1e..12714be6 100644
--- a/template/base/vite.config.js.data.mjs
+++ b/template/base/vite.config.js.data.mjs
@@ -6,6 +6,12 @@ export default function getData() {
         importer: "import vue from '@vitejs/plugin-vue'",
         initializer: 'vue()',
       },
+
+      {
+        id: 'vite-plugin-vue-devtools',
+        importer: "import vueDevTools from 'vite-plugin-vue-devtools'",
+        initializer: 'vueDevTools()',
+      }
     ],
   }
 }
diff --git a/template/config/devtools/package.json b/template/config/devtools/package.json
deleted file mode 100644
index 6b90acd8..00000000
--- a/template/config/devtools/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "devDependencies": {
-    "vite-plugin-vue-devtools": "^7.5.4"
-  }
-}
diff --git a/template/config/devtools/vite.config.js.data.mjs b/template/config/devtools/vite.config.js.data.mjs
deleted file mode 100644
index a70df9b6..00000000
--- a/template/config/devtools/vite.config.js.data.mjs
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function getData({ oldData }) {
-  const vueDevtoolsPlugin = {
-    id: 'vite-plugin-vue-devtools',
-    importer: "import vueDevTools from 'vite-plugin-vue-devtools'",
-    initializer: 'vueDevTools()',
-  }
-
-  return {
-    ...oldData,
-    plugins: [...oldData.plugins, vueDevtoolsPlugin],
-  }
-}
diff --git a/utils/getLanguage.ts b/utils/getLanguage.ts
index b3bc8233..c96f7c7e 100644
--- a/utils/getLanguage.ts
+++ b/utils/getLanguage.ts
@@ -30,7 +30,6 @@ interface Language {
   needsE2eTesting: LanguageItem
   needsEslint: LanguageItem
   needsPrettier: LanguageItem
-  needsDevTools: LanguageItem
   errors: {
     operationCancelled: string
   }