feat: vue i18n tab (#168)

Author: webfansplz

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