fix: allow AST on rt (#1455)

* fix: allow AST on rt

* fix: wrong types

Author: kazupon

packages/core-base/src/index.ts

@@ -3,6 +3,7 @@ import { initFeatureFlags } from './misc'
 export {
   CompileError,
   CompileErrorCodes,
+  ResourceNode,
   createCompileError
 } from '@intlify/message-compiler'
 export * from './resolver'

packages/core-base/src/translate.ts

@@ -390,7 +390,7 @@ export function translate<
   // resolve message format
   // eslint-disable-next-line prefer-const
   let [formatScope, targetLocale, message]: [
-    PathValue | MessageFunction<Message>,
+    PathValue | MessageFunction<Message> | ResourceNode,
     Locale | undefined,
     LocaleMessageValue<Message>
   ] = !resolvedMessage
@@ -657,7 +657,7 @@ function compileMessageFormat<Messages, Message>(
   context: CoreContext<Message, Messages>,
   key: string,
   targetLocale: string,
-  format: PathValue,
+  format: PathValue | ResourceNode | MessageFunction<Message>,
   cacheBaseKey: string,
   errorDetector: () => void
 ): MessageFunctionInternal {
@@ -707,7 +707,7 @@ function compileMessageFormat<Messages, Message>(
     if (emitter && start) {
       emitter.emit(VueDevToolsTimelineEvents.MESSAGE_COMPILATION, {
         type: VueDevToolsTimelineEvents.MESSAGE_COMPILATION,
-        message: format,
+        message: format as string | ResourceNode | MessageFunction,
         time: end - start,
         groupId: `${'translate'}:${key}`
       })
@@ -767,11 +767,16 @@ function evaluateMessage<Messages, Message>(
 /** @internal */
 export function parseTranslateArgs<Message = string>(
   ...args: unknown[]
-): [Path | MessageFunction<Message>, TranslateOptions] {
+): [Path | MessageFunction<Message> | ResourceNode, TranslateOptions] {
   const [arg1, arg2, arg3] = args
   const options = {} as TranslateOptions
 
-  if (!isString(arg1) && !isNumber(arg1) && !isMessageFunction(arg1)) {
+  if (
+    !isString(arg1) &&
+    !isNumber(arg1) &&
+    !isMessageFunction(arg1) &&
+    !isMessageAST(arg1)
+  ) {
     throw createCoreError(CoreErrorCodes.INVALID_ARGUMENT)
   }
 

packages/vue-devtools/src/index.ts

@@ -3,6 +3,8 @@ import type {
   Path,
   PathValue,
   Locale,
+  MessageFunction,
+  ResourceNode,
   CoreMissingType
 } from '@intlify/core-base'
 
@@ -37,7 +39,7 @@ export const enum VueDevToolsTimelineEvents {
 
 export type VueDevToolsTimelineEventPayloads = {
   [VueDevToolsTimelineEvents.COMPILE_ERROR]: {
-    message: PathValue
+    message: string
     error: string
     start?: number
     end?: number
@@ -65,7 +67,7 @@ export type VueDevToolsTimelineEventPayloads = {
   }
   [VueDevToolsTimelineEvents.MESSAGE_COMPILATION]: {
     type: VueDevToolsTimelineEvents.MESSAGE_COMPILATION
-    message: PathValue
+    message: string | ResourceNode | MessageFunction
     time: number
     groupId?: string
   }

packages/vue-i18n-core/src/composer.ts

@@ -99,6 +99,7 @@ import type {
   LocaleParams,
   ResourceValue,
   ResourcePath,
+  ResourceNode,
   PickupPaths,
   PickupFormatPathKeys,
   RemoveIndexSignature,
@@ -114,7 +115,7 @@ export { DEFAULT_LOCALE } from '@intlify/core-base'
 export const DEVTOOLS_META = '__INTLIFY_META__'
 
 /** @VueI18nComposition */
-export type VueMessageType = string | VNode
+export type VueMessageType = string | ResourceNode | VNode
 
 /**
  * The type definition of Locale Message

packages/vue-i18n-core/test/composer.test.ts

@@ -30,6 +30,7 @@ import { watch, watchEffect, nextTick, Text, createVNode } from 'vue'
 import {
   Locale,
   compileToFunction,
+  compile,
   registerMessageCompiler,
   resolveValue,
   registerMessageResolver,
@@ -537,7 +538,7 @@ describe('postTranslation', () => {
     expect(getPostTranslationHandler()).toEqual(null)
 
     let key = ''
-    const handler = (str: VueMessageType, _key: string) => {
+    const handler = <VueMessageType>(str: VueMessageType, _key: string) => {
       key = _key
       return shared.isString(str) ? str.trim() : str
     }
@@ -548,7 +549,7 @@ describe('postTranslation', () => {
   })
 
   test('initialize at composer creating', () => {
-    const handler = (str: VueMessageType) =>
+    const handler = <VueMessageType>(str: VueMessageType) =>
       shared.isString(str) ? str.trim() : str
     const { getPostTranslationHandler, t } = createComposer({
       locale: 'en',
@@ -774,7 +775,159 @@ describe('rt', () => {
               'no apples',
               'one apple',
               `${ctx.named('count')} apples`
-            ])
+            ]) as string
+        }
+      }
+    })
+
+    expect(rt(messages.value.en.text)).toEqual('hi dio!')
+    expect(rt(messages.value.en.list, ['dio'])).toEqual('hi dio!')
+    expect(rt(messages.value.en.named, { name: 'dio' })).toEqual('hi dio!')
+    expect(rt(messages.value.en.linked)).toEqual('hi DIO !')
+    expect(rt(messages.value.en.pural, 2)).toEqual('2 apples')
+  })
+
+  test('AST', () => {
+    registerMessageCompiler(compile)
+
+    const { rt, messages } = createComposer({
+      locale: 'en',
+      messages: {
+        en: {
+          text: {
+            type: 0,
+            body: {
+              type: 2,
+              items: [
+                {
+                  type: 3,
+                  value: 'hi dio!'
+                }
+              ],
+              static: 'hi dio!'
+            }
+          },
+          list: {
+            type: 0,
+            body: {
+              type: 2,
+              items: [
+                {
+                  type: 3,
+                  value: 'hi '
+                },
+                {
+                  type: 5,
+                  index: 0
+                },
+                {
+                  type: 3,
+                  value: '!'
+                }
+              ]
+            }
+          },
+          named: {
+            type: 0,
+            body: {
+              type: 2,
+              items: [
+                {
+                  type: 3,
+                  value: 'hi '
+                },
+                {
+                  type: 4,
+                  key: 'name'
+                },
+                {
+                  type: 3,
+                  value: '!'
+                }
+              ]
+            }
+          },
+          name: {
+            type: 0,
+            body: {
+              type: 2,
+              items: [
+                {
+                  type: 3,
+                  value: 'dio'
+                }
+              ],
+              static: 'dio'
+            }
+          },
+          linked: {
+            type: 0,
+            body: {
+              type: 2,
+              items: [
+                {
+                  type: 3,
+                  value: 'hi '
+                },
+                {
+                  type: 6,
+                  modifier: {
+                    type: 8,
+                    value: 'upper'
+                  },
+                  key: {
+                    type: 7,
+                    value: 'name'
+                  }
+                },
+                {
+                  type: 3,
+                  value: ' !'
+                }
+              ]
+            }
+          },
+          pural: {
+            type: 0,
+            body: {
+              type: 1,
+              cases: [
+                {
+                  type: 2,
+                  items: [
+                    {
+                      type: 3,
+                      value: 'no apples'
+                    }
+                  ],
+                  static: 'no apples'
+                },
+                {
+                  type: 2,
+                  items: [
+                    {
+                      type: 3,
+                      value: 'one apple'
+                    }
+                  ],
+                  static: 'one apple'
+                },
+                {
+                  type: 2,
+                  items: [
+                    {
+                      type: 4,
+                      key: 'count'
+                    },
+                    {
+                      type: 3,
+                      value: ' apples'
+                    }
+                  ]
+                }
+              ]
+            }
+          }
         }
       }
     })

packages/vue-i18n-core/test/legacy.test.ts

@@ -141,7 +141,7 @@ test('formatFallbackMessages', () => {
 test('postTranslation', () => {
   const i18n = createVueI18n()
   expect(i18n.postTranslation).toEqual(null)
-  const postTranslation = (str: VueMessageType) =>
+  const postTranslation = <VueMessageType>(str: VueMessageType) =>
     shared.isString(str) ? str.trim() : str
   i18n.postTranslation = postTranslation
   expect(i18n.postTranslation).toEqual(postTranslation)
@@ -268,7 +268,7 @@ describe('rt', () => {
               'no apples',
               'one apple',
               `${ctx.named('count')} apples`
-            ])
+            ]) as string
         }
       }
     })