fix(component): fix i18n component not rerendering on args change (#459)

fluent-vue · Apr 1, 2021 · 57a2c12 · 57a2c12
1 parent bf44bf3
commit 57a2c12
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 11 deletions.
diff --git a/packages/fluent-vue/__tests__/vue/component.spec.ts b/packages/fluent-vue/__tests__/vue/component.spec.ts
@@ -179,4 +179,38 @@ describe('component', () => {
     // Assert
     expect(mounted.html()).toEqual(`<span>Hello ⁨John⁩ ⁨<b>Inner text</b>⁩ test</span>`)
   })
+
+  it('updates on parameter change', async () => {
+    // Arrange
+    bundle.addResource(
+      new FluentResource(ftl`
+      key = Hello {$name} {$child} test
+      `)
+    )
+
+    const component = {
+      data() {
+        return {
+          name: 'John',
+        }
+      },
+      template: `
+        <i18n path="key" :args="{ name }">
+          <template #child>
+            <b>Inner text</b>
+          </template>
+        </i18n>`,
+    }
+
+    const mounted = mount(component, options)
+    expect(mounted.html()).toEqual(`<span>Hello ⁨John⁩ ⁨<b>Inner text</b>⁩ test</span>`)
+
+    // Act
+    const vm = mounted.vm as any
+    vm.name = 'Alice'
+    await Vue.nextTick()
+
+    // Assert
+    expect(mounted.html()).toEqual(`<span>Hello ⁨Alice⁩ ⁨<b>Inner text</b>⁩ test</span>`)
+  })
 })
diff --git a/packages/fluent-vue/src/vue/component.ts b/packages/fluent-vue/src/vue/component.ts
@@ -23,19 +23,20 @@ export default defineComponent({
   setup(props, context) {
     const childSlots = context.slots
 
-    const params = Object.assign(
-      {},
-      props.args,
-      ...Object.keys(childSlots).map((key) => ({
-        [key]: `\uFFFF\uFFFE${key}\uFFFF`,
-      }))
-    )
+    const rootContext = inject(RootContextSymbol)!
+    const instance = getCurrentInstance()
+    const parent = getParentWithFluent(instance)
+    const fluent = getContext(rootContext, parent)
 
     const translation = computed(() => {
-      const rootContext = inject(RootContextSymbol)!
-      const instance = getCurrentInstance()
-      const parent = getParentWithFluent(instance)
-      const fluent = getContext(rootContext, parent)
+      const params = Object.assign(
+        {},
+        props.args,
+        ...Object.keys(childSlots).map((key) => ({
+          [key]: `\uFFFF\uFFFE${key}\uFFFF`,
+        }))
+      )
+
       return fluent.format(props.path, params)
     })