@todoist/react-interpolate 0.0.0-stage → 2.2.5

package/src/lexer.js

@@ -0,0 +1,62 @@
+import { TOKEN_TEXT } from './constants'
+export { SYNTAX_I18NEXT, SYNTAX_BUILT_IN } from './syntax'
+
+/*
+ * return a array of token object
+ */
+export default function lexer(string, syntax) {
+    const matches = []
+
+    for (const rule of syntax) {
+        const { type, regex } = rule
+
+        var res
+        while ((res = regex.exec(string)) !== null) {
+            matches.push({
+                type,
+                string: res[0],
+                name: res[1],
+                start: res.index,
+                end: res.index + res[0].length,
+            })
+        }
+    }
+
+    matches.sort((a, b) => a.start - b.start)
+    const textTokens = []
+
+    let start = 0
+    matches.forEach((match) => {
+        if (match.start === start) {
+            start = match.end
+            return
+        }
+
+        const end = match.start
+        const text = string.substring(start, end)
+
+        textTokens.push({
+            type: TOKEN_TEXT,
+            string: text,
+            text,
+            start,
+            end,
+        })
+
+        start = match.end
+    })
+
+    const text = string.substring(start)
+    if (text !== '') {
+        textTokens.push({
+            type: TOKEN_TEXT,
+            string: text,
+            start,
+            end: string.length,
+        })
+    }
+
+    const tokens = [].concat(textTokens, matches).sort((a, b) => a.start - b.start)
+
+    return tokens
+}

package/src/node.js

@@ -0,0 +1,65 @@
+import {
+    NODE_FRAGMENT,
+    NODE_TAG_ELEMENT,
+    NODE_VOID_ELEMENT,
+    NODE_PLACEHOLDER,
+    NODE_TEXT,
+} from './constants'
+
+export default class Node {
+    constructor({ type, children, ...fields }) {
+        this.type = type
+        this.children = children || []
+
+        for (const key in fields) {
+            this[key] = fields[key]
+        }
+
+        if (fields.token) {
+            this.string = fields.token.string
+        }
+    }
+
+    appendChild(child) {
+        this.children.push(child)
+    }
+
+    get isLeaf() {
+        return this.children.length === 0
+    }
+}
+
+Node.createTagNode = (token, children) =>
+    new Node({
+        type: NODE_TAG_ELEMENT,
+        children,
+        name: token.name,
+        token,
+    })
+
+Node.createFragmentNode = (children) =>
+    new Node({
+        type: NODE_FRAGMENT,
+        children,
+    })
+
+Node.createVoidNode = (token) =>
+    new Node({
+        type: NODE_VOID_ELEMENT,
+        name: token.name,
+        token,
+    })
+
+Node.createTextNode = (token) =>
+    new Node({
+        type: NODE_TEXT,
+        text: token.string,
+        token,
+    })
+
+Node.createPlaceholderNode = (token) =>
+    new Node({
+        type: NODE_PLACEHOLDER,
+        name: token.name,
+        token,
+    })

package/src/parser.js

@@ -0,0 +1,166 @@
+import {
+    TOKEN_PLACEHOLDER,
+    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'
+
+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. Please check if each open tag is closed correctly'
+
+// A special token representing end of the tream
+const EPSILON = {
+    type: 'EPSILON',
+}
+
+/*
+ * A recursive descent parser that construct a syntax tree represeting
+ * the DOM hierarchy structure.
+ *
+ * For instance, the following token
+ * <h1>hi <b>{name}</b></h1>
+ *
+ * Would result in the following tree
+ *
+ * <h1>
+ * ├─ "hi"
+ * └─ <b>
+ *    ├─ {name}
+ *
+ * The parser is based on the following grammar:
+ *
+ *   document ::= elementOrData
+ *   elementOrData ::= element elementOrData
+ *   elementOrData ::= data elementOrData
+ *   element ::= <open_tag> elementOrData <close_tag>
+ *   data ::= <selfTag>
+ *   data ::= <text>
+ *   data ::= <placeholder>
+ *
+ * ref: https://github.com/amghannam/Mini-XML-Recursive-Descent-Parser
+ */
+class Parser {
+    constructor(tokens) {
+        this.tokens = [].concat(tokens)
+        this.tags = []
+    }
+
+    parse() {
+        const tree = this.document()
+        if (!this.predict(EPSILON.type)) {
+            throw new Error(SYNTAX_ERROR)
+        }
+
+        return tree
+    }
+
+    /*
+     * @return {Node}
+     */
+    document() {
+        const children = this.elementOrData()
+        return Node.createFragmentNode(children)
+    }
+
+    /*
+     * @return {Node}
+     */
+    element() {
+        const tagToken = this.openTag()
+        const children = this.elementOrData()
+        this.endTag()
+
+        return Node.createTagNode(tagToken, children)
+    }
+
+    /*
+     * @return {Token}
+     */
+    openTag() {
+        if (!this.predict(TOKEN_OPEN_TAG)) {
+            throw new Error(SYNTAX_ERROR)
+        }
+        this.pushTag(this.lookahead)
+        return this.match(TOKEN_OPEN_TAG)
+    }
+
+    /*
+     * @return {[]Node}
+     */
+    elementOrData() {
+        let children = []
+
+        if (this.predict(TOKEN_OPEN_TAG)) {
+            children.push(this.element())
+            children = children.concat(this.elementOrData())
+        }
+
+        if (this.predict(TOKEN_SELF_TAG, TOKEN_TEXT, TOKEN_PLACEHOLDER)) {
+            const token = this.match(this.lookahead.type)
+
+            let node
+            switch (token.type) {
+                case TOKEN_SELF_TAG:
+                    node = Node.createVoidNode(token)
+                    break
+                case TOKEN_TEXT:
+                    node = Node.createTextNode(token)
+                    break
+                case TOKEN_PLACEHOLDER:
+                    node = Node.createPlaceholderNode(token)
+                    break
+            }
+
+            children.push(node)
+            children = children.concat(this.elementOrData())
+        }
+
+        return children
+    }
+
+    endTag() {
+        if (!this.predict(TOKEN_CLOSE_TAG)) {
+            throw new Error(SYNTAX_ERROR)
+        }
+
+        const openTag = this.tags.pop()
+        if (openTag.name !== this.lookahead.name) {
+            throw new Error(SYNTAX_ERROR)
+        }
+
+        this.match(TOKEN_CLOSE_TAG)
+    }
+
+    get lookahead() {
+        return this.tokens.length === 0 ? EPSILON : this.tokens[0]
+    }
+
+    predict(...types) {
+        return types.includes(this.lookahead.type)
+    }
+
+    match(type) {
+        if (!this.predict(type)) {
+            throw new Error(SYNTAX_ERROR)
+        }
+        const token = this.tokens.shift()
+        return token
+    }
+
+    pushTag(token) {
+        this.tags.push(token)
+    }
+}

package/src/react-interpolate.d.ts

@@ -0,0 +1,18 @@
+export const TOKEN_PLACEHOLDER: 'TOKEN_PLACEHOLDER'
+
+type Syntax = {
+    type: typeof TOKEN_PLACEHOLDER
+    regex: RegExp
+}
+
+type InterpolateProps = {
+    string: string
+    mapping: {
+        [key: string]: ((children: React.ReactNode) => React.ReactNode) | React.ReactNode
+    }
+    syntax?: Syntax[]
+}
+
+declare function Interpolate(props: InterpolateProps): JSX.Element
+
+export = Interpolate

package/src/syntax.js

@@ -0,0 +1,33 @@
+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 },
+]