fix: improvement processor for linked and pluralization (#1023)

* fix: improvement processor for linkd and pluralization

* updates

* revert

* fix for windows

* fix timezone setting failure

Author: kazupon

e2e/bridge/components/datetime-format.test.js

@@ -1,5 +1,6 @@
 describe(`bridge: datetime format component`, () => {
   beforeAll(async () => {
+    await page.emulateTimezone('UTC')
     await page.goto(
       `http://localhost:8080/examples/bridge/composition/components/datetime-format.html`
     )

e2e/components/datetime-format.test.js

@@ -1,6 +1,7 @@
 ;['composition', 'legacy'].forEach(pattern => {
   describe(`${pattern}`, () => {
     beforeAll(async () => {
+      await page.emulateTimezone('UTC')
       await page.goto(
         `http://localhost:8080/examples/${pattern}/components/datetime-format.html`
       )

e2e/datetime.test.js

@@ -1,6 +1,7 @@
 ;['composition', 'legacy'].forEach(pattern => {
   describe(`${pattern}`, () => {
     beforeAll(async () => {
+      await page.emulateTimezone('UTC')
       await page.goto(`http://localhost:8080/examples/${pattern}/datetime.html`)
     })
 

jest.e2e.config.js

@@ -135,7 +135,7 @@ module.exports = {
 
   // The test environment that will be used for testing
   // testEnvironment: 'node',
-  testEnvironment: './jest-e2e-environment.js',
+  // testEnvironment: './jest-e2e-environment.js',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

packages/core-base/src/context.ts

@@ -260,19 +260,37 @@ export const DEFAULT_LOCALE = 'en-US'
 
 export const MISSING_RESOLVE_VALUE = ''
 
+const capitalize = (str: string) =>
+  `${str.charAt(0).toLocaleUpperCase()}${str.substr(1)}`
+
 function getDefaultLinkedModifiers<
   Message = string
 >(): LinkedModifiers<Message> {
   return {
-    upper: (val: Message): MessageType<Message> =>
-      (isString(val) ? val.toUpperCase() : val) as MessageType<Message>,
-    lower: (val: Message): MessageType<Message> =>
-      (isString(val) ? val.toLowerCase() : val) as MessageType<Message>,
-    // prettier-ignore
-    capitalize: (val: Message): MessageType<Message> =>
-      (isString(val)
-        ? `${val.charAt(0).toLocaleUpperCase()}${val.substr(1)}`
-        : val) as MessageType<Message>
+    upper: (val: Message, type: string): MessageType<Message> => {
+      // prettier-ignore
+      return type === 'text' && isString(val)
+        ? val.toUpperCase()
+        : type === 'vnode' && isObject(val) && '__v_isVNode' in val
+        ? (val as any).children.toUpperCase()
+          : val
+    },
+    lower: (val: Message, type: string): MessageType<Message> => {
+      // prettier-ignore
+      return type === 'text' && isString(val)
+        ? val.toLowerCase()
+        : type === 'vnode' && isObject(val) && '__v_isVNode' in val
+          ? (val as any).children.toLowerCase()
+          : val
+    },
+    capitalize: (val: Message, type: string): MessageType<Message> => {
+      // prettier-ignore
+      return (type === 'text' && isString(val)
+        ? capitalize(val)
+        : type === 'vnode' && isObject(val) && '__v_isVNode' in val
+          ? capitalize( (val as any).children)
+          : val) as MessageType<Message>
+    }
   }
 }
 

packages/core-base/src/runtime.ts

@@ -4,6 +4,7 @@ import {
   toDisplayString,
   isObject,
   isString,
+  isArray,
   isPlainObject
 } from '@intlify/shared'
 import { HelperNameMap } from '@intlify/message-compiler'
@@ -73,7 +74,10 @@ export type PluralizationProps = {
   count?: number
 }
 
-export type LinkedModify<T = string> = (value: T) => MessageType<T>
+export type LinkedModify<T = string> = (
+  value: T,
+  type: string
+) => MessageType<T>
 /** @VueI18nGeneral */
 export type LinkedModifiers<T = string> = { [key: string]: LinkedModify<T> }
 
@@ -93,12 +97,19 @@ export interface MessageContextOptions<T = string, N = {}> {
   processor?: MessageProcessor<T>
 }
 
+export interface LinkedOptions {
+  type?: string
+  modifier?: string
+}
+
 // TODO: list and named type definition more improvements
 export interface MessageContext<T = string> {
   list(index: number): unknown
   named(key: string): unknown
   plural(messages: T[]): T
   linked(key: Path, modifier?: string): MessageType<T>
+  linked(key: Path, modifier?: string, type?: string): MessageType<T>
+  linked(key: Path, optoins?: LinkedOptions): MessageType<T>
   message(key: Path): MessageFunction<T>
   type: string
   interpolate: MessageInterpolate<T>
@@ -167,8 +178,9 @@ export function createMessageContext<T = string, N = {}>(
     isFunction(options.pluralRules[locale])
       ? pluralDefault
       : undefined
-  const plural = (messages: T[]): T =>
-    messages[pluralRule(pluralIndex, messages.length, orgPluralRule)]
+  const plural = (messages: T[]): T => {
+    return messages[pluralRule(pluralIndex, messages.length, orgPluralRule)]
+  }
 
   const _list = options.list || []
   const list = (index: number): unknown => _list[index]
@@ -208,16 +220,38 @@ export function createMessageContext<T = string, N = {}>(
       ? options.processor.interpolate
       : (DEFAULT_INTERPOLATE as unknown as MessageInterpolate<T>)
 
-  const linked = (key: Path, modifier?: string): MessageType<T> => {
-    const msg = message(key)(ctx)
-    return isString(modifier) ? _modifier(modifier)(msg as T) : msg
-  }
-
   const type =
     isPlainObject(options.processor) && isString(options.processor.type)
       ? options.processor.type
       : DEFAULT_MESSAGE_DATA_TYPE
 
+  const linked = (key: Path, ...args: unknown[]): MessageType<T> => {
+    const [arg1, arg2] = args
+    let type = 'text'
+    let modifier = ''
+    if (args.length === 1) {
+      if (isObject(arg1)) {
+        modifier = arg1.modifier || modifier
+        type = arg1.type || type
+      } else if (isString(arg1)) {
+        modifier = arg1 || modifier
+      }
+    } else if (args.length === 2) {
+      if (isString(arg1)) {
+        modifier = arg1 || modifier
+      }
+      if (isString(arg2)) {
+        type = arg2 || type
+      }
+    }
+    let msg = message(key)(ctx)
+    // The message in vnode resolved with linked are returned as an array by processor.nomalize
+    if (type === 'vnode' && isArray(msg) && modifier) {
+      msg = msg[0]
+    }
+    return modifier ? _modifier(modifier)(msg as T, type) : msg
+  }
+
   const ctx = {
     [HelperNameMap.LIST]: list,
     [HelperNameMap.NAMED]: named,

packages/core-base/test/helper.ts

@@ -0,0 +1,32 @@
+// eumlate VNode interface on intlify
+// ref: github.com/vuejs/core/blob/2f07e3460bf51bc1b083f3d03b3d192e042d2d75/packages/runtime-core/src/vnode.ts#L131-L217
+
+type VNodeChildAtom =
+  | VNode
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | void
+
+type VNodeArrayChildren = Array<VNodeArrayChildren | VNodeChildAtom>
+
+type VNodeNormalizedChildren =
+  | string
+  | VNodeArrayChildren
+  // | RawSlots
+  | null
+
+export interface VNode {
+  __v_isVNode: true
+  children: VNodeNormalizedChildren
+  [field: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export function createTextNode(key: string): VNode {
+  return {
+    __v_isVNode: true,
+    children: key
+  }
+}

packages/core-base/test/translate.test.ts

@@ -5,7 +5,7 @@ jest.mock('@intlify/shared', () => ({
   ...jest.requireActual<object>('@intlify/shared'),
   warn: jest.fn()
 }))
-import { warn } from '@intlify/shared'
+import { warn, isString, isNumber, isBoolean } from '@intlify/shared'
 
 import { createCoreContext as context, NOT_REOSLVED } from '../src/context'
 import { translate } from '../src/translate'
@@ -18,8 +18,12 @@ import {
 import { compileToFunction } from '../src/compile'
 import { fallbackWithLocaleChain } from '../src/fallbacker'
 import { resolveValue } from '../src/resolver'
+import { createTextNode } from './helper'
 
 import type { MessageContext } from '../src/runtime'
+import type { VNode } from './helper'
+import type { MessageType, MessageProcessor } from '../src/runtime'
+import type { PickupKeys } from '../src/types/utils'
 
 beforeEach(() => {
   registerMessageCompiler(compileToFunction)
@@ -810,4 +814,152 @@ test('fallback context', () => {
 
   expect(translate(ctx, 'hi')).toEqual('hi! hello man!')
 })
+
+describe('processor', () => {
+  // VNode processor
+  function normalize(
+    values: MessageType<string | VNode>[]
+  ): MessageType<VNode>[] {
+    return values.map(val =>
+      isString(val) || isNumber(val) || isBoolean(val)
+        ? createTextNode(String(val))
+        : val
+    )
+  }
+  const interpolate = (val: unknown): MessageType<VNode> => val as VNode
+  const processor = {
+    normalize,
+    interpolate,
+    type: 'vnode'
+  } as MessageProcessor<VNode>
+
+  test('basic', () => {
+    const ctx = context<VNode>({
+      locale: 'en',
+      messages: {
+        en: { hi: 'hi kazupon !' }
+      }
+    })
+    ctx.processor = processor
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'hi'
+      )
+    ).toEqual([{ __v_isVNode: true, children: 'hi kazupon !' }])
+  })
+
+  test('list', () => {
+    const ctx = context<VNode>({
+      locale: 'en',
+      messages: {
+        en: { hi: 'hi {0} !', nest: { foo: '' } }
+      }
+    })
+    ctx.processor = processor
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'hi',
+        ['kazupon']
+      )
+    ).toEqual([
+      { __v_isVNode: true, children: 'hi ' },
+      { __v_isVNode: true, children: 'kazupon' },
+      { __v_isVNode: true, children: ' !' }
+    ])
+  })
+
+  test('named', () => {
+    const ctx = context<VNode>({
+      locale: 'en',
+      messages: {
+        en: { hi: 'hi {name} !' }
+      }
+    })
+    ctx.processor = processor
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'hi',
+        { name: 'kazupon' }
+      )
+    ).toEqual([
+      { __v_isVNode: true, children: 'hi ' },
+      { __v_isVNode: true, children: 'kazupon' },
+      { __v_isVNode: true, children: ' !' }
+    ])
+  })
+
+  test('linked', () => {
+    const ctx = context<VNode>({
+      locale: 'en',
+      messages: {
+        en: {
+          name: 'kazupon',
+          hi: 'hi @.upper:name !'
+        }
+      }
+    })
+    ctx.processor = processor
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'hi'
+      )
+    ).toEqual([
+      { __v_isVNode: true, children: 'hi ' },
+      { __v_isVNode: true, children: 'KAZUPON' },
+      { __v_isVNode: true, children: ' !' }
+    ])
+  })
+
+  test('plural', () => {
+    const ctx = context<VNode>({
+      locale: 'en',
+      messages: {
+        en: { apple: 'no apples | one apple | {count} apples from {name}' }
+      }
+    })
+    ctx.processor = processor
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'apple',
+        0
+      )
+    ).toEqual([{ __v_isVNode: true, children: 'no apples' }])
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'apple',
+        1
+      )
+    ).toEqual([{ __v_isVNode: true, children: 'one apple' }])
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'apple',
+        10
+      )
+    ).toEqual([
+      { __v_isVNode: true, children: '10' },
+      { __v_isVNode: true, children: ' apples from ' },
+      undefined
+    ])
+    expect(
+      translate<typeof ctx, string, PickupKeys<typeof ctx.messages>, VNode>(
+        ctx,
+        'apple',
+        { count: 20, name: 'kazupon' },
+        10
+      )
+    ).toEqual([
+      { __v_isVNode: true, children: '20' },
+      { __v_isVNode: true, children: ' apples from ' },
+      { __v_isVNode: true, children: 'kazupon' }
+    ])
+  })
+})
+
 /* eslint-enable @typescript-eslint/no-empty-function, @typescript-eslint/no-explicit-any */

packages/message-compiler/src/generator.ts

@@ -150,6 +150,9 @@ function generateLinkedNode(generator: CodeGenerator, node: LinkedNode): void {
   if (node.modifier) {
     generator.push(`, `)
     generateNode(generator, node.modifier)
+    generator.push(`, _type`)
+  } else {
+    generator.push(`, undefined, _type`)
   }
   generator.push(`)`)
 }