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

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ae3af6315cd7d3ec9f728ac4e7fa055ee52a7afb..338b2599bda423232db532cda96cb1ebcd6df0c5 100644 (file)
--- 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 aea4f3b94d496266d3ac12b27826c736edca8fdb..40f70304b9bd091f5dbf1e4225cafcd0670f0c57 100755 (executable)
--- 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 2f55f9720578afcd38f746c7dcb58e1f631c3d33..d1f8a1698563af74e5cc6d425a89b46a3f1e6d4a 100644 (file)
--- 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 1b61b56187dbc965998c2180507dd14f1e078ba2..9ff6d13139103f5035634e9d8427358f8e251d65 100644 (file)
--- 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 3700fbecefe34a7ec18ba5d7966eed6be108093a..323acac1d0ac95310c4e0b6544fd85531e131bf6 100644 (file)
--- 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 b27f1c02dc30ef3e5abf4393d1815b66297ebcd5..c74002f014dd6037eb249738358305e22c9643aa 100644 (file)
--- 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 a22be42690ca670dfcad8e8ebe274be4665b6afd..4837230e729985af77cfe987b58b592547042d61 100644 (file)
--- 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 8f9bd3b426bb892c9adcc7597fe6e939c686515c..b29840891df9d0d9c4022f0b79382a430e764a31 100644 (file)
--- 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 5eaa8a039bc03210d8454122ae5d8526ded54b19..de5de0b0df617b08aecac1d8b93e2d67bb33dccf 100644 (file)
--- 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 6db86c9157f7a642171686082d3b1eea73c740ef..3469265c5dc12b89cce63f2d83c3de65b6b1bc5b 100644 (file)
--- 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 39f55e1e758ace9174fd1bed93c2ec0c0c8bd9a2..12714be65bfd8db4adf45d9b30463325f0c735a0 100644 (file)
--- 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 (file)
index 6b90acd..0000000
--- 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 (file)
index a70df9b..0000000
--- 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 b3bc8233a1db9dccf50779a1373e5f47e5c5e83f..c96f7c7ec8e2ccc3e42a893f427c3f343f0b691d 100644 (file)
--- 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
   }