feat: support vue3 rc8

.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/member-delimiter-style': 'off',
     '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/no-var-requires': 'off'
+    '@typescript-eslint/no-var-requires': 'off',
+    'vue/one-component-per-file': 'off'
   }
 }

examples/composable/components/datetime-format.html

@@ -27,7 +27,7 @@ <h2>slot usages:</h2>
         :format="{ key: 'long', era: 'narrow' }"
       >
         <template #era="props"
-          ><span style="color: green;">{{ props.era }}</span></template
+          ><span style="color: green">{{ props.era }}</span></template
         >
       </i18n-d>
     </div>

examples/composable/components/number-format.html

@@ -18,16 +18,16 @@ <h2>basic usages:</h2>
       <h2>slot usages:</h2>
       <i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
         <template #currency="props"
-          ><span style="color: green;">{{ props.currency }}</span></template
+          ><span style="color: green">{{ props.currency }}</span></template
         >
         <template #integer="props"
-          ><span style="font-weight: bold;">{{ props.integer }}</span></template
+          ><span style="font-weight: bold">{{ props.integer }}</span></template
         >
         <template #group="props"
-          ><span style="font-weight: bold;">{{ props.group }}</span></template
+          ><span style="font-weight: bold">{{ props.group }}</span></template
         >
         <template #fraction="props"
-          ><span style="font-size: small;">{{ props.fraction }}</span></template
+          ><span style="font-size: small">{{ props.fraction }}</span></template
         >
       </i18n-n>
     </div>

examples/legacy/components/datetime-format.html

@@ -27,7 +27,7 @@ <h2>slot usages:</h2>
         :format="{ key: 'long', era: 'narrow' }"
       >
         <template #era="props"
-          ><span style="color: green;">{{ props.era }}</span></template
+          ><span style="color: green">{{ props.era }}</span></template
         >
       </i18n-d>
     </div>

examples/legacy/components/number-format.html

@@ -18,16 +18,16 @@ <h2>basic usages:</h2>
       <h2>slot usages:</h2>
       <i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
         <template #currency="props"
-          ><span style="color: green;">{{ props.currency }}</span></template
+          ><span style="color: green">{{ props.currency }}</span></template
         >
         <template #integer="props"
-          ><span style="font-weight: bold;">{{ props.integer }}</span></template
+          ><span style="font-weight: bold">{{ props.integer }}</span></template
         >
         <template #group="props"
-          ><span style="font-weight: bold;">{{ props.group }}</span></template
+          ><span style="font-weight: bold">{{ props.group }}</span></template
         >
         <template #fraction="props"
-          ><span style="font-size: small;">{{ props.fraction }}</span></template
+          ><span style="font-size: small">{{ props.fraction }}</span></template
         >
       </i18n-n>
     </div>

package.json

@@ -25,48 +25,47 @@
     }
   },
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.7.17",
-    "@microsoft/api-extractor": "^7.7.12",
+    "@microsoft/api-documenter": "^7.8.0",
+    "@microsoft/api-extractor": "^7.9.0",
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.0",
     "@types/jest": "^26.0.0",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
-    "@typescript-eslint/typescript-estree": "^3.7.0",
-    "@vue/server-renderer": "^3.0.0-rc.5",
+    "@typescript-eslint/eslint-plugin": "^3.10.0",
+    "@typescript-eslint/parser": "^3.10.0",
+    "@vue/server-renderer": "^3.0.0-rc.8",
     "brotli": "^1.3.2",
-    "chalk": "^4.0.0",
+    "chalk": "^4.1.0",
     "convert-hrtime": "^3.0.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.0.0",
+    "eslint": "^7.7.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-vue": "^7.0.0-alpha.1",
+    "eslint-plugin-vue": "^7.0.0-beta.2",
     "eslint-plugin-vue-libs": "^4.0.0",
     "execa": "^4.0.0",
     "fs-extra": "^9.0.0",
     "full-icu": "^1.3.1",
     "http-server": "^0.12.1",
-    "jest": "^26.0.0",
+    "jest": "^26.4.0",
     "jest-puppeteer": "^4.4.0",
     "jest-watch-typeahead": "^0.6.0",
     "lerna-changelog": "^1.0.1",
     "minimist": "^1.2.5",
     "npm-run-all": "^4.1.5",
     "opener": "^1.5.1",
-    "prettier": "^2.0.0",
+    "prettier": "^2.1.0",
     "puppeteer": "^2.1.1",
-    "rollup": "^2.3.0",
+    "rollup": "^2.26.0",
     "rollup-plugin-terser": "^7.0.0",
     "rollup-plugin-typescript2": "^0.27.0",
     "set-tz": "^0.2.0",
     "shipjs": "^0.21.0",
-    "ts-jest": "^26.0.0",
+    "ts-jest": "^26.3.0",
     "tsd": "^0.13.1",
-    "typescript": "^3.9.7",
-    "typescript-eslint-language-service": "^3.0.0",
-    "vue": "^3.0.0-rc.5"
+    "typescript": "^4.0.0",
+    "typescript-eslint-language-service": "^3.1.0",
+    "vue": "^3.0.0-rc.8"
   },
   "engines": {
     "node": ">= 10"
@@ -89,7 +88,7 @@
   "main": "dist/vue-i18n.cjs.js",
   "module": "dist/vue-i18n.esm-bundler.js",
   "peerDependencies": {
-    "vue": "^3.0.0-rc.5"
+    "vue": "^3.0.0-rc.8"
   },
   "repository": {
     "type": "git",

src/components/DatetimeFormat.ts

@@ -1,4 +1,4 @@
-import { defineComponent, SetupContext, PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { useI18n } from '../i18n'
 import { DateTimeOptions } from '../core'
 import { Composer, ComposerInternal } from '../composer'
@@ -47,7 +47,7 @@ export const DatetimeFormat = defineComponent({
     }
   },
   /* eslint-enable */
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal
 
     return renderFormatter<

src/components/NumberFormat.ts

@@ -1,4 +1,4 @@
-import { defineComponent, SetupContext, PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 import { useI18n } from '../i18n'
 import { NumberOptions } from '../core'
 import { Composer, ComposerInternal } from '../composer'
@@ -42,7 +42,7 @@ export const NumberFormat = defineComponent({
     }
   },
   /* eslint-enable */
-  setup(props, context: SetupContext) {
+  setup(props, context) {
     const i18n = useI18n({ useScope: 'parent' }) as Composer & ComposerInternal
 
     return renderFormatter<

src/components/Translation.ts

@@ -1,12 +1,4 @@
-import {
-  h,
-  Component,
-  ComponentOptions,
-  Fragment,
-  defineComponent,
-  SetupContext,
-  VNodeChild
-} from 'vue'
+import { h, Fragment, defineComponent, SetupContext, VNodeChild } from 'vue'
 import { Composer, ComposerInternal } from '../composer'
 import { useI18n } from '../i18n'
 import { TranslateOptions } from '../core'
@@ -35,7 +27,7 @@ export const Translation = defineComponent({
     }
   },
   /* eslint-enable */
-  setup(props: TranslationProps, context: SetupContext) {
+  setup(props, context) {
     const { slots, attrs } = context
     const i18n = useI18n({ useScope: props.scope }) as Composer &
       ComposerInternal
@@ -55,7 +47,7 @@ export const Translation = defineComponent({
       return isString(props.tag)
         ? h(props.tag, { ...attrs }, children)
         : isObject(props.tag)
-          ? h(props.tag as Component | ComponentOptions, { ...attrs }, children)
+          ? h(props.tag, { ...attrs }, children)
           : h(Fragment, { ...attrs }, children)
     }
   }

src/components/base.ts

@@ -12,7 +12,7 @@ export interface BaseFormatProps {
 
 export const baseFormatProps = {
   tag: {
-    type: [String, Object]
+    type: [String, Object] as PropType<string | object>
   },
   locale: {
     type: String

src/components/formatRenderer.ts

@@ -1,7 +1,5 @@
 import {
   h,
-  Component,
-  ComponentOptions,
   RenderFunction,
   Fragment,
   SetupContext,
@@ -78,7 +76,7 @@ export function renderFormatter<
     return isString(props.tag)
       ? h(props.tag, { ...attrs }, children)
       : isObject(props.tag)
-        ? h(props.tag as Component | ComponentOptions, { ...attrs }, children)
+        ? h(props.tag, { ...attrs }, children)
         : h(Fragment, { ...attrs }, children)
   }
 }

src/core/context.ts

@@ -138,8 +138,7 @@ export interface RuntimeContext<
   DateTimeFormats = {},
   NumberFormats = {},
   Message = string
->
-  extends RuntimeTranslationContext<Messages, Message>,
+> extends RuntimeTranslationContext<Messages, Message>,
     RuntimeDateTimeContext<DateTimeFormats, Message>,
     RuntimeNumberContext<NumberFormats, Message> {}
 

src/i18n.ts

@@ -1,7 +1,7 @@
 import {
   inject,
-  onMounted,
-  onUnmounted,
+  // onMounted,
+  // onUnmounted,
   InjectionKey,
   getCurrentInstance,
   ComponentInternalInstance,
@@ -430,11 +430,13 @@ export function useI18n<
       DateTimeFormats,
       NumberFormats
     >
+    /* NOTE: DISABLE for intlify-devtools
     setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
       i18nInternal,
       instance,
       composer
     )
+    */
 
     i18nInternal.__setInstance<
       Messages,
@@ -491,6 +493,7 @@ function getComposer<Messages, DateTimeFormats, NumberFormats>(
   return composer
 }
 
+/*
 function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
   i18n: I18nInternal,
   target: ComponentInternalInstance,
@@ -511,3 +514,4 @@ function setupLifeCycle<Messages, DateTimeFormats, NumberFormats>(
     i18n.__deleteInstance(target)
   }, target)
 }
+*/

test/__snapshots__/i18n.test.ts.snap

@@ -1,9 +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: en 1`] = `"<h1>Root</h1><form><select><option>en</option><option>ja</option></select></form><p>hello!</p><div class=\\"child\\"><h1>Child</h1><form><select><option>en</option><option>ja</option></select></form><p>hello!</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option>en</option><option>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 compsable: ja 1`] = `"<h1>Root</h1><form><select><option>en</option><option>ja</option></select></form><p>こんにちは！</p><div class=\\"child\\"><h1>Child</h1><form><select><option>en</option><option>ja</option></select></form><p>こんにちは！</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option>en</option><option>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: en 1`] = `"<h1>Root</h1><form><select><option>en</option><option>ja</option></select></form><p>hello!</p><div class=\\"child\\"><h1>Child</h1><form><select><option>en</option><option>ja</option></select></form><p>hello!</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option>en</option><option>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>"`;
+exports[`slot reactivity legacy: ja 1`] = `"<h1>Root</h1><form><select><option>en</option><option>ja</option></select></form><p>こんにちは！</p><div class=\\"child\\"><h1>Child</h1><form><select><option>en</option><option>ja</option></select></form><p>こんにちは！</p><div class=\\"sub-child\\"><h1>Sub Child</h1><form><select><option>en</option><option>ja</option></select></form><p>こんにちは！</p></div> $t inside of slot <p>こんにちは！</p> i18n-t inside of slot <p>こんにちは！</p></div>"`;

test/components/Translation.test.ts

@@ -66,16 +66,16 @@ test('DOM contents', async () => {
   })
 
   const App = defineComponent({
+    setup() {
+      return { ...useI18n() }
+    },
     template: `
 <i18n-t keypath="message.list" locale="en">
   <span class="lang">
     {{ t('message.language', {}, { locale: 'en' }) }}
   </span>
 </i18n-t>
-`,
-    setup() {
-      return { ...useI18n() }
-    }
+`
   })
   const wrapper = await mount(App, i18n)
 
@@ -89,16 +89,16 @@ test('linked contents', async () => {
   })
 
   const App = defineComponent({
+    setup() {
+      return { ...useI18n() }
+    },
     template: `
 <i18n-t keypath="message.linked">
   <template #name>
     <span>かずぽん</span>
   </template>
 </i18n-t>
-`,
-    setup() {
-      return { ...useI18n() }
-    }
+`
   })
   const wrapper = await mount(App, i18n)
 
@@ -112,17 +112,17 @@ test('plural contents', async () => {
   })
 
   const App = defineComponent({
+    setup() {
+      const count = ref(2)
+      return { ...useI18n(), count }
+    },
     template: `
 <i18n-t keypath="message.plural" locale="en" :plural="count">
   <template #n>
     <b>{{ count }}</b>
   </template>
 </i18n-t>
-`,
-    setup() {
-      const count = ref(2)
-      return { ...useI18n(), count }
-    }
+`
   })
   const wrapper = await mount(App, i18n)
 
@@ -163,7 +163,6 @@ test('scope', async () => {
     components: {
       Container
     },
-    template: `<Container>`,
     setup() {
       return {
         ...useI18n({
@@ -175,7 +174,8 @@ test('scope', async () => {
           }
         })
       }
-    }
+    },
+    template: `<Container>`
   })
 
   const wrapper = await mount(Root, i18n)