feat: vue i18n tab (#168)

packages/client/src/constants/tab.ts

@@ -56,6 +56,13 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
  path: 'pinia',
  title: 'Pinia',
  },
+ {
+ icon: 'i-carbon-language',
+ name: 'i18n',
+ order: -100,
+ path: 'i18n',
+ title: 'I18n Resources',
+ },
  ]],
  ['advanced', [
  {
@@ -79,6 +86,7 @@ type Detective = NonNullable<DevtoolsBridgeAppRecord['moduleDetectives']>
 const moduleDetectivesMapping = {
  pinia: 'pinia',
  router: 'vueRouter',
+ i18n: 'vueI18n',
 } satisfies Record<string, keyof Detective>
 
 export function isDetected(moduleDetectives: Detective, tab: ModuleBuiltinTab) {

packages/client/src/main.ts

@@ -14,6 +14,7 @@ import Components from '~/pages/components.vue'
 import Overview from '~/pages/overview.vue'
 import PiniaPage from '~/pages/pinia.vue'
 import RouterPage from '~/pages/router.vue'
+import I18nPage from '~/pages/i18n.vue'
 import Timeline from '~/pages/timeline.vue'
 import Pages from '~/pages/pages.vue'
 import Assets from '~/pages/assets.vue'
@@ -40,6 +41,7 @@ const routes = [
  { path: '/components', component: Components },
  { path: '/pinia', component: PiniaPage },
  { path: '/router', component: RouterPage },
+ { path: '/i18n', component: I18nPage },
  { path: '/timeline', component: Timeline },
  { path: '/pages', component: Pages },
  { path: '/assets', component: Assets },

packages/client/src/pages/i18n.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useDevToolsBridgeRpc } from '@vue/devtools-core'
+
+// eslint-disable-next-line ts/no-import-type-side-effects
+import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
+import { Pane, Splitpanes } from 'splitpanes'
+
+const bridgeRpc = useDevToolsBridgeRpc()
+const INSPECTOR_ID = 'vue-i18n-resource-inspector'
+
+const selected = ref('')
+const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
+const state = ref<{
+ inspectorId?: string
+ state?: InspectorState[]
+ getters?: InspectorState[]
+}>({})
+
+function getI18nState(nodeId: string) {
+ bridgeRpc.getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then(({ data }) => {
+ state.value = data
+ })
+}
+
+function clearI18nState() {
+ state.value = {}
+}
+
+watch(selected, () => {
+ clearI18nState()
+ getI18nState(selected.value)
+})
+
+createCollapseContext('inspector-state')
+
+onDevToolsClientConnected(() => {
+ bridgeRpc.getInspectorTree({ inspectorId: INSPECTOR_ID, filter: '' }).then(({ data }) => {
+ tree.value = data
+ if (!selected.value && data.length) {
+ selected.value = data[0].id
+ getI18nState(data[0].id)
+ }
+ })
+
+ bridgeRpc.on.inspectorTreeUpdated((data) => {
+ if (!data?.data.length)
+ return
+ tree.value = data.data
+ if (!selected.value && data.data.length) {
+ selected.value = data.data[0].id
+ getI18nState(data.data[0].id)
+ }
+ }, {
+ inspectorId: INSPECTOR_ID,
+ })
+
+ bridgeRpc.on.inspectorStateUpdated((data) => {
+ if (!data || !data.state.length)
+ return
+
+ state.value = data
+ }, {
+ inspectorId: INSPECTOR_ID,
+ })
+})
+
+onUnmounted(() => {
+ bridgeRpc.unhighlightElement()
+})
+</script>
+
+<template>
+ <PanelGrids h-screen>
+ <Splitpanes>
+ <Pane flex flex-col border="r base">
+ <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
+ <InspectorTree v-model="selected" :data="tree" />
+ </div>
+ </Pane>
+ <Pane flex flex-col>
+ <div :key="selected" h-0 grow overflow-auto p-2 class="no-scrollbar">
+ <InspectorState
+ v-for="(item, key) in state" :id="key"
+ :key="key"
+ :inspector-id="INSPECTOR_ID"
+ :node-id="selected" :data="item" :name="`${key}`"
+ />
+ </div>
+ </Pane>
+ </Splitpanes>
+ </PanelGrids>
+</template>

packages/core/src/bridge/core.ts

@@ -85,6 +85,7 @@ export const bridgeRpcEvents = {
  toggleApp: 'toggle-app',
  isVueInspectorDetected: 'vue-inspector:detected',
  enableVueInspector: 'vue-inspector:enable',
+ unhighlightElement: 'element:unhighlight',
 } as const
 
 export type BridgeRpcEvents = typeof bridgeRpcEvents
@@ -116,6 +117,7 @@ export interface BridgeRpcEventPayload {
  [bridgeRpcEvents.toggleApp]: string
  [bridgeRpcEvents.isVueInspectorDetected]: boolean
  [bridgeRpcEvents.enableVueInspector]: null
+ [bridgeRpcEvents.unhighlightElement]: null
 }
 
 export class BridgeRpcCore {

packages/core/src/bridge/devtools.ts

@@ -95,6 +95,10 @@ export class BridgeRpc {
  return devtoolsBridge.rpc.emit<{ data: { id: string } }>(bridgeRpcEvents.inspectComponentInspector)
  }
 
+ static unhighlightElement() {
+ return devtoolsBridge.rpc.emit(bridgeRpcEvents.unhighlightElement)
+ }
+
  static scrollToComponent(payload: BridgeRpcEventPayload['scroll-to-component']) {
  return devtoolsBridge.rpc.emit(bridgeRpcEvents.scrollToComponent, payload)
  }

packages/core/src/bridge/user-app.ts

@@ -42,6 +42,12 @@ export function registerBridgeRpc(bridge: BridgeInstanceType) {
  return devtools.api.inspectComponentInspector()
  })
 
+ // unhighlight element
+ bridgeRpcCore.on(bridgeRpcEvents.unhighlightElement, () => {
+ devtools.api.unhighlightElement()
+ return Promise.resolve(JSON.stringify({}))
+ })
+
  // scroll to component
  bridgeRpcCore.on(bridgeRpcEvents.scrollToComponent, (payload) => {
  devtools.api.scrollToComponent(payload!)

packages/devtools-kit/src/api/index.ts

@@ -14,7 +14,7 @@ import { addCustomCommand, removeCustomCommand } from '../core/custom-command'
 import type { CustomCommand } from '../core/custom-command'
 
 import { getVueInspector } from '../core/vue-inspector'
-import { inspectComponentInspector, scrollToComponent, toggleComponentInspector } from '../core/component-inspector'
+import { highlight as highlightElement, inspectComponentInspector, scrollToComponent, toggleComponentInspector, unhighlight as unhighlightElement } from '../core/component-inspector'
 import { clear } from './off'
 import type { DevToolsEvent } from './on'
 import { DevToolsEvents, apiHooks, on } from './on'
@@ -178,6 +178,23 @@ export class DevToolsPluginApi {
  openInEditor(payload)
  }
 
+ highlightElement(instance) {
+ highlightElement(instance)
+ }
+
+ unhighlightElement() {
+ unhighlightElement()
+ }
+
+ async getComponentInstances(app) {
+ const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__
+ const appId = appRecord.id.toString()
+ const instances = [...appRecord.instanceMap]
+ .filter(([key]) => key.split(':')[0] === appId)
+ .map(([,instance]) => instance)
+ return instances
+ }
+
  // Vite only
  getVueInspector() {
  return getVueInspector()

packages/devtools-kit/src/api/plugin.ts

@@ -41,11 +41,13 @@ export async function registerPlugin(options: { app: VueAppInstance, api: DevToo
  const globalProperties = record.app?.config?.globalProperties
  if (!globalProperties)
  return record
+
  return {
  ...record,
  moduleDetectives: {
  vueRouter: !!globalProperties.$router,
  pinia: !!globalProperties.$pinia,
+ vueI18n: !!globalProperties.$i18n,
  },
  }
  })

packages/devtools-kit/src/core/component-inspector/index.ts

@@ -142,6 +142,19 @@ export function toggleComponentInspector(options: ToggleComponentInspectorOption
  }
 }
 
+export function highlight(instance: VueAppInstance) {
+ const bounds = getComponentBoundingRect(instance)
+ const name = getInstanceName(instance)
+ const container = getCotainerElement()
+ container ? update({ bounds, name }) : create({ bounds, name })
+}
+
+export function unhighlight() {
+ const el = getCotainerElement()
+ if (el)
+ el.style.display = 'none'
+}
+
 let inspectInstance: VueAppInstance = null!
 function inspectFn(e: MouseEvent) {
  const target = e.target as { __vueParentComponent?: VueAppInstance }

packages/playground/locales/en.yml

@@ -0,0 +1,14 @@
+button:
+ about: About
+ back: Back
+ go: GO
+ home: Home
+ toggle_dark: Toggle dark mode
+ toggle_langs: Change languages
+intro:
+ desc: Opinionated Vite Starter Template
+ dynamic-route: Demo of dynamic route
+ hi: Hi, {name}!
+ aka: Also known as
+ whats-your-name: What's your name?
+not-found: Not found

packages/playground/locales/es.yml

@@ -0,0 +1,14 @@
+button:
+ about: Acerca de
+ back: Atrás
+ go: Ir
+ home: Inicio
+ toggle_dark: Alternar modo oscuro
+ toggle_langs: Cambiar idiomas
+intro:
+ desc: Plantilla de Inicio de Vite Dogmática
+ dynamic-route: Demo de ruta dinámica
+ hi: ¡Hola, {name}!
+ aka: También conocido como
+ whats-your-name: ¿Cómo te llamas?
+not-found: No se ha encontrado

packages/playground/locales/fr.yml

@@ -0,0 +1,14 @@
+button:
+ about: À propos
+ back: Retour
+ go: Essayer
+ home: Accueil
+ toggle_dark: Basculer en mode sombre
+ toggle_langs: Changer de langue
+intro:
+ desc: Exemple d'application Vite
+ dynamic-route: Démo de route dynamique
+ hi: Salut, {name}!
+ aka: Aussi connu sous le nom de
+ whats-your-name: Comment t'appelles-tu ?
+not-found: Page non trouvée

packages/playground/locales/ja.yml

@@ -0,0 +1,13 @@
+button:
+ about: これは？
+ back: 戻る
+ go: 進む
+ home: ホーム
+ toggle_dark: ダークモード切り替え
+ toggle_langs: 言語切り替え
+intro:
+ desc: 固執された Vite スターターテンプレート
+ dynamic-route: 動的ルートのデモ
+ hi: こんにちは、{name}!
+ whats-your-name: 君の名は。
+not-found: 見つかりませんでした

packages/playground/locales/zh-CN.yml

@@ -0,0 +1,14 @@
+button:
+ about: 关于
+ back: 返回
+ go: 确定
+ home: 首页
+ toggle_dark: 切换深色模式
+ toggle_langs: 切换语言
+intro:
+ desc: 固执己见的 Vite 项目模板
+ dynamic-route: 动态路由演示
+ hi: 你好，{name}
+ aka: 也叫
+ whats-your-name: 输入你的名字
+not-found: 未找到页面

packages/playground/package.json

@@ -13,9 +13,11 @@
  "@vueuse/core": "^10.7.1",
  "pinia": "^2.1.7",
  "vue": "^3.4.4",
+ "vue-i18n": "^9.9.0",
  "vue-router": "^4.2.5"
  },
  "devDependencies": {
+ "@intlify/unplugin-vue-i18n": "^2.0.0",
  "@vitejs/plugin-vue": "^4.6.2",
  "@vue/devtools": "workspace:*",
  "@vue/devtools-api": "workspace:*",

packages/playground/src/App.preview.vue

@@ -1,15 +1,36 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import STC from './components/ScrollToComponent.vue'
 import { useAppStore } from './stores'
 
+import { availableLocales, loadLanguageAsync } from './modules/i18n'
+
 const age = ref(10)
 const app = useAppStore()
+
+const { t, locale } = useI18n()
+
+async function toggleLocales() {
+ // change to some real logic
+ const locales = availableLocales
+ const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+ await loadLanguageAsync(newLocale)
+ locale.value = newLocale
+}
 </script>
 
 <template>
  <div class="container">
  <RouterView />
+ <p>
+ <em text-sm opacity-75>{{ t('intro.desc') }}</em>
+ </p>
+ <p>
+ <a icon-btn :title="t('button.toggle_langs')" @click="toggleLocales()">
+ Toggle Langs
+ </a>
+ </p>
  <p>
  Age: {{ age }}
  </p>

packages/playground/src/main.ts

@@ -12,6 +12,8 @@ import Hello from './pages/Hello.vue'
 import Hey from './pages/Hey.vue'
 import './style.css'
 
+import { install as installI18n } from './modules/i18n'
+
 // connect to remote devtools
 // devtools.connect('http://localhost', 8080)
 
@@ -89,6 +91,7 @@ addCustomCommand({
  ],
 })
 
+installI18n({ app })
 app.use(router)
 app.use(pinia)