Add devtools with pseudolocalization support

fluent-vue · Demivan · Feb 14, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
commit 1e792e47652cb512d66ad00c155c5add5ad0d383
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "fluent-vue",
   "type": "module",
   "version": "3.6.0",
-  "packageManager": "pnpm@10.3.0",
+  "packageManager": "pnpm@10.3.0+sha512.ee592eda8815a8a293c206bb0917c4bb0ff274c50def7cbc17be05ec641fc2d1b02490ce660061356bd0d126a4d7eb2ec8830e6959fb8a447571c631d5a2442d",
   "description": "Internationalization plugin for Vue.js. Project Fluent bindings for Vue.js",
   "author": "Ivan Demchuk <ivan.demchuk@gmail.com>",
   "license": "MIT",
@@ -79,6 +79,7 @@
     "@types/node": "^22.13.1",
     "@vitest/coverage-istanbul": "^3.0.5",
     "@vue/compiler-sfc": "^3.5.13",
+    "@vue/devtools-api": "^7.7.1",
     "@vue/test-utils": "^2.4.6",
     "dotenv-cli": "^8.0.0",
     "esbuild-plugin-globals": "^0.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/devtools/index.ts b/src/devtools/index.ts
@@ -0,0 +1 @@
+export { registerFluentVueDevtools } from './plugin'
diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
@@ -0,0 +1,119 @@
+import type { FluentBundle } from '@fluent/bundle'
+
+import type { FluentVue } from 'src'
+import type { App } from 'vue-demi'
+import type { ResolvedOptions } from '../types'
+import { setupDevToolsPlugin } from '@vue/devtools-api'
+import { watchEffect } from 'vue-demi'
+import pseudoLocalize from './pseudoLocalize'
+
+export function registerFluentVueDevtools(app: App, options: ResolvedOptions, fluent: FluentVue) {
+  // Hook into bundle tranform
+  let currentPseudoLocalize: ((str: string) => string) | undefined
+
+  const hookedBundles = new WeakSet<FluentBundle>()
+
+  watchEffect(() => {
+    const bundles = fluent.bundles
+
+    for (const bundle of bundles) {
+      if (hookedBundles.has(bundle))
+        continue
+
+      const userTransform = bundle._transform
+      bundle._transform = (str) => {
+        if (userTransform != null)
+          str = userTransform(str)
+
+        if (currentPseudoLocalize != null)
+          str = currentPseudoLocalize(str)
+
+        return str
+      }
+
+      hookedBundles.add(bundle)
+    }
+  }, { flush: 'sync' })
+
+  setupDevToolsPlugin({
+    id: 'fluent-vue',
+    label: 'fluent-vue',
+    packageName: 'fluent-vue',
+    homepage: 'https://fluent-vue.demivan.me',
+    logo: 'https://fluent-vue.demivan.me/assets/logo.svg',
+    componentStateTypes: ['fluent-vue'],
+    app,
+    settings: {
+      pseudo: {
+        label: 'Pseudolocalization',
+      } as any, // Use option as a header
+      pseudoEnable: {
+        defaultValue: false,
+        label: 'Enable',
+        description: 'Enable pseudolocalization',
+        type: 'boolean',
+      },
+      pseudoAccents: {
+        defaultValue: true,
+        label: 'Accents',
+        description: 'Enable pseudolocalization accents',
+        type: 'boolean',
+      },
+      pseudoPrefix: {
+        label: 'Prefix',
+        type: 'text',
+        description: 'Prefix to wrap translation',
+        defaultValue: '[',
+      },
+      pseudoSuffix: {
+        label: 'Suffix',
+        type: 'text',
+        description: 'Suffix to wrap translation',
+        defaultValue: ']',
+      },
+    },
+  }, (api) => {
+    api.on.visitComponentTree(({ treeNode }) => {
+      if (treeNode.name === options.componentName) {
+        treeNode.tags.push({
+          label: 'fluent-vue',
+          textColor: 0x000000,
+          backgroundColor: 0x41B883,
+        })
+      }
+    })
+
+    function handleSettingsChange(settings: {
+      pseudoEnable: boolean
+      pseudoType: string
+      pseudoPrefix: string
+      pseudoSuffix: string
+      pseudoAccents: boolean
+    }) {
+      if (settings.pseudoEnable) {
+        currentPseudoLocalize = str => pseudoLocalize(str, {
+          prefix: settings.pseudoPrefix ?? undefined,
+          suffix: settings.pseudoSuffix ?? undefined,
+          accents: settings.pseudoAccents ?? false,
+        })
+      }
+      else {
+        currentPseudoLocalize = undefined
+      }
+
+      // Force update app as if bundles changed
+      fluent.bundles = [...fluent.bundles]
+    }
+
+    api.on.setPluginSettings((payload) => {
+      handleSettingsChange(payload.settings)
+    })
+
+    handleSettingsChange(api.getSettings())
+
+    api.addInspector({
+      id: 'fluent-vue-inspector',
+      label: 'fluent-vue',
+    })
+  })
+}
diff --git a/src/devtools/pseudoLocalize.ts b/src/devtools/pseudoLocalize.ts
@@ -0,0 +1,29 @@
+const ASCII = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+const ACCENTED_ASCII = 'âḃćḋèḟĝḫíĵǩĺṁńŏṗɋŕśṭůṿẘẋẏẓḀḂḈḊḔḞḠḢḬĴḴĻḾŊÕṔɊŔṠṮŨṼẄẌŸƵ'
+
+interface PseudolocalizationOptions {
+  prefix: string
+  suffix: string
+  accents: boolean
+}
+
+export default function pseudoLocalize(str: string, options: PseudolocalizationOptions): string {
+  let finalString = ''
+
+  if (options.prefix)
+    finalString += options.prefix
+
+  for (let i = 0; i < str.length; i++) {
+    const character = str[i]
+    const convertedCharacter = options.accents
+      ? ACCENTED_ASCII[ASCII.indexOf(character)] ?? character
+      : character
+
+    finalString += convertedCharacter
+  }
+
+  if (options.suffix)
+    finalString += options.suffix
+
+  return finalString
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { registerFluentVueDevtools } from './plugin'