fix: vue support hyphen props (#136)

tolgee · Dec 4, 2024 · fcd62f8 · fcd62f8
1 parent 4fa695b
commit fcd62f8
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 10 deletions.
diff --git a/src/extractor/parserVue/ParserVue.ts b/src/extractor/parserVue/ParserVue.ts
@@ -18,6 +18,7 @@ import { useTranslate } from './rules/useTranslate.js';
 import { tComponent } from './rules/tComponent.js';
 import { scriptTag } from './rules/scriptTag.js';
 import { exportDefaultObject } from './rules/exportDefaultObject.js';
+import { hyphenPropsMerger } from './tokenMergers/hyphenPropsMerger.js';
 
 const vueMappers = [generalMapper, vueMapper];
 
@@ -27,6 +28,7 @@ export type VueMappedTokenType = NonNullable<
 
 export const vueMergers = pipeMachines([
   ...DEFAULT_MERGERERS,
+  hyphenPropsMerger,
   globalTFunctionMerger,
   tFunctionMerger,
   useTranslateMerger,

diff --git a/src/extractor/parserVue/tokenMergers/hyphenPropsMerger.ts b/src/extractor/parserVue/tokenMergers/hyphenPropsMerger.ts
@@ -0,0 +1,30 @@
+import { MachineType } from '../../parser/mergerMachine.js';
+import { VueMappedTokenType } from '../ParserVue.js';
+
+export const enum S {
+  Idle,
+  ExpectT,
+}
+
+// <T key-name="my_key" /> -> <T keyName="key" />
+//    ^^^^^^^^                   ^^^^^^^
+export const hyphenPropsMerger = {
+  initial: S.Idle,
+  step: (state, t, end) => {
+    const type = t.customType;
+
+    switch (state) {
+      case S.Idle:
+        if (type === 'tag.attribute.name') {
+          return end.MERGE_ALL;
+        }
+        break;
+    }
+  },
+  resultToken: (tokens) =>
+    tokens.map((t) => ({
+      ...t,
+      token: t.token.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
+    }))[0],
+  customType: 'tag.attribute.name',
+} as const satisfies MachineType<VueMappedTokenType, S>;
diff --git a/test/unit/extractor/vue/tComponent.test.ts b/test/unit/extractor/vue/tComponent.test.ts
@@ -22,7 +22,7 @@ describe('<T>', () => {
     const expected = [{ keyName: 'key1', line: 3 }];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T keyName='key1'/>
       </template>
     `;
@@ -36,7 +36,7 @@ describe('<T>', () => {
     const expected = [{ keyName: 'key1', line: 3 }];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T :keyName="'key1'"/>
       </template>
     `;
@@ -52,7 +52,7 @@ describe('<T>', () => {
     ];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T keyName='key1' defaultValue='default value1'/>
       </template>
     `;
@@ -62,11 +62,27 @@ describe('<T>', () => {
     expect(extracted.keys).toEqual(expected);
   });
 
+  it('extracts key and default value from props with hyphenated props', async () => {
+    const expected = [
+      { keyName: 'key1', defaultValue: 'default value1', line: 3 },
+    ];
+
+    const code = `
+      <template>
+        <T key-name='key1' default-value='default value1'/>
+      </template>
+    `;
+
+    const extracted = await extractVueKeys(code, 'App.vue');
+    expect(extracted.warnings).toEqual([]);
+    expect(extracted.keys).toEqual(expected);
+  });
+
   it('extracts the namespace from props', async () => {
     const expected = [{ keyName: 'key1', namespace: 'ns1', line: 3 }];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T keyName='key1' ns='ns1'/>
       </template>
     `;
@@ -80,7 +96,7 @@ describe('<T>', () => {
     const expected = [{ keyName: 'key1', line: 4 }];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <div keyName='not key1'>
           <T keyName='key1'/>
         </div>
@@ -96,7 +112,7 @@ describe('<T>', () => {
     const expected = [{ keyName: 'key1', defaultValue: 'value', line: 3 }];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T defaultValue='value' :properties="{ a: 'b' }" keyName='key1' />
       </template>
     `;
@@ -117,7 +133,7 @@ describe('<T>', () => {
     ];
 
     const code = `
-      <template> <!-- @tolgee/vue -->
+      <template>
         <T
           keyName='key1'
           ns='ns1'
@@ -142,7 +158,7 @@ describe('<T>', () => {
       ];
 
       const code = `
-        <template> <!-- @tolgee/vue -->
+        <template>
           <T :keyName="\`dynamic-key-\${i}\`" />
           <T :keyName="'dynamic-key-' + i" />
           <T :keyName="key" />
@@ -166,7 +182,7 @@ describe('<T>', () => {
       ];
 
       const code = `
-        <template> <!-- @tolgee/vue -->
+        <template>
           <T keyName='key1' :ns="\`dynamic-ns-\${i}\`" />
           <T keyName='key2' :ns="'dynamic-ns-' + i" />
           <T keyName='key2' :ns={ns} />
@@ -196,7 +212,7 @@ describe('<T>', () => {
       ];
 
       const code = `
-        <template> <!-- @tolgee/vue -->
+        <template>
           <T keyName='key1' :defaultValue="someValue"/>
           <T keyName='key2' :defaultValue="'dynamic-' + i"/>
           <T keyName='key3' :defaultValue="\`dynamic-\${i}\`"/>