fix: dynamic translation key with prefixes and add tests

Author: chrisberthe

src/utilities/locales.ts

@@ -112,6 +112,17 @@ function extractSchemaTranslationKeys(content: string): Set<string> {
   return keys
 }
 
+function extractDynamicTranslationPrefixes(keys: Set<string>): Set<string> {
+  const prefixKeys = new Set<string>()
+  for (const key of keys) {
+    if (key.endsWith('.')) {
+      prefixKeys.add(key)
+    }
+  }
+
+  return prefixKeys
+}
+
 function extractStorefrontTranslationKeys(content: string): Set<string> {
   const keys = new Set<string>()
 
@@ -133,22 +144,21 @@ function extractStorefrontTranslationKeys(content: string): Set<string> {
     }
   }
 
-  // Find dynamic translation keys (string literal followed by filters ending with t filter)
-  // This captures patterns like: 'prefix.' | append: x | replace: '-', '_' | t
-  const dynamicPatterns = [
-    // {% assign/capture var = 'prefix' | filters | t %}
-    /{%\s*(?:assign|capture)\s+\w+\s*=\s*["']([^"']+)["']\s*\|.*?\|\s*t[^%]*%}/g,
-    // {{ 'prefix' | filters | t }}
-    /{{\s*-?\s*["']([^"']+)["']\s*\|.*?\|\s*t[^}]*-?\s*}}/g,
-  ]
+  // Find dynamic translation keys (any string ending with a dot followed by t filter)
+  // This captures patterns like:
+  // - 'prefix.' | append: x | t
+  // - 'prefix.' | append: x | replace: '-', '_' | t
+  // - assign tag_text = 'tags.' | append: tag_id | t
+  // - {% assign tag_text = 'tags.' | append: tag_id | t %}
+  // - {{ 'prefix.' | append: x | t }}
+  const dynamicPattern = /["']([^"']*\.)["'](?:[^|]*\|)+(?:[^t|]*\|)?\s*t(?::[^%}]*)?[%}]?/g;
 
-  for (const pattern of dynamicPatterns) {
-    const matches = content.match(pattern) || []
-    for (const match of matches) {
-      const keyMatch = match.match(/["']([^"']+)["']/)
-      if (keyMatch && keyMatch[1]) {
-        keys.add(keyMatch[1])
-      }
+  const matches = content.match(dynamicPattern) || [];
+  for (const match of matches) {
+    const keyMatch = match.match(/["']([^"']*\.)["']/);
+    if (keyMatch && keyMatch[1]) {
+      const key = keyMatch[1];
+      keys.add(key);
     }
   }
 
@@ -275,10 +285,28 @@ function removeUnreferencedKeysFromFile(filePath: string, usedKeys: Set<string>,
   const flattenedContent = flattenObject(content)
   const cleanedContent: Record<string, unknown> = {}
 
+  // Extract prefix keys
+  const prefixKeys = extractDynamicTranslationPrefixes(usedKeys)
+
+  // Process exact key matches and base paths
   for (const [key, value] of Object.entries(flattenedContent)) {
     const basePath = key.split('.').slice(0, -1).join('.')
     if (usedKeys.has(key) || usedKeys.has(basePath)) {
       cleanedContent[key] = value
+      continue
+    }
+
+    // Check if this key matches any of the prefix patterns
+    let matchesPrefix = false
+    for (const prefix of prefixKeys) {
+      if (key.startsWith(prefix)) {
+        matchesPrefix = true
+        break
+      }
+    }
+
+    if (matchesPrefix) {
+      cleanedContent[key] = value
     }
   }
 
@@ -419,6 +447,9 @@ function filterContentByKeys(
 ): Record<string, unknown> {
   const filteredContent: Record<string, unknown> = {}
 
+  // Extract prefix keys
+  const prefixKeys = extractDynamicTranslationPrefixes(requiredKeys)
+
   // Process exact key matches
   for (const key of requiredKeys) {
     if (key in flatContent) {
@@ -427,23 +458,13 @@ function filterContentByKeys(
   }
 
   // Handle prefix matches for dynamic keys
-  for (const key of requiredKeys) {
-    if (key.endsWith('.')) {
-      addPrefixMatches(flatContent, filteredContent, key)
+  for (const prefix of prefixKeys) {
+    for (const sourceKey of Object.keys(flatContent)) {
+      if (sourceKey.startsWith(prefix) && !(sourceKey in filteredContent)) {
+        filteredContent[sourceKey] = flatContent[sourceKey]
+      }
     }
   }
 
   return filteredContent
 }
-
-function addPrefixMatches(
-  flatContent: Record<string, unknown>,
-  filteredContent: Record<string, unknown>,
-  prefix: string
-): void {
-  for (const sourceKey of Object.keys(flatContent)) {
-    if (sourceKey.startsWith(prefix) && !(sourceKey in filteredContent)) {
-      filteredContent[sourceKey] = flatContent[sourceKey]
-    }
-  }
-}

test/commands/theme/locale/clean.test.ts

@@ -142,4 +142,18 @@ describe('theme locale clean', () => {
       }
     }
   })
+
+  it('preserves dynamic translation keys with prefixes', async () => {
+    await runCommand(['theme', 'locale', 'sync', '--locales-dir', path.join(fixturesPath, 'locales'), '--clean'])
+
+    const storefrontContent = JSON.parse(fs.readFileSync(path.join(testThemeLocalesPath, 'en.default.json'), 'utf8'))
+
+    expect(storefrontContent).to.have.nested.property('tags.new')
+    expect(storefrontContent).to.have.nested.property('tags.sale')
+    expect(storefrontContent).to.have.nested.property('tags.featured')
+    expect(storefrontContent).to.have.nested.property('tags.custom')
+    expect(storefrontContent).to.have.nested.property('tags.special')
+
+    expect(storefrontContent).to.not.have.property('unused')
+  })
 })

test/commands/theme/locale/sync.test.ts

@@ -166,15 +166,43 @@ describe('theme locale sync', () => {
     const storefrontContent = JSON.parse(fs.readFileSync(storefrontFilePath, 'utf8'))
     const schemaContent = JSON.parse(fs.readFileSync(schemaFilePath, 'utf8'))
 
-    // Verify that unreferenced translations from source are not added
     expect(storefrontContent).to.not.have.nested.property('additional.new_key')
     expect(schemaContent).to.not.have.nested.property('additional.new_setting')
 
-    // Verify that referenced translations are still present
     expect(storefrontContent).to.have.nested.property('actions.add_to_cart')
     expect(storefrontContent).to.have.nested.property('t_with_fallback.direct_key')
     expect(storefrontContent).to.have.nested.property('t_with_fallback.variable_key')
     expect(schemaContent).to.have.nested.property('section.name')
     expect(schemaContent).to.have.nested.property('section.settings.logo_label')
   })
+
+  it('syncs dynamic translation keys with prefixes', async () => {
+    await runCommand(['theme', 'locale', 'sync', '--locales-dir', localesPath])
+
+    const storefrontContent = JSON.parse(fs.readFileSync(path.join(testThemeLocalesPath, 'en.default.json'), 'utf8'))
+
+    expect(storefrontContent).to.have.nested.property('tags.new')
+    expect(storefrontContent).to.have.nested.property('tags.sale')
+    expect(storefrontContent).to.have.nested.property('tags.featured')
+    expect(storefrontContent).to.have.nested.property('tags.custom')
+    expect(storefrontContent).to.have.nested.property('tags.special')
+
+    expect(storefrontContent.tags.new).to.equal(sourceEnDefault.tags.new)
+
+    const frStorefrontContent = JSON.parse(fs.readFileSync(path.join(testThemeLocalesPath, 'fr.json'), 'utf8'))
+    expect(frStorefrontContent).to.have.nested.property('tags.new')
+    expect(frStorefrontContent.tags.new).to.equal(sourceFr.tags.new)
+  })
+
+  it('cleans dynamic translation keys but keeps referenced prefixes', async () => {
+    await runCommand(['theme', 'locale', 'sync', '--locales-dir', localesPath, '--clean'])
+
+    const storefrontContent = JSON.parse(fs.readFileSync(path.join(testThemeLocalesPath, 'en.default.json'), 'utf8'))
+
+    expect(storefrontContent).to.have.nested.property('tags.new')
+
+    // These should also be kept because they share the same prefix
+    expect(storefrontContent).to.have.nested.property('tags.sale')
+    expect(storefrontContent).to.have.nested.property('tags.featured')
+  })
 })

test/fixtures/locales/en.default.json

@@ -8,5 +8,12 @@
   "t_with_fallback": {
     "direct_key": "Direct key (source)",
     "variable_key": "Variable key (source)"
+  },
+  "tags": {
+    "new": "New",
+    "sale": "Sale",
+    "featured": "Featured",
+    "custom": "Custom Tag",
+    "special": "Special Tag"
   }
 }

test/fixtures/locales/fr.json

@@ -8,5 +8,12 @@
   "t_with_fallback": {
     "direct_key": "Clé directe (source)",
     "variable_key": "Clé variable (source)"
+  },
+  "tags": {
+    "new": "Nouveau",
+    "sale": "En solde",
+    "featured": "En vedette",
+    "custom": "Personnalisée",
+    "special": "Spéciale"
   }
 }

test/fixtures/theme/snippets/dynamic-translation-usage.liquid

@@ -0,0 +1,18 @@
+{% # Basic dynamic translation with append %}
+{{ 'tags.' | append: 'new' | t }}
+
+{% # Dynamic translation in HTML element %}
+<span>{{ 'tags.' | append: 'sale' | t }}</span>
+
+{% # Dynamic translation with multiple filters %}
+{{ 'tags.' | append: 'featured' | replace: '-', '_' | t }}
+
+{% # Dynamic translation with liquid tag assign %}
+{% assign tag_id = 'custom' %}
+{% assign tag_text = 'tags.' | append: tag_id | t %}
+
+{% # Dynamic translation with liquid tag block %}
+{% liquid
+  assign special_tag = 'special'
+  assign special_tag_text = 'tags.' | append: special_tag | t
+%}