@b9g/crank 0.5.0-beta.4 → 0.5.0-beta.6

package/umd.js

@@ -1812,6 +1812,429 @@
 	    return result;
 	}
 
+	const cache = new Map();
+	function jsx(spans, ...expressions) {
+	    const key = JSON.stringify(spans.raw);
+	    let parseResult = cache.get(key);
+	    if (parseResult == null) {
+	        parseResult = parse(spans.raw);
+	        cache.set(key, parseResult);
+	    }
+	    const { element, targets } = parseResult;
+	    for (let i = 0; i < expressions.length; i++) {
+	        const exp = expressions[i];
+	        const target = targets[i];
+	        if (target) {
+	            if (target.type === "error") {
+	                throw new SyntaxError(target.message.replace("${}", formatTagForError(exp)));
+	            }
+	            target.value = exp;
+	        }
+	    }
+	    return build(element);
+	}
+	/**
+	 * Matches first significant character in children mode.
+	 *
+	 * Group 1: newline
+	 * Group 2: comment
+	 * Group 3: tag
+	 * Group 4: closing slash
+	 * Group 5: tag name
+	 *
+	 * The comment group must appear first because the tag group can potentially
+	 * match a comment, so that we can handle tag expressions where we’ve reached
+	 * the end of a span.
+	 */
+	const CHILDREN_RE = /((?:\r|\n|\r\n)\s*)|(<!--[\S\s]*?(?:-->|$))|(<\s*(\/{0,2})\s*([-_$\w]*))/g;
+	/**
+	 * Matches props after element tags.
+	 *
+	 * Group 1: tag end
+	 * Group 2: spread props
+	 * Group 3: prop name
+	 * Group 4: equals
+	 * Group 5: prop value string
+	 */
+	const PROPS_RE = /\s*(?:(\/?\s*>)|(\.\.\.\s*)|(?:([-_$\w]+)\s*(=)?\s*(?:("(\\"|[\S\s])*?(?:"|$)|'(?:\\'|[\S\s])*?(?:'|$)))?))/g;
+	const CLOSING_BRACKET_RE = />/g;
+	const CLOSING_SINGLE_QUOTE_RE = /[^\\]?'/g;
+	const CLOSING_DOUBLE_QUOTE_RE = /[^\\]?"/g;
+	const CLOSING_COMMENT_RE = /-->/g;
+	function parse(spans) {
+	    let matcher = CHILDREN_RE;
+	    const stack = [];
+	    let element = {
+	        type: "element",
+	        open: { type: "tag", slash: "", value: "" },
+	        close: null,
+	        props: [],
+	        children: [],
+	    };
+	    const targets = [];
+	    let lineStart = true;
+	    for (let s = 0; s < spans.length; s++) {
+	        const span = spans[s];
+	        // Whether or not an expression is upcoming. Used to provide better errors.
+	        const expressing = s < spans.length - 1;
+	        let expressionTarget = null;
+	        for (let i = 0, end = i; i < span.length; i = end) {
+	            matcher.lastIndex = i;
+	            const match = matcher.exec(span);
+	            end = match ? match.index + match[0].length : span.length;
+	            switch (matcher) {
+	                case CHILDREN_RE: {
+	                    if (match) {
+	                        const [, newline, comment, tag, closingSlash, tagName] = match;
+	                        if (i < match.index) {
+	                            let before = span.slice(i, match.index);
+	                            if (lineStart) {
+	                                before = before.replace(/^\s*/, "");
+	                            }
+	                            if (newline) {
+	                                if (span[Math.max(0, match.index - 1)] === "\\") {
+	                                    // We preserve whitespace before escaped newlines and have to
+	                                    // remove the backslash.
+	                                    //   jsx` \
+	                                    //   `
+	                                    before = before.slice(0, -1);
+	                                }
+	                                else {
+	                                    before = before.replace(/\s*$/, "");
+	                                }
+	                            }
+	                            if (before) {
+	                                element.children.push({ type: "value", value: before });
+	                            }
+	                        }
+	                        lineStart = !!newline;
+	                        if (comment) {
+	                            if (end === span.length) {
+	                                // Expression in a comment:
+	                                //   jsx`<!-- ${exp} -->`
+	                                matcher = CLOSING_COMMENT_RE;
+	                            }
+	                        }
+	                        else if (tag) {
+	                            if (closingSlash) {
+	                                element.close = {
+	                                    type: "tag",
+	                                    slash: closingSlash,
+	                                    value: tagName,
+	                                };
+	                                if (!stack.length) {
+	                                    if (end !== span.length) {
+	                                        throw new SyntaxError(`Unmatched closing tag "${tagName}"`);
+	                                    }
+	                                    // ERROR EXPRESSION
+	                                    expressionTarget = {
+	                                        type: "error",
+	                                        message: "Unmatched closing tag ${}",
+	                                        value: null,
+	                                    };
+	                                }
+	                                else {
+	                                    if (end === span.length) {
+	                                        // TAG EXPRESSION
+	                                        expressionTarget = element.close;
+	                                    }
+	                                    element = stack.pop();
+	                                    matcher = CLOSING_BRACKET_RE;
+	                                }
+	                            }
+	                            else {
+	                                const next = {
+	                                    type: "element",
+	                                    open: {
+	                                        type: "tag",
+	                                        slash: "",
+	                                        value: tagName,
+	                                    },
+	                                    close: null,
+	                                    props: [],
+	                                    children: [],
+	                                };
+	                                element.children.push(next);
+	                                stack.push(element);
+	                                element = next;
+	                                matcher = PROPS_RE;
+	                                if (end === span.length) {
+	                                    // TAG EXPRESSION
+	                                    expressionTarget = element.open;
+	                                }
+	                            }
+	                        }
+	                    }
+	                    else {
+	                        if (i < span.length) {
+	                            let after = span.slice(i);
+	                            if (!expressing) {
+	                                // trim trailing whitespace
+	                                after = after.replace(/\s*$/, "");
+	                            }
+	                            if (after) {
+	                                element.children.push({ type: "value", value: after });
+	                            }
+	                        }
+	                    }
+	                    break;
+	                }
+	                case PROPS_RE: {
+	                    if (match) {
+	                        const [, tagEnd, spread, name, equals, string] = match;
+	                        if (i < match.index) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+	                        }
+	                        if (tagEnd) {
+	                            if (tagEnd[0] === "/") {
+	                                // This is a self-closing element, so there will always be a
+	                                // result on the stack.
+	                                element = stack.pop();
+	                            }
+	                            matcher = CHILDREN_RE;
+	                        }
+	                        else if (spread) {
+	                            const value = {
+	                                type: "value",
+	                                value: null,
+	                            };
+	                            element.props.push(value);
+	                            // SPREAD PROP EXPRESSION
+	                            expressionTarget = value;
+	                            if (!(expressing && end === span.length)) {
+	                                throw new SyntaxError('Expression expected after "..."');
+	                            }
+	                        }
+	                        else if (name) {
+	                            let value;
+	                            if (string == null) {
+	                                if (!equals) {
+	                                    value = { type: "value", value: true };
+	                                }
+	                                else if (end < span.length) {
+	                                    throw new SyntaxError(`Unexpected text \`${span.slice(end, end + 20)}\``);
+	                                }
+	                                else {
+	                                    value = { type: "value", value: null };
+	                                    // PROP EXPRESSION
+	                                    expressionTarget = value;
+	                                    if (!(expressing && end === span.length)) {
+	                                        throw new SyntaxError(`Expression expected for prop "${name}"`);
+	                                    }
+	                                }
+	                            }
+	                            else {
+	                                const quote = string[0];
+	                                value = { type: "propString", parts: [] };
+	                                value.parts.push(string);
+	                                if (end === span.length) {
+	                                    matcher =
+	                                        quote === "'"
+	                                            ? CLOSING_SINGLE_QUOTE_RE
+	                                            : CLOSING_DOUBLE_QUOTE_RE;
+	                                }
+	                            }
+	                            const prop = {
+	                                type: "prop",
+	                                name,
+	                                value,
+	                            };
+	                            element.props.push(prop);
+	                        }
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            if (i === span.length) {
+	                                throw new SyntaxError(`Expected props but reached end of document`);
+	                            }
+	                            else {
+	                                throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+	                            }
+	                        }
+	                        // Unexpected expression errors are handled in the outer loop.
+	                        //
+	                        // This would most likely be the starting point for the logic of
+	                        // prop name expressions.
+	                        //   jsx`<p ${name}=${value}>`
+	                    }
+	                    break;
+	                }
+	                case CLOSING_BRACKET_RE: {
+	                    // We’re in a closing tag and looking for the >.
+	                    if (match) {
+	                        if (i < match.index) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, match.index).trim()}\``);
+	                        }
+	                        matcher = CHILDREN_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError(`Unexpected text \`${span.slice(i, i + 20).trim()}\``);
+	                        }
+	                    }
+	                    break;
+	                }
+	                case CLOSING_SINGLE_QUOTE_RE:
+	                case CLOSING_DOUBLE_QUOTE_RE: {
+	                    const string = span.slice(i, end);
+	                    const prop = element.props[element.props.length - 1];
+	                    const propString = prop.value;
+	                    propString.parts.push(string);
+	                    if (match) {
+	                        matcher = PROPS_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError(`Missing \`${matcher === CLOSING_SINGLE_QUOTE_RE ? "'" : '"'}\``);
+	                        }
+	                    }
+	                    break;
+	                }
+	                case CLOSING_COMMENT_RE: {
+	                    if (match) {
+	                        matcher = CHILDREN_RE;
+	                    }
+	                    else {
+	                        if (!expressing) {
+	                            throw new SyntaxError("Expected `-->` but reached end of template");
+	                        }
+	                    }
+	                    break;
+	                }
+	            }
+	        }
+	        if (expressing) {
+	            if (expressionTarget) {
+	                targets.push(expressionTarget);
+	                if (expressionTarget.type === "error") {
+	                    break;
+	                }
+	                continue;
+	            }
+	            switch (matcher) {
+	                case CHILDREN_RE: {
+	                    const target = { type: "value", value: null };
+	                    element.children.push(target);
+	                    targets.push(target);
+	                    break;
+	                }
+	                case CLOSING_SINGLE_QUOTE_RE:
+	                case CLOSING_DOUBLE_QUOTE_RE: {
+	                    const prop = element.props[element.props.length - 1];
+	                    const target = { type: "value", value: null };
+	                    prop.value.parts.push(target);
+	                    targets.push(target);
+	                    break;
+	                }
+	                case CLOSING_COMMENT_RE:
+	                    targets.push(null);
+	                    break;
+	                default:
+	                    throw new SyntaxError("Unexpected expression");
+	            }
+	        }
+	        else if (expressionTarget) {
+	            throw new SyntaxError("Expression expected");
+	        }
+	        lineStart = false;
+	    }
+	    if (stack.length) {
+	        const ti = targets.indexOf(element.open);
+	        if (ti === -1) {
+	            throw new SyntaxError(`Unmatched opening tag "${element.open.value}"`);
+	        }
+	        targets[ti] = {
+	            type: "error",
+	            message: "Unmatched opening tag ${}",
+	            value: null,
+	        };
+	    }
+	    if (element.children.length === 1 && element.children[0].type === "element") {
+	        element = element.children[0];
+	    }
+	    return { element, targets };
+	}
+	function build(parsed) {
+	    if (parsed.close !== null &&
+	        parsed.close.slash !== "//" &&
+	        parsed.open.value !== parsed.close.value) {
+	        throw new SyntaxError(`Unmatched closing tag ${formatTagForError(parsed.close.value)}, expected ${formatTagForError(parsed.open.value)}`);
+	    }
+	    const children = [];
+	    for (let i = 0; i < parsed.children.length; i++) {
+	        const child = parsed.children[i];
+	        children.push(child.type === "element" ? build(child) : child.value);
+	    }
+	    let props = parsed.props.length ? {} : null;
+	    for (let i = 0; i < parsed.props.length; i++) {
+	        const prop = parsed.props[i];
+	        if (prop.type === "prop") {
+	            let value;
+	            if (prop.value.type === "value") {
+	                value = prop.value.value;
+	            }
+	            else {
+	                let string = "";
+	                for (let i = 0; i < prop.value.parts.length; i++) {
+	                    const part = prop.value.parts[i];
+	                    if (typeof part === "string") {
+	                        string += part;
+	                    }
+	                    else if (typeof part.value !== "boolean" && part.value != null) {
+	                        string +=
+	                            typeof part.value === "string" ? part.value : String(part.value);
+	                    }
+	                }
+	                value = string
+	                    // remove quotes
+	                    .slice(1, -1)
+	                    // unescape things
+	                    // adapted from https://stackoverflow.com/a/57330383/1825413
+	                    .replace(/\\x[0-9a-f]{2}|\\u[0-9a-f]{4}|\\u\{[0-9a-f]+\}|\\./gi, (match) => {
+	                    switch (match[1]) {
+	                        case "b":
+	                            return "\b";
+	                        case "f":
+	                            return "\f";
+	                        case "n":
+	                            return "\n";
+	                        case "r":
+	                            return "\r";
+	                        case "t":
+	                            return "\t";
+	                        case "v":
+	                            return "\v";
+	                        case "x":
+	                            return String.fromCharCode(parseInt(match.slice(2), 16));
+	                        case "u":
+	                            if (match[2] === "{") {
+	                                return String.fromCodePoint(parseInt(match.slice(3, -1), 16));
+	                            }
+	                            return String.fromCharCode(parseInt(match.slice(2), 16));
+	                        case "0":
+	                            return "\0";
+	                        default:
+	                            return match.slice(1);
+	                    }
+	                });
+	            }
+	            props[prop.name] = value;
+	        }
+	        else {
+	            // spread prop
+	            props = { ...props, ...prop.value };
+	        }
+	    }
+	    return createElement(parsed.open.value, props, ...children);
+	}
+	function formatTagForError(tag) {
+	    return typeof tag === "function"
+	        ? tag.name + "()"
+	        : typeof tag === "string"
+	            ? `"${tag}"`
+	            : JSON.stringify(tag);
+	}
+
 	const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 	const impl$1 = {
 	    parse(text) {
@@ -2192,6 +2615,7 @@
 	exports.dom = dom;
 	exports.html = html;
 	exports.isElement = isElement;
+	exports.jsx = jsx;
 
 	Object.defineProperty(exports, '__esModule', { value: true });