fix: interpolation with self-closing tag (#83)

tolgee · Jun 5, 2024 · ed8c541 · ed8c541
1 parent 0ec1b5b
commit ed8c541
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/src/extractor/machines/shared/properties.ts b/src/extractor/machines/shared/properties.ts
@@ -314,6 +314,10 @@ export default createMachine<PropertiesContext>(
           actions: 'markPropertyAsDynamic',
           cond: (ctx) => ctx.jsxDepth === 0,
         },
+        {
+          actions: 'decrementDoubleJsxDepth',
+          cond: (_ctx, e) => e.token === '/>',
+        },
         {
           actions: 'decrementJsxDepth',
         },
@@ -412,6 +416,9 @@ export default createMachine<PropertiesContext>(
       incrementJsxDepth: assign({
         jsxDepth: (ctx, _evt) => ctx.jsxDepth + 2,
       }),
+      decrementDoubleJsxDepth: assign({
+        jsxDepth: (ctx, _evt) => ctx.jsxDepth - 2,
+      }),
       decrementJsxDepth: assign({
         jsxDepth: (ctx, _evt) => ctx.jsxDepth - 1,
       }),

diff --git a/test/e2e/push.test.ts b/test/e2e/push.test.ts
@@ -2,6 +2,7 @@ import { fileURLToPath } from 'url';
 import { tolgeeDataToDict } from './utils/data.js';
 import { run, runWithStdin } from './utils/run.js';
 import {
+  DEFAULT_SCOPES,
   createPak,
   createProjectWithClient,
   deleteProject,
@@ -187,12 +188,16 @@ describe('project 3', () => {
   });
 
   it('removes other keys', async () => {
+    const pakWithDelete = await createPak(client, [
+      ...DEFAULT_SCOPES,
+      'keys.delete',
+    ]);
     const out = await run([
       '--config',
       PROJECT_3_DEPRECATED_CONFIG,
       'push',
       '--api-key',
-      pak,
+      pakWithDelete,
       '--remove-other-keys',
     ]);
 

diff --git a/test/unit/extractor/react.test.ts b/test/unit/extractor/react.test.ts
@@ -905,6 +905,22 @@ describe.each(['jsx', 'tsx'])('<T> (.%s)', (ext) => {
     expect(extracted.keys).toEqual(expected);
   });
 
+  it('does not get confused by self-closing tags interpolation', async () => {
+    const expected = [{ keyName: 'key1', line: 3 }];
+
+    const code = `
+      import '@tolgee/react'
+      <T
+        keyName='key1'
+        params={{ strong: <strong /> }}
+      />
+    `;
+
+    const extracted = await extractKeys(code, FILE_NAME);
+    expect(extracted.warnings).toEqual([]);
+    expect(extracted.keys).toEqual(expected);
+  });
+
   describe('dynamic data', () => {
     it('emits warning on dynamic keys and skips', async () => {
       const expected = [