From 3df27b9d516abccad9bb7969daa762d133bca946 Mon Sep 17 00:00:00 2001 From: Arlo Date: Sat, 13 Jan 2024 14:35:21 +0800 Subject: [PATCH] feat: vue i18n tab (#168) --- packages/client/src/constants/tab.ts | 8 ++ packages/client/src/main.ts | 2 + packages/client/src/pages/i18n.vue | 92 ++++++++++++++++++ packages/core/src/bridge/core.ts | 2 + packages/core/src/bridge/devtools.ts | 4 + packages/core/src/bridge/user-app.ts | 6 ++ packages/devtools-kit/src/api/index.ts | 19 +++- packages/devtools-kit/src/api/plugin.ts | 2 + .../src/core/component-inspector/index.ts | 13 +++ packages/playground/locales/en.yml | 14 +++ packages/playground/locales/es.yml | 14 +++ packages/playground/locales/fr.yml | 14 +++ packages/playground/locales/ja.yml | 13 +++ packages/playground/locales/zh-CN.yml | 14 +++ packages/playground/package.json | 2 + packages/playground/src/App.preview.vue | 21 +++++ packages/playground/src/main.ts | 3 + packages/playground/src/modules/i18n.ts | 49 ++++++++++ packages/playground/vite.config.ts | 9 ++ packages/schema/src/types/vue.ts | 1 + pnpm-lock.yaml | 93 +++++++++++++++++++ 21 files changed, 394 insertions(+), 1 deletion(-) create mode 100644 packages/client/src/pages/i18n.vue create mode 100644 packages/playground/locales/en.yml create mode 100644 packages/playground/locales/es.yml create mode 100644 packages/playground/locales/fr.yml create mode 100644 packages/playground/locales/ja.yml create mode 100644 packages/playground/locales/zh-CN.yml create mode 100644 packages/playground/src/modules/i18n.ts diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts index 7a4ff1f8..d581f937 100644 --- a/packages/client/src/constants/tab.ts +++ b/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 const moduleDetectivesMapping = { pinia: 'pinia', router: 'vueRouter', + i18n: 'vueI18n', } satisfies Record export function isDetected(moduleDetectives: Detective, tab: ModuleBuiltinTab) { diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts index ef0e5f26..39549628 100644 --- a/packages/client/src/main.ts +++ b/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 }, diff --git a/packages/client/src/pages/i18n.vue b/packages/client/src/pages/i18n.vue new file mode 100644 index 00000000..0a4ab4d9 --- /dev/null +++ b/packages/client/src/pages/i18n.vue @@ -0,0 +1,92 @@ + + + diff --git a/packages/core/src/bridge/core.ts b/packages/core/src/bridge/core.ts index 82d03eef..8368b985 100644 --- a/packages/core/src/bridge/core.ts +++ b/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 { diff --git a/packages/core/src/bridge/devtools.ts b/packages/core/src/bridge/devtools.ts index 62a46dde..74493680 100644 --- a/packages/core/src/bridge/devtools.ts +++ b/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) } diff --git a/packages/core/src/bridge/user-app.ts b/packages/core/src/bridge/user-app.ts index 89f1b79c..aa7b4322 100644 --- a/packages/core/src/bridge/user-app.ts +++ b/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!) diff --git a/packages/devtools-kit/src/api/index.ts b/packages/devtools-kit/src/api/index.ts index 35604e72..2dbcba52 100644 --- a/packages/devtools-kit/src/api/index.ts +++ b/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() diff --git a/packages/devtools-kit/src/api/plugin.ts b/packages/devtools-kit/src/api/plugin.ts index 2506db09..e2540ebf 100644 --- a/packages/devtools-kit/src/api/plugin.ts +++ b/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, }, } }) diff --git a/packages/devtools-kit/src/core/component-inspector/index.ts b/packages/devtools-kit/src/core/component-inspector/index.ts index 5da64866..5108c56c 100644 --- a/packages/devtools-kit/src/core/component-inspector/index.ts +++ b/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 } diff --git a/packages/playground/locales/en.yml b/packages/playground/locales/en.yml new file mode 100644 index 00000000..a0997459 --- /dev/null +++ b/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 diff --git a/packages/playground/locales/es.yml b/packages/playground/locales/es.yml new file mode 100644 index 00000000..44596439 --- /dev/null +++ b/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 diff --git a/packages/playground/locales/fr.yml b/packages/playground/locales/fr.yml new file mode 100644 index 00000000..7f93ce24 --- /dev/null +++ b/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 diff --git a/packages/playground/locales/ja.yml b/packages/playground/locales/ja.yml new file mode 100644 index 00000000..834228e6 --- /dev/null +++ b/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: 見つかりませんでした diff --git a/packages/playground/locales/zh-CN.yml b/packages/playground/locales/zh-CN.yml new file mode 100644 index 00000000..7d9ce762 --- /dev/null +++ b/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: 未找到页面 diff --git a/packages/playground/package.json b/packages/playground/package.json index 79f488d9..dfb36687 100644 --- a/packages/playground/package.json +++ b/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:*", diff --git a/packages/playground/src/App.preview.vue b/packages/playground/src/App.preview.vue index 4e35a6a1..d964b7ad 100644 --- a/packages/playground/src/App.preview.vue +++ b/packages/playground/src/App.preview.vue @@ -1,15 +1,36 @@