support for Vue 3.1 (#578)

* support Vue 3.1

* Update packages/vue-i18n/src/components/NumberFormat.ts

Co-authored-by: Danny Feliz <[email protected]>

* Update packages/vue-i18n/src/components/DatetimeFormat.ts

Co-authored-by: Danny Feliz <[email protected]>

Co-authored-by: Danny Feliz <[email protected]>

Author: kazupon

package.json

@@ -69,7 +69,7 @@
     "@types/node": "^14.14.37",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
-    "@vue/server-renderer": "^3.0.0",
+    "@vue/server-renderer": "^3.1.0",
     "algoliasearch": "^4.9.0",
     "api-docs-gen": "^0.3.0",
     "brotli": "^1.3.2",
@@ -126,7 +126,7 @@
     "typescript": "4.2.3",
     "typescript-eslint-language-service": "^4.1.3",
     "vitepress": "^0.14.0",
-    "vue": "^3.0.0",
+    "vue": "^3.1.0",
     "yarn-deduplicate": "^3.1.0",
     "yorkie": "^2.0.0"
   },

packages/vue-i18n/src/components/DatetimeFormat.ts

@@ -3,8 +3,24 @@ import { DatetimePartsSymbol } from '../composer'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
 import { assign } from '@intlify/shared'
+import { defineComponent } from 'vue'
 
-import type { RenderFunction, SetupContext } from 'vue'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  RenderFunction,
+  // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
+  // @ts-ignore
+  DefineComponent,
+  // @ts-ignore
+  ComponentOptionsMixin,
+  // @ts-ignore
+  AllowedComponentProps,
+  // @ts-ignore
+  VNodeProps,
+  // @ts-ignore
+  ComponentCustomProps
+} from 'vue'
+/* eslint-enable @typescript-eslint/no-unused-vars */
 import type { DateTimeOptions } from '@intlify/core-base'
 import type { Composer, ComposerInternal } from '../composer'
 import type { FormattableProps } from './formatRenderer'
@@ -59,7 +75,7 @@ const DATETIME_FORMAT_KEYS = [
  *
  * @VueI18nComponent
  */
-export const DatetimeFormat = {
+export const DatetimeFormat = /* #__PURE__*/ defineComponent({
   /* eslint-disable */
   name: 'i18n-d',
   props: assign(
@@ -75,7 +91,7 @@ export const DatetimeFormat = {
     baseFormatProps
   ),
   /* eslint-enable */
-  setup(props: DatetimeFormatProps, context: SetupContext): RenderFunction {
+  setup(props, context): RenderFunction {
     const i18n =
       props.i18n ||
       (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
@@ -86,9 +102,13 @@ export const DatetimeFormat = {
       Intl.DateTimeFormatOptions,
       DateTimeOptions,
       Intl.DateTimeFormatPart
-    >(props, context, DATETIME_FORMAT_KEYS, (...args: unknown[]) =>
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (i18n as any)[DatetimePartsSymbol](...args)
+    >(
+      props as DatetimeFormatProps,
+      context,
+      DATETIME_FORMAT_KEYS,
+      (...args: unknown[]) =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (i18n as any)[DatetimePartsSymbol](...args)
     )
   }
-}
+})

packages/vue-i18n/src/components/NumberFormat.ts

@@ -3,8 +3,24 @@ import { NumberPartsSymbol } from '../composer'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
 import { assign } from '@intlify/shared'
+import { defineComponent } from 'vue'
 
-import type { SetupContext, RenderFunction } from 'vue'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  RenderFunction,
+  // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
+  // @ts-ignore
+  DefineComponent,
+  // @ts-ignore
+  ComponentOptionsMixin,
+  // @ts-ignore
+  AllowedComponentProps,
+  // @ts-ignore
+  VNodeProps,
+  // @ts-ignore
+  ComponentCustomProps
+} from 'vue'
+/* eslint-enable @typescript-eslint/no-unused-vars */
 import type { NumberOptions } from '@intlify/core-base'
 import type { Composer, ComposerInternal } from '../composer'
 import type { FormattableProps } from './formatRenderer'
@@ -54,7 +70,7 @@ const NUMBER_FORMAT_KEYS = [
  *
  * @VueI18nComponent
  */
-export const NumberFormat = {
+export const NumberFormat = /* #__PURE__*/ defineComponent({
   /* eslint-disable */
   name: 'i18n-n',
   props: assign(
@@ -70,7 +86,7 @@ export const NumberFormat = {
     baseFormatProps
   ),
   /* eslint-enable */
-  setup(props: NumberFormatProps, context: SetupContext): RenderFunction {
+  setup(props, context): RenderFunction {
     const i18n =
       props.i18n ||
       (useI18n({ useScope: 'parent' }) as Composer & ComposerInternal)
@@ -81,9 +97,13 @@ export const NumberFormat = {
       Intl.NumberFormatOptions,
       NumberOptions,
       Intl.NumberFormatPart
-    >(props, context, NUMBER_FORMAT_KEYS, (...args: unknown[]) =>
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (i18n as any)[NumberPartsSymbol](...args)
+    >(
+      props as NumberFormatProps,
+      context,
+      NUMBER_FORMAT_KEYS,
+      (...args: unknown[]) =>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (i18n as any)[NumberPartsSymbol](...args)
     )
   }
-}
+})

packages/vue-i18n/src/components/Translation.ts

@@ -1,11 +1,27 @@
-import { h, Fragment } from 'vue'
+import { h, Fragment, defineComponent } from 'vue'
 import { isNumber, isString, isObject } from '@intlify/shared'
 import { TransrateVNodeSymbol } from '../composer'
 import { useI18n } from '../i18n'
 import { baseFormatProps } from './base'
 import { assign } from '@intlify/shared'
 
-import type { SetupContext, VNodeChild, RenderFunction } from 'vue'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type {
+  SetupContext,
+  VNodeChild,
+  // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
+  // @ts-ignore
+  DefineComponent,
+  // @ts-ignore
+  ComponentOptionsMixin,
+  // @ts-ignore
+  AllowedComponentProps,
+  // @ts-ignore
+  VNodeProps,
+  // @ts-ignore
+  ComponentCustomProps
+} from 'vue'
+/* eslint-enable @typescript-eslint/no-unused-vars */
 import type { Composer, ComposerInternal } from '../composer'
 import type { TranslateOptions } from '@intlify/core-base'
 import type { NamedValue } from '@intlify/runtime'
@@ -78,7 +94,7 @@ export interface TranslationProps extends BaseFormatProps {
  *
  * @VueI18nComponent
  */
-export const Translation = {
+export const Translation = /* #__PURE__*/ defineComponent({
   /* eslint-disable */
   name: 'i18n-t',
   props: assign(
@@ -96,11 +112,13 @@ export const Translation = {
     baseFormatProps
   ),
   /* eslint-enable */
-  setup(props: TranslationProps, context: SetupContext): RenderFunction {
+  setup(props, context) {
     const { slots, attrs } = context
+    // NOTE: avoid https://github.com/microsoft/rushstack/issues/1050
     const i18n =
       props.i18n ||
-      (useI18n({ useScope: props.scope }) as Composer & ComposerInternal)
+      (useI18n({ useScope: props.scope as 'global' | 'parent' }) as Composer &
+        ComposerInternal)
     const keys = Object.keys(slots).filter(key => key !== '_')
 
     return (): VNodeChild => {
@@ -124,7 +142,7 @@ export const Translation = {
         : h(Fragment, assignedAttrs, children)
     }
   }
-}
+})
 
 function getInterpolateArg(
   { slots }: SetupContext,

packages/vue-i18n/src/plugin.ts

@@ -60,9 +60,9 @@ export function apply(app: App, i18n: I18n, ...options: unknown[]): void {
     // install components
     app.component(
       !useI18nComponentName ? Translation.name : 'i18n',
-      Translation as Component
+      Translation
     )
-    app.component(NumberFormat.name, NumberFormat as Component)
+    app.component(NumberFormat.name, NumberFormat)
     app.component(DatetimeFormat.name, DatetimeFormat as Component)
   }
 

packages/vue-i18n/test/__snapshots__/composer.test.ts.snap

@@ -22,7 +22,6 @@ Array [
     "slotScopeIds": null,
     "ssContent": null,
     "ssFallback": null,
-    "staticCount": 0,
     "suspense": null,
     "target": null,
     "targetAnchor": null,

packages/vue-i18n/test/ssr.test.ts

@@ -1,4 +1,4 @@
-import { defineComponent, createSSRApp } from 'vue'
+import { h, defineComponent, resolveComponent, createSSRApp } from 'vue'
 import { renderToString } from '@vue/server-renderer'
 import { createI18n, useI18n } from '../src/index'
 
@@ -11,16 +11,16 @@ test('composition mode', async () => {
 
   const App = defineComponent({
     setup() {
-      return useI18n({
+      const { t } = useI18n({
         locale: 'ja',
         inheritLocale: false,
         messages: {
           ja: { hello: 'こんにちは！' },
           en: { hello: 'hello!' }
         }
       })
-    },
-    template: `<p>{{ t('hello') }}</p>`
+      return () => h('p', t('hello'))
+    }
   })
   const app = createSSRApp(App)
   app.use(i18n)
@@ -37,9 +37,8 @@ test('legacy mode', async () => {
     }
   })
 
-  const App = defineComponent({
-    template: `<p>{{ $t('hello') }}</p>`
-  })
+  // NOTE: template: `<p>{{ $t('hello') }}</p>`
+  const App = () => h('p', i18n.global.t('hello'))
   const app = createSSRApp(App)
   app.use(i18n)
 
@@ -55,16 +54,17 @@ test('component: i18n-t', async () => {
 
   const App = defineComponent({
     setup() {
-      return useI18n({
+      useI18n({
         locale: 'ja',
         inheritLocale: false,
         messages: {
           ja: { hello: 'こんにちは！' },
           en: { hello: 'hello!' }
         }
       })
-    },
-    template: `<i18n-t tag="p" keypath="hello"/>`
+      return () => h(resolveComponent('i18n-t'), { tag: 'p', keypath: 'hello' })
+    }
+    // template: `<i18n-t tag="p" keypath="hello"/>`
   })
   const app = createSSRApp(App)
   app.use(i18n)