feat(intl-messageformat-parser): Allow - in embedded HTML tag

fix(intl-messageformat): Allow - in embedded HTML tag
fix #545

Author: Long Ho

packages/intl-messageformat-parser/src/parser.pegjs

@@ -65,7 +65,7 @@ poundElement = '#' {
 tagElement 'tagElement'
     = 
     // Special case for self-closing. We treat it as regular text
-    value:('<' _ argNameOrNumber _ '/>') { 
+    value:('<' validTag _ '/>') { 
         return {
             type: TYPE.literal,
             value: value.join(''),
@@ -84,11 +84,11 @@ tagElement 'tagElement'
         }
     }
 
-openingTag = '<' &{ messageCtx.push('openingTag'); return true; } tag:argNameOrNumber '>' &{ messageCtx.pop(); return true; } {
+openingTag = '<' &{ messageCtx.push('openingTag'); return true; } tag:validTag '>' &{ messageCtx.pop(); return true; } {
     return tag
 }
 
-closingTag = '</' &{ messageCtx.push('closingTag'); return true; } tag:argNameOrNumber '>' &{ messageCtx.pop(); return true; } {
+closingTag = '</' &{ messageCtx.push('closingTag'); return true; } tag:validTag '>' &{ messageCtx.pop(); return true; } {
     return tag
 }
 
@@ -284,8 +284,10 @@ escapedChar = $(x:. &{
 })
 
 argNameOrNumber 'argNameOrNumber' = $(argNumber / argName)
+validTag 'validTag' = $(argNumber / tagName)
 argNumber 'argNumber' = '0' { return 0 }
     / digits:([1-9][0-9]*) {
         return parseInt(digits.join(''), 10);
     }
-argName 'argName' = $((!(whiteSpace / patternSyntax) .)+)
+argName 'argName' = $((!(whiteSpace / patternSyntax).)+)
+tagName 'tagName' = $(('-' / (!(whiteSpace / patternSyntax).))+) 

packages/intl-messageformat-parser/test/__snapshots__/tag.test.ts.snap

@@ -101,6 +101,43 @@ Array [
 ]
 `;
 
+exports[`tag with dash 1`] = `
+Array [
+  Object {
+    "type": 0,
+    "value": "this is ",
+  },
+  Object {
+    "type": 0,
+    "value": "<br/>",
+  },
+  Object {
+    "type": 0,
+    "value": " ",
+  },
+  Object {
+    "children": Array [
+      Object {
+        "type": 0,
+        "value": "nested ",
+      },
+      Object {
+        "children": Array [
+          Object {
+            "type": 1,
+            "value": "placeholder",
+          },
+        ],
+        "type": 8,
+        "value": "b",
+      },
+    ],
+    "type": 8,
+    "value": "dash-tag",
+  },
+]
+`;
+
 exports[`tag with number arg 1`] = `
 Array [
   Object {

packages/intl-messageformat-parser/test/tag.test.ts

@@ -43,3 +43,9 @@ test('self-closing tag', function() {
     pegParse('this is <br/> <a>nested <b>{placeholder}</b></a>')
   ).toMatchSnapshot();
 });
+
+test('tag with dash', function() {
+  expect(
+    pegParse('this is <br/> <dash-tag>nested <b>{placeholder}</b></dash-tag>')
+  ).toMatchSnapshot();
+});

packages/intl-messageformat/README.md

@@ -187,16 +187,11 @@ new IntlMessageFormat(
   "raw '<b>HTML</b>' with '<a>'{placeholder}'</a>'"
 ).format({placeholder: 'some word'}); // "raw <b>HTML</b> with <a>some word</a>"
 ```
+5. Embedded valid HTML tag is a bit of a grey area right now since we're not supporting the full HTML/XHTML/XML spec.
 
 ### `getAst` Method
 
-Return the underlying AST for the compiled message
-
-#### Caveats
-
-- List of self-closing tags is defined [here](https://html.spec.whatwg.org/multipage/syntax.html#void-elements).
-
-If you don't have `DOMParser` available in your environment (e.g. Node.js), you need to add a polyfill. One of the packages that provides such a polyfill is [jsdom](https://www.npmjs.com/package/jsdom).
+Return the underlying AST for the compiled message.
 
 ### User Defined Formats