fix: support type inference of Translation, NumberFormat and DatetimeFormat components on SFC template and JSX/TSX

.github/workflows/ci.yml

@@ -80,7 +80,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [14, 16, 18]
+        node: [14, 16]
+        #node: [14, 16, 18.0]
 
     runs-on: ${{ matrix.os }}
 
@@ -142,7 +143,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node: [14, 16, 18]
+        node: [14, 16]
+        #node: [14, 16, 18.0]
 
     runs-on: ${{ matrix.os }}
 

jest.config.js

@@ -51,7 +51,7 @@ module.exports = {
 
   // A path to a module which exports an async function that is triggered once before all test suites
   // globalSetup: null,
-  globalSetup: require('set-tz')('UTC'),
+  globalSetup: './jest.global.setup.js',
 
   // A path to a module which exports an async function that is triggered once after all test suites
   // globalTeardown: null,

jest.global.setup.js

@@ -0,0 +1,3 @@
+module.exports = async () => {
+  process.env.TZ = 'UTC'
+}

package.json

@@ -48,7 +48,7 @@
     "format:package": "node -r esbuild-register ./scripts/fixpack.ts",
     "format:prettier": "prettier --config .prettierrc --ignore-path .prettierignore --list-different '**/*.{js,json,html}'",
     "lint": "run-p lint:secret lint:codes lint:docs",
-    "lint:codes": "eslint --cache ./packages ./test-d ./e2e ./benchmark --ext .js,.mjs,.ts,.vue",
+    "lint:codes": "eslint --cache ./packages ./test-dts ./e2e ./benchmark --ext .js,.mjs,.ts,.vue",
     "lint:docs": "textlint --config .textlintrc.js docs/*.md docs/advanced/**/*.md docs/essentials/**/*.md docs/migration/**/*.md docs/api/injection.md packages/**/*.md",
     "lint:fix": "run-p \"lint:codes --fix\" \"lint:docs --fix\"",
     "lint:secret": "npx secretlint \"**/*\"",
@@ -59,7 +59,7 @@
     "test": "npm-run-all lint clean:cache:jest test:cover test:type test:e2e",
     "test:cover": "npm run test:unit -- --coverage",
     "test:e2e": "jest --runInBand --config ./jest.e2e.config.js",
-    "test:type": "tsc -p ./test-d/tsconfig.json",
+    "test:type": "tsc -p ./test-dts/tsconfig.json",
     "test:unit": "npm run clean:cache:jest && jest --env node"
   },
   "devDependencies": {

packages/vue-i18n-bridge/src/index.ts

@@ -98,11 +98,14 @@ export {
 } from '../../vue-i18n-core/src/i18n'
 export {
   Translation,
+  I18nT,
   TranslationProps,
   BaseFormatProps,
   DatetimeFormat,
+  I18nD,
   DatetimeFormatProps,
   NumberFormat,
+  I18nN,
   NumberFormatProps
 } from '../../vue-i18n-core/src/components'
 export { I18nPluginOptions } from '../../vue-i18n-core/src/plugin'

packages/vue-i18n-bridge/src/runtime.ts

@@ -93,11 +93,14 @@ export {
 } from '../../vue-i18n-core/src/i18n'
 export {
   Translation,
+  I18nT,
   TranslationProps,
   BaseFormatProps,
   DatetimeFormat,
+  I18nD,
   DatetimeFormatProps,
   NumberFormat,
+  I18nN,
   NumberFormatProps
 } from '../../vue-i18n-core/src/components'
 export { I18nPluginOptions } from '../../vue-i18n-core/src/plugin'

packages/vue-i18n-bridge/src/vue.d.ts

@@ -29,6 +29,11 @@ import type {
   NumberFormatResult
 } from '../../vue-i18n-core/src/legacy'
 import type { ExportedGlobalComposer } from '../../vue-i18n-core/src/i18n'
+import type {
+  Translation,
+  DatetimeFormat,
+  NumberFormat
+} from '../../vue-i18n-core/src/components'
 
 declare module '@vue/runtime-core' {
   /**
@@ -1223,4 +1228,10 @@ declare module '@vue/runtime-core' {
       key: Key | ResourceKeys
     ): LocaleMessageValue<VueMessageType> | {}
   }
+
+  export interface GlobalComponents {
+    ['i18n-t']: typeof Translation
+    ['i18n-d']: typeof DatetimeFormat
+    ['i18n-n']: typeof NumberFormat
+  }
 }

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

@@ -1,14 +1,17 @@
+import { defineComponent } from 'vue'
+import { assign } from '@intlify/shared'
+import { DATETIME_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 import { useI18n } from '../i18n'
 import { DatetimePartsSymbol } from '../symbols'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
-import { assign } from '@intlify/shared'
-import { DATETIME_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 
 /* eslint-enable @typescript-eslint/no-unused-vars */
+import type { VNodeProps } from 'vue'
 import type { DateTimeOptions } from '@intlify/core-base'
 import type { Composer, ComposerInternal } from '../composer'
 import type { FormattableProps } from './formatRenderer'
+import type { BaseFormatProps } from './base'
 
 /**
  * DatetimeFormat Component Props
@@ -20,24 +23,7 @@ export type DatetimeFormatProps = FormattableProps<
   Intl.DateTimeFormatOptions
 >
 
-/**
- * Datetime Format Component
- *
- * @remarks
- * See the following items for property about details
- *
- * @VueI18nSee [FormattableProps](component#formattableprops)
- * @VueI18nSee [BaseFormatProps](component#baseformatprops)
- * @VueI18nSee [Custom Formatting](../guide/essentials/datetime#custom-formatting)
- *
- * @VueI18nDanger
- * Not supported IE, due to no support `Intl.DateTimeFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts)
- *
- * If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat)
- *
- * @VueI18nComponent
- */
-export const DatetimeFormat = /* #__PURE__*/ /*defineComponent */ {
+export const DatetimeFormatImpl = /* #__PURE__*/ defineComponent({
   /* eslint-disable */
   name: 'i18n-d',
   props: assign(
@@ -77,4 +63,29 @@ export const DatetimeFormat = /* #__PURE__*/ /*defineComponent */ {
         (i18n as any)[DatetimePartsSymbol](...args)
     )
   }
+})
+
+/**
+ * Datetime Format Component
+ *
+ * @remarks
+ * See the following items for property about details
+ *
+ * @VueI18nSee [FormattableProps](component#formattableprops)
+ * @VueI18nSee [BaseFormatProps](component#baseformatprops)
+ * @VueI18nSee [Custom Formatting](../guide/essentials/datetime#custom-formatting)
+ *
+ * @VueI18nDanger
+ * Not supported IE, due to no support `Intl.DateTimeFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts)
+ *
+ * If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-datetimeformat)
+ *
+ * @VueI18nComponent
+ */
+export const DatetimeFormat = DatetimeFormatImpl as unknown as {
+  new (): {
+    $props: VNodeProps & DatetimeFormatProps & BaseFormatProps
+  }
 }
+
+export const I18nD = DatetimeFormat

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

@@ -1,13 +1,16 @@
+import { defineComponent } from 'vue'
+import { assign } from '@intlify/shared'
+import { NUMBER_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 import { useI18n } from '../i18n'
 import { NumberPartsSymbol } from '../symbols'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
-import { assign } from '@intlify/shared'
-import { NUMBER_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 
+import type { VNodeProps } from 'vue'
 import type { NumberOptions } from '@intlify/core-base'
 import type { Composer, ComposerInternal } from '../composer'
 import type { FormattableProps } from './formatRenderer'
+import type { BaseFormatProps } from './base'
 
 /**
  * NumberFormat Component Props
@@ -19,24 +22,7 @@ export type NumberFormatProps = FormattableProps<
   Intl.NumberFormatOptions
 >
 
-/**
- * Number Format Component
- *
- * @remarks
- * See the following items for property about details
- *
- * @VueI18nSee [FormattableProps](component#formattableprops)
- * @VueI18nSee [BaseFormatProps](component#baseformatprops)
- * @VueI18nSee [Custom Formatting](../guide/essentials/number#custom-formatting)
- *
- * @VueI18nDanger
- * Not supported IE, due to no support `Intl.NumberFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts)
- *
- * If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat)
- *
- * @VueI18nComponent
- */
-export const NumberFormat = /* #__PURE__*/ /* defineComponent */ {
+export const NumberFormatImpl = /*#__PURE__*/ defineComponent({
   /* eslint-disable */
   name: 'i18n-n',
   props: assign(
@@ -76,4 +62,34 @@ export const NumberFormat = /* #__PURE__*/ /* defineComponent */ {
         (i18n as any)[NumberPartsSymbol](...args)
     )
   }
+})
+
+/**
+ * export the public type for h/tsx inference
+ * also to avoid inline import() in generated d.ts files
+ */
+
+/**
+ * Number Format Component
+ *
+ * @remarks
+ * See the following items for property about details
+ *
+ * @VueI18nSee [FormattableProps](component#formattableprops)
+ * @VueI18nSee [BaseFormatProps](component#baseformatprops)
+ * @VueI18nSee [Custom Formatting](../guide/essentials/number#custom-formatting)
+ *
+ * @VueI18nDanger
+ * Not supported IE, due to no support `Intl.NumberFormat#formatToParts` in [IE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts)
+ *
+ * If you want to use it, you need to use [polyfill](https://github.com/formatjs/formatjs/tree/main/packages/intl-numberformat)
+ *
+ * @VueI18nComponent
+ */
+export const NumberFormat = NumberFormatImpl as unknown as {
+  new (): {
+    $props: VNodeProps & NumberFormatProps & BaseFormatProps
+  }
 }
+
+export const I18nN = NumberFormat