fix: message update in slot

examples/composable/scope/global.html

@@ -23,6 +23,12 @@ <h1>Root</h1>
       const { createApp } = Vue
       const { createI18n, useI18n } = VueI18n
 
+      const SlotChild = {
+        template: `
+          <p><slot/></p>
+        `
+      }
+
       const SubChild = {
         template: `
           <div class="sub-child">
@@ -44,7 +50,8 @@ <h1>Sub Child</h1>
 
       const Child = {
         components: {
-          SubChild
+          SubChild,
+          SlotChild
         },
         template: `
           <div class="child">
@@ -58,6 +65,14 @@ <h1>Child</h1>
             </form>
             <p>{{ t('message.hi') }}</p>
             <SubChild />
+            t inside of slot
+            <SlotChild>
+              {{ t('message.hi') }}
+            </SlotChild>
+            i18n-t inside of slot
+            <SlotChild>
+              <i18n-t keypath='message.hi'/>
+            </SlotChild>
           </div>
         `,
         setup() {

examples/legacy/fallback/basic.html

@@ -17,7 +17,7 @@
       const i18n = createI18n({
         legacy: true,
         locale: 'ja',
-        fallbackLocale: 'en',
+        fallbackLocale: ['en'],
         messages: {
           en: {
             message: {

examples/legacy/fallback/suppress.html

@@ -17,7 +17,7 @@
       const i18n = createI18n({
         legacy: true,
         locale: 'ja',
-        fallbackLocale: 'en',
+        fallbackLocale: ['en'],
         silentFallbackWarn: true, // warning off
         messages: {
           en: {

examples/legacy/missing/handler.html

@@ -17,7 +17,7 @@
       const i18n = createI18n({
         legacy: true,
         locale: 'ja',
-        fallbackLocale: 'en',
+        fallbackLocale: ['en'],
         missing: (locale, key, instance) => {
           // something to do ...
           console.warn(`detect '${key}' key missing in '${locale}'`)

examples/legacy/missing/suppress.html

@@ -17,7 +17,7 @@
       const i18n = createI18n({
         legacy: true,
         locale: 'ja',
-        fallbackLocale: 'en',
+        fallbackLocale: ['en'],
         silentTranslationWarn: true, // warning off
         messages: {
           en: {

examples/legacy/scope/global.html

@@ -23,6 +23,12 @@ <h1>Root</h1>
       const { createApp } = Vue
       const { createI18n } = VueI18n
 
+      const SlotChild = {
+        template: `
+          <p><slot/></p>
+        `
+      }
+
       const SubChild = {
         template: `
           <div class="sub-child">
@@ -41,7 +47,8 @@ <h1>Sub Child</h1>
 
       const Child = {
         components: {
-          SubChild
+          SubChild,
+          SlotChild
         },
         template: `
           <div class="child">
@@ -55,6 +62,14 @@ <h1>Child</h1>
             </form>
             <p>{{ $t('message.hi') }}</p>
             <SubChild />
+            $t inside of slot
+            <SlotChild>
+              {{ $t('message.hi') }}
+            </SlotChild>
+            i18n-t inside of slot
+            <SlotChild>
+              <i18n-t keypath='message.hi'/>
+            </SlotChild>
           </div>
         `
       }

package.json

@@ -64,7 +64,7 @@
     "ts-jest": "^26.0.0",
     "typescript": "^3.8.3",
     "typescript-eslint-language-service": "^3.0.0",
-    "vue": "^3.0.0-beta.14"
+    "vue": "^3.0.0-beta.15"
   },
   "engines": {
     "node": ">= 10"
@@ -87,7 +87,7 @@
   "main": "dist/vue-i18n.cjs.js",
   "module": "dist/vue-i18n.esm-bundler.js",
   "peerDependencies": {
-    "vue": "^3.0.0-beta.14"
+    "vue": "^3.0.0-beta.15"
   },
   "repository": {
     "type": "git",

src/composer.ts

@@ -467,16 +467,9 @@ export function createComposer(
     fallbackFail: (key: string) => T,
     successCondition: (val: unknown) => boolean
   ): ComputedRef<T> {
-    // NOTE:
-    // if this composer is global (__root is `undefined`), add dependency trakcing!
-    // by containing this, we can reactively notify components that reference the global composer.
-    if (!_isGlobal) {
-      _locale.value
-    }
-
     return computed<T>(
       (): T => {
-        const ret = fn(_context)
+        const ret = fn(getRuntimeContext())
         if (isNumber(ret) && ret === NOT_REOSLVED) {
           const key = argumentParser()
           if (__DEV__ && _fallbackRoot && __root) {

test/__snapshots__/i18n.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`slot reactivity compsable: en 1`] = `"<h1>Root</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p><div class=\\"child\\"><h1>Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p></div> t inside of slot <p>hello!</p> i18n-t inside of slot <p>hello!</p></div>"`;
+
+exports[`slot reactivity compsable: ja 1`] = `"<h1>Root</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p><div class=\\"child\\"><h1>Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p></div> t inside of slot <p>こんにちは！</p> i18n-t inside of slot <p>こんにちは！</p></div>"`;
+
+exports[`slot reactivity legacy: en 1`] = `"<h1>Root</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p><div class=\\"child\\"><h1>Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>hello!</p></div> $t inside of slot <p>hello!</p> i18n-t inside of slot <p>hello!</p></div>"`;
+
+exports[`slot reactivity legacy: ja 1`] = `"<h1>Root</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p><div class=\\"child\\"><h1>Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option value=\\"en\\">en</option><option value=\\"ja\\">ja</option></select></form><p>こんにちは！</p></div> $t inside of slot <p>こんにちは！</p> i18n-t inside of slot <p>こんにちは！</p></div>"`;

test/i18n.test.ts

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mount } from './helper'
 import { createI18n, useI18n } from '../src/i18n'
 import { errorMessages, I18nErrorCodes } from '../src/errors'
@@ -233,3 +233,193 @@ describe('useI18n', () => {
     )
   })
 })
+
+describe('slot reactivity', () => {
+  let org, spy
+  beforeEach(() => {
+    org = console.warn
+    spy = jest.fn()
+    console.warn = spy
+  })
+  afterEach(() => {
+    console.warn = org
+  })
+
+  test('legacy', async () => {
+    const i18n = createI18n({
+      legacy: true,
+      locale: 'ja',
+      fallbackLocale: ['en'],
+      messages: {
+        en: {
+          hello: 'hello!'
+        },
+        ja: {
+          hello: 'こんにちは！'
+        }
+      }
+    })
+
+    const SlotChild = {
+      template: `<p><slot/></p>`
+    }
+
+    const SubChild = {
+      template: `
+        <div class="sub-child">
+          <h1>Sub Child</h1>
+          <form>
+            <select v-model="$i18n.locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ $t('hello') }}</p>
+        </div>
+      `
+    }
+
+    const Child = {
+      components: {
+        SubChild,
+        SlotChild
+      },
+      template: `
+        <div class="child">
+          <h1>Child</h1>
+          <form>
+            <select v-model="$i18n.locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ $t('hello') }}</p>
+          <SubChild />
+          $t inside of slot
+          <SlotChild>
+            {{ $t('hello') }}
+          </SlotChild>
+          i18n-t inside of slot
+          <SlotChild>
+            <i18n-t keypath='hello'/>
+          </SlotChild>
+        </div>
+      `
+    }
+
+    const App = defineComponent({
+      components: {
+        Child
+      },
+      template: `
+        <h1>Root</h1>
+          <form>
+            <select v-model="$i18n.locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ $t('hello') }}</p>
+        <Child />
+      `
+    })
+    const { html } = await mount(App, i18n)
+    expect(html()).toMatchSnapshot('ja')
+    i18n.global.locale.value = 'en'
+    await nextTick()
+    expect(html()).toMatchSnapshot('en')
+  })
+
+  test('compsable', async () => {
+    const i18n = createI18n({
+      locale: 'ja',
+      fallbackLocale: ['en'],
+      messages: {
+        en: {
+          hello: 'hello!'
+        },
+        ja: {
+          hello: 'こんにちは！'
+        }
+      }
+    })
+
+    const SlotChild = {
+      template: `<p><slot/></p>`
+    }
+
+    const SubChild = {
+      template: `
+        <div class="sub-child">
+          <h1>Sub Child</h1>
+          <form>
+            <select v-model="locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ t('hello') }}</p>
+        </div>
+      `,
+      setup() {
+        return useI18n()
+      }
+    }
+
+    const Child = {
+      components: {
+        SubChild,
+        SlotChild
+      },
+      template: `
+        <div class="child">
+          <h1>Child</h1>
+          <form>
+            <select v-model="locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ t('hello') }}</p>
+          <SubChild />
+          t inside of slot
+          <SlotChild>
+            {{ t('hello') }}
+          </SlotChild>
+          i18n-t inside of slot
+          <SlotChild>
+            <i18n-t keypath='hello'/>
+          </SlotChild>
+        </div>
+      `,
+      setup() {
+        return useI18n()
+      }
+    }
+
+    const App = defineComponent({
+      components: {
+        Child
+      },
+      template: `
+        <h1>Root</h1>
+          <form>
+            <select v-model="locale">
+              <option value="en">en</option>
+              <option value="ja">ja</option>
+            </select>
+          </form>
+          <p>{{ t('hello') }}</p>
+        <Child />
+      `,
+      setup() {
+        return useI18n()
+      }
+    })
+    const { html } = await mount(App, i18n)
+    expect(html()).toMatchSnapshot('ja')
+    i18n.global.locale.value = 'en'
+    await nextTick()
+    expect(html()).toMatchSnapshot('en')
+  })
+})