@doist/react-interpolate 0.3.7 → 0.4.0

package/README.md

@@ -5,15 +5,15 @@
 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" />,
             }}
         />
     )
@@ -23,9 +23,7 @@ function Greeting() {
 Would render the following HTML
 
 ```html
-<h1>
-    Hello William. Here is <a href="https://orderinfo.com">your order info</a>
-</h1>
+<h1>Hello William. Here is <a href="https://orderinfo.com">your order info</a></h1>
 ```
 
 ## Component API
@@ -51,14 +49,14 @@ 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" />,
     }}
 />
 ```
@@ -85,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.
@@ -93,13 +91,13 @@ 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_]`).
@@ -135,12 +133,12 @@ Open & close tag could be mapped to a rendering function, which would take a sin
 <Interpolate
     string="Here is <a>your order info</a>"
     mapping={{
-        a: text => (
+        a: (text) => (
             <a href="https://orderinfo.com">
                 <b>{text}</b>
                 <br />
             </a>
-        )
+        ),
     }}
 />
 ```
@@ -149,16 +147,16 @@ 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
 
 ```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.

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,20 +1,26 @@
 {
     "name": "@doist/react-interpolate",
-    "version": "0.3.7",
+    "version": "0.4.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",
     "engines": {
-        "node": "16.13",
-        "npm": "8.1.0"
+        "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"
+        "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"
@@ -27,40 +33,40 @@
         "text",
         "string"
     ],
-    "author": "Steven Kao",
-    "license": "ISC",
     "peerDependencies": {
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "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",
-        "rollup": "^2.60.0",
-        "rollup-plugin-babel": "^4.4.0",
-        "uglify-es": "^3.3.9"
-    },
-    "dependencies": {
-        "@babel/runtime": "^7.16.3"
+        "@babel/cli": "7.18.6",
+        "@babel/core": "7.18.6",
+        "@babel/eslint-parser": "7.18.2",
+        "@babel/plugin-transform-runtime": "7.18.6",
+        "@babel/preset-env": "7.18.6",
+        "@babel/preset-react": "7.18.6",
+        "@babel/runtime": "7.18.6",
+        "@doist/eslint-config": "7.1.2",
+        "@doist/prettier-config": "3.0.5",
+        "@testing-library/react": "13.3.0",
+        "babel-jest": "28.1.2",
+        "core-js": "3.23.3",
+        "del-cli": "4.0.1",
+        "eslint": "8.18.0",
+        "eslint-config-prettier": "8.5.0",
+        "eslint-plugin-compat": "4.0.2",
+        "eslint-plugin-import": "2.26.0",
+        "eslint-plugin-jest": "26.5.3",
+        "eslint-plugin-prettier": "4.2.1",
+        "eslint-plugin-react": "7.30.1",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "gzip-cli": "1.2.0",
+        "jest": "28.1.2",
+        "jest-environment-jsdom": "28.1.2",
+        "prettier": "2.7.1",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "rollup": "2.75.7",
+        "rollup-plugin-babel": "4.4.0",
+        "uglify-es": "3.3.9"
     }
 }

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: [16.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/.github/workflows/publish.yml

@@ -1,53 +0,0 @@
-name: Release @doist/react-interpolate package
-
-on:
-    release:
-        types: [created]
-    workflow_dispatch:
-
-jobs:
-    publish:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-
-            - name: Read Node.js version from '.nvmrc'
-              id: nvmrc
-              run: |
-                  echo "::set-output name=NODE_VERSION::$(cat .nvmrc)"
-
-            - name: Setup Node
-              uses: actions/setup-node@v1
-              with:
-                  node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
-
-            - name: Install dependencies
-              run: npm ci
-
-            - name: Lint
-              run: npm run lint
-              env:
-                  CI: true
-
-            - name: Build
-              run: npm run build
-
-            - name: Publish to GitHub Package Registry
-              uses: actions/setup-node@v1
-              with:
-                  node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
-                  registry-url: https://npm.pkg.github.com/
-                  scope: "@doist"
-            - run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
-
-            - name: Publish to npm registry
-              uses: actions/setup-node@v1
-              with:
-                  node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
-                  registry-url: https://registry.npmjs.org/
-                  scope: "@doist"
-            - run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.nvmrc

@@ -1 +0,0 @@
-16.13.0

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 })]
-}