@doist/react-interpolate 0.0.2 → 0.3.0

package/.eslintrc.js

@@ -3,7 +3,6 @@ const config = {
         "eslint:recommended",
         "plugin:react/recommended",
         "prettier",
-        "prettier/react",
         "plugin:compat/recommended"
     ],
     env: {
@@ -18,7 +17,7 @@ const config = {
         sourceType: "module"
     },
     plugins: ["react", "prettier", "react-hooks", "jest"],
-    parser: "babel-eslint",
+    parser: "@babel/eslint-parser",
     rules: {
         semi: ["error", "never"],
         "arrow-parens": ["error", "as-needed"],

package/.github/workflows/nodejs.yml

@@ -1,17 +1,9 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: CI
 
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
+on: [push, pull_request]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:

package/README.md

@@ -10,13 +10,15 @@ A string interpolation component that formats and interpolates a template string
 import Interpolate from "@doist/react-interpolate"
 
 function Greeting() {
-  return <Interpolate
-    string="<h1>Hello {name}. Here is <a>your order info</a></h1>"
-    mapping={
-      a={child => <a href="https://orderinfo.com">{child}</a>)
-      name="William"
-    }
-  />
+    return (
+        <Interpolate
+            string="<h1>Hello {name}. Here is <a>your order info</a></h1>"
+            mapping={{
+                name: "William",
+                a: <a href="https://orderinfo.com" />
+            }}
+        />
+    )
 }
 ```
 
@@ -39,20 +41,26 @@ Please see the [Interpolation syntax](./#interpolation-syntax) section below for
 #### `mapping` 
 An object that defines the values to be injected for placeholder and tags defined in the template string. Optional. 
 
-- You can map placeholder and self-closing tag to any [valid element value](https://reactjs.org/docs/react-api.html#isvalidelement)
-- For open & close tag, you need to supply a renderer function that defines how the the enclosed children should be rendered.
+- For placeholder or self-closing tag, the mapping value could be any valid element value
+- For open & close tag, the mapping value could be either renderer function or an element.
 
 ```jsx
 <Interpolate
-  string="Hello {name}. Here is <a>your order info</a><hr/>"
-  mapping={
-    // you can map placholder and self-closing tag to any valid element value
-    name="William" 
-    hr={<hr className="break"/>}
-
-    // mapping value for open & close tag must be a function
-    a={children => <a href="https://orderinfo.com">{children}</a>)
-  }
+    string="Hello {name}. Here is <orderLink>your order info</orderLink><hr/>.  \
+            Please contact <supportLink>support</supportLink> for help"
+    mapping={{
+        // you can map placholder and self-closing tag to any valid element value
+        name: "William",
+        hr: <hr className="break" />,
+
+        // you can map open & close tag to a rendering function
+        orderLink: text => (
+            <a href="https://orderinfo.com">{text}</a>
+        ),
+
+        // or you can map open & close tag to an element
+        supportLink: <a href="https://orderinfo.com" />
+    }}
 />
 ```
 
@@ -71,6 +79,10 @@ Optional. `true` by default.
 />
 ```
 
+#### `syntax` 
+
+Optional. `syntax` props allow use of react-Interpolate with different string formatting syntax. Please see the ["Custom syntax support"](#custom-syntax-support) section for more detail.
+
 
 ## Interpolation syntax
 
@@ -96,17 +108,51 @@ Placeholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be
 "Here is <a><b>you order info {name}</b></a>"
 ```
 
-Tag name should be alphanumeric (`[A-Za-z0-9_]`). Open & close tag could only be mapped to a renderer function.
+Tag name should be alphanumeric (`[A-Za-z0-9_]`). 
+
+Open & close tag could be mapped to an element value. 
+
+```jsx
+<Interpolate
+    string="Here is <a>your order info</a>"
+    mapping={{
+        a: <a href="https://orderinfo.com" />
+    }}
+/>
+
+
+// Invalid; the mapping value element should not contain children
+<Interpolate
+    string="Here is <a>your order info</a>"
+    mapping={{
+        a: (
+            <a href="https://orderinfo.com">
+                <b />
+                <br />
+            </a>
+        )
+    }}
+/>
+```
+
+Open & close tag could be mapped to a rendering function, which would take a single argument that contains the enclosing text. 
 
 ```jsx
 <Interpolate
-  string="Here is <a>your order info</a>"
-  mapping={
-    a={children => <a href="https://orderinfo.com">{children}</a>)
-  }
+    string="Here is <a>your order info</a>"
+    mapping={{
+        a: text => (
+            <a href="https://orderinfo.com">
+                <b>{text}</b>
+                <br />
+            </a>
+        )
+    }}
 />
 ```
 
+
+
 Unclosed tag or incorrect nesting of tag would result in syntax error.
 
 ```js
@@ -134,3 +180,48 @@ When tags are used the string but there are no correponding mapped value, it wou
 // would render: <h1>Hellow</h1><br/>World
 <Interpolate string="<h1>Hello</h1><br/>world"/>
 ```
+
+
+
+## Custom syntax support
+
+You may already be using a formatting syntax in your string that is different than the built-in syntax support from Interpolate. You can configure Interpolate so that it could recognize the formatting syntax that you use.
+
+For instance, you may be using [i18next](https://www.i18next.com/) which has a slightly different placeholder syntax.
+```
+hello {{name}}
+```
+
+You can define the formatting syntax of your string via  `syntax` props. 
+
+```jsx
+import Interpolate, { TOKEN_PLACEHOLDER } from "react-interpolate"
+
+const i18nNextSyntax = [
+    {
+        type: TOKEN_PLACEHOLDER,
+        regex: /{{\s*(\w+)\s*}}/g
+    }
+]
+
+// will output "hi steven"
+<Interpolate
+    syntax={i18nNextSyntax}
+    string="hi {{name}}"
+    mapping={{
+        name: "steven"
+    }}
+/>
+```
+
+react-interpolate comes with i18next syntax support, and you can enable it via
+
+```jsx
+import { SYNTAX_I18NEXT } from "react-interpolate"
+
+<Interpolate
+  syntax={SYNTAX_I18NEXT}
+  ...
+/>
+```
+

package/__test__/Interpolate.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import React from "react"
 import { render } from "@testing-library/react"
-import Interpolate from "../src/interpolate"
+import Interpolate, { SYNTAX_I18NEXT } from "../src"
 
 Interpolate.defaultProps = {
     graceful: false
@@ -19,10 +19,8 @@ const surpressConsole = () => {
 
 describe("Interpolate", () => {
     function renderTest({ expected, ...props }) {
-        return () => {
-            const { container } = render(<Interpolate {...props} />)
-            expect(container.innerHTML).toEqual(expected)
-        }
+        const { container } = render(<Interpolate {...props} />)
+        expect(container.innerHTML).toEqual(expected)
     }
 
     test("when no mapping is provide", () => {
@@ -36,8 +34,7 @@ describe("Interpolate", () => {
         restore()
     })
 
-    test(
-        "tag mapping",
+    test("tag mapping", () =>
         renderTest({
             string: "<h1>hello <b>steven</b></h1>. welcome to todoist",
             mapping: {
@@ -45,11 +42,19 @@ describe("Interpolate", () => {
                 h1: child => <h2>{child}</h2>
             },
             expected: "<h2>hello <i>steven</i></h2>. welcome to todoist"
-        })
-    )
+        }))
 
-    test(
-        "placholder mapping",
+    test("tag mapping: should accept element directly", () =>
+        renderTest({
+            string: "<h1>hello <b>steven</b></h1>. welcome to todoist",
+            mapping: {
+                b: <i />,
+                h1: <h2 />
+            },
+            expected: "<h2>hello <i>steven</i></h2>. welcome to todoist"
+        }))
+
+    test("placholder mapping", () =>
         renderTest({
             string: "{greeting} <b>{name}</b>. welcome to todoist",
             mapping: {
@@ -57,22 +62,18 @@ describe("Interpolate", () => {
                 name: () => <i>steven</i>
             },
             expected: "hi <b><i>steven</i></b>. welcome to todoist"
-        })
-    )
+        }))
 
-    test(
-        "void tag mapping",
+    test("void tag mapping", () =>
         renderTest({
             string: "hello <br/>",
             mapping: {
                 br: <hr />
             },
             expected: "hello <hr>"
-        })
-    )
+        }))
 
-    test(
-        "combination of mapping",
+    test("combination of mapping", () =>
         renderTest({
             string: "<h1>hello <b>{name}</b></h1>.<br/> welcome to todoist",
             mapping: {
@@ -82,8 +83,7 @@ describe("Interpolate", () => {
                 br: <hr />
             },
             expected: "<h2>hello <i>steven</i></h2>.<hr> welcome to todoist"
-        })
-    )
+        }))
 
     test("combination of mapping with function component", () => {
         // eslint-disable-next-line
@@ -104,8 +104,7 @@ describe("Interpolate", () => {
         })
     })
 
-    test(
-        "spacing in the void tag and placeholder should be allowed",
+    test("spacing in the void tag and placeholder should be allowed", () =>
         renderTest({
             string: "hello { name }<br /> welcome to todoist",
             mapping: {
@@ -113,8 +112,7 @@ describe("Interpolate", () => {
                 br: <hr />
             },
             expected: "hello steven<hr> welcome to todoist"
-        })
-    )
+        }))
 
     test("the mapping value should be interpolate corrected with proper html escape", () => {
         renderTest({
@@ -125,7 +123,7 @@ describe("Interpolate", () => {
             },
             expected:
                 "hello &lt;script&gt;window.xss = 1&lt;/script&gt;&lt;script&gt;window.xss = 1&lt;/script&gt; welcome to todoist"
-        })()
+        })
 
         expect(window.css).toBeUndefined()
     })
@@ -137,13 +135,28 @@ describe("Interpolate", () => {
             string: "</h1>",
             expected: "&lt;/h1&gt;",
             graceful: true
-        })()
+        })
 
         restore()
     })
+
+    test("using SYNTAX_I18NEXT", () => {
+        renderTest({
+            syntax: SYNTAX_I18NEXT,
+            string: "<0>hello <b>{{name}}</b></0>.<br/> welcome to todoist",
+            mapping: {
+                0: child => <h2 className="subheader">{child}</h2>,
+                b: child => <i>{child}</i>,
+                name: "steven",
+                br: <hr />
+            },
+            expected:
+                '<h2 class="subheader">hello <i>steven</i></h2>.<hr> welcome to todoist'
+        })
+    })
 })
 
-describe("Interpolate: error", () => {
+describe("Interpolate: error cases", () => {
     let restore
     beforeAll(() => {
         restore = surpressConsole()
@@ -152,19 +165,39 @@ describe("Interpolate: error", () => {
         restore()
     })
 
-    function renderTest({ props }) {
+    function renderTest({ expectedError, ...props }) {
         return () => {
-            expect(() => render(<Interpolate {...props} />)).toThrow()
+            expect(() => render(<Interpolate {...props} />)).toThrow(
+                expectedError
+            )
         }
     }
 
-    test("non-closing tag", renderTest({ string: "<b>" }))
+    test(
+        "non-closing tag",
+        renderTest({
+            string: "<b>",
+            expectedError:
+                "Syntax error. Please check if each open tag is closed correctly"
+        })
+    )
 
     test(
         "mapping value for tag should always be a function",
         renderTest({
             string: "<h1>hello</h1>. welcome to todoist",
-            mapping: { h1: "hi" }
+            mapping: { h1: "hi" },
+            expectedError: "Invalid mapping value for"
+        })
+    )
+
+    test(
+        "when passing element as value but the element contains children, error should be thrown",
+        renderTest({
+            string: "<h1>hello</h1>. welcome to todoist",
+            mapping: { h1: <h1>hi</h1> },
+            expectedError:
+                "when passing an element as value, the element should not contains children"
         })
     )
 })

package/__test__/parser.test.js

@@ -37,7 +37,9 @@ describe("parser: error handling", () => {
         test(`invalid syntax: ${string}`, () => {
             expect(() => {
                 parser(string)
-            }).toThrow()
+            }).toThrow(
+                "Syntax error. Please check if each open tag is closed correctly"
+            )
         })
     })
 })

package/dist/react-interpolate.cjs

@@ -1,13 +1,20 @@
 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
-var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
-var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
+var React = require('react');
+var PropTypes = require('prop-types');
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
+var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
 var TOKEN_PLACEHOLDER = "TOKEN_PLACEHOLDER";
 var TOKEN_OPEN_TAG = "TOKEN_OPEN_TAG";
@@ -20,13 +27,15 @@ var NODE_VOID_ELEMENT = "NODE_VOID_ELEMENT";
 var NODE_PLACEHOLDER = "NODE_PLACEHOLDER";
 var NODE_TEXT = "NODE_TEXT";
 
+var _excluded = ["type", "children"];
+
 var Node = /*#__PURE__*/function () {
   function Node(_ref) {
     var type = _ref.type,
         children = _ref.children,
-        fields = _objectWithoutProperties(_ref, ["type", "children"]);
+        fields = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-    _classCallCheck(this, Node);
+    _classCallCheck__default["default"](this, Node);
 
     this.type = type;
     this.children = children || [];
@@ -40,7 +49,7 @@ var Node = /*#__PURE__*/function () {
     }
   }
 
-  _createClass(Node, [{
+  _createClass__default["default"](Node, [{
     key: "appendChild",
     value: function appendChild(child) {
       this.children.push(child);
@@ -95,29 +104,69 @@ Node.createPlaceholderNode = function (token) {
   });
 };
 
+var SYNTAX_BUILT_IN = [{
+  type: TOKEN_PLACEHOLDER,
+  regex: /{\s*(\w+)\s*}/g
+}, {
+  type: TOKEN_OPEN_TAG,
+  regex: /<(\w+)>/g
+}, {
+  type: TOKEN_CLOSE_TAG,
+  regex: /<\/(\w+)>/g
+}, {
+  type: TOKEN_SELF_TAG,
+  regex: /<(\w+)\s*\/>/g
+}];
+var SYNTAX_I18NEXT = [{
+  type: TOKEN_PLACEHOLDER,
+  regex: /{{\s*(\w+)\s*}}/g
+}, {
+  type: TOKEN_OPEN_TAG,
+  regex: /<(\w+)>/g
+}, {
+  type: TOKEN_CLOSE_TAG,
+  regex: /<\/(\w+)>/g
+}, {
+  type: TOKEN_SELF_TAG,
+  regex: /<(\w+)\s*\/>/g
+}];
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 /*
  * return a array of token object
  */
 
-function lexer(string) {
-  var _regxMap;
-
-  var regxMap = (_regxMap = {}, _defineProperty(_regxMap, TOKEN_PLACEHOLDER, /{\s*(\w+)\s*}/g), _defineProperty(_regxMap, TOKEN_OPEN_TAG, /<(\w+)>/g), _defineProperty(_regxMap, TOKEN_CLOSE_TAG, /<\/(\w+)>/g), _defineProperty(_regxMap, TOKEN_SELF_TAG, /<(\w+)\s*\/>/g), _regxMap);
+function lexer(string, syntax) {
   var matches = [];
 
-  for (var tokenType in regxMap) {
-    var regx = regxMap[tokenType];
-    var res;
-
-    while ((res = regx.exec(string)) !== null) {
-      matches.push({
-        type: tokenType,
-        string: res[0],
-        name: res[1],
-        start: res.index,
-        end: res.index + res[0].length
-      });
+  var _iterator = _createForOfIteratorHelper(syntax),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var rule = _step.value;
+      var type = rule.type,
+          regex = rule.regex;
+      var res;
+
+      while ((res = regex.exec(string)) !== null) {
+        matches.push({
+          type: type,
+          string: res[0],
+          name: res[1],
+          start: res.index,
+          end: res.index + res[0].length
+        });
+      }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
 
   matches.sort(function (a, b) {
@@ -159,12 +208,16 @@ function lexer(string) {
   return tokens;
 }
 
-function parser(string) {
-  var tokens = lexer(string);
+function parser(string, syntax) {
+  if (!syntax) {
+    syntax = SYNTAX_BUILT_IN;
+  }
+
+  var tokens = lexer(string, syntax);
   var p = new Parser(tokens);
   return p.parse();
 }
-var SYNTAX_ERROR = "syntax error"; // A special token representing end of the tream
+var SYNTAX_ERROR = "Syntax error. Please check if each open tag is closed correctly"; // A special token representing end of the tream
 
 var EPSILON = {
   type: "EPSILON"
@@ -198,13 +251,13 @@ var EPSILON = {
 
 var Parser = /*#__PURE__*/function () {
   function Parser(tokens) {
-    _classCallCheck(this, Parser);
+    _classCallCheck__default["default"](this, Parser);
 
     this.tokens = [].concat(tokens);
     this.tags = [];
   }
 
-  _createClass(Parser, [{
+  _createClass__default["default"](Parser, [{
     key: "parse",
     value: function parse() {
       var tree = this.document();
@@ -304,6 +357,11 @@ var Parser = /*#__PURE__*/function () {
 
       this.match(TOKEN_CLOSE_TAG);
     }
+  }, {
+    key: "lookahead",
+    get: function get() {
+      return this.tokens.length === 0 ? EPSILON : this.tokens[0];
+    }
   }, {
     key: "predict",
     value: function predict() {
@@ -328,11 +386,6 @@ var Parser = /*#__PURE__*/function () {
     value: function pushTag(token) {
       this.tags.push(token);
     }
-  }, {
-    key: "lookahead",
-    get: function get() {
-      return this.tokens.length === 0 ? EPSILON : this.tokens[0];
-    }
   }]);
 
   return Parser;
@@ -340,7 +393,7 @@ var Parser = /*#__PURE__*/function () {
 
 var createElement = function createElement(node, mapping, keyPrefix) {
   var children = node.children.map(function (c, i) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: keyPrefix + i
     }, createElement(c, mapping, keyPrefix));
   });
@@ -353,7 +406,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
 
     case NODE_FRAGMENT:
       {
-        return React.createElement(React.Fragment, null, children);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children);
       }
 
     case NODE_VOID_ELEMENT:
@@ -364,22 +417,32 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return val();
         }
 
-        return val || React.createElement(node.name, null);
+        return val || /*#__PURE__*/React__default["default"].createElement(node.name, null);
       }
 
     case NODE_TAG_ELEMENT:
       {
         var _val = mapping[node.name];
 
+        if (_val === undefined) {
+          return /*#__PURE__*/React__default["default"].createElement(node.name, null, children);
+        }
+
         if (typeof _val === "function") {
           return _val(children);
         }
 
-        if (_val !== undefined) {
-          throw new Error("tag \"".concat(node.name, "\" should be mapped to a renderer function"));
+        if ( /*#__PURE__*/React__default["default"].isValidElement(_val)) {
+          if (React__default["default"].Children.count(_val.props.children) !== 0) {
+            throw new Error("when passing an element as value, the element should not contains children");
+          }
+
+          return /*#__PURE__*/React__default["default"].cloneElement(_val, {
+            children: children
+          });
         }
 
-        return React.createElement(node.name, null, children);
+        throw new Error("Invalid mapping value for \"".concat(node.name, "\". Only element or render function are accepted"));
       }
 
     case NODE_PLACEHOLDER:
@@ -405,13 +468,14 @@ var createElement = function createElement(node, mapping, keyPrefix) {
 
 function Interpolate(_ref) {
   var string = _ref.string,
+      syntax = _ref.syntax,
       _ref$mapping = _ref.mapping,
       mapping = _ref$mapping === void 0 ? {} : _ref$mapping,
       _ref$graceful = _ref.graceful,
       graceful = _ref$graceful === void 0 ? true : _ref$graceful;
 
   try {
-    var tree = parser(string);
+    var tree = parser(string, syntax);
     return createElement(tree, mapping, string);
   } catch (e) {
     if (graceful) {
@@ -423,9 +487,15 @@ function Interpolate(_ref) {
   }
 }
 Interpolate.propTypes = {
-  string: PropTypes.string.isRequired,
-  mapping: PropTypes.object,
-  graceful: PropTypes.bool
+  string: PropTypes__default["default"].string.isRequired,
+  mapping: PropTypes__default["default"].object,
+  graceful: PropTypes__default["default"].bool
 };
 
-module.exports = Interpolate;
+exports.SYNTAX_BUILT_IN = SYNTAX_BUILT_IN;
+exports.SYNTAX_I18NEXT = SYNTAX_I18NEXT;
+exports.TOKEN_CLOSE_TAG = TOKEN_CLOSE_TAG;
+exports.TOKEN_OPEN_TAG = TOKEN_OPEN_TAG;
+exports.TOKEN_PLACEHOLDER = TOKEN_PLACEHOLDER;
+exports.TOKEN_SELF_TAG = TOKEN_SELF_TAG;
+exports["default"] = Interpolate;

package/dist/react-interpolate.min.cjs

@@ -1 +1 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),_classCallCheck=_interopDefault(require("@babel/runtime/helpers/classCallCheck")),_createClass=_interopDefault(require("@babel/runtime/helpers/createClass")),_objectWithoutProperties=_interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")),_defineProperty=_interopDefault(require("@babel/runtime/helpers/defineProperty")),TOKEN_PLACEHOLDER="TOKEN_PLACEHOLDER",TOKEN_OPEN_TAG="TOKEN_OPEN_TAG",TOKEN_CLOSE_TAG="TOKEN_CLOSE_TAG",TOKEN_SELF_TAG="TOKEN_SELF_TAG",TOKEN_TEXT="TOKEN_TEXT",NODE_FRAGMENT="NODE_FRAGMENT",NODE_TAG_ELEMENT="NODE_TAG_ELEMENT",NODE_VOID_ELEMENT="NODE_VOID_ELEMENT",NODE_PLACEHOLDER="NODE_PLACEHOLDER",NODE_TEXT="NODE_TEXT",Node=function(){function e(t){var r=t.type,n=t.children,a=_objectWithoutProperties(t,["type","children"]);for(var o in _classCallCheck(this,e),this.type=r,this.children=n||[],a)this[o]=a[o];a.token&&(this.string=a.token.string)}return _createClass(e,[{key:"appendChild",value:function(e){this.children.push(e)}},{key:"isLeaf",get:function(){return 0===this.children.length}}]),e}();function lexer(e){var t,r=(_defineProperty(t={},TOKEN_PLACEHOLDER,/{\s*(\w+)\s*}/g),_defineProperty(t,TOKEN_OPEN_TAG,/<(\w+)>/g),_defineProperty(t,TOKEN_CLOSE_TAG,/<\/(\w+)>/g),_defineProperty(t,TOKEN_SELF_TAG,/<(\w+)\s*\/>/g),t),n=[];for(var a in r)for(var o,i=r[a];null!==(o=i.exec(e));)n.push({type:a,string:o[0],name:o[1],start:o.index,end:o.index+o[0].length});n.sort(function(e,t){return e.start-t.start});var E=[],s=0;n.forEach(function(t){if(t.start!==s){var r=t.start,n=e.substring(s,r);E.push({type:TOKEN_TEXT,string:n,text:n,start:s,end:r}),s=t.end}else s=t.end});var c=e.substring(s);return""!==c&&E.push({type:TOKEN_TEXT,string:c,start:s,end:e.length}),[].concat(E,n).sort(function(e,t){return e.start-t.start})}function parser(e){var t=lexer(e);return new Parser(t).parse()}Node.createTagNode=function(e,t){return new Node({type:NODE_TAG_ELEMENT,children:t,name:e.name,token:e})},Node.createFragmentNode=function(e){return new Node({type:NODE_FRAGMENT,children:e})},Node.createVoidNode=function(e){return new Node({type:NODE_VOID_ELEMENT,name:e.name,token:e})},Node.createTextNode=function(e){return new Node({type:NODE_TEXT,text:e.string,token:e})},Node.createPlaceholderNode=function(e){return new Node({type:NODE_PLACEHOLDER,name:e.name,token:e})};var SYNTAX_ERROR="syntax error",EPSILON={type:"EPSILON"},Parser=function(){function e(t){_classCallCheck(this,e),this.tokens=[].concat(t),this.tags=[]}return _createClass(e,[{key:"parse",value:function(){var e=this.document();if(!this.predict(EPSILON.type))throw new Error(SYNTAX_ERROR);return e}},{key:"document",value:function(){var e=this.elementOrData();return Node.createFragmentNode(e)}},{key:"element",value:function(){var e=this.openTag(),t=this.elementOrData();return this.endTag(),Node.createTagNode(e,t)}},{key:"openTag",value:function(){if(!this.predict(TOKEN_OPEN_TAG))throw new Error(SYNTAX_ERROR);return this.pushTag(this.lookahead),this.match(TOKEN_OPEN_TAG)}},{key:"elementOrData",value:function(){var e=[];if(this.predict(TOKEN_OPEN_TAG)&&(e.push(this.element()),e=e.concat(this.elementOrData())),this.predict(TOKEN_SELF_TAG,TOKEN_TEXT,TOKEN_PLACEHOLDER)){var t,r=this.match(this.lookahead.type);switch(r.type){case TOKEN_SELF_TAG:t=Node.createVoidNode(r);break;case TOKEN_TEXT:t=Node.createTextNode(r);break;case TOKEN_PLACEHOLDER:t=Node.createPlaceholderNode(r)}e.push(t),e=e.concat(this.elementOrData())}return e}},{key:"endTag",value:function(){if(!this.predict(TOKEN_CLOSE_TAG))throw new Error(SYNTAX_ERROR);if(this.tags.pop().name!==this.lookahead.name)throw new Error(SYNTAX_ERROR);this.match(TOKEN_CLOSE_TAG)}},{key:"predict",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.includes(this.lookahead.type)}},{key:"match",value:function(e){if(!this.predict(e))throw new Error(SYNTAX_ERROR);return this.tokens.shift()}},{key:"pushTag",value:function(e){this.tags.push(e)}},{key:"lookahead",get:function(){return 0===this.tokens.length?EPSILON:this.tokens[0]}}]),e}(),createElement=function e(t,r,n){var a=t.children.map(function(t,a){return React.createElement(React.Fragment,{key:n+a},e(t,r,n))});switch(t.type){case NODE_TEXT:return t.text;case NODE_FRAGMENT:return React.createElement(React.Fragment,null,a);case NODE_VOID_ELEMENT:var o=r[t.name];return"function"==typeof o?o():o||React.createElement(t.name,null);case NODE_TAG_ELEMENT:var i=r[t.name];if("function"==typeof i)return i(a);if(void 0!==i)throw new Error('tag "'.concat(t.name,'" should be mapped to a renderer function'));return React.createElement(t.name,null,a);case NODE_PLACEHOLDER:var E=r[t.name];return void 0===E?(console.warn('missing "'.concat(t.name,'" in mapping')),t.string):"function"==typeof E?E():E;default:return}};function Interpolate(e){var t=e.string,r=e.mapping,n=void 0===r?{}:r,a=e.graceful,o=void 0===a||a;try{var i=parser(t);return createElement(i,n,t)}catch(e){if(o)return console.error(e),t;throw e}}Interpolate.propTypes={string:PropTypes.string.isRequired,mapping:PropTypes.object,graceful:PropTypes.bool},module.exports=Interpolate;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),PropTypes=require("prop-types"),_classCallCheck=require("@babel/runtime/helpers/classCallCheck"),_createClass=require("@babel/runtime/helpers/createClass"),_objectWithoutProperties=require("@babel/runtime/helpers/objectWithoutProperties");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultLegacy(React),PropTypes__default=_interopDefaultLegacy(PropTypes),_classCallCheck__default=_interopDefaultLegacy(_classCallCheck),_createClass__default=_interopDefaultLegacy(_createClass),_objectWithoutProperties__default=_interopDefaultLegacy(_objectWithoutProperties),TOKEN_PLACEHOLDER="TOKEN_PLACEHOLDER",TOKEN_OPEN_TAG="TOKEN_OPEN_TAG",TOKEN_CLOSE_TAG="TOKEN_CLOSE_TAG",TOKEN_SELF_TAG="TOKEN_SELF_TAG",TOKEN_TEXT="TOKEN_TEXT",NODE_FRAGMENT="NODE_FRAGMENT",NODE_TAG_ELEMENT="NODE_TAG_ELEMENT",NODE_VOID_ELEMENT="NODE_VOID_ELEMENT",NODE_PLACEHOLDER="NODE_PLACEHOLDER",NODE_TEXT="NODE_TEXT",_excluded=["type","children"],Node=function(){function e(t){var r=t.type,n=t.children,a=_objectWithoutProperties__default.default(t,_excluded);for(var o in _classCallCheck__default.default(this,e),this.type=r,this.children=n||[],a)this[o]=a[o];a.token&&(this.string=a.token.string)}return _createClass__default.default(e,[{key:"appendChild",value:function(e){this.children.push(e)}},{key:"isLeaf",get:function(){return 0===this.children.length}}]),e}();Node.createTagNode=function(e,t){return new Node({type:NODE_TAG_ELEMENT,children:t,name:e.name,token:e})},Node.createFragmentNode=function(e){return new Node({type:NODE_FRAGMENT,children:e})},Node.createVoidNode=function(e){return new Node({type:NODE_VOID_ELEMENT,name:e.name,token:e})},Node.createTextNode=function(e){return new Node({type:NODE_TEXT,text:e.string,token:e})},Node.createPlaceholderNode=function(e){return new Node({type:NODE_PLACEHOLDER,name:e.name,token:e})};var SYNTAX_BUILT_IN=[{type:TOKEN_PLACEHOLDER,regex:/{\s*(\w+)\s*}/g},{type:TOKEN_OPEN_TAG,regex:/<(\w+)>/g},{type:TOKEN_CLOSE_TAG,regex:/<\/(\w+)>/g},{type:TOKEN_SELF_TAG,regex:/<(\w+)\s*\/>/g}],SYNTAX_I18NEXT=[{type:TOKEN_PLACEHOLDER,regex:/{{\s*(\w+)\s*}}/g},{type:TOKEN_OPEN_TAG,regex:/<(\w+)>/g},{type:TOKEN_CLOSE_TAG,regex:/<\/(\w+)>/g},{type:TOKEN_SELF_TAG,regex:/<(\w+)\s*\/>/g}];function _createForOfIteratorHelper(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,a=function(){};return{s:a,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){u=!0,o=e},f:function(){try{i||null==r.return||r.return()}finally{if(u)throw o}}}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function lexer(e,t){var r,n=[],a=_createForOfIteratorHelper(t);try{for(a.s();!(r=a.n()).done;)for(var o,i=r.value,u=i.type,l=i.regex;null!==(o=l.exec(e));)n.push({type:u,string:o[0],name:o[1],start:o.index,end:o.index+o[0].length})}catch(e){a.e(e)}finally{a.f()}n.sort(function(e,t){return e.start-t.start});var c=[],s=0;n.forEach(function(t){if(t.start!==s){var r=t.start,n=e.substring(s,r);c.push({type:TOKEN_TEXT,string:n,text:n,start:s,end:r}),s=t.end}else s=t.end});var _=e.substring(s);return""!==_&&c.push({type:TOKEN_TEXT,string:_,start:s,end:e.length}),[].concat(c,n).sort(function(e,t){return e.start-t.start})}function parser(e,t){t||(t=SYNTAX_BUILT_IN);var r=lexer(e,t);return new Parser(r).parse()}var SYNTAX_ERROR="Syntax error. Please check if each open tag is closed correctly",EPSILON={type:"EPSILON"},Parser=function(){function e(t){_classCallCheck__default.default(this,e),this.tokens=[].concat(t),this.tags=[]}return _createClass__default.default(e,[{key:"parse",value:function(){var e=this.document();if(!this.predict(EPSILON.type))throw new Error(SYNTAX_ERROR);return e}},{key:"document",value:function(){var e=this.elementOrData();return Node.createFragmentNode(e)}},{key:"element",value:function(){var e=this.openTag(),t=this.elementOrData();return this.endTag(),Node.createTagNode(e,t)}},{key:"openTag",value:function(){if(!this.predict(TOKEN_OPEN_TAG))throw new Error(SYNTAX_ERROR);return this.pushTag(this.lookahead),this.match(TOKEN_OPEN_TAG)}},{key:"elementOrData",value:function(){var e=[];if(this.predict(TOKEN_OPEN_TAG)&&(e.push(this.element()),e=e.concat(this.elementOrData())),this.predict(TOKEN_SELF_TAG,TOKEN_TEXT,TOKEN_PLACEHOLDER)){var t,r=this.match(this.lookahead.type);switch(r.type){case TOKEN_SELF_TAG:t=Node.createVoidNode(r);break;case TOKEN_TEXT:t=Node.createTextNode(r);break;case TOKEN_PLACEHOLDER:t=Node.createPlaceholderNode(r)}e.push(t),e=e.concat(this.elementOrData())}return e}},{key:"endTag",value:function(){if(!this.predict(TOKEN_CLOSE_TAG))throw new Error(SYNTAX_ERROR);if(this.tags.pop().name!==this.lookahead.name)throw new Error(SYNTAX_ERROR);this.match(TOKEN_CLOSE_TAG)}},{key:"lookahead",get:function(){return 0===this.tokens.length?EPSILON:this.tokens[0]}},{key:"predict",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.includes(this.lookahead.type)}},{key:"match",value:function(e){if(!this.predict(e))throw new Error(SYNTAX_ERROR);return this.tokens.shift()}},{key:"pushTag",value:function(e){this.tags.push(e)}}]),e}(),createElement=function e(t,r,n){var a=t.children.map(function(t,a){return React__default.default.createElement(React__default.default.Fragment,{key:n+a},e(t,r,n))});switch(t.type){case NODE_TEXT:return t.text;case NODE_FRAGMENT:return React__default.default.createElement(React__default.default.Fragment,null,a);case NODE_VOID_ELEMENT:var o=r[t.name];return"function"==typeof o?o():o||React__default.default.createElement(t.name,null);case NODE_TAG_ELEMENT:var i=r[t.name];if(void 0===i)return React__default.default.createElement(t.name,null,a);if("function"==typeof i)return i(a);if(React__default.default.isValidElement(i)){if(0!==React__default.default.Children.count(i.props.children))throw new Error("when passing an element as value, the element should not contains children");return React__default.default.cloneElement(i,{children:a})}throw new Error('Invalid mapping value for "'.concat(t.name,'". Only element or render function are accepted'));case NODE_PLACEHOLDER:var u=r[t.name];return void 0===u?(console.warn('missing "'.concat(t.name,'" in mapping')),t.string):"function"==typeof u?u():u;default:return}};function Interpolate(e){var t=e.string,r=e.syntax,n=e.mapping,a=void 0===n?{}:n,o=e.graceful,i=void 0===o||o;try{var u=parser(t,r);return createElement(u,a,t)}catch(e){if(i)return console.error(e),t;throw e}}Interpolate.propTypes={string:PropTypes__default.default.string.isRequired,mapping:PropTypes__default.default.object,graceful:PropTypes__default.default.bool},exports.SYNTAX_BUILT_IN=SYNTAX_BUILT_IN,exports.SYNTAX_I18NEXT=SYNTAX_I18NEXT,exports.TOKEN_CLOSE_TAG=TOKEN_CLOSE_TAG,exports.TOKEN_OPEN_TAG=TOKEN_OPEN_TAG,exports.TOKEN_PLACEHOLDER=TOKEN_PLACEHOLDER,exports.TOKEN_SELF_TAG=TOKEN_SELF_TAG,exports.default=Interpolate;

package/dist/react-interpolate.min.mjs

@@ -1 +1 @@
-import React from"react";import PropTypes from"prop-types";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";var TOKEN_PLACEHOLDER="TOKEN_PLACEHOLDER",TOKEN_OPEN_TAG="TOKEN_OPEN_TAG",TOKEN_CLOSE_TAG="TOKEN_CLOSE_TAG",TOKEN_SELF_TAG="TOKEN_SELF_TAG",TOKEN_TEXT="TOKEN_TEXT",NODE_FRAGMENT="NODE_FRAGMENT",NODE_TAG_ELEMENT="NODE_TAG_ELEMENT",NODE_VOID_ELEMENT="NODE_VOID_ELEMENT",NODE_PLACEHOLDER="NODE_PLACEHOLDER",NODE_TEXT="NODE_TEXT",Node=function(){function e(t){var r=t.type,n=t.children,a=_objectWithoutProperties(t,["type","children"]);for(var o in _classCallCheck(this,e),this.type=r,this.children=n||[],a)this[o]=a[o];a.token&&(this.string=a.token.string)}return _createClass(e,[{key:"appendChild",value:function(e){this.children.push(e)}},{key:"isLeaf",get:function(){return 0===this.children.length}}]),e}();function lexer(e){var t,r=(_defineProperty(t={},TOKEN_PLACEHOLDER,/{\s*(\w+)\s*}/g),_defineProperty(t,TOKEN_OPEN_TAG,/<(\w+)>/g),_defineProperty(t,TOKEN_CLOSE_TAG,/<\/(\w+)>/g),_defineProperty(t,TOKEN_SELF_TAG,/<(\w+)\s*\/>/g),t),n=[];for(var a in r)for(var o,i=r[a];null!==(o=i.exec(e));)n.push({type:a,string:o[0],name:o[1],start:o.index,end:o.index+o[0].length});n.sort(function(e,t){return e.start-t.start});var E=[],s=0;n.forEach(function(t){if(t.start!==s){var r=t.start,n=e.substring(s,r);E.push({type:TOKEN_TEXT,string:n,text:n,start:s,end:r}),s=t.end}else s=t.end});var c=e.substring(s);return""!==c&&E.push({type:TOKEN_TEXT,string:c,start:s,end:e.length}),[].concat(E,n).sort(function(e,t){return e.start-t.start})}function parser(e){var t=lexer(e);return new Parser(t).parse()}Node.createTagNode=function(e,t){return new Node({type:NODE_TAG_ELEMENT,children:t,name:e.name,token:e})},Node.createFragmentNode=function(e){return new Node({type:NODE_FRAGMENT,children:e})},Node.createVoidNode=function(e){return new Node({type:NODE_VOID_ELEMENT,name:e.name,token:e})},Node.createTextNode=function(e){return new Node({type:NODE_TEXT,text:e.string,token:e})},Node.createPlaceholderNode=function(e){return new Node({type:NODE_PLACEHOLDER,name:e.name,token:e})};var SYNTAX_ERROR="syntax error",EPSILON={type:"EPSILON"},Parser=function(){function e(t){_classCallCheck(this,e),this.tokens=[].concat(t),this.tags=[]}return _createClass(e,[{key:"parse",value:function(){var e=this.document();if(!this.predict(EPSILON.type))throw new Error(SYNTAX_ERROR);return e}},{key:"document",value:function(){var e=this.elementOrData();return Node.createFragmentNode(e)}},{key:"element",value:function(){var e=this.openTag(),t=this.elementOrData();return this.endTag(),Node.createTagNode(e,t)}},{key:"openTag",value:function(){if(!this.predict(TOKEN_OPEN_TAG))throw new Error(SYNTAX_ERROR);return this.pushTag(this.lookahead),this.match(TOKEN_OPEN_TAG)}},{key:"elementOrData",value:function(){var e=[];if(this.predict(TOKEN_OPEN_TAG)&&(e.push(this.element()),e=e.concat(this.elementOrData())),this.predict(TOKEN_SELF_TAG,TOKEN_TEXT,TOKEN_PLACEHOLDER)){var t,r=this.match(this.lookahead.type);switch(r.type){case TOKEN_SELF_TAG:t=Node.createVoidNode(r);break;case TOKEN_TEXT:t=Node.createTextNode(r);break;case TOKEN_PLACEHOLDER:t=Node.createPlaceholderNode(r)}e.push(t),e=e.concat(this.elementOrData())}return e}},{key:"endTag",value:function(){if(!this.predict(TOKEN_CLOSE_TAG))throw new Error(SYNTAX_ERROR);if(this.tags.pop().name!==this.lookahead.name)throw new Error(SYNTAX_ERROR);this.match(TOKEN_CLOSE_TAG)}},{key:"predict",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.includes(this.lookahead.type)}},{key:"match",value:function(e){if(!this.predict(e))throw new Error(SYNTAX_ERROR);return this.tokens.shift()}},{key:"pushTag",value:function(e){this.tags.push(e)}},{key:"lookahead",get:function(){return 0===this.tokens.length?EPSILON:this.tokens[0]}}]),e}(),createElement=function e(t,r,n){var a=t.children.map(function(t,a){return React.createElement(React.Fragment,{key:n+a},e(t,r,n))});switch(t.type){case NODE_TEXT:return t.text;case NODE_FRAGMENT:return React.createElement(React.Fragment,null,a);case NODE_VOID_ELEMENT:var o=r[t.name];return"function"==typeof o?o():o||React.createElement(t.name,null);case NODE_TAG_ELEMENT:var i=r[t.name];if("function"==typeof i)return i(a);if(void 0!==i)throw new Error('tag "'.concat(t.name,'" should be mapped to a renderer function'));return React.createElement(t.name,null,a);case NODE_PLACEHOLDER:var E=r[t.name];return void 0===E?(console.warn('missing "'.concat(t.name,'" in mapping')),t.string):"function"==typeof E?E():E;default:return}};function Interpolate(e){var t=e.string,r=e.mapping,n=void 0===r?{}:r,a=e.graceful,o=void 0===a||a;try{var i=parser(t);return createElement(i,n,t)}catch(e){if(o)return console.error(e),t;throw e}}Interpolate.propTypes={string:PropTypes.string.isRequired,mapping:PropTypes.object,graceful:PropTypes.bool};export default Interpolate;
+import React from"react";import PropTypes from"prop-types";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var TOKEN_PLACEHOLDER="TOKEN_PLACEHOLDER",TOKEN_OPEN_TAG="TOKEN_OPEN_TAG",TOKEN_CLOSE_TAG="TOKEN_CLOSE_TAG",TOKEN_SELF_TAG="TOKEN_SELF_TAG",TOKEN_TEXT="TOKEN_TEXT",NODE_FRAGMENT="NODE_FRAGMENT",NODE_TAG_ELEMENT="NODE_TAG_ELEMENT",NODE_VOID_ELEMENT="NODE_VOID_ELEMENT",NODE_PLACEHOLDER="NODE_PLACEHOLDER",NODE_TEXT="NODE_TEXT",_excluded=["type","children"],Node=function(){function e(t){var r=t.type,n=t.children,a=_objectWithoutProperties(t,_excluded);for(var o in _classCallCheck(this,e),this.type=r,this.children=n||[],a)this[o]=a[o];a.token&&(this.string=a.token.string)}return _createClass(e,[{key:"appendChild",value:function(e){this.children.push(e)}},{key:"isLeaf",get:function(){return 0===this.children.length}}]),e}();Node.createTagNode=function(e,t){return new Node({type:NODE_TAG_ELEMENT,children:t,name:e.name,token:e})},Node.createFragmentNode=function(e){return new Node({type:NODE_FRAGMENT,children:e})},Node.createVoidNode=function(e){return new Node({type:NODE_VOID_ELEMENT,name:e.name,token:e})},Node.createTextNode=function(e){return new Node({type:NODE_TEXT,text:e.string,token:e})},Node.createPlaceholderNode=function(e){return new Node({type:NODE_PLACEHOLDER,name:e.name,token:e})};var SYNTAX_BUILT_IN=[{type:TOKEN_PLACEHOLDER,regex:/{\s*(\w+)\s*}/g},{type:TOKEN_OPEN_TAG,regex:/<(\w+)>/g},{type:TOKEN_CLOSE_TAG,regex:/<\/(\w+)>/g},{type:TOKEN_SELF_TAG,regex:/<(\w+)\s*\/>/g}],SYNTAX_I18NEXT=[{type:TOKEN_PLACEHOLDER,regex:/{{\s*(\w+)\s*}}/g},{type:TOKEN_OPEN_TAG,regex:/<(\w+)>/g},{type:TOKEN_CLOSE_TAG,regex:/<\/(\w+)>/g},{type:TOKEN_SELF_TAG,regex:/<(\w+)\s*\/>/g}];function _createForOfIteratorHelper(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,a=function(){};return{s:a,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){c=!0,o=e},f:function(){try{i||null==r.return||r.return()}finally{if(c)throw o}}}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function lexer(e,t){var r,n=[],a=_createForOfIteratorHelper(t);try{for(a.s();!(r=a.n()).done;)for(var o,i=r.value,c=i.type,E=i.regex;null!==(o=E.exec(e));)n.push({type:c,string:o[0],name:o[1],start:o.index,end:o.index+o[0].length})}catch(e){a.e(e)}finally{a.f()}n.sort(function(e,t){return e.start-t.start});var s=[],u=0;n.forEach(function(t){if(t.start!==u){var r=t.start,n=e.substring(u,r);s.push({type:TOKEN_TEXT,string:n,text:n,start:u,end:r}),u=t.end}else u=t.end});var l=e.substring(u);return""!==l&&s.push({type:TOKEN_TEXT,string:l,start:u,end:e.length}),[].concat(s,n).sort(function(e,t){return e.start-t.start})}function parser(e,t){t||(t=SYNTAX_BUILT_IN);var r=lexer(e,t);return new Parser(r).parse()}var SYNTAX_ERROR="Syntax error. Please check if each open tag is closed correctly",EPSILON={type:"EPSILON"},Parser=function(){function e(t){_classCallCheck(this,e),this.tokens=[].concat(t),this.tags=[]}return _createClass(e,[{key:"parse",value:function(){var e=this.document();if(!this.predict(EPSILON.type))throw new Error(SYNTAX_ERROR);return e}},{key:"document",value:function(){var e=this.elementOrData();return Node.createFragmentNode(e)}},{key:"element",value:function(){var e=this.openTag(),t=this.elementOrData();return this.endTag(),Node.createTagNode(e,t)}},{key:"openTag",value:function(){if(!this.predict(TOKEN_OPEN_TAG))throw new Error(SYNTAX_ERROR);return this.pushTag(this.lookahead),this.match(TOKEN_OPEN_TAG)}},{key:"elementOrData",value:function(){var e=[];if(this.predict(TOKEN_OPEN_TAG)&&(e.push(this.element()),e=e.concat(this.elementOrData())),this.predict(TOKEN_SELF_TAG,TOKEN_TEXT,TOKEN_PLACEHOLDER)){var t,r=this.match(this.lookahead.type);switch(r.type){case TOKEN_SELF_TAG:t=Node.createVoidNode(r);break;case TOKEN_TEXT:t=Node.createTextNode(r);break;case TOKEN_PLACEHOLDER:t=Node.createPlaceholderNode(r)}e.push(t),e=e.concat(this.elementOrData())}return e}},{key:"endTag",value:function(){if(!this.predict(TOKEN_CLOSE_TAG))throw new Error(SYNTAX_ERROR);if(this.tags.pop().name!==this.lookahead.name)throw new Error(SYNTAX_ERROR);this.match(TOKEN_CLOSE_TAG)}},{key:"lookahead",get:function(){return 0===this.tokens.length?EPSILON:this.tokens[0]}},{key:"predict",value:function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.includes(this.lookahead.type)}},{key:"match",value:function(e){if(!this.predict(e))throw new Error(SYNTAX_ERROR);return this.tokens.shift()}},{key:"pushTag",value:function(e){this.tags.push(e)}}]),e}(),createElement=function e(t,r,n){var a=t.children.map(function(t,a){return React.createElement(React.Fragment,{key:n+a},e(t,r,n))});switch(t.type){case NODE_TEXT:return t.text;case NODE_FRAGMENT:return React.createElement(React.Fragment,null,a);case NODE_VOID_ELEMENT:var o=r[t.name];return"function"==typeof o?o():o||React.createElement(t.name,null);case NODE_TAG_ELEMENT:var i=r[t.name];if(void 0===i)return React.createElement(t.name,null,a);if("function"==typeof i)return i(a);if(React.isValidElement(i)){if(0!==React.Children.count(i.props.children))throw new Error("when passing an element as value, the element should not contains children");return React.cloneElement(i,{children:a})}throw new Error('Invalid mapping value for "'.concat(t.name,'". Only element or render function are accepted'));case NODE_PLACEHOLDER:var c=r[t.name];return void 0===c?(console.warn('missing "'.concat(t.name,'" in mapping')),t.string):"function"==typeof c?c():c;default:return}};function Interpolate(e){var t=e.string,r=e.syntax,n=e.mapping,a=void 0===n?{}:n,o=e.graceful,i=void 0===o||o;try{var c=parser(t,r);return createElement(c,a,t)}catch(e){if(i)return console.error(e),t;throw e}}Interpolate.propTypes={string:PropTypes.string.isRequired,mapping:PropTypes.object,graceful:PropTypes.bool};export{SYNTAX_BUILT_IN,SYNTAX_I18NEXT,TOKEN_CLOSE_TAG,TOKEN_OPEN_TAG,TOKEN_PLACEHOLDER,TOKEN_SELF_TAG,Interpolate as default};

package/dist/react-interpolate.mjs

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 
 var TOKEN_PLACEHOLDER = "TOKEN_PLACEHOLDER";
 var TOKEN_OPEN_TAG = "TOKEN_OPEN_TAG";
@@ -16,11 +15,13 @@ var NODE_VOID_ELEMENT = "NODE_VOID_ELEMENT";
 var NODE_PLACEHOLDER = "NODE_PLACEHOLDER";
 var NODE_TEXT = "NODE_TEXT";
 
+var _excluded = ["type", "children"];
+
 var Node = /*#__PURE__*/function () {
   function Node(_ref) {
     var type = _ref.type,
         children = _ref.children,
-        fields = _objectWithoutProperties(_ref, ["type", "children"]);
+        fields = _objectWithoutProperties(_ref, _excluded);
 
     _classCallCheck(this, Node);
 
@@ -91,29 +92,69 @@ Node.createPlaceholderNode = function (token) {
   });
 };
 
+var SYNTAX_BUILT_IN = [{
+  type: TOKEN_PLACEHOLDER,
+  regex: /{\s*(\w+)\s*}/g
+}, {
+  type: TOKEN_OPEN_TAG,
+  regex: /<(\w+)>/g
+}, {
+  type: TOKEN_CLOSE_TAG,
+  regex: /<\/(\w+)>/g
+}, {
+  type: TOKEN_SELF_TAG,
+  regex: /<(\w+)\s*\/>/g
+}];
+var SYNTAX_I18NEXT = [{
+  type: TOKEN_PLACEHOLDER,
+  regex: /{{\s*(\w+)\s*}}/g
+}, {
+  type: TOKEN_OPEN_TAG,
+  regex: /<(\w+)>/g
+}, {
+  type: TOKEN_CLOSE_TAG,
+  regex: /<\/(\w+)>/g
+}, {
+  type: TOKEN_SELF_TAG,
+  regex: /<(\w+)\s*\/>/g
+}];
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 /*
  * return a array of token object
  */
 
-function lexer(string) {
-  var _regxMap;
-
-  var regxMap = (_regxMap = {}, _defineProperty(_regxMap, TOKEN_PLACEHOLDER, /{\s*(\w+)\s*}/g), _defineProperty(_regxMap, TOKEN_OPEN_TAG, /<(\w+)>/g), _defineProperty(_regxMap, TOKEN_CLOSE_TAG, /<\/(\w+)>/g), _defineProperty(_regxMap, TOKEN_SELF_TAG, /<(\w+)\s*\/>/g), _regxMap);
+function lexer(string, syntax) {
   var matches = [];
 
-  for (var tokenType in regxMap) {
-    var regx = regxMap[tokenType];
-    var res;
-
-    while ((res = regx.exec(string)) !== null) {
-      matches.push({
-        type: tokenType,
-        string: res[0],
-        name: res[1],
-        start: res.index,
-        end: res.index + res[0].length
-      });
+  var _iterator = _createForOfIteratorHelper(syntax),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var rule = _step.value;
+      var type = rule.type,
+          regex = rule.regex;
+      var res;
+
+      while ((res = regex.exec(string)) !== null) {
+        matches.push({
+          type: type,
+          string: res[0],
+          name: res[1],
+          start: res.index,
+          end: res.index + res[0].length
+        });
+      }
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
   }
 
   matches.sort(function (a, b) {
@@ -155,12 +196,16 @@ function lexer(string) {
   return tokens;
 }
 
-function parser(string) {
-  var tokens = lexer(string);
+function parser(string, syntax) {
+  if (!syntax) {
+    syntax = SYNTAX_BUILT_IN;
+  }
+
+  var tokens = lexer(string, syntax);
   var p = new Parser(tokens);
   return p.parse();
 }
-var SYNTAX_ERROR = "syntax error"; // A special token representing end of the tream
+var SYNTAX_ERROR = "Syntax error. Please check if each open tag is closed correctly"; // A special token representing end of the tream
 
 var EPSILON = {
   type: "EPSILON"
@@ -300,6 +345,11 @@ var Parser = /*#__PURE__*/function () {
 
       this.match(TOKEN_CLOSE_TAG);
     }
+  }, {
+    key: "lookahead",
+    get: function get() {
+      return this.tokens.length === 0 ? EPSILON : this.tokens[0];
+    }
   }, {
     key: "predict",
     value: function predict() {
@@ -324,11 +374,6 @@ var Parser = /*#__PURE__*/function () {
     value: function pushTag(token) {
       this.tags.push(token);
     }
-  }, {
-    key: "lookahead",
-    get: function get() {
-      return this.tokens.length === 0 ? EPSILON : this.tokens[0];
-    }
   }]);
 
   return Parser;
@@ -349,7 +394,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
 
     case NODE_FRAGMENT:
       {
-        return React.createElement(React.Fragment, null, children);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, children);
       }
 
     case NODE_VOID_ELEMENT:
@@ -360,22 +405,32 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return val();
         }
 
-        return val || React.createElement(node.name, null);
+        return val || /*#__PURE__*/React.createElement(node.name, null);
       }
 
     case NODE_TAG_ELEMENT:
       {
         var _val = mapping[node.name];
 
+        if (_val === undefined) {
+          return /*#__PURE__*/React.createElement(node.name, null, children);
+        }
+
         if (typeof _val === "function") {
           return _val(children);
         }
 
-        if (_val !== undefined) {
-          throw new Error("tag \"".concat(node.name, "\" should be mapped to a renderer function"));
+        if ( /*#__PURE__*/React.isValidElement(_val)) {
+          if (React.Children.count(_val.props.children) !== 0) {
+            throw new Error("when passing an element as value, the element should not contains children");
+          }
+
+          return /*#__PURE__*/React.cloneElement(_val, {
+            children: children
+          });
         }
 
-        return React.createElement(node.name, null, children);
+        throw new Error("Invalid mapping value for \"".concat(node.name, "\". Only element or render function are accepted"));
       }
 
     case NODE_PLACEHOLDER:
@@ -401,13 +456,14 @@ var createElement = function createElement(node, mapping, keyPrefix) {
 
 function Interpolate(_ref) {
   var string = _ref.string,
+      syntax = _ref.syntax,
       _ref$mapping = _ref.mapping,
       mapping = _ref$mapping === void 0 ? {} : _ref$mapping,
       _ref$graceful = _ref.graceful,
       graceful = _ref$graceful === void 0 ? true : _ref$graceful;
 
   try {
-    var tree = parser(string);
+    var tree = parser(string, syntax);
     return createElement(tree, mapping, string);
   } catch (e) {
     if (graceful) {
@@ -424,4 +480,4 @@ Interpolate.propTypes = {
   graceful: PropTypes.bool
 };
 
-export default Interpolate;
+export { SYNTAX_BUILT_IN, SYNTAX_I18NEXT, TOKEN_CLOSE_TAG, TOKEN_OPEN_TAG, TOKEN_PLACEHOLDER, TOKEN_SELF_TAG, Interpolate as default };

package/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    testEnvironment: "jsdom"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doist/react-interpolate",
-  "version": "0.0.2",
+  "version": "0.3.0",
   "description": "A string interpolation component that formats and interpolates a template string in a safe way",
   "main": "dist/react-interpolate.cjs",
   "module": "dist/react-interpolate.mjs",
@@ -10,7 +10,10 @@
     "build": "del dist && rollup -c && npm run mini-cjs && npm run mini-mjs && npm run gzip",
     "mini-cjs": "uglifyjs dist/react-interpolate.cjs --compress --mangle --enclose --output  dist/react-interpolate.min.cjs",
     "mini-mjs": "uglifyjs dist/react-interpolate.mjs --compress --mangle --enclose --output dist/react-interpolate.min.mjs",
-    "gzip": "gzip dist/**/*.min.*js --extension=gz"
+    "gzip": "gzip dist/**/*.min.*js --extension=gz",
+    "publish": "npm run build && npm publish",
+    "release": "git checkout master && git pull && release-it",
+    "release:auto": "git checkout master && git pull && release-it --ci"
   },
   "repository": {
     "type": "git",
@@ -27,37 +30,38 @@
   "author": "Steven Kao",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@testing-library/react": "^10.0.1",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.2.3",
-    "core-js": "^3.6.4",
-    "del-cli": "^3.0.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-plugin-compat": "^3.5.1",
-    "eslint-plugin-jest": "^23.8.2",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^3.0.0",
-    "gzip-cli": "^1.1.0",
-    "jest": "^25.2.3",
-    "prettier": "^2.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "rollup": "^2.3.3",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@testing-library/react": "^12.1.2",
+    "babel-jest": "^27.3.1",
+    "core-js": "^3.19.1",
+    "del-cli": "^4.0.1",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-compat": "^4.0.0",
+    "eslint-plugin-jest": "^25.2.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "gzip-cli": "^1.2.0",
+    "jest": "^27.3.1",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "release-it": "^14.11.7",
+    "rollup": "^2.60.0",
     "rollup-plugin-babel": "^4.4.0",
     "uglify-es": "^3.3.9"
   },
   "dependencies": {
-    "@babel/runtime": "^7.9.2"
+    "@babel/runtime": "^7.16.3"
   }
 }

package/src/index.js

@@ -1,2 +1,10 @@
 import Interpolate from "./interpolate"
 export default Interpolate
+
+export { SYNTAX_I18NEXT, SYNTAX_BUILT_IN } from "./syntax"
+export {
+    TOKEN_PLACEHOLDER,
+    TOKEN_OPEN_TAG,
+    TOKEN_CLOSE_TAG,
+    TOKEN_SELF_TAG
+} from "./constants"

package/src/interpolate.js

@@ -33,17 +33,28 @@ const createElement = (node, mapping, keyPrefix) => {
         }
         case NODE_TAG_ELEMENT: {
             const val = mapping[node.name]
+
+            if (val === undefined) {
+                return React.createElement(node.name, null, children)
+            }
+
             if (typeof val === "function") {
                 return val(children)
             }
 
-            if (val !== undefined) {
-                throw new Error(
-                    `tag "${node.name}" should be mapped to a renderer function`
-                )
+            if (React.isValidElement(val)) {
+                if (React.Children.count(val.props.children) !== 0) {
+                    throw new Error(
+                        "when passing an element as value, the element should not contains children"
+                    )
+                }
+
+                return React.cloneElement(val, { children })
             }
 
-            return React.createElement(node.name, null, children)
+            throw new Error(
+                `Invalid mapping value for "${node.name}". Only element or render function are accepted`
+            )
         }
         case NODE_PLACEHOLDER: {
             const val = mapping[node.name]
@@ -63,9 +74,14 @@ const createElement = (node, mapping, keyPrefix) => {
     }
 }
 
-export default function Interpolate({ string, mapping = {}, graceful = true }) {
+export default function Interpolate({
+    string,
+    syntax,
+    mapping = {},
+    graceful = true
+}) {
     try {
-        const tree = parser(string)
+        const tree = parser(string, syntax)
         return createElement(tree, mapping, string)
     } catch (e) {
         if (graceful) {

package/src/lexer.js

@@ -1,31 +1,19 @@
-import {
-    TOKEN_PLACEHOLDER,
-    TOKEN_OPEN_TAG,
-    TOKEN_CLOSE_TAG,
-    TOKEN_SELF_TAG,
-    TOKEN_TEXT
-} from "./constants"
+import { TOKEN_TEXT } from "./constants"
+export { SYNTAX_I18NEXT, SYNTAX_BUILT_IN } from "./syntax"
 
 /*
  * return a array of token object
  */
-export default function lexer(string) {
-    const regxMap = {
-        [TOKEN_PLACEHOLDER]: /{\s*(\w+)\s*}/g,
-        [TOKEN_OPEN_TAG]: /<(\w+)>/g,
-        [TOKEN_CLOSE_TAG]: /<\/(\w+)>/g,
-        [TOKEN_SELF_TAG]: /<(\w+)\s*\/>/g
-    }
-
+export default function lexer(string, syntax) {
     const matches = []
 
-    for (const tokenType in regxMap) {
-        const regx = regxMap[tokenType]
+    for (const rule of syntax) {
+        const { type, regex } = rule
 
         var res
-        while ((res = regx.exec(string)) !== null) {
+        while ((res = regex.exec(string)) !== null) {
             matches.push({
-                type: tokenType,
+                type,
                 string: res[0],
                 name: res[1],
                 start: res.index,

package/src/parser.js

@@ -7,14 +7,20 @@ import {
 } from "./constants"
 import Node from "./node.js"
 import lexer from "./lexer"
+import { SYNTAX_BUILT_IN } from "./syntax"
 
-export default function parser(string) {
-    const tokens = lexer(string)
+export default function parser(string, syntax) {
+    if (!syntax) {
+        syntax = SYNTAX_BUILT_IN
+    }
+
+    const tokens = lexer(string, syntax)
     const p = new Parser(tokens)
     return p.parse()
 }
 
-const SYNTAX_ERROR = "syntax error"
+const SYNTAX_ERROR =
+    "Syntax error. Please check if each open tag is closed correctly"
 
 // A special token representing end of the tream
 const EPSILON = {

package/src/syntax.js

@@ -0,0 +1,38 @@
+import {
+    TOKEN_PLACEHOLDER,
+    TOKEN_OPEN_TAG,
+    TOKEN_CLOSE_TAG,
+    TOKEN_SELF_TAG
+} from "./constants"
+
+export const SYNTAX_BUILT_IN = [
+    {
+        type: TOKEN_PLACEHOLDER,
+        regex: /{\s*(\w+)\s*}/g
+    },
+    {
+        type: TOKEN_OPEN_TAG,
+        regex: /<(\w+)>/g
+    },
+    {
+        type: TOKEN_CLOSE_TAG,
+        regex: /<\/(\w+)>/g
+    },
+    { type: TOKEN_SELF_TAG, regex: /<(\w+)\s*\/>/g }
+]
+
+export const SYNTAX_I18NEXT = [
+    {
+        type: TOKEN_PLACEHOLDER,
+        regex: /{{\s*(\w+)\s*}}/g
+    },
+    {
+        type: TOKEN_OPEN_TAG,
+        regex: /<(\w+)>/g
+    },
+    {
+        type: TOKEN_CLOSE_TAG,
+        regex: /<\/(\w+)>/g
+    },
+    { type: TOKEN_SELF_TAG, regex: /<(\w+)\s*\/>/g }
+]