Add display for missing translations

fluent-vue · Demivan · Feb 14, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
commit 0751b5173cbf968b0138ec778bde5e1151ff5d14
diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
@@ -1,14 +1,29 @@
 import type { FluentBundle } from '@fluent/bundle'

 import type { FluentVue } from 'src'
-import type { App } from 'vue-demi'
+import type { App, ComponentInternalInstance } from 'vue-demi'
 import type { ResolvedOptions } from '../types'
 import { setupDevToolsPlugin } from '@vue/devtools-api'
-import { watchEffect } from 'vue-demi'
+import { getCurrentInstance, watchEffect } from 'vue-demi'
 import pseudoLocalize from './pseudoLocalize'

 export function registerFluentVueDevtools(app: App, options: ResolvedOptions, fluent: FluentVue) {
  let currentPseudoLocalize: ((str: string) => string) | undefined
+  const missingTranslations: WeakMap<ComponentInternalInstance, Set<string>> = new WeakMap()
+
+  // Hook into options and app
+  const oldWarnMissing = options.warnMissing
+  options.warnMissing = (key) => {
+    const instance = getCurrentInstance()
+
+    oldWarnMissing(key)
+
+    if (!instance)
+      return
+
+    missingTranslations.set(instance, missingTranslations.get(instance) ?? new Set())
+    missingTranslations.get(instance)!.add(key)
+  }

  // Hook into bundle tranform
  const hookedBundles = new WeakSet<FluentBundle>()
@@ -103,6 +118,37 @@ export function registerFluentVueDevtools(app: App, options: ResolvedOptions, fl
          backgroundColor: 0x41B883,
        })
      }
+
+      const missing = missingTranslations.get(componentInstance)
+      if (missing != null && missing.size > 0) {
+        treeNode.tags.push({
+          label: 'missing translations',
+          textColor: 0xFFFFFF,
+          backgroundColor: 0xB00020,
+        })
+      }
+    })
+
+    api.on.inspectComponent(({ componentInstance, instanceData }) => {
+      if (!componentInstance?.proxy?.$options.fluent)
+        return
+
+      const missing = missingTranslations.get(componentInstance)
+
+      if (missing) {
+        instanceData.state.push({
+          type: 'fluent-vue',
+          key: 'missingTranslations',
+          editable: false,
+          value: {
+            _custom: {
+              type: 'set',
+              value: [...missing.values()],
+              display: JSON.stringify([...missing.values()]),
+            },
+          },
+        })
+      }
    })

    function handleSettingsChange(settings: {