feat: enhance pseudo-locale handling

Author: septs

src/index.ts

@@ -1,35 +1,39 @@
 import { MessageFormatElement, parse, ParserOptions } from '@formatjs/icu-messageformat-parser'
-import { LoaderDefinition } from 'webpack'
 import { validate } from 'schema-utils'
+import { LoaderDefinition } from 'webpack'
 
 import { prehandle } from './prehandler'
-import { getPseudoLocale } from './pseudo-locale'
+import { getPseudoLocale, Handler } from './pseudo-locale'
 import { Options, ResourceQuery, schemaOptions, schemaResourceQuery } from './types'
 
 const loader: LoaderDefinition<Options> = function (source) {
   this.cacheable()
   const options = this.getOptions(schemaOptions)
-  const pseudoLocale = options.pseudoLocale ?? getResourceQuery(this).pseudoLocale
   const compiled = compile(prehandle(options.format ?? 'default', JSON.parse(source)), {
     ignoreTag: options.ignoreTag,
     requiresOtherClause: options.requiresOtherClause,
     shouldParseSkeletons: options.shouldParseSkeletons,
-    posthandler: typeof pseudoLocale === 'string' ? getPseudoLocale(pseudoLocale) : undefined,
+    handlers: [
+      // 1. Pseudo-locales
+      getPseudoLocale(options.pseudoLocale ?? getResourceQuery(this).pseudoLocale),
+    ],
   })
   return JSON.stringify(Object.fromEntries(compiled))
 }
 
 export default loader
 
 interface CompileOptions extends ParserOptions {
-  posthandler?(elements: MessageFormatElement[]): MessageFormatElement[]
+  readonly handlers: readonly (Handler | undefined)[]
 }
 
-function compile(messages: [string, string][], options: CompileOptions) {
-  type ParsedEntry = readonly [string, MessageFormatElement[]]
-  return messages.map(([key, message]): ParsedEntry => {
-    const parsed = parse(message, options)
-    return [key, options.posthandler?.(parsed) ?? parsed]
+function compile(messages: [string, string][], { handlers, ...options }: CompileOptions) {
+  return messages.map(([key, message]): [string, MessageFormatElement[]] => {
+    const elements = handlers.reduceRight<Iterable<MessageFormatElement>>(
+      (elements, handler) => handler?.(elements) ?? elements,
+      parse(message, options)
+    )
+    return [key, Array.from(elements)]
   })
 }
 

src/pseudo-locale/ast.ts

@@ -1,5 +1,7 @@
 import { createLiteralElement, isLiteralElement, MessageFormatElement } from '@formatjs/icu-messageformat-parser'
+
 import { Transformer } from './Transformer'
+import { Handler } from './types'
 
 export const ACCENTED_MAP = new Transformer(
   '\u0226\u0181\u0187\u1e12\u1e16\u0191\u0193\u0126\u012a\u0134\u0136\u013f\u1e3e\u0220\u01fe\u01a4\u024a\u0158\u015e\u0166\u016c\u1e7c\u1e86\u1e8a\u1e8e\u1e90',
@@ -13,32 +15,32 @@ export const FLIPPED_MAP = new Transformer(
   false
 )
 
-export function createEnglishTransformer(brackets: string, transformer: Transformer) {
+export function createEnglishTransformer(brackets: string, transformer: Transformer): Handler {
   const [leftBracket, rightBracket] = brackets
+  const handler = modifyLiteralElement(transformer.stringify)
   return function* (elements: Iterable<MessageFormatElement>) {
     yield createLiteralElement(leftBracket)
-    yield* modifyLiteralElement(elements, transformer.stringify)
+    yield* handler(elements)
     yield createLiteralElement(rightBracket)
   }
 }
 
-export function* modifyLiteralElement(
-  elements: Iterable<MessageFormatElement>,
-  modifier: (input: string) => string
-): Iterable<MessageFormatElement> {
-  for (const element of elements) {
-    if (isLiteralElement(element)) {
-      yield { ...element, value: modifier(element.value) }
-    } else if ('options' in element) {
-      const entries = Object.entries(element.options).map(([key, option]) => [
-        key,
-        { value: Array.from(modifyLiteralElement(option.value, modifier)) },
-      ])
-      yield { ...element, options: Object.fromEntries(entries) }
-    } else if ('children' in element) {
-      yield { ...element, children: Array.from(modifyLiteralElement(element.children, modifier)) }
-    } else {
-      yield element
+export function modifyLiteralElement(modifier: (input: string) => string): Handler {
+  return function* handler(elements): Iterable<MessageFormatElement> {
+    for (const element of elements) {
+      if (isLiteralElement(element)) {
+        yield { ...element, value: modifier(element.value) }
+      } else if ('options' in element) {
+        const entries = Object.entries(element.options).map(([key, option]) => [
+          key,
+          { value: Array.from(handler(option.value)) },
+        ])
+        yield { ...element, options: Object.fromEntries(entries) }
+      } else if ('children' in element) {
+        yield { ...element, children: Array.from(handler(element.children)) }
+      } else {
+        yield element
+      }
     }
   }
 }

src/pseudo-locale/index.ts

@@ -1,17 +1,14 @@
-import type { MessageFormatElement } from '@formatjs/icu-messageformat-parser'
 import { createLiteralElement } from '@formatjs/icu-messageformat-parser'
+
 import { ACCENTED_MAP, createEnglishTransformer, FLIPPED_MAP, modifyLiteralElement } from './ast'
+import { Handler } from './types'
+
+export { Handler }
 
-const locales: Record<string, (elements: Iterable<MessageFormatElement>) => Iterable<MessageFormatElement>> = {
-  *'xx-LS'(elements) {
-    yield* elements
-    yield createLiteralElement('S'.repeat(25))
-  },
-  'xx-AC': (elements) => modifyLiteralElement(elements, (value) => value.toUpperCase()),
-  *'xx-HA'(elements) {
-    yield createLiteralElement('[javascript]')
-    yield* elements
-  },
+const locales: Record<string, Handler> = {
+  'xx-LS': (elements) => [...elements, createLiteralElement('S'.repeat(25))],
+  'xx-AC': modifyLiteralElement((value) => value.toUpperCase()),
+  'xx-HA': (elements) => [createLiteralElement('[javascript]'), ...elements],
   'en-XA': createEnglishTransformer('\u005b\u005d', ACCENTED_MAP),
   'en-XB': createEnglishTransformer('\u202e\u202c', FLIPPED_MAP),
 }
@@ -20,7 +17,7 @@ export function getPseudoLocaleNames(): string[] {
   return Object.keys(locales)
 }
 
-export function getPseudoLocale(name: string): (elements: MessageFormatElement[]) => MessageFormatElement[] {
-  const handle = locales[name]
-  return (elements) => Array.from(handle(elements))
+export function getPseudoLocale(name: string | undefined): Handler | undefined {
+  if (name === undefined) return undefined
+  return locales[name]
 }

src/pseudo-locale/types.ts

@@ -0,0 +1,3 @@
+import type { MessageFormatElement } from '@formatjs/icu-messageformat-parser'
+
+export type Handler = (elements: Iterable<MessageFormatElement>) => Iterable<MessageFormatElement>

src/types.ts

@@ -1,4 +1,5 @@
 import type { Schema } from 'schema-utils'
+
 import { getFormats } from './prehandler'
 import { getPseudoLocaleNames } from './pseudo-locale'