@doist/react-interpolate 0.3.0 → 0.3.9

package/README.md

@@ -1,21 +1,19 @@
 # react-interpolate
 
-[![size](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip)](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip)
-[![Actions Status](https://github.com/Doist/react-interpolate/workflows/CI/badge.svg)](https://github.com/Doist/react-interpolate/actions)
-
+[![size](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip)](http://img.badgesize.io/https://cdn.jsdelivr.net/gh/Doist/react-interpolate/dist/react-interpolate.min.cjs?compression=gzip) [![Actions Status](https://github.com/Doist/react-interpolate/workflows/CI/badge.svg)](https://github.com/Doist/react-interpolate/actions)
 
 A string interpolation component that formats and interpolates a template string in a safe way.
 
 ```jsx
-import Interpolate from "@doist/react-interpolate"
+import Interpolate from '@doist/react-interpolate'
 
 function Greeting() {
     return (
         <Interpolate
             string="<h1>Hello {name}. Here is <a>your order info</a></h1>"
             mapping={{
-                name: "William",
-                a: <a href="https://orderinfo.com" />
+                name: 'William',
+                a: <a href="https://orderinfo.com" />,
             }}
         />
     )
@@ -28,21 +26,22 @@ Would render the following HTML
 <h1>Hello William. Here is <a href="https://orderinfo.com">your order info</a></h1>
 ```
 
-
 ## Component API
 
 `<Interpolate>` component accepts the following props
 
 #### `string`
-The template string to be interpolated. Required. 
 
-Please see the [Interpolation syntax](./#interpolation-syntax) section below for more detail. 
+The template string to be interpolated. Required.
+
+Please see the [Interpolation syntax](./#interpolation-syntax) section below for more detail.
 
-#### `mapping` 
-An object that defines the values to be injected for placeholder and tags defined in the template string. Optional. 
+#### `mapping`
 
-- 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.
+An object that defines the values to be injected for placeholder and tags defined in the template string. Optional.
+
+-   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
@@ -50,40 +49,33 @@ An object that defines the values to be injected for placeholder and tags define
             Please contact <supportLink>support</supportLink> for help"
     mapping={{
         // you can map placholder and self-closing tag to any valid element value
-        name: "William",
+        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>
-        ),
+        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" />
+        supportLink: <a href="https://orderinfo.com" />,
     }}
 />
 ```
 
+#### `graceful`
 
-#### `graceful` 
-A boolean flag indicates how string syntax error or mapping  error should be handled. When true, the raw string value from the prop `string` would be rendered as a fallback in the error scenario. When false, error would be thrown instead. 
+A boolean flag indicates how string syntax error or mapping error should be handled. When true, the raw string value from the prop `string` would be rendered as a fallback in the error scenario. When false, error would be thrown instead.
 
 Optional. `true` by default.
 
-
 ```jsx
 // would render "an invalid string with unclose tag &lt;h1&gt;"
-<Interpolate
-  graceful
-  string="an invalid string with unclose tag <h1>"
-/>
+<Interpolate graceful string="an invalid string with unclose tag <h1>" />
 ```
 
-#### `syntax` 
+#### `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
 
 Here is interpolation syntax you can use in your `string`.
@@ -91,7 +83,7 @@ Here is interpolation syntax you can use in your `string`.
 #### Placeholder
 
 ```jsx
-"hello {user_name}"
+'hello {user_name}'
 ```
 
 Placeholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be mapped to any valid element value.
@@ -99,18 +91,18 @@ Placeholder name should be alphanumeric (`[A-Za-z0-9_]`). Placeholders could be
 #### Open & close tags
 
 ```jsx
-"Here is <a>your order info</a>"
+'Here is <a>your order info</a>'
 
 // tag name could be any alphanumeric string
-"Here is <link>your order info</link>"
+'Here is <link>your order info</link>'
 
 // you can nest tag and placeholder
-"Here is <a><b>you order info {name}</b></a>"
+'Here is <a><b>you order info {name}</b></a>'
 ```
 
-Tag name should be alphanumeric (`[A-Za-z0-9_]`). 
+Tag name should be alphanumeric (`[A-Za-z0-9_]`).
 
-Open & close tag could be mapped to an element value. 
+Open & close tag could be mapped to an element value.
 
 ```jsx
 <Interpolate
@@ -135,64 +127,60 @@ Open & close tag could be mapped to an element value.
 />
 ```
 
-Open & close tag could be mapped to a rendering function, which would take a single argument that contains the enclosing text. 
+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: text => (
+        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
 // bad: no close tag
-"Here is <a>your order info"
+'Here is <a>your order info'
 
 // bad: incorrect tag structure
-"Here is <a><b>your order info</a></b>"
+'Here is <a><b>your order info</a></b>'
 ```
 
-#### Self closing tag 
+#### Self closing tag
 
 ```js
-"Hello.<br/>Here is your order"
+'Hello.<br/>Here is your order'
 ```
 
 Tag name should be alphanumeric (`[A-Za-z0-9_]`). Self closing tags could be mapped to any valid element value.
 
-
 ## Auto tag element creation
 
-When tags are used the string but there are no correponding mapped value, it would by default create the corresponding HTML element by default. 
+When tags are used the string but there are no correponding mapped value, it would by default create the corresponding HTML element by default.
 
 ```jsx
 // would render: <h1>Hellow</h1><br/>World
-<Interpolate string="<h1>Hello</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. 
+You can define the formatting syntax of your string via `syntax` props.
 
 ```jsx
 import Interpolate, { TOKEN_PLACEHOLDER } from "react-interpolate"
@@ -225,3 +213,16 @@ import { SYNTAX_I18NEXT } from "react-interpolate"
 />
 ```
 
+# Releasing
+
+A new version of @doist/react-interpolate is published both on npm and GitHub Package Registry whenever a new release on GitHub is created.
+
+To update the version in both `package.json` and `package-lock.json` run:
+
+```sh
+npm --no-git-tag-version version <major|minor|patch>
+```
+
+Once these changes have been pushed and merged, create a release on GitHub.
+
+A GitHub Action will automatically perform all the necessary steps and will release the version number that's specified inside the `package.json`'s `version` field so make sure that the release tag reflects the version you want to publish.

package/dist/react-interpolate.cjs

@@ -16,16 +16,16 @@ var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallChec
 var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-var TOKEN_PLACEHOLDER = "TOKEN_PLACEHOLDER";
-var TOKEN_OPEN_TAG = "TOKEN_OPEN_TAG";
-var TOKEN_CLOSE_TAG = "TOKEN_CLOSE_TAG";
-var TOKEN_SELF_TAG = "TOKEN_SELF_TAG";
-var TOKEN_TEXT = "TOKEN_TEXT";
-var NODE_FRAGMENT = "NODE_FRAGMENT";
-var NODE_TAG_ELEMENT = "NODE_TAG_ELEMENT";
-var NODE_VOID_ELEMENT = "NODE_VOID_ELEMENT";
-var NODE_PLACEHOLDER = "NODE_PLACEHOLDER";
-var NODE_TEXT = "NODE_TEXT";
+var TOKEN_PLACEHOLDER = 'TOKEN_PLACEHOLDER';
+var TOKEN_OPEN_TAG = 'TOKEN_OPEN_TAG';
+var TOKEN_CLOSE_TAG = 'TOKEN_CLOSE_TAG';
+var TOKEN_SELF_TAG = 'TOKEN_SELF_TAG';
+var TOKEN_TEXT = 'TOKEN_TEXT';
+var NODE_FRAGMENT = 'NODE_FRAGMENT';
+var NODE_TAG_ELEMENT = 'NODE_TAG_ELEMENT';
+var NODE_VOID_ELEMENT = 'NODE_VOID_ELEMENT';
+var NODE_PLACEHOLDER = 'NODE_PLACEHOLDER';
+var NODE_TEXT = 'NODE_TEXT';
 
 var _excluded = ["type", "children"];
 
@@ -193,7 +193,7 @@ function lexer(string, syntax) {
   });
   var text = string.substring(start);
 
-  if (text !== "") {
+  if (text !== '') {
     textTokens.push({
       type: TOKEN_TEXT,
       string: text,
@@ -217,10 +217,10 @@ function parser(string, syntax) {
   var p = new Parser(tokens);
   return p.parse();
 }
-var SYNTAX_ERROR = "Syntax error. Please check if each open tag is closed correctly"; // 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"
+  type: 'EPSILON'
 };
 /*
  * A recursive descent parser that construct a syntax tree represeting
@@ -413,7 +413,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
       {
         var val = mapping[node.name];
 
-        if (typeof val === "function") {
+        if (typeof val === 'function') {
           return val();
         }
 
@@ -428,13 +428,13 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return /*#__PURE__*/React__default["default"].createElement(node.name, null, children);
         }
 
-        if (typeof _val === "function") {
+        if (typeof _val === 'function') {
           return _val(children);
         }
 
         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");
+            throw new Error('when passing an element as value, the element should not contains children');
           }
 
           return /*#__PURE__*/React__default["default"].cloneElement(_val, {
@@ -454,7 +454,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return node.string;
         }
 
-        if (typeof _val2 === "function") {
+        if (typeof _val2 === 'function') {
           return _val2();
         }
 

package/dist/react-interpolate.mjs

@@ -4,16 +4,16 @@ 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";
-var TOKEN_OPEN_TAG = "TOKEN_OPEN_TAG";
-var TOKEN_CLOSE_TAG = "TOKEN_CLOSE_TAG";
-var TOKEN_SELF_TAG = "TOKEN_SELF_TAG";
-var TOKEN_TEXT = "TOKEN_TEXT";
-var NODE_FRAGMENT = "NODE_FRAGMENT";
-var NODE_TAG_ELEMENT = "NODE_TAG_ELEMENT";
-var NODE_VOID_ELEMENT = "NODE_VOID_ELEMENT";
-var NODE_PLACEHOLDER = "NODE_PLACEHOLDER";
-var NODE_TEXT = "NODE_TEXT";
+var TOKEN_PLACEHOLDER = 'TOKEN_PLACEHOLDER';
+var TOKEN_OPEN_TAG = 'TOKEN_OPEN_TAG';
+var TOKEN_CLOSE_TAG = 'TOKEN_CLOSE_TAG';
+var TOKEN_SELF_TAG = 'TOKEN_SELF_TAG';
+var TOKEN_TEXT = 'TOKEN_TEXT';
+var NODE_FRAGMENT = 'NODE_FRAGMENT';
+var NODE_TAG_ELEMENT = 'NODE_TAG_ELEMENT';
+var NODE_VOID_ELEMENT = 'NODE_VOID_ELEMENT';
+var NODE_PLACEHOLDER = 'NODE_PLACEHOLDER';
+var NODE_TEXT = 'NODE_TEXT';
 
 var _excluded = ["type", "children"];
 
@@ -181,7 +181,7 @@ function lexer(string, syntax) {
   });
   var text = string.substring(start);
 
-  if (text !== "") {
+  if (text !== '') {
     textTokens.push({
       type: TOKEN_TEXT,
       string: text,
@@ -205,10 +205,10 @@ function parser(string, syntax) {
   var p = new Parser(tokens);
   return p.parse();
 }
-var SYNTAX_ERROR = "Syntax error. Please check if each open tag is closed correctly"; // 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"
+  type: 'EPSILON'
 };
 /*
  * A recursive descent parser that construct a syntax tree represeting
@@ -401,7 +401,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
       {
         var val = mapping[node.name];
 
-        if (typeof val === "function") {
+        if (typeof val === 'function') {
           return val();
         }
 
@@ -416,13 +416,13 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return /*#__PURE__*/React.createElement(node.name, null, children);
         }
 
-        if (typeof _val === "function") {
+        if (typeof _val === 'function') {
           return _val(children);
         }
 
         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");
+            throw new Error('when passing an element as value, the element should not contains children');
           }
 
           return /*#__PURE__*/React.cloneElement(_val, {
@@ -442,7 +442,7 @@ var createElement = function createElement(node, mapping, keyPrefix) {
           return node.string;
         }
 
-        if (typeof _val2 === "function") {
+        if (typeof _val2 === 'function') {
           return _val2();
         }
 

package/package.json

@@ -1,67 +1,75 @@
 {
-  "name": "@doist/react-interpolate",
-  "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",
-  "scripts": {
-    "test": "jest",
-    "lint": "eslint ./src ./__test__",
-    "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",
-    "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",
-    "url": "https://github.com/Doist/react-interpolate.git"
-  },
-  "keywords": [
-    "react",
-    "interpolate",
-    "template",
-    "format",
-    "text",
-    "string"
-  ],
-  "author": "Steven Kao",
-  "license": "ISC",
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
-    "@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.16.3"
-  }
+    "name": "@doist/react-interpolate",
+    "version": "0.3.9",
+    "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",
+    "engines": {
+        "node": "16",
+        "npm": "8"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "test": "jest",
+        "lint": "eslint ./src ./__test__",
+        "build": "del dist && rollup -c && npm run mini-cjs && npm run mini-mjs",
+        "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",
+        "prettify": "prettier --write ."
+    },
+    "prettier": "@doist/prettier-config",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Doist/react-interpolate.git"
+    },
+    "keywords": [
+        "react",
+        "interpolate",
+        "template",
+        "format",
+        "text",
+        "string"
+    ],
+    "author": "Steven Kao",
+    "license": "ISC",
+    "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    },
+    "devDependencies": {
+        "@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",
+        "@doist/eslint-config": "^7.0.0",
+        "@doist/prettier-config": "^3.0.5",
+        "@testing-library/react": "^12.1.2",
+        "babel-jest": "^27.4.1",
+        "core-js": "^3.19.2",
+        "del-cli": "^4.0.1",
+        "eslint": "^8.3.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-compat": "^4.0.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jest": "^25.3.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.27.1",
+        "eslint-plugin-react-hooks": "^4.3.0",
+        "gzip-cli": "^1.2.0",
+        "jest": "^27.4.1",
+        "prettier": "^2.5.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "rollup": "^2.60.2",
+        "rollup-plugin-babel": "^4.4.0",
+        "uglify-es": "^3.3.9"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.16.3"
+    }
 }

package/src/constants.js

@@ -1,11 +1,11 @@
-export const TOKEN_PLACEHOLDER = "TOKEN_PLACEHOLDER"
-export const TOKEN_OPEN_TAG = "TOKEN_OPEN_TAG"
-export const TOKEN_CLOSE_TAG = "TOKEN_CLOSE_TAG"
-export const TOKEN_SELF_TAG = "TOKEN_SELF_TAG"
-export const TOKEN_TEXT = "TOKEN_TEXT"
+export const TOKEN_PLACEHOLDER = 'TOKEN_PLACEHOLDER'
+export const TOKEN_OPEN_TAG = 'TOKEN_OPEN_TAG'
+export const TOKEN_CLOSE_TAG = 'TOKEN_CLOSE_TAG'
+export const TOKEN_SELF_TAG = 'TOKEN_SELF_TAG'
+export const TOKEN_TEXT = 'TOKEN_TEXT'
 
-export const NODE_FRAGMENT = "NODE_FRAGMENT"
-export const NODE_TAG_ELEMENT = "NODE_TAG_ELEMENT"
-export const NODE_VOID_ELEMENT = "NODE_VOID_ELEMENT"
-export const NODE_PLACEHOLDER = "NODE_PLACEHOLDER"
-export const NODE_TEXT = "NODE_TEXT"
+export const NODE_FRAGMENT = 'NODE_FRAGMENT'
+export const NODE_TAG_ELEMENT = 'NODE_TAG_ELEMENT'
+export const NODE_VOID_ELEMENT = 'NODE_VOID_ELEMENT'
+export const NODE_PLACEHOLDER = 'NODE_PLACEHOLDER'
+export const NODE_TEXT = 'NODE_TEXT'

package/src/index.js

@@ -1,10 +1,5 @@
-import Interpolate from "./interpolate"
+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"
+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

@@ -1,19 +1,17 @@
-import React from "react"
-import PropTypes from "prop-types"
-import parser from "./parser"
+import React from 'react'
+import PropTypes from 'prop-types'
+import parser from './parser'
 import {
     NODE_FRAGMENT,
     NODE_TAG_ELEMENT,
     NODE_VOID_ELEMENT,
     NODE_PLACEHOLDER,
-    NODE_TEXT
-} from "./constants"
+    NODE_TEXT,
+} from './constants'
 
 const createElement = (node, mapping, keyPrefix) => {
     const children = node.children.map((c, i) => (
-        <React.Fragment key={keyPrefix + i}>
-            {createElement(c, mapping, keyPrefix)}
-        </React.Fragment>
+        <React.Fragment key={keyPrefix + i}>{createElement(c, mapping, keyPrefix)}</React.Fragment>
     ))
 
     switch (node.type) {
@@ -25,7 +23,7 @@ const createElement = (node, mapping, keyPrefix) => {
         }
         case NODE_VOID_ELEMENT: {
             const val = mapping[node.name]
-            if (typeof val === "function") {
+            if (typeof val === 'function') {
                 return val()
             }
 
@@ -38,14 +36,14 @@ const createElement = (node, mapping, keyPrefix) => {
                 return React.createElement(node.name, null, children)
             }
 
-            if (typeof val === "function") {
+            if (typeof val === 'function') {
                 return val(children)
             }
 
             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"
+                        'when passing an element as value, the element should not contains children',
                     )
                 }
 
@@ -53,7 +51,7 @@ const createElement = (node, mapping, keyPrefix) => {
             }
 
             throw new Error(
-                `Invalid mapping value for "${node.name}". Only element or render function are accepted`
+                `Invalid mapping value for "${node.name}". Only element or render function are accepted`,
             )
         }
         case NODE_PLACEHOLDER: {
@@ -63,7 +61,7 @@ const createElement = (node, mapping, keyPrefix) => {
                 return node.string
             }
 
-            if (typeof val === "function") {
+            if (typeof val === 'function') {
                 return val()
             }
 
@@ -74,12 +72,7 @@ const createElement = (node, mapping, keyPrefix) => {
     }
 }
 
-export default function Interpolate({
-    string,
-    syntax,
-    mapping = {},
-    graceful = true
-}) {
+export default function Interpolate({ string, syntax, mapping = {}, graceful = true }) {
     try {
         const tree = parser(string, syntax)
         return createElement(tree, mapping, string)
@@ -96,5 +89,5 @@ export default function Interpolate({
 Interpolate.propTypes = {
     string: PropTypes.string.isRequired,
     mapping: PropTypes.object,
-    graceful: PropTypes.bool
+    graceful: PropTypes.bool,
 }

package/src/lexer.js

@@ -1,5 +1,5 @@
-import { TOKEN_TEXT } from "./constants"
-export { SYNTAX_I18NEXT, SYNTAX_BUILT_IN } from "./syntax"
+import { TOKEN_TEXT } from './constants'
+export { SYNTAX_I18NEXT, SYNTAX_BUILT_IN } from './syntax'
 
 /*
  * return a array of token object
@@ -17,7 +17,7 @@ export default function lexer(string, syntax) {
                 string: res[0],
                 name: res[1],
                 start: res.index,
-                end: res.index + res[0].length
+                end: res.index + res[0].length,
             })
         }
     }
@@ -26,7 +26,7 @@ export default function lexer(string, syntax) {
     const textTokens = []
 
     let start = 0
-    matches.forEach(match => {
+    matches.forEach((match) => {
         if (match.start === start) {
             start = match.end
             return
@@ -40,25 +40,23 @@ export default function lexer(string, syntax) {
             string: text,
             text,
             start,
-            end
+            end,
         })
 
         start = match.end
     })
 
     const text = string.substring(start)
-    if (text !== "") {
+    if (text !== '') {
         textTokens.push({
             type: TOKEN_TEXT,
             string: text,
             start,
-            end: string.length
+            end: string.length,
         })
     }
 
-    const tokens = []
-        .concat(textTokens, matches)
-        .sort((a, b) => a.start - b.start)
+    const tokens = [].concat(textTokens, matches).sort((a, b) => a.start - b.start)
 
     return tokens
 }

package/src/node.js

@@ -3,8 +3,8 @@ import {
     NODE_TAG_ELEMENT,
     NODE_VOID_ELEMENT,
     NODE_PLACEHOLDER,
-    NODE_TEXT
-} from "./constants"
+    NODE_TEXT,
+} from './constants'
 
 export default class Node {
     constructor({ type, children, ...fields }) {
@@ -34,32 +34,32 @@ Node.createTagNode = (token, children) =>
         type: NODE_TAG_ELEMENT,
         children,
         name: token.name,
-        token
+        token,
     })
 
-Node.createFragmentNode = children =>
+Node.createFragmentNode = (children) =>
     new Node({
         type: NODE_FRAGMENT,
-        children
+        children,
     })
 
-Node.createVoidNode = token =>
+Node.createVoidNode = (token) =>
     new Node({
         type: NODE_VOID_ELEMENT,
         name: token.name,
-        token
+        token,
     })
 
-Node.createTextNode = token =>
+Node.createTextNode = (token) =>
     new Node({
         type: NODE_TEXT,
         text: token.string,
-        token
+        token,
     })
 
-Node.createPlaceholderNode = token =>
+Node.createPlaceholderNode = (token) =>
     new Node({
         type: NODE_PLACEHOLDER,
         name: token.name,
-        token
+        token,
     })

package/src/parser.js

@@ -3,11 +3,11 @@ import {
     TOKEN_OPEN_TAG,
     TOKEN_CLOSE_TAG,
     TOKEN_SELF_TAG,
-    TOKEN_TEXT
-} from "./constants"
-import Node from "./node.js"
-import lexer from "./lexer"
-import { SYNTAX_BUILT_IN } from "./syntax"
+    TOKEN_TEXT,
+} from './constants'
+import Node from './node.js'
+import lexer from './lexer'
+import { SYNTAX_BUILT_IN } from './syntax'
 
 export default function parser(string, syntax) {
     if (!syntax) {
@@ -19,12 +19,11 @@ export default function parser(string, syntax) {
     return p.parse()
 }
 
-const SYNTAX_ERROR =
-    "Syntax error. Please check if each open tag is closed correctly"
+const SYNTAX_ERROR = 'Syntax error. Please check if each open tag is closed correctly'
 
 // A special token representing end of the tream
 const EPSILON = {
-    type: "EPSILON"
+    type: 'EPSILON',
 }
 
 /*

package/src/syntax.js

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

package/.eslintrc.js

@@ -1,35 +0,0 @@
-const config = {
-    extends: [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "prettier",
-        "plugin:compat/recommended"
-    ],
-    env: {
-        browser: true,
-        "jest/globals": true
-    },
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true,
-            impliedStrict: true
-        },
-        sourceType: "module"
-    },
-    plugins: ["react", "prettier", "react-hooks", "jest"],
-    parser: "@babel/eslint-parser",
-    rules: {
-        semi: ["error", "never"],
-        "arrow-parens": ["error", "as-needed"],
-        "prettier/prettier": "error",
-        "react-hooks/rules-of-hooks": "error",
-        "react-hooks/exhaustive-deps": "error"
-    },
-    settings: {
-        react: {
-            version: "16.0"
-        }
-    }
-}
-
-module.exports = config

package/.github/workflows/nodejs.yml

@@ -1,24 +0,0 @@
-name: CI
-
-on: [push, pull_request]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build
-    - run: npm test
-      env:
-        CI: true
-    - run: npm run lint

package/.prettierrc.json

@@ -1,9 +0,0 @@
-{
-    "printWidth": 80,
-    "tabWidth": 4,
-    "semi": false,
-    "trailingComma": "none",
-    "bracketSpacing": true,
-    "arrowParens": "avoid",
-    "proseWrap": "never"
-}

package/CONTRIBUTING.md

@@ -1,7 +0,0 @@
-## Dependencies and target environment
-
-One core goal this library is to deliver a lightweight solution. Therefore, it comes to critically when it comes to user of dependencies and also polyfill usage.
-
-- `react` should be its only dependencies.
-- No polyfill.
-

package/__test__/Interpolate.test.js

@@ -1,203 +0,0 @@
-/* eslint-disable react/display-name */
-import React from "react"
-import { render } from "@testing-library/react"
-import Interpolate, { SYNTAX_I18NEXT } from "../src"
-
-Interpolate.defaultProps = {
-    graceful: false
-}
-
-const surpressConsole = () => {
-    const w = jest.spyOn(console, "warn").mockImplementation()
-    const e = jest.spyOn(console, "error").mockImplementation()
-
-    return () => {
-        w.mockRestore()
-        e.mockRestore()
-    }
-}
-
-describe("Interpolate", () => {
-    function renderTest({ expected, ...props }) {
-        const { container } = render(<Interpolate {...props} />)
-        expect(container.innerHTML).toEqual(expected)
-    }
-
-    test("when no mapping is provide", () => {
-        const restore = surpressConsole() // Interpolate will output warning when no mapping is provided
-
-        renderTest({
-            string: "<h1>hello <b>{name}</b></h1><br/>. welcome to todoist",
-            expected: "<h1>hello <b>{name}</b></h1><br>. welcome to todoist"
-        })
-
-        restore()
-    })
-
-    test("tag mapping", () =>
-        renderTest({
-            string: "<h1>hello <b>steven</b></h1>. welcome to todoist",
-            mapping: {
-                b: child => <i>{child}</i>,
-                h1: child => <h2>{child}</h2>
-            },
-            expected: "<h2>hello <i>steven</i></h2>. welcome to todoist"
-        }))
-
-    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: {
-                greeting: "hi",
-                name: () => <i>steven</i>
-            },
-            expected: "hi <b><i>steven</i></b>. welcome to todoist"
-        }))
-
-    test("void tag mapping", () =>
-        renderTest({
-            string: "hello <br/>",
-            mapping: {
-                br: <hr />
-            },
-            expected: "hello <hr>"
-        }))
-
-    test("combination of mapping", () =>
-        renderTest({
-            string: "<h1>hello <b>{name}</b></h1>.<br/> welcome to todoist",
-            mapping: {
-                h1: child => <h2>{child}</h2>,
-                b: child => <i>{child}</i>,
-                name: "steven",
-                br: <hr />
-            },
-            expected: "<h2>hello <i>steven</i></h2>.<hr> welcome to todoist"
-        }))
-
-    test("combination of mapping with function component", () => {
-        // eslint-disable-next-line
-        const Subheader = ({ children }) => {
-            return <h2 className="subheader">{children}</h2>
-        }
-
-        renderTest({
-            string: "<h1>hello <b>{name}</b></h1>.<br/> welcome to todoist",
-            mapping: {
-                h1: child => <Subheader>{child}</Subheader>,
-                b: child => <i>{child}</i>,
-                name: "steven",
-                br: <hr />
-            },
-            expected:
-                '<h2 class="subheader">hello <i>steven</i></h2>.<hr> welcome to todoist'
-        })
-    })
-
-    test("spacing in the void tag and placeholder should be allowed", () =>
-        renderTest({
-            string: "hello { name }<br /> welcome to todoist",
-            mapping: {
-                name: "steven",
-                br: <hr />
-            },
-            expected: "hello steven<hr> welcome to todoist"
-        }))
-
-    test("the mapping value should be interpolate corrected with proper html escape", () => {
-        renderTest({
-            string: "hello { name }<br /> welcome to todoist",
-            mapping: {
-                name: "<script>window.xss = 1</script>",
-                br: "<script>window.xss = 1</script>"
-            },
-            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()
-    })
-
-    test("when graceful flag is on and string contains syntax error, interpolate should return the original string and should not throw error", () => {
-        const restore = surpressConsole()
-
-        renderTest({
-            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 cases", () => {
-    let restore
-    beforeAll(() => {
-        restore = surpressConsole()
-    })
-    afterAll(() => {
-        restore()
-    })
-
-    function renderTest({ expectedError, ...props }) {
-        return () => {
-            expect(() => render(<Interpolate {...props} />)).toThrow(
-                expectedError
-            )
-        }
-    }
-
-    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" },
-            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

@@ -1,45 +0,0 @@
-import parser from "../src/parser"
-
-describe("parser", () => {
-    const tests = [
-        "hello",
-        "{steven}",
-        "<br />",
-        "<div></div>",
-        "hello {steven} from taiwan",
-        "hello {steven} from taiwan <br/>",
-        "<div>hello</div>",
-        "<div>hello {steven}</div>",
-        "<div>hello <b>{steven}</b></div>",
-        "<div>hello <b>mr {steven} from taiwan</b></div>",
-        "<div>hello <b>mr {steven} from taiwan</b><br /></div>",
-        "<div>hello</div><b>steven</b>"
-    ]
-
-    tests.forEach(string => {
-        test(string, () => {
-            parser(string)
-        })
-    })
-})
-
-describe("parser: error handling", () => {
-    const invalids = [
-        "<div>hello",
-        "hello<div>",
-        "<br>",
-        "hello {steven}</div>",
-        "<div>hello <b>{steven}</div></b>",
-        "<div>hello <b>{steven}</b></b></div>"
-    ]
-
-    invalids.forEach(string => {
-        test(`invalid syntax: ${string}`, () => {
-            expect(() => {
-                parser(string)
-            }).toThrow(
-                "Syntax error. Please check if each open tag is closed correctly"
-            )
-        })
-    })
-})

package/babel.config.js

@@ -1,18 +0,0 @@
-module.exports = function(api) {
-    api.cache(true)
-
-    return {
-        presets: [
-            [
-                "@babel/preset-env",
-                {
-                    targets: {
-                        browsers: ["IE 11"]
-                    }
-                }
-            ],
-            "@babel/react"
-        ],
-        plugins: ["@babel/plugin-transform-runtime"]
-    }
-}

package/jest.config.js

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

package/rollup.config.js

@@ -1,17 +0,0 @@
-import babel from "rollup-plugin-babel"
-import pkg from "./package.json"
-
-export default {
-    input: "src/index.js",
-    output: [
-        {
-            file: pkg.main,
-            format: "cjs"
-        },
-        {
-            file: pkg.module,
-            format: "es"
-        }
-    ],
-    plugins: [babel({ runtimeHelpers: true })]
-}