fg-devkit 1.15.1 → 1.16.0

package/configs/dependency-policy.vue-workspace.json

@@ -83,6 +83,7 @@
       "vega": "6.4.0",
       "vite-plugin-dts": "4.5.4",
       "vite-plugin-vue-devtools": "8.2.1",
+      "vite-plugin-vue-inspector": "7.0.0",
       "vitest": "4.1.10",
       "yaml": "2.9.0"
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fg-devkit",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "Shared configs, scripts, and DX tooling for Vue / TypeScript frontend repos",
   "type": "module",
   "license": "UNLICENSED",
@@ -26,6 +26,7 @@
     "./scripts/sync-tooling-configs.mjs": "./scripts/sync-tooling-configs.mjs",
     "./scripts/sync-project-configs.mjs": "./scripts/sync-project-configs.mjs",
     "./scripts/sync-consumer-scripts.mjs": "./scripts/sync-consumer-scripts.mjs",
+    "./scripts/sync-vite-plugin-vue-inspector.mjs": "./scripts/sync-vite-plugin-vue-inspector.mjs",
     "./scripts/sync-consumer-lefthook.mjs": "./scripts/sync-consumer-lefthook.mjs",
     "./scripts/policy-outdated.mjs": "./scripts/policy-outdated.mjs",
     "./scripts/policy-vulns.mjs": "./scripts/policy-vulns.mjs",

package/scaffold/vue/package.json

@@ -33,10 +33,11 @@
     "@tanstack/vue-query-devtools": "6.1.48",
     "@types/node": "22.16.5",
     "@vitejs/plugin-vue": "6.0.8",
-    "fg-devkit": "1.15.1",
+    "fg-devkit": "1.16.0",
     "tailwindcss": "4.3.3",
     "tsx": "4.23.13",
-    "vite": "7.3.5"
+    "vite": "7.3.5",
+    "vite-plugin-vue-inspector": "7.0.0"
   },
   "packageManager": "pnpm@11.25.0",
   "engines": {

package/scaffold/vue/vite.config.ts

@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import { fileURLToPath } from 'node:url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import tailwindcss from '@tailwindcss/vite'
+import Inspector from 'vite-plugin-vue-inspector'
 
 export default defineConfig({
   plugins: [
@@ -19,6 +20,10 @@ export default defineConfig({
       strictMessage: false,
     }),
     tailwindcss(),
+    Inspector({
+      launchEditor: 'cursor',
+      toggleComboKey: 'meta-alt',
+    }),
   ],
   resolve: {
     alias: {

package/scripts/fg-devkit.mjs

@@ -445,6 +445,7 @@ function runSyncConfigTarget(target) {
   if (target === 'tsconfig') return syncFileFromTemplate('configs/tsconfig.app.sync.json', 'tsconfig.json')
   if (target === 'fallow') return syncFileFromTemplate('configs/fallowrc.sync-stub.json', '.fallowrc.json')
   if (target === 'cursor') return runNode('sync-core-coding-standards.mjs')
+  if (target === 'vue-inspector') return runNode('sync-vite-plugin-vue-inspector.mjs')
   if (target === 'all') return runNode('sync-project-configs.mjs')
   console.error(`[fg-devkit] Unknown config sync target: ${target}`)
   return 1
@@ -477,6 +478,7 @@ const DIRECT_COMMANDS = {
   'sync-tooling-configs': 'sync-tooling-configs.mjs',
   'sync-vscode-settings': 'sync-vscode-settings.mjs',
   'sync-core-coding-standards': 'sync-core-coding-standards.mjs',
+  'sync-vite-plugin-vue-inspector': 'sync-vite-plugin-vue-inspector.mjs',
   'sync-consumer-scripts': 'sync-consumer-scripts.mjs',
   'sync-release-notes-config': 'sync-release-notes-config.mjs',
   'generate-release-notes': 'generate-release-notes.mjs',
@@ -538,6 +540,7 @@ Commands:
   sync-tooling-configs            Tooling sync only (overwrites config files)
   sync-vscode-settings            Copy shared VS Code settings into .vscode/settings.json
   sync-core-coding-standards      Copy .cursor core coding standards with consumer package name
+  sync-vite-plugin-vue-inspector  Add/pin vite-plugin-vue-inspector and wire it in vite.config
   sync-consumer-scripts           Enforce standard fgd scripts in consumer package.json
   setup-lefthook                  Setup lefthook and migrate from husky/lint-staged
   full-consumer-setup             Run: scripts -> lefthook -> step 3 -> step 2 -> pnpm install
@@ -836,6 +839,7 @@ async function runInteractiveMenu() {
           { name: 'tsconfig', value: 'tsconfig' },
           { name: 'Fallow', value: 'fallow' },
           { name: 'Cursor', value: 'cursor' },
+          { name: 'Vue inspector (vite-plugin-vue-inspector)', value: 'vue-inspector' },
           { name: 'All', value: 'all' },
           { name: 'Cancel', value: 'cancel' },
         ],

package/scripts/sync-vite-plugin-vue-inspector.mjs

@@ -0,0 +1,406 @@
+#!/usr/bin/env node
+/**
+ * Ensures vite-plugin-vue-inspector is declared and wired in a Vue consumer repo.
+ *
+ * - Adds/pins the package in package.json devDependencies (version from dependency policy)
+ * - Ensures import + Inspector({ launchEditor: 'cursor', toggleComboKey: 'meta-alt' }) in vite.config.*
+ *
+ * Does not overwrite the rest of vite.config. Idempotent.
+ *
+ * Usage:
+ *   node node_modules/fg-devkit/scripts/sync-vite-plugin-vue-inspector.mjs
+ *   pnpm exec fg-devkit sync-vite-plugin-vue-inspector
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { resolveDependencyPolicyPath } from './resolve-dependency-policy-path.mjs'
+
+const PACKAGE_NAME = 'vite-plugin-vue-inspector'
+const IMPORT_LINE = `import Inspector from '${PACKAGE_NAME}'`
+const PLUGIN_OPTIONS = {
+  launchEditor: 'cursor',
+  toggleComboKey: 'meta-alt',
+}
+
+const VITE_CONFIG_CANDIDATES = [
+  'vite.config.ts',
+  'vite.config.mts',
+  'vite.config.js',
+  'vite.config.mjs',
+]
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const cwd = process.cwd()
+const policyPath = resolveDependencyPolicyPath(scriptDir, cwd, process.argv)
+
+function fail(message) {
+  console.error(`[sync-vite-plugin-vue-inspector] ${message}`)
+  process.exit(1)
+}
+
+function resolvePluginVersion(policy) {
+  return (
+    policy.managedDependencies?.devDependencies?.[PACKAGE_NAME] ??
+    policy.managedAnywhere?.[PACKAGE_NAME]
+  )
+}
+
+function findViteConfigPath(projectRoot) {
+  for (const name of VITE_CONFIG_CANDIDATES) {
+    const candidate = path.join(projectRoot, name)
+    if (fs.existsSync(candidate)) return candidate
+  }
+  return null
+}
+
+function formatPluginCall(indent) {
+  return [
+    'Inspector({',
+    `${indent}  launchEditor: '${PLUGIN_OPTIONS.launchEditor}',`,
+    `${indent}  toggleComboKey: '${PLUGIN_OPTIONS.toggleComboKey}',`,
+    `${indent}})`,
+  ].join('\n')
+}
+
+/** Find matching closing `)` for a call starting at openParenIndex (the `(`). */
+function findMatchingParen(source, openParenIndex) {
+  let depth = 0
+  let inSingle = false
+  let inDouble = false
+  let inTemplate = false
+  let inLineComment = false
+  let inBlockComment = false
+
+  for (let i = openParenIndex; i < source.length; i++) {
+    const ch = source[i]
+    const next = source[i + 1]
+
+    if (inLineComment) {
+      if (ch === '\n') inLineComment = false
+      continue
+    }
+    if (inBlockComment) {
+      if (ch === '*' && next === '/') {
+        inBlockComment = false
+        i++
+      }
+      continue
+    }
+    if (inSingle) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === "'") inSingle = false
+      continue
+    }
+    if (inDouble) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === '"') inDouble = false
+      continue
+    }
+    if (inTemplate) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === '`') inTemplate = false
+      continue
+    }
+
+    if (ch === '/' && next === '/') {
+      inLineComment = true
+      i++
+      continue
+    }
+    if (ch === '/' && next === '*') {
+      inBlockComment = true
+      i++
+      continue
+    }
+    if (ch === "'") {
+      inSingle = true
+      continue
+    }
+    if (ch === '"') {
+      inDouble = true
+      continue
+    }
+    if (ch === '`') {
+      inTemplate = true
+      continue
+    }
+
+    if (ch === '(') depth++
+    else if (ch === ')') {
+      depth--
+      if (depth === 0) return i
+    }
+  }
+  return -1
+}
+
+/** Find the closing `]` of `plugins: [` starting at openBracketIndex. */
+function findMatchingBracket(source, openBracketIndex) {
+  let depth = 0
+  let inSingle = false
+  let inDouble = false
+  let inTemplate = false
+  let inLineComment = false
+  let inBlockComment = false
+
+  for (let i = openBracketIndex; i < source.length; i++) {
+    const ch = source[i]
+    const next = source[i + 1]
+
+    if (inLineComment) {
+      if (ch === '\n') inLineComment = false
+      continue
+    }
+    if (inBlockComment) {
+      if (ch === '*' && next === '/') {
+        inBlockComment = false
+        i++
+      }
+      continue
+    }
+    if (inSingle) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === "'") inSingle = false
+      continue
+    }
+    if (inDouble) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === '"') inDouble = false
+      continue
+    }
+    if (inTemplate) {
+      if (ch === '\\') {
+        i++
+        continue
+      }
+      if (ch === '`') inTemplate = false
+      continue
+    }
+
+    if (ch === '/' && next === '/') {
+      inLineComment = true
+      i++
+      continue
+    }
+    if (ch === '/' && next === '*') {
+      inBlockComment = true
+      i++
+      continue
+    }
+    if (ch === "'") {
+      inSingle = true
+      continue
+    }
+    if (ch === '"') {
+      inDouble = true
+      continue
+    }
+    if (ch === '`') {
+      inTemplate = true
+      continue
+    }
+
+    if (ch === '[') depth++
+    else if (ch === ']') {
+      depth--
+      if (depth === 0) return i
+    }
+  }
+  return -1
+}
+
+function hasInspectorImport(source) {
+  return /from\s+['"]vite-plugin-vue-inspector['"]/.test(source)
+}
+
+function ensureImport(source) {
+  if (hasInspectorImport(source)) return { source, changed: false }
+
+  const importRe = /^import\s.+from\s+['"][^'"]+['"].*$/gm
+  let lastImportEnd = -1
+  for (const match of source.matchAll(importRe)) {
+    lastImportEnd = match.index + match[0].length
+  }
+
+  if (lastImportEnd === -1) {
+    return { source: `${IMPORT_LINE}\n${source}`, changed: true }
+  }
+
+  const before = source.slice(0, lastImportEnd)
+  const after = source.slice(lastImportEnd)
+  return { source: `${before}\n${IMPORT_LINE}${after}`, changed: true }
+}
+
+function isCanonicalInspectorCall(callText) {
+  const launchOk = /launchEditor\s*:\s*['"]cursor['"]/.test(callText)
+  const toggleOk = /toggleComboKey\s*:\s*['"]meta-alt['"]/.test(callText)
+  const onlyExpectedKeys =
+    [...callText.matchAll(/(\w+)\s*:/g)].map((m) => m[1]).every((key) =>
+      ['launchEditor', 'toggleComboKey'].includes(key),
+    )
+  return launchOk && toggleOk && onlyExpectedKeys
+}
+
+function ensurePluginCall(source) {
+  const callMatch = /\bInspector\s*\(/.exec(source)
+  if (callMatch) {
+    const openParen = callMatch.index + callMatch[0].length - 1
+    const closeParen = findMatchingParen(source, openParen)
+    if (closeParen === -1) {
+      fail('Found Inspector( but could not find matching closing parenthesis')
+    }
+    const callText = source.slice(callMatch.index, closeParen + 1)
+    if (isCanonicalInspectorCall(callText)) {
+      return { source, changed: false, action: null }
+    }
+    const indentMatch = source.slice(0, callMatch.index).match(/(^|\n)([ \t]*)$/)
+    const indent = indentMatch ? indentMatch[2] : '    '
+    const formatted = formatPluginCall(indent)
+    return {
+      source: source.slice(0, callMatch.index) + formatted + source.slice(closeParen + 1),
+      changed: true,
+      action: 'updated',
+    }
+  }
+
+  const pluginsMatch = /plugins\s*:\s*\[/.exec(source)
+  if (!pluginsMatch) {
+    fail('Could not find plugins: [...] in vite config')
+  }
+  const openBracket = pluginsMatch.index + pluginsMatch[0].length - 1
+  const closeBracket = findMatchingBracket(source, openBracket)
+  if (closeBracket === -1) {
+    fail('Could not find closing ] for plugins array')
+  }
+
+  const arrayBody = source.slice(openBracket + 1, closeBracket)
+  const indentMatch = arrayBody.match(/\n([ \t]+)\S/)
+  const itemIndent = indentMatch ? indentMatch[1] : '    '
+  const closeIndent = itemIndent.slice(0, Math.max(0, itemIndent.length - 2)) || '  '
+
+  const trimmedBody = arrayBody.trimEnd()
+  const bodyEnd = openBracket + 1 + trimmedBody.length
+  const needsComma = trimmedBody.length > 0 && !/,\s*$/.test(trimmedBody)
+  const pluginLine = formatPluginCall(itemIndent)
+  const insertion = `${needsComma ? ',' : ''}\n${itemIndent}${pluginLine},\n${closeIndent}`
+
+  return {
+    source: source.slice(0, bodyEnd) + insertion + source.slice(closeBracket),
+    changed: true,
+    action: 'added',
+  }
+}
+
+function syncPackageJson(projectRoot, version) {
+  const packageJsonPath = path.join(projectRoot, 'package.json')
+  if (!fs.existsSync(packageJsonPath)) {
+    fail(`package.json not found at ${packageJsonPath}`)
+  }
+
+  let pkg
+  try {
+    pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+  } catch (err) {
+    fail(`Failed to parse package.json: ${err.message}`)
+  }
+
+  pkg.devDependencies =
+    pkg.devDependencies && typeof pkg.devDependencies === 'object' ? pkg.devDependencies : {}
+
+  const changes = []
+  if (pkg.dependencies?.[PACKAGE_NAME] !== undefined) {
+    delete pkg.dependencies[PACKAGE_NAME]
+    changes.push(`removed ${PACKAGE_NAME} from dependencies`)
+  }
+  if (pkg.devDependencies[PACKAGE_NAME] !== version) {
+    pkg.devDependencies[PACKAGE_NAME] = version
+    changes.push(`devDependencies.${PACKAGE_NAME} = ${version}`)
+  }
+
+  if (changes.length > 0) {
+    fs.writeFileSync(packageJsonPath, `${JSON.stringify(pkg, null, 2)}\n`, 'utf8')
+  }
+  return changes
+}
+
+function syncViteConfig(projectRoot) {
+  const viteConfigPath = findViteConfigPath(projectRoot)
+  if (!viteConfigPath) {
+    fail(
+      `No vite.config.(ts|mts|js|mjs) found in ${projectRoot}. Add a Vite config before syncing the inspector plugin.`,
+    )
+  }
+
+  const configName = path.basename(viteConfigPath)
+  let source = fs.readFileSync(viteConfigPath, 'utf8')
+  const changes = []
+
+  const importResult = ensureImport(source)
+  source = importResult.source
+  if (importResult.changed) changes.push(`added import in ${configName}`)
+
+  const pluginResult = ensurePluginCall(source)
+  source = pluginResult.source
+  if (pluginResult.action === 'added') {
+    changes.push(`added Inspector() to plugins in ${configName}`)
+  } else if (pluginResult.action === 'updated') {
+    changes.push(`updated Inspector() options in ${configName}`)
+  }
+
+  if (importResult.changed || pluginResult.changed) {
+    fs.writeFileSync(viteConfigPath, source, 'utf8')
+  }
+
+  return changes
+}
+
+function main() {
+  if (!fs.existsSync(policyPath)) {
+    fail(`Could not find dependency policy: ${policyPath}`)
+  }
+
+  const policy = JSON.parse(fs.readFileSync(policyPath, 'utf8'))
+  const version = resolvePluginVersion(policy)
+  if (!version) {
+    fail(
+      `${PACKAGE_NAME} is not listed in the dependency policy (managedDependencies.devDependencies)`,
+    )
+  }
+
+  const pkgChanges = syncPackageJson(cwd, version)
+  const viteChanges = syncViteConfig(cwd)
+  const allChanges = [...pkgChanges, ...viteChanges]
+
+  if (allChanges.length === 0) {
+    console.log('[sync-vite-plugin-vue-inspector] Already up to date.')
+    return
+  }
+
+  console.log('[sync-vite-plugin-vue-inspector] Updated:')
+  for (const change of allChanges) {
+    console.log(`  - ${change}`)
+  }
+  console.log(
+    '[sync-vite-plugin-vue-inspector] Run pnpm install if the dependency was added or pinned.',
+  )
+}
+
+main()