fix: composition setup warning (#115)

Author: kazupon

package.json

@@ -31,17 +31,17 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.0",
     "@types/jest": "^26.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
-    "@vue/server-renderer": "^3.0.0-rc.8",
+    "@typescript-eslint/eslint-plugin": "^4.1.0",
+    "@typescript-eslint/parser": "^4.1.0",
+    "@vue/server-renderer": "^3.0.0-rc.12",
     "brotli": "^1.3.2",
     "chalk": "^4.1.0",
     "convert-hrtime": "^3.0.0",
     "cross-env": "^7.0.2",
-    "eslint": "^7.7.0",
+    "eslint": "^7.9.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-vue": "^7.0.0-beta.2",
+    "eslint-plugin-vue": "^7.0.0-beta.3",
     "eslint-plugin-vue-libs": "^4.0.0",
     "execa": "^4.0.0",
     "fs-extra": "^9.0.0",
@@ -65,7 +65,7 @@
     "tsd": "^0.13.1",
     "typescript": "^4.0.0",
     "typescript-eslint-language-service": "^4.0.0",
-    "vue": "^3.0.0-rc.8"
+    "vue": "^3.0.0-rc.12"
   },
   "engines": {
     "node": ">= 10"
@@ -88,7 +88,7 @@
   "main": "dist/vue-i18n.cjs.js",
   "module": "dist/vue-i18n.esm-bundler.js",
   "peerDependencies": {
-    "vue": "^3.0.0-rc.8"
+    "vue": "^3.0.0-rc.12"
   },
   "repository": {
     "type": "git",

src/components/DatetimeFormat.ts

@@ -1,7 +1,7 @@
 import { RenderFunction, SetupContext } from 'vue'
 import { useI18n } from '../i18n'
 import { DateTimeOptions } from '../core'
-import { Composer, ComposerInternal } from '../composer'
+import { Composer, ComposerInternal, DatetimePartsSymbol } from '../composer'
 import { renderFormatter, FormattableProps } from './formatRenderer'
 import { baseFormatProps } from './base'
 
@@ -57,7 +57,8 @@ export const DatetimeFormat = {
       DateTimeOptions,
       Intl.DateTimeFormatPart
     >(props, context, DATETIME_FORMAT_KEYS, (...args: unknown[]) =>
-      i18n.__datetimeParts(...args)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (i18n as any)[DatetimePartsSymbol](...args)
     )
   }
 }

src/components/NumberFormat.ts

@@ -1,7 +1,7 @@
 import { SetupContext, RenderFunction } from 'vue'
 import { useI18n } from '../i18n'
 import { NumberOptions } from '../core'
-import { Composer, ComposerInternal } from '../composer'
+import { Composer, ComposerInternal, NumberPartsSymbol } from '../composer'
 import { renderFormatter, FormattableProps } from './formatRenderer'
 import { baseFormatProps } from './base'
 
@@ -52,7 +52,8 @@ export const NumberFormat = {
       NumberOptions,
       Intl.NumberFormatPart
     >(props, context, NUMBER_FORMAT_KEYS, (...args: unknown[]) =>
-      i18n.__numberParts(...args)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (i18n as any)[NumberPartsSymbol](...args)
     )
   }
 }

src/components/Translation.ts

@@ -1,5 +1,5 @@
 import { h, Fragment, SetupContext, VNodeChild, RenderFunction } from 'vue'
-import { Composer, ComposerInternal } from '../composer'
+import { Composer, ComposerInternal, TransrateVNodeSymbol } from '../composer'
 import { useI18n } from '../i18n'
 import { TranslateOptions } from '../core'
 import { NamedValue } from '../message/runtime'
@@ -42,7 +42,12 @@ export const Translation = {
         options.plural = isString(props.plural) ? +props.plural : props.plural
       }
       const arg = getInterpolateArg(context, keys)
-      const children = i18n.__transrateVNode(props.keypath, arg, options)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const children = (i18n as any)[TransrateVNodeSymbol](
+        props.keypath,
+        arg,
+        options
+      )
       // prettier-ignore
       return isString(props.tag)
         ? h(props.tag, { ...attrs }, children)

src/composer.ts

@@ -79,16 +79,23 @@ import {
   isString,
   isRegExp,
   isBoolean,
-  isPlainObject
+  isPlainObject,
+  makeSymbol
 } from './utils'
 
 // extend VNode interface
 declare module '@vue/runtime-core' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface VNode<HostNode = RendererNode, HostElement = RendererElement> {
     toString: () => string // mark for vue-i18n message runtime
   }
 }
 
+export const ComposerIdSymbol = makeSymbol('__id')
+export const TransrateVNodeSymbol = makeSymbol('__transrateVNode')
+export const DatetimePartsSymbol = makeSymbol('__datetimeParts')
+export const NumberPartsSymbol = makeSymbol('__numberParts')
+
 export type VueMessageType = string | VNode
 export type MissingHandler = (
   locale: Locale,
@@ -667,7 +674,8 @@ export function createComposer<
       },
       () => parseTranslateArgs(...args)[0],
       'translate',
-      root => root.__transrateVNode(...args),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      root => (root as any)[TransrateVNodeSymbol](...args),
       key => [createVNode(Text, null, key, 0)],
       val => isArray(val)
     )
@@ -679,7 +687,8 @@ export function createComposer<
       context => number(context as RuntimeContext<Messages, string>, ...args),
       () => parseNumberArgs(...args)[0],
       'number format',
-      root => root.__numberParts(...args),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      root => (root as any)[NumberPartsSymbol](...args),
       () => [],
       val => isString(val) || isArray(val)
     )
@@ -693,7 +702,8 @@ export function createComposer<
       context => datetime(context as RuntimeContext<Messages, string>, ...args),
       () => parseDateTimeArgs(...args)[0],
       'datetime format',
-      root => root.__datetimeParts(...args),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      root => (root as any)[DatetimePartsSymbol](...args),
       () => [],
       val => isString(val) || isArray(val)
     )
@@ -879,7 +889,7 @@ export function createComposer<
       _warnHtmlMessage = val
       _context.warnHtmlMessage = val
     },
-    __id: composerID,
+    [ComposerIdSymbol]: composerID,
     // methods
     t,
     d,
@@ -898,9 +908,9 @@ export function createComposer<
     setPostTranslationHandler,
     getMissingHandler,
     setMissingHandler,
-    __transrateVNode,
-    __numberParts,
-    __datetimeParts
+    [TransrateVNodeSymbol]: __transrateVNode,
+    [NumberPartsSymbol]: __numberParts,
+    [DatetimePartsSymbol]: __datetimeParts
   }
 
   return composer

src/i18n.ts

@@ -27,15 +27,15 @@ import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { I18nErrorCodes, createI18nError } from './errors'
 import { apply } from './plugin'
 import { defineMixin } from './mixin'
-import { isEmptyObject, warn } from './utils'
+import { isEmptyObject, warn, makeSymbol } from './utils'
 import { devtoolsRegisterI18n } from './devtools'
 import { VERSION } from './misc'
 
 declare module '@vue/runtime-core' {
   // eslint-disable-next-line
   interface App<HostElement = any> {
     __VUE_I18N__?: I18n & I18nInternal
-    __VUE_I18N_SYMBOL__?: InjectionKey<I18n>
+    __VUE_I18N_SYMBOL__?: InjectionKey<I18n> | string
   }
 }
 
@@ -245,7 +245,9 @@ export function createI18n<
   const __global = __legacyMode
     ? createVueI18n(options)
     : createComposer(options)
-  const symbol: InjectionKey<I18n> = Symbol(__DEV__ ? 'vue-i18n' : '')
+  const symbol: InjectionKey<I18n> | string = makeSymbol(
+    __DEV__ ? 'vue-i18n' : ''
+  )
 
   const i18n = {
     // mode

src/legacy.ts

@@ -33,7 +33,7 @@ import {
   ComposerOptions,
   ComposerInternalOptions,
   createComposer,
-  ComposerInternal
+  ComposerIdSymbol
 } from './composer'
 import { I18nWarnCodes, getWarnMessage } from './warnings'
 import { createI18nError, I18nErrorCodes } from './errors'
@@ -436,7 +436,7 @@ export function createVueI18n<
     },
 
     // for internal
-    __id: ((composer as unknown) as ComposerInternal).__id,
+    __id: (composer as any)[ComposerIdSymbol], // eslint-disable-line @typescript-eslint/no-explicit-any
     __composer: composer,
 
     /**

src/mixin.ts

@@ -235,7 +235,7 @@ export function defineMixin<Messages, DateTimeFormats, NumberFormats>(
       }
     },
 
-    beforeDestroy(): void {
+    beforeUnmount(): void {
       const instance = getCurrentInstance()
       /* istanbul ignore if */
       if (!instance) {

src/utils.ts

@@ -21,6 +21,12 @@ export function format(message: string, ...args: any): string {
   )
 }
 
+const hasSymbol =
+  typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol'
+
+/** @internal */
+export const makeSymbol = (name: string): symbol | string => hasSymbol ? Symbol(name) : name
+
 /** @internal */
 export const generateFormatCacheKey = (
   locale: string,

test/__snapshots__/composer.test.ts.snap

@@ -19,6 +19,8 @@ Array [
     "ref": null,
     "scopeId": null,
     "shapeFlag": 8,
+    "ssContent": null,
+    "ssFallback": null,
     "staticCount": 0,
     "suspense": null,
     "target": null,