feat(i18n): detect missing and dynamic translation keys (#1046)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: sybers

.github/workflows/ci.yml

@@ -210,3 +210,25 @@ jobs:
 
       - name: 🧹 Check for unused production code
         run: pnpm knip --production
+
+  i18n:
+    name: 🌐 i18n validation
+    runs-on: ubuntu-24.04-arm
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@1e1c8eafbd745f64b1ef30a7d7ed7965034c486c # 1e1c8eafbd745f64b1ef30a7d7ed7965034c486c
+        name: 🟧 Install pnpm
+        with:
+          cache: true
+
+      - name: 📦 Install dependencies (root only, no scripts)
+        run: pnpm install --filter . --ignore-scripts
+
+      - name: 🌐 Check for missing or dynamic i18n keys
+        run: pnpm i18n:report

app/components/ColumnPicker.vue

@@ -41,24 +41,24 @@ onKeyDown(
 const toggleableColumns = computed(() => props.columns.filter(col => col.id !== 'name'))
 
 // Map column IDs to i18n keys
-const columnLabelKey: Record<string, string> = {
-  name: 'filters.columns.name',
-  version: 'filters.columns.version',
-  description: 'filters.columns.description',
-  downloads: 'filters.columns.downloads',
-  updated: 'filters.columns.published',
-  maintainers: 'filters.columns.maintainers',
-  keywords: 'filters.columns.keywords',
-  qualityScore: 'filters.columns.quality_score',
-  popularityScore: 'filters.columns.popularity_score',
-  maintenanceScore: 'filters.columns.maintenance_score',
-  combinedScore: 'filters.columns.combined_score',
-  security: 'filters.columns.security',
-}
+const columnLabelKey = computed(() => ({
+  name: $t('filters.columns.name'),
+  version: $t('filters.columns.version'),
+  description: $t('filters.columns.description'),
+  downloads: $t('filters.columns.downloads'),
+  updated: $t('filters.columns.published'),
+  maintainers: $t('filters.columns.maintainers'),
+  keywords: $t('filters.columns.keywords'),
+  qualityScore: $t('filters.columns.quality_score'),
+  popularityScore: $t('filters.columns.popularity_score'),
+  maintenanceScore: $t('filters.columns.maintenance_score'),
+  combinedScore: $t('filters.columns.combined_score'),
+  security: $t('filters.columns.security'),
+}))
 
-function getColumnLabel(id: string): string {
-  const key = columnLabelKey[id]
-  return key ? $t(key) : id
+function getColumnLabel(id: ColumnId): string {
+  const key = columnLabelKey.value[id]
+  return key ?? id
 }
 
 function handleReset() {

app/components/Org/MembersPanel.vue

@@ -2,6 +2,9 @@
 import type { NewOperation } from '~/composables/useConnector'
 import { buildScopeTeam } from '~/utils/npm/common'
 
+type MemberRole = 'developer' | 'admin' | 'owner'
+type MemberRoleFilter = MemberRole | 'all'
+
 const props = defineProps<{
   orgName: string
 }>()
@@ -21,7 +24,7 @@ const {
 } = useConnector()
 
 // Members data: { username: role }
-const members = shallowRef<Record<string, 'developer' | 'admin' | 'owner'>>({})
+const members = shallowRef<Record<string, MemberRole>>({})
 const isLoading = shallowRef(false)
 const error = shallowRef<string | null>(null)
 
@@ -31,15 +34,15 @@ const isLoadingTeams = shallowRef(false)
 
 // Search/filter
 const searchQuery = shallowRef('')
-const filterRole = shallowRef<'all' | 'developer' | 'admin' | 'owner'>('all')
+const filterRole = shallowRef<MemberRoleFilter>('all')
 const filterTeam = shallowRef<string | null>(null)
 const sortBy = shallowRef<'name' | 'role'>('name')
 const sortOrder = shallowRef<'asc' | 'desc'>('asc')
 
 // Add member form
 const showAddMember = shallowRef(false)
 const newUsername = shallowRef('')
-const newRole = shallowRef<'developer' | 'admin' | 'owner'>('developer')
+const newRole = shallowRef<MemberRole>('developer')
 const newTeam = shallowRef<string>('') // Empty string means "developers" (default)
 const isAddingMember = shallowRef(false)
 
@@ -259,6 +262,17 @@ function getRoleBadgeClass(role: string): string {
   }
 }
 
+const roleLabels = computed(() => ({
+  owner: $t('org.members.role.owner'),
+  admin: $t('org.members.role.admin'),
+  developer: $t('org.members.role.developer'),
+  all: $t('org.members.role.all'),
+}))
+
+function getRoleLabel(role: MemberRoleFilter): string {
+  return roleLabels.value[role]
+}
+
 // Click on team badge to switch to teams tab and highlight
 function handleTeamClick(teamName: string) {
   emit('select-team', teamName)
@@ -341,7 +355,7 @@ watch(lastExecutionTime, () => {
           :aria-pressed="filterRole === role"
           @click="filterRole = role"
         >
-          {{ $t(`org.members.role.${role}`) }}
+          {{ getRoleLabel(role) }}
           <span v-if="role !== 'all'" class="text-fg-subtle">({{ roleCounts[role] }})</span>
         </button>
       </div>
@@ -439,7 +453,7 @@ watch(lastExecutionTime, () => {
               class="px-1.5 py-0.5 font-mono text-xs border rounded"
               :class="getRoleBadgeClass(member.role)"
             >
-              {{ member.role }}
+              {{ getRoleLabel(member.role) }}
             </span>
           </div>
           <div class="flex items-center gap-1">
@@ -459,9 +473,9 @@ watch(lastExecutionTime, () => {
                 )
               "
             >
-              <option value="developer">{{ $t('org.members.role.developer') }}</option>
-              <option value="admin">{{ $t('org.members.role.admin') }}</option>
-              <option value="owner">{{ $t('org.members.role.owner') }}</option>
+              <option value="developer">{{ getRoleLabel('developer') }}</option>
+              <option value="admin">{{ getRoleLabel('admin') }}</option>
+              <option value="owner">{{ getRoleLabel('owner') }}</option>
             </select>
             <!-- Remove button -->
             <button

app/components/Package/DownloadAnalytics.vue

@@ -785,6 +785,17 @@ function buildExportFilename(extension: string): string {
   return `${sanitise(label ?? '')}-${g}_${range}.${extension}`
 }
 
+const granularityLabels = computed(() => ({
+  daily: $t('package.downloads.granularity_daily'),
+  weekly: $t('package.downloads.granularity_weekly'),
+  monthly: $t('package.downloads.granularity_monthly'),
+  yearly: $t('package.downloads.granularity_yearly'),
+}))
+
+function getGranularityLabel(granularity: ChartTimeGranularity) {
+  return granularityLabels.value[granularity]
+}
+
 // VueUiXy chart component configuration
 const chartConfig = computed(() => {
   return {
@@ -835,7 +846,7 @@ const chartConfig = computed(() => {
           fontSize: isMobile.value ? 24 : 16,
           axis: {
             yLabel: $t('package.downloads.y_axis_label', {
-              granularity: $t(`package.downloads.granularity_${selectedGranularity.value}`),
+              granularity: getGranularityLabel(selectedGranularity.value),
             }),
             xLabel: isMultiPackageMode.value ? '' : xAxisLabel.value, // for multiple series, names are displayed in the chart's legend
             yLabelOffsetX: 12,

app/components/Package/Replacement.vue

@@ -5,38 +5,6 @@ const props = defineProps<{
   replacement: ModuleReplacement
 }>()
 
-const message = computed<
-  [string, { replacement?: string; nodeVersion?: string; community?: string }]
->(() => {
-  switch (props.replacement.type) {
-    case 'native':
-      return [
-        'package.replacement.native',
-        {
-          replacement: props.replacement.replacement,
-          nodeVersion: props.replacement.nodeVersion,
-        },
-      ]
-    case 'simple':
-      return [
-        'package.replacement.simple',
-        {
-          replacement: props.replacement.replacement,
-          community: $t('package.replacement.community'),
-        },
-      ]
-    case 'documented':
-      return [
-        'package.replacement.documented',
-        {
-          community: $t('package.replacement.community'),
-        },
-      ]
-    case 'none':
-      return ['package.replacement.none', {}]
-  }
-})
-
 const mdnUrl = computed(() => {
   if (props.replacement.type !== 'native' || !props.replacement.mdnPath) return null
   return `https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/${props.replacement.mdnPath}`
@@ -57,13 +25,43 @@ const docPath = computed(() => {
       {{ $t('package.replacement.title') }}
     </h2>
     <p class="text-sm m-0">
-      <i18n-t :keypath="message[0]" scope="global">
+      <i18n-t
+        v-if="replacement.type === 'native'"
+        keypath="package.replacement.native"
+        scope="global"
+      >
         <template #replacement>
-          {{ message[1].replacement ?? '' }}
+          {{ replacement.replacement }}
         </template>
         <template #nodeVersion>
-          {{ message[1].nodeVersion ?? '' }}
+          {{ replacement.nodeVersion }}
+        </template>
+      </i18n-t>
+      <i18n-t
+        v-else-if="replacement.type === 'simple'"
+        keypath="package.replacement.simple"
+        scope="global"
+      >
+        <template #community>
+          <a
+            href="https://e18e.dev/docs/replacements/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-1 ms-1 underline underline-offset-4 decoration-amber-600/60 dark:decoration-amber-400/50 hover:decoration-fg transition-colors"
+          >
+            {{ $t('package.replacement.community') }}
+            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+          </a>
+        </template>
+        <template #replacement>
+          {{ replacement.replacement }}
         </template>
+      </i18n-t>
+      <i18n-t
+        v-else-if="replacement.type === 'documented'"
+        keypath="package.replacement.documented"
+        scope="global"
+      >
         <template #community>
           <a
             href="https://e18e.dev/docs/replacements/"
@@ -76,6 +74,9 @@ const docPath = computed(() => {
           </a>
         </template>
       </i18n-t>
+      <template v-else>
+        {{ $t('package.replacement.none') }}
+      </template>
       <a
         v-if="mdnUrl"
         :href="mdnUrl"

app/components/Package/VulnerabilityTree.vue

@@ -23,11 +23,22 @@ const hasVulnerabilities = computed(
 // Banner - amber for better light mode contrast
 const bannerColor = 'border-amber-600/40 bg-amber-500/10 text-amber-700 dark:text-amber-400'
 
+const severityLabels = computed(() => ({
+  critical: $t('package.vulnerabilities.severity.critical'),
+  high: $t('package.vulnerabilities.severity.high'),
+  moderate: $t('package.vulnerabilities.severity.moderate'),
+  low: $t('package.vulnerabilities.severity.low'),
+}))
+
+function getPackageSeverityLabel(severity: Exclude<OsvSeverityLevel, 'unknown'>) {
+  return severityLabels.value[severity]
+}
+
 const summaryText = computed(() => {
   if (!vulnTree.value) return ''
   const { totalCounts } = vulnTree.value
   return SEVERITY_LEVELS.filter(s => totalCounts[s] > 0)
-    .map(s => `${totalCounts[s]} ${$t(`package.vulnerabilities.severity.${s}`)}`)
+    .map(s => `${totalCounts[s]} ${getPackageSeverityLabel(s)}`)
     .join(', ')
 })
 
@@ -130,7 +141,7 @@ function getDepthStyle(depth: string | undefined) {
                   class="px-1.5 py-0.5 text-[10px] font-mono rounded border"
                   :class="SEVERITY_COLORS[s]"
                 >
-                  {{ pkg.counts[s] }} {{ $t(`package.vulnerabilities.severity.${s}`) }}
+                  {{ pkg.counts[s] }} {{ getPackageSeverityLabel(s) }}
                 </span>
               </div>
             </div>

app/composables/useFacetSelection.ts

@@ -23,13 +23,64 @@ export interface FacetInfoWithLabels extends Omit<FacetInfo, 'id'> {
 export function useFacetSelection(queryParam = 'facets') {
   const { t } = useI18n()
 
+  const facetLabels = computed(() => ({
+    downloads: {
+      label: t(`compare.facets.items.downloads.label`),
+      description: t(`compare.facets.items.downloads.description`),
+    },
+    packageSize: {
+      label: t(`compare.facets.items.packageSize.label`),
+      description: t(`compare.facets.items.packageSize.description`),
+    },
+    installSize: {
+      label: t(`compare.facets.items.installSize.label`),
+      description: t(`compare.facets.items.installSize.description`),
+    },
+    moduleFormat: {
+      label: t(`compare.facets.items.moduleFormat.label`),
+      description: t(`compare.facets.items.moduleFormat.description`),
+    },
+    types: {
+      label: t(`compare.facets.items.types.label`),
+      description: t(`compare.facets.items.types.description`),
+    },
+    engines: {
+      label: t(`compare.facets.items.engines.label`),
+      description: t(`compare.facets.items.engines.description`),
+    },
+    vulnerabilities: {
+      label: t(`compare.facets.items.vulnerabilities.label`),
+      description: t(`compare.facets.items.vulnerabilities.description`),
+    },
+    lastUpdated: {
+      label: t(`compare.facets.items.lastUpdated.label`),
+      description: t(`compare.facets.items.lastUpdated.description`),
+    },
+    license: {
+      label: t(`compare.facets.items.license.label`),
+      description: t(`compare.facets.items.license.description`),
+    },
+    dependencies: {
+      label: t(`compare.facets.items.dependencies.label`),
+      description: t(`compare.facets.items.dependencies.description`),
+    },
+    totalDependencies: {
+      label: t(`compare.facets.items.totalDependencies.label`),
+      description: t(`compare.facets.items.totalDependencies.description`),
+    },
+    deprecated: {
+      label: t(`compare.facets.items.deprecated.label`),
+      description: t(`compare.facets.items.deprecated.description`),
+    },
+  }))
+
   // Helper to build facet info with i18n labels
   function buildFacetInfo(facet: ComparisonFacet): FacetInfoWithLabels {
     return {
       id: facet,
       ...FACET_INFO[facet],
-      label: t(`compare.facets.items.${facet}.label`),
-      description: t(`compare.facets.items.${facet}.description`),
+      label: facetLabels.value[facet].label,
+      description: facetLabels.value[facet].description,
     }
   }
 
@@ -130,9 +181,16 @@ export function useFacetSelection(queryParam = 'facets') {
   // Check if only one facet is selected (minimum)
   const isNoneSelected = computed(() => selectedFacetIds.value.length === 1)
 
+  const facetCategories = {
+    performance: t(`compare.facets.categories.performance`),
+    health: t(`compare.facets.categories.health`),
+    compatibility: t(`compare.facets.categories.compatibility`),
+    security: t(`compare.facets.categories.security`),
+  }
+
   // Get translated category name
   function getCategoryLabel(category: FacetInfo['category']): string {
-    return t(`compare.facets.categories.${category}`)
+    return facetCategories[category]
   }
 
   // All facets with their info and i18n labels, grouped by category