Breaking: inherit locale

README.md

@@ -91,6 +91,8 @@ The examples are offered that use the following two API styles:
   - Legacy API: `warnHtmlInMessage` property.
   - For development mode, warning is default.
   - For production mode, HTML message detect is not check due to performance.
+- Legacy API `sync` option:
+  - default: change to `false` from `true`
 - `VueI18n.version` -> `import { VERSION } from 'vue-i18n'`
 - `VueI18n.availabilities` -> `import { availabilities } from 'vue-i18n'`
 - See the details [here](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.md)
@@ -158,6 +160,7 @@ yarn add vue-i18n@next
   - properties
     - [x] locale
     - [x] fallbackLocale
+    - [x] inheritLocale
     - [x] availableLocales
     - [x] messages
     - [x] modifiers
@@ -190,6 +193,7 @@ yarn add vue-i18n@next
   - VueI18n
     - [x] locale
     - [x] fallbackLocale
+    - [x] sync
     - [x] availableLocales
     - [x] messages
     - [x] pluralizationRules

e2e/fallback/component.test.js

@@ -8,9 +8,7 @@
 
     test('initial rendering', async () => {
       await expect(page).toMatch('こんにちは、世界')
-      await expect(page).toMatch(
-        'Component1 locale messages: こんにちは、component1'
-      )
+      await expect(page).toMatch('Component1 locale messages: hello component1')
       await expect(page).toMatch(
         'Fallback global locale messages: おはよう、世界！'
       )

e2e/scope/inherit-locale.test.js

@@ -0,0 +1,63 @@
+;['composable', 'legacy'].forEach(pattern => {
+  describe(`${pattern}`, () => {
+    beforeAll(async () => {
+      await page.goto(
+        `http://localhost:8080/examples/${pattern}/scope/inherit-locale.html`
+      )
+    })
+
+    test('initial rendering', async () => {
+      await expect(page).toMatchElement('#app p', {
+        text: 'こんにちは、世界！'
+      })
+      await expect(page).toMatchElement('#app div.child p', {
+        text: 'こんにちは！'
+      })
+      await expect(page).toMatchElement('#app label[for=checkbox]', {
+        text: 'root から locale を継承する'
+      })
+    })
+
+    test('change locale', async () => {
+      // root
+      await expect(page).toSelect('#app select', 'en')
+      await expect(page).toMatchElement('#app p', { text: 'hello world!' })
+      await expect(page).toMatchElement('#app div.child p', { text: 'Hi !' })
+      await expect(page).toMatchElement('#app label[for=checkbox]', {
+        text: 'Inherit locale from root'
+      })
+
+      // Child
+      await expect(page).toSelect('#app div.child select', 'ja')
+      await expect(page).toMatchElement('#app p', { text: 'hello world!' })
+      await expect(page).toMatchElement('#app div.child p', {
+        text: 'こんにちは！'
+      })
+      await expect(page).toMatchElement('#app label[for=checkbox]', {
+        text: 'root から locale を継承する'
+      })
+
+      // checkbox off
+      await expect(page).toClick('#checkbox')
+      await expect(page).toSelect('#app select', 'ja')
+      await expect(page).toSelect('#app select', 'en')
+      await expect(page).toMatchElement('#app p', { text: 'hello world!' })
+      await expect(page).toMatchElement('#app div.child p', {
+        text: 'こんにちは！'
+      })
+      await expect(page).toMatchElement('#app label[for=checkbox]', {
+        text: 'root から locale を継承する'
+      })
+
+      // checkbox on
+      await expect(page).toClick('#checkbox')
+      await expect(page).toSelect('#app select', 'ja')
+      await expect(page).toSelect('#app select', 'en')
+      await expect(page).toMatchElement('#app p', { text: 'hello world!' })
+      await expect(page).toMatchElement('#app div.child p', { text: 'Hi !' })
+      await expect(page).toMatchElement('#app label[for=checkbox]', {
+        text: 'Inherit locale from root'
+      })
+    })
+  })
+})

e2e/scope/local.test.js

@@ -10,23 +10,21 @@
       await expect(page).toMatchElement('#app p', {
         text: 'こんにちは、世界！'
       })
-      await expect(page).toMatchElement('#app div.child p', {
-        text: 'こんにちは！'
-      })
+      await expect(page).toMatchElement('#app div.child p', { text: 'Hi !' })
     })
 
     test('change locale', async () => {
       // root
       await expect(page).toSelect('#app select', 'en')
       await expect(page).toMatchElement('#app p', { text: 'hello world!' })
-      await expect(page).toMatchElement('#app div.child p', {
-        text: 'こんにちは！'
-      })
+      await expect(page).toMatchElement('#app div.child p', { text: 'Hi !' })
 
       // Child
-      await expect(page).toSelect('#app div.child select', 'en')
+      await expect(page).toSelect('#app div.child select', 'ja')
       await expect(page).toMatchElement('#app p', { text: 'hello world!' })
-      await expect(page).toMatchElement('#app div.child p', { text: 'Hi !' })
+      await expect(page).toMatchElement('#app div.child p', {
+        text: 'こんにちは！'
+      })
     })
   })
 })

examples/composable/scope/inherit-locale.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Inherit locale example</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Root</h1>
+      <form>
+        <label>{{ t('message.language') }}</label>
+        <select v-model="locale">
+          <option value="en">en</option>
+          <option value="ja">ja</option>
+        </select>
+      </form>
+      <p>{{ t("message.hello") }}</p>
+      <Child />
+    </div>
+    <script>
+      const { createApp } = Vue
+      const { createI18n, useI18n } = VueI18n
+
+      const Child = {
+        template: `
+          <div class="child">
+            <h1>Child</h1>
+            <form>
+              <label>{{ t('message.language') }}</label>
+              <select v-model="locale">
+                <option value="en">en</option>
+                <option value="ja">ja</option>
+              </select>
+              <input type="checkbox" id="checkbox" v-model="inheritLocale">
+              <label for="checkbox">{{ t('message.inherit') }}</label>
+            </form>
+            <p>{{ t('message.hi') }}</p>
+          </div>
+        `,
+        setup() {
+          return useI18n({
+            locale: 'en',
+            inheritLocale: true, // default `true`!
+            messages: {
+              en: {
+                message: {
+                  language: 'Language',
+                  inherit: 'Inherit locale from root',
+                  hello: 'hello world!',
+                  hi: 'Hi !'
+                }
+              },
+              ja: {
+                message: {
+                  language: '言語',
+                  inherit: 'root から locale を継承する',
+                  hello: 'こんにちは、世界！',
+                  hi: 'こんにちは！'
+                }
+              }
+            }
+          })
+        }
+      }
+
+      const i18n = createI18n({
+        locale: 'ja',
+        messages: {
+          en: {
+            message: {
+              language: 'Language',
+              hello: 'hello world!',
+              hi: 'Hi !'
+            }
+          },
+          ja: {
+            message: {
+              language: '言語',
+              hello: 'こんにちは、世界！',
+              hi: 'こんにちは！'
+            }
+          }
+        }
+      })
+
+      const app = createApp({
+        components: { Child },
+        setup() {
+          return useI18n()
+        }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

examples/legacy/scope/inherit-locale.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Inherit locale example</title>
+    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
+    <script src="../../../dist/vue-i18n.global.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <h1>Root</h1>
+      <form>
+        <label>{{ $t('message.language') }}</label>
+        <select v-model="$i18n.locale">
+          <option value="en">en</option>
+          <option value="ja">ja</option>
+        </select>
+      </form>
+      <p>{{ $t("message.hello") }}</p>
+      <Child />
+    </div>
+    <script>
+      const { createApp } = Vue
+      const { createI18n } = VueI18n
+
+      const Child = {
+        template: `
+          <div class="child">
+            <h1>Child</h1>
+            <form>
+              <label>{{ $t('message.language') }}</label>
+              <select v-model="$i18n.locale">
+                <option value="en">en</option>
+                <option value="ja">ja</option>
+              </select>
+              <input type="checkbox" id="checkbox" v-model="$i18n.sync">
+              <label for="checkbox">{{ $t('message.inherit') }}</label>
+            </form>
+            <p>{{ $t('message.hi') }}</p>
+          </div>
+        `,
+        i18n: {
+          locale: 'en',
+          sync: true, // default 'true' !
+          messages: {
+            en: {
+              message: {
+                language: 'Language',
+                inherit: 'Inherit locale from root',
+                hello: 'hello world!',
+                hi: 'Hi !'
+              }
+            },
+            ja: {
+              message: {
+                language: '言語',
+                inherit: 'root から locale を継承する',
+                hello: 'こんにちは、世界！',
+                hi: 'こんにちは！'
+              }
+            }
+          }
+        }
+      }
+
+      const i18n = createI18n({
+        legacy: true,
+        locale: 'ja',
+        messages: {
+          en: {
+            message: {
+              language: 'Language',
+              hello: 'hello world!',
+              hi: 'Hi !'
+            }
+          },
+          ja: {
+            message: {
+              language: '言語',
+              hello: 'こんにちは、世界！',
+              hi: 'こんにちは！'
+            }
+          }
+        }
+      })
+
+      const app = createApp({
+        components: { Child }
+      })
+      app.use(i18n)
+      app.mount('#app')
+    </script>
+  </body>
+</html>

src/components/DatetimeFormat.ts

@@ -1,10 +1,5 @@
-import {
-  getCurrentInstance,
-  defineComponent,
-  SetupContext,
-  PropType
-} from 'vue'
-import { useI18n, getComposer } from '../i18n'
+import { defineComponent, SetupContext, PropType } from 'vue'
+import { useI18n } from '../i18n'
 import { DateTimeOptions } from '../core'
 import { renderFormatter, FormattableProps } from './formatRenderer'
 
@@ -51,14 +46,7 @@ export const DatetimeFormat = defineComponent({
   },
   /* eslint-enable */
   setup(props, context: SetupContext) {
-    const instance = getCurrentInstance()
-    // TODO: should be raise unexpected error, if `instance` is null
-    const i18n =
-      instance !== null
-        ? instance.parent !== null
-          ? getComposer(instance.parent)
-          : useI18n()
-        : useI18n()
+    const i18n = useI18n({ useScope: 'parent' })
 
     return renderFormatter<
       FormattableProps<number | Date, Intl.DateTimeFormatOptions>,

src/components/NumberFormat.ts

@@ -1,5 +1,5 @@
-import { getCurrentInstance, defineComponent, SetupContext } from 'vue'
-import { useI18n, getComposer } from '../i18n'
+import { defineComponent, SetupContext } from 'vue'
+import { useI18n } from '../i18n'
 import { NumberOptions } from '../core'
 import { renderFormatter, FormattableProps } from './formatRenderer'
 
@@ -41,14 +41,7 @@ export const NumberFormat = defineComponent({
   },
   /* eslint-enable */
   setup(props, context: SetupContext) {
-    const instance = getCurrentInstance()
-    // TODO: should be raise unexpected error, if `instance` is null
-    const i18n =
-      instance !== null
-        ? instance.parent !== null
-          ? getComposer(instance.parent)
-          : useI18n()
-        : useI18n()
+    const i18n = useI18n({ useScope: 'parent' })
 
     return renderFormatter<
       FormattableProps<number, Intl.NumberFormatOptions>,