feat(@formatjs/icu-messageformat-parser): throw err when trying to fl…

…atten a plural inside a tag
formatjs · Feb 20, 2023 · dbd5f8f · dbd5f8f
1 parent f55cd1d
commit dbd5f8f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 18 deletions.
diff --git a/packages/icu-messageformat-parser/manipulator.ts b/packages/icu-messageformat-parser/manipulator.ts
@@ -1,8 +1,11 @@
 import {
   isPluralElement,
   isSelectElement,
+  isTagElement,
   MessageFormatElement,
+  PluralElement,
   PluralOrSelectOption,
+  SelectElement,
 } from './types'
 
 function cloneDeep<T>(obj: T): T {
@@ -21,6 +24,49 @@ function cloneDeep<T>(obj: T): T {
   return obj
 }
 
+function hoistPluralOrSelectElement(
+  ast: MessageFormatElement[],
+  el: PluralElement | SelectElement,
+  positionToInject: number
+) {
+  // pull this out of the ast and move it to the top
+  const cloned = cloneDeep(el)
+  const {options} = cloned
+  cloned.options = Object.keys(options).reduce(
+    (all: Record<string, PluralOrSelectOption>, k) => {
+      const newValue = hoistSelectors([
+        ...ast.slice(0, positionToInject),
+        ...options[k].value,
+        ...ast.slice(positionToInject + 1),
+      ])
+      all[k] = {
+        value: newValue,
+      }
+      return all
+    },
+    {}
+  )
+  return cloned
+}
+
+function isPluralOrSelectElement(
+  el: MessageFormatElement
+): el is PluralElement | SelectElement {
+  return isPluralElement(el) || isSelectElement(el)
+}
+
+function findPluralOrSelectElement(ast: MessageFormatElement[]): boolean {
+  return !!ast.find(el => {
+    if (isPluralOrSelectElement(el)) {
+      return true
+    }
+    if (isTagElement(el)) {
+      return findPluralOrSelectElement(el.children)
+    }
+    return false
+  })
+}
+
 /**
  * Hoist all selectors to the beginning of the AST & flatten the
  * resulting options. E.g:
@@ -37,25 +83,13 @@ export function hoistSelectors(
 ): MessageFormatElement[] {
   for (let i = 0; i < ast.length; i++) {
     const el = ast[i]
-    if (isPluralElement(el) || isSelectElement(el)) {
-      // pull this out of the ast and move it to the top
-      const cloned = cloneDeep(el)
-      const {options} = cloned
-      cloned.options = Object.keys(options).reduce(
-        (all: Record<string, PluralOrSelectOption>, k) => {
-          const newValue = hoistSelectors([
-            ...ast.slice(0, i),
-            ...options[k].value,
-            ...ast.slice(i + 1),
-          ])
-          all[k] = {
-            value: newValue,
-          }
-          return all
-        },
-        {}
+    if (isPluralOrSelectElement(el)) {
+      return [hoistPluralOrSelectElement(ast, el, i)]
+    }
+    if (isTagElement(el) && findPluralOrSelectElement([el])) {
+      throw new Error(
+        'Cannot hoist plural/select within a tag element. Please put the tag element inside each plural/select option'
       )
-      return [cloned]
     }
   }
   return ast

diff --git a/packages/icu-messageformat-parser/tests/manipulator.test.ts b/packages/icu-messageformat-parser/tests/manipulator.test.ts
@@ -10,6 +10,13 @@ test('should hoist 1 plural', function () {
       )
     )
   ).toBe('{count,plural,one{I have a dog} other{I have many dogs}}')
+  expect(() =>
+    hoistSelectors(
+      parse('I have <b>{count, plural, one{a dog} other{many dogs}}</b>')
+    )
+  ).toThrowError(
+    'Cannot hoist plural/select within a tag element. Please put the tag element inside each plural/select option'
+  )
 })
 
 test('hoist some random case 1', function () {