fix(i18n): translating camelCased bindables (#1838)

aurelia · Nov 12, 2023 · ff761fb · ff761fb
1 parent 4bf0ceb
commit ff761fb
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/packages/__tests__/src/i18n/t/translation-integration.spec.ts b/packages/__tests__/src/i18n/t/translation-integration.spec.ts
@@ -10,6 +10,10 @@ describe('i18n/t/translation-integration.spec.ts', function () {
   class CustomMessage {
     @bindable public message: string;
   }
+  @customElement({ name: 'camel-ce', template: `<div>\${someMessage}</div>` })
+  class CeWithCamelCaseBindable {
+    @bindable public someMessage: string;
+  }
   @customElement({ name: 'foo-bar', template: `<au-slot><span t="status" t-params.bind="{context: status, date: date}"></span></au-slot>` })
   class FooBar {
     @bindable public status: string;
@@ -120,7 +124,7 @@ describe('i18n/t/translation-integration.spec.ts', function () {
     let error: Error | null = null;
     try {
       await au
-        .register(CustomMessage, FooBar)
+        .register(CustomMessage, CeWithCamelCaseBindable, FooBar)
         .app({ host, component })
         .start();
 
@@ -838,6 +842,47 @@ describe('i18n/t/translation-integration.spec.ts', function () {
         assertTextContent(host, 'custom-message div', de.simple.text);
       }, { component: App });
     }
+
+    {
+      @customElement({
+        name: 'app', template: `<camel-ce some-message="ignored" t="[some-message]simple.text"></camel-ce>`
+      })
+      class App { }
+
+      $it('can bind to custom elements attributes with camelCased bindable', function ({ host, en }: I18nIntegrationTestContext<App>) {
+        assertTextContent(host, 'camel-ce div', en.simple.text);
+      }, { component: App });
+    }
+    {
+      @customElement({
+        name: 'app', template: `<camel-ce component.ref="cm" t="[some-message]itemWithCount" t-params.bind="{count}">`
+      })
+      class App { public count: number = 0; public cm: CeWithCamelCaseBindable; }
+      $it('should support params', function ({ app, host, en, ctx }: I18nIntegrationTestContext<App>) {
+        assertTextContent(host, 'camel-ce div', en.itemWithCount_plural.replace('{{count}}', '0'));
+        app.count = 10;
+        assert.strictEqual(
+          app.cm.someMessage,
+          en.itemWithCount_plural.replace('{{count}}', '10'),
+          '<camel-ce/> message prop should have been updated immediately'
+        );
+        assertTextContent(host, 'camel-ce div', en.itemWithCount_plural.replace('{{count}}', '0'));
+        ctx.platform.domWriteQueue.flush();
+        assertTextContent(host, 'camel-ce div', en.itemWithCount_plural.replace('{{count}}', '10'));
+      }, { component: App });
+    }
+    {
+      @customElement({
+        name: 'app', template: `<camel-ce some-message="ignored" t="[some-message]simple.text"></camel-ce>`
+      })
+      class App { }
+      $it('should support locale changes with camelCased bindable', async function ({ host, de, i18n, platform }: I18nIntegrationTestContext<App>) {
+        await i18n.setLocale('de');
+        platform.domWriteQueue.flush();
+
+        assertTextContent(host, 'camel-ce div', de.simple.text);
+      }, { component: App });
+    }
   });
 
   describe('`t` value-converter works for', function () {

diff --git a/packages/i18n/src/t/translation-binding.ts b/packages/i18n/src/t/translation-binding.ts
@@ -1,4 +1,4 @@
-import { toArray } from '@aurelia/kernel';
+import { camelCase, toArray } from '@aurelia/kernel';
 import {
   AccessorType,
   CustomExpression,
@@ -238,7 +238,7 @@ export class TranslationBinding implements IConnectableBinding {
         } else {
           const controller = CustomElement.for(this.target, forOpts);
           const accessor = controller?.viewModel
-            ? this.oL.getAccessor(controller.viewModel, attribute)
+            ? this.oL.getAccessor(controller.viewModel, camelCase(attribute))
             : this.oL.getAccessor(this.target, attribute);
           const shouldQueueUpdate = this._controller.state !== State.activating && (accessor.type & AccessorType.Layout) > 0;
           if (shouldQueueUpdate) {