babel-plugin-vasille 0.99.0

package/lib/internal.js

@@ -0,0 +1,25 @@
+import * as t from "@babel/types";
+export class StackedStates {
+    constructor() {
+        this.maps = [];
+        this.push();
+    }
+    push() {
+        this.maps.push(new Map());
+    }
+    pop() {
+        this.maps.pop();
+    }
+    get(name) {
+        for (let i = this.maps.length - 1; i >= 0; i--) {
+            if (this.maps[i].has(name)) {
+                return this.maps[i].get(name);
+            }
+        }
+        return undefined;
+    }
+    set(name, state) {
+        this.maps[this.maps.length - 1].set(name, state);
+    }
+}
+export const ctx = t.identifier("Vasille");

package/lib/jsx-detect.js

@@ -0,0 +1,60 @@
+import * as t from "@babel/types";
+export function exprHasJsx(node) {
+    if (t.isBinaryExpression(node)) {
+        return (t.isExpression(node.left) && exprHasJsx(node.left)) || exprHasJsx(node.right);
+    }
+    if (t.isConditionalExpression(node)) {
+        return exprHasJsx(node.consequent) || exprHasJsx(node.alternate);
+    }
+    if (t.isLogicalExpression(node)) {
+        return exprHasJsx(node.left) || exprHasJsx(node.right);
+    }
+    if (t.isSequenceExpression(node)) {
+        return node.expressions.some(item => exprHasJsx(item));
+    }
+    if (t.isParenthesizedExpression(node)) {
+        return exprHasJsx(node.expression);
+    }
+    if (t.isDoExpression(node)) {
+        return bodyHasJsx(node.body);
+    }
+    return t.isJSXElement(node) || t.isJSXFragment(node);
+}
+export function statementHasJsx(statement) {
+    if (t.isExpressionStatement(statement)) {
+        return exprHasJsx(statement.expression);
+    }
+    if (t.isBlockStatement(statement)) {
+        return bodyHasJsx(statement);
+    }
+    if (t.isDoWhileStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
+    if (t.isForInStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
+    if (t.isSwitchStatement(statement)) {
+        return statement.cases.some(_case => {
+            return _case.consequent.some(statementHasJsx);
+        });
+    }
+    if (t.isWhileStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
+    if (t.isForOfStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
+    if (t.isLabeledStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
+    if (t.isReturnStatement(statement)) {
+        return !!statement.argument && exprHasJsx(statement.argument);
+    }
+    return false;
+}
+export function bodyHasJsx(node) {
+    if (t.isExpression(node)) {
+        return exprHasJsx(node);
+    }
+    return node.body.some(statementHasJsx);
+}

package/lib/jsx.js

@@ -0,0 +1,364 @@
+import * as t from "@babel/types";
+import { ctx } from "./internal.js";
+import { exprCall } from "./lib.js";
+import { compose, meshExpression } from "./mesh.js";
+import { bodyHasJsx } from "./jsx-detect.js";
+export function transformJsx(path, internal) {
+    if (t.isJSXElement(path.node)) {
+        return [transformJsxElement(path, internal)];
+    }
+    return transformJsxArray(path.get("children"), internal);
+}
+export function transformJsxArray(paths, internal) {
+    const result = [];
+    for (const path of paths) {
+        if (t.isJSXElement(path.node) || t.isJSXFragment(path.node)) {
+            result.push(...transformJsx(path, internal));
+        }
+        else if (t.isJSXText(path.node)) {
+            if (!/^\s+$/.test(path.node.value)) {
+                const fixed = path.node.value
+                    .replace(/\n\s+$/m, "")
+                    .replace(/^\s*\n\s+/m, "")
+                    .replace(/\s*\n\s*/gm, "\n");
+                result.push(t.expressionStatement(t.callExpression(t.memberExpression(ctx, t.identifier("text")), [t.stringLiteral(fixed)])));
+            }
+        }
+        else if (t.isJSXExpressionContainer(path.node)) {
+            const value = transformJsxExpressionContainer(path, internal, false, false);
+            result.push(t.expressionStatement(t.callExpression(t.memberExpression(ctx, t.identifier("text")), [value])));
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Spread child is not supported");
+        }
+    }
+    return result;
+}
+function transformJsxExpressionContainer(path, internal, acceptSlots, isInternalSlot) {
+    if (!t.isExpression(path.node.expression)) {
+        return t.booleanLiteral(true);
+    }
+    if (acceptSlots &&
+        (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression)) &&
+        bodyHasJsx(path.node.expression.body)) {
+        compose(path.get("expression"), internal, isInternalSlot);
+        if (!isInternalSlot) {
+            if (path.node.expression.params.length < 1) {
+                path.node.expression.params.push(t.identifier(internal.prefix));
+            }
+            path.node.expression.params.push(ctx);
+        }
+        else {
+            path.node.expression.params.unshift(ctx);
+        }
+        return path.node.expression;
+    }
+    else if (isInternalSlot &&
+        (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression))) {
+        path.node.expression.params.unshift(ctx);
+    }
+    let call = exprCall(path.get("expression"), path.node.expression, internal);
+    if (!call &&
+        t.isIdentifier(path.node.expression) &&
+        internal.stack.get(path.node.expression.name) === 3 /* VariableState.ReactiveObject */) {
+        call = t.callExpression(t.memberExpression(internal.id, t.identifier("rop")), [path.node.expression]);
+    }
+    return call !== null && call !== void 0 ? call : path.node.expression;
+}
+function id(str) {
+    if (/^[\w_]+$/.test(str)) {
+        return t.identifier(str);
+    }
+    else {
+        return t.stringLiteral(str);
+    }
+}
+function transformJsxElement(path, internal) {
+    var _a, _b;
+    const name = path.node.openingElement.name;
+    if (t.isJSXIdentifier(name) && name.name[0].toLowerCase() === name.name[0]) {
+        const opening = path.get("openingElement");
+        const attrs = [];
+        const events = [];
+        const bind = [];
+        const classElements = [];
+        const classObject = [];
+        const classStatic = [];
+        const styleObject = [];
+        const styleStatic = [];
+        for (const attrPath of opening.get("attributes")) {
+            const attr = attrPath.node;
+            if (t.isJSXAttribute(attr)) {
+                const name = attr.name;
+                if (t.isJSXIdentifier(name)) {
+                    if (name.name.startsWith("on")) {
+                        if (t.isJSXExpressionContainer(attr.value) && t.isExpression(attr.value.expression)) {
+                            const path = attrPath.get("value");
+                            if (t.isExpression(path.node.expression)) {
+                                meshExpression(path.get("expression"), internal);
+                            }
+                            events.push(t.objectProperty(id(name.name.substring(2)), path.node.expression));
+                        }
+                        else {
+                            throw attrPath
+                                .get("value")
+                                .buildCodeFrameError("Vasille: Expected event handler.");
+                        }
+                    }
+                    else if (name.name === "class") {
+                        // class={[..]}
+                        if (t.isJSXExpressionContainer(attr.value) && t.isArrayExpression(attr.value.expression)) {
+                            const valuePath = attrPath.get("value");
+                            const arrayExprPath = valuePath.get("expression");
+                            for (const elementPath of arrayExprPath.get("elements")) {
+                                const item = elementPath.node;
+                                if (t.isExpression(item)) {
+                                    // class={[cond && "string"]}
+                                    if (t.isLogicalExpression(item) && item.operator === "&&" && t.isStringLiteral(item.right)) {
+                                        const call = exprCall(elementPath.get("left"), item.left, internal);
+                                        classObject.push(t.objectProperty(id(item.right.value), call !== null && call !== void 0 ? call : item.left));
+                                    }
+                                    // class={[{..}]}
+                                    else if (t.isObjectExpression(item)) {
+                                        for (const propPath of elementPath.get("properties")) {
+                                            // class={[{a: b}]}
+                                            if (t.isObjectProperty(propPath.node)) {
+                                                const prop = propPath;
+                                                const value = (_a = exprCall(prop.get("value"), prop.node.value, internal)) !== null && _a !== void 0 ? _a : prop.node.value;
+                                                if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
+                                                    meshExpression(prop.get("key"), internal);
+                                                }
+                                                classObject.push(t.objectProperty(prop.node.key, value));
+                                            }
+                                            // class={[{...a}]}
+                                            else if (t.isSpreadElement(propPath.node)) {
+                                                classObject.push(propPath.node);
+                                            }
+                                            // class={[{a(){}}]}
+                                            else {
+                                                throw propPath.buildCodeFrameError("Vasille: Methods are not alllowed here");
+                                            }
+                                        }
+                                    }
+                                    // class={[".."]}
+                                    else if (t.isStringLiteral(elementPath.node)) {
+                                        classStatic.push(elementPath.node.value);
+                                    }
+                                    // class={[..]}
+                                    else {
+                                        const call = exprCall(elementPath, item, internal);
+                                        classElements.push(call !== null && call !== void 0 ? call : item);
+                                    }
+                                }
+                                // class={[...array]}
+                                else {
+                                    classElements.push(elementPath.node);
+                                }
+                            }
+                        }
+                        // class={"a b"}
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression)) {
+                            attrs.push(t.objectProperty(t.identifier("class"), attr.value.expression));
+                        }
+                        // class={`a ${b}`}
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isTemplateLiteral(attr.value.expression)) {
+                            const jsxAttrPath = attrPath;
+                            const jsxContainerPath = jsxAttrPath.get("value");
+                            const value = exprCall(jsxContainerPath.get("expression"), attr.value.expression, internal);
+                            attrs.push(t.objectProperty(t.identifier("class"), value !== null && value !== void 0 ? value : attr.value.expression));
+                            if (value) {
+                                console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
+                            }
+                        }
+                        // class="a b"
+                        else if (t.isStringLiteral(attr.value)) {
+                            const splitted = attr.value.value.split(" ");
+                            for (const item of splitted) {
+                                classStatic.push(item);
+                            }
+                        }
+                        // class=<div/>
+                        else {
+                            throw attrPath.buildCodeFrameError('Vasille: Value of "class" attribute must be an array expression');
+                        }
+                    }
+                    else if (name.name === "style") {
+                        // style={{..}}
+                        if (t.isJSXExpressionContainer(attr.value) && t.isObjectExpression(attr.value.expression)) {
+                            const valuePath = attrPath.get("value");
+                            const objectPath = valuePath.get("expression");
+                            for (const propPath of objectPath.get("properties")) {
+                                // style={{a: b}}
+                                if (t.isObjectProperty(propPath.node)) {
+                                    const prop = propPath;
+                                    const value = (_b = exprCall(prop.get("value"), prop.node.value, internal)) !== null && _b !== void 0 ? _b : prop.node.value;
+                                    if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
+                                        meshExpression(prop.get("key"), internal);
+                                    }
+                                    // style={{a: "b"}} -> static in compile time
+                                    if (t.isIdentifier(prop.node.key) && t.isStringLiteral(prop.node.value)) {
+                                        styleStatic.push([prop.node.key, prop.node.value]);
+                                    }
+                                    // style={{a: 23}} -> static in compile time
+                                    else if (t.isIdentifier(prop.node.key) && t.isNumericLiteral(prop.node.value)) {
+                                        styleStatic.push([prop.node.key, t.stringLiteral(`${prop.node.value.value}px`)]);
+                                    }
+                                    // style={{a: [1, 2, 3]}} -> static in compile time
+                                    else if (t.isIdentifier(prop.node.key) &&
+                                        t.isArrayExpression(prop.node.value) &&
+                                        prop.node.value.elements.every(item => t.isNumericLiteral(item))) {
+                                        styleStatic.push([
+                                            prop.node.key,
+                                            t.stringLiteral(prop.node.value.elements
+                                                .map(item => {
+                                                return `${item.value}px`;
+                                            })
+                                                .join(" ")),
+                                        ]);
+                                    }
+                                    // need processing in run time
+                                    else {
+                                        styleObject.push(t.objectProperty(prop.node.key, value));
+                                    }
+                                }
+                                // style={{...a}}
+                                else if (t.isSpreadElement(propPath.node)) {
+                                    styleObject.push(propPath.node);
+                                }
+                                // style={{a(){}}}
+                                else {
+                                    throw propPath.buildCodeFrameError("Vasille: Methods are not alllowed here");
+                                }
+                            }
+                        }
+                        // style={".."}
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression)) {
+                            attrs.push(t.objectProperty(t.identifier("style"), attr.value.expression));
+                        }
+                        // style={`a: ${b}px`}
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isTemplateLiteral(attr.value.expression)) {
+                            const jsxAttrPath = attrPath;
+                            const jsxContainerPath = jsxAttrPath.get("value");
+                            const literalPath = jsxContainerPath.get("expression");
+                            const value = exprCall(literalPath, attr.value.expression, internal);
+                            attrs.push(t.objectProperty(t.identifier("style"), value !== null && value !== void 0 ? value : attr.value.expression));
+                            if (value) {
+                                console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
+                            }
+                        }
+                        // style=<div/>
+                        else {
+                            throw attrPath.buildCodeFrameError('Vasille: Value of "style" attribute must be an object expression');
+                        }
+                    }
+                    else {
+                        if (t.isJSXExpressionContainer(attr.value)) {
+                            attrs.push(t.objectProperty(id(name.name), t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true)));
+                        }
+                        else if (t.isStringLiteral(attr.value)) {
+                            attrs.push(t.objectProperty(id(name.name), attr.value));
+                        }
+                        else {
+                            throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
+                        }
+                    }
+                }
+                if (t.isJSXNamespacedName(name)) {
+                    if (name.namespace.name === "bind") {
+                        if (t.isJSXExpressionContainer(attr.value)) {
+                            const value = t.isExpression(attr.value.expression)
+                                ? exprCall(attrPath.get("value"), attr.value.expression, internal)
+                                : undefined;
+                            bind.push(t.objectProperty(id(name.name.name), value !== null && value !== void 0 ? value : (t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true))));
+                        }
+                        else if (t.isStringLiteral(attr.value)) {
+                            bind.push(t.objectProperty(id(name.name.name), attr.value));
+                        }
+                        else {
+                            throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
+                        }
+                    }
+                    else {
+                        throw attrPath.buildCodeFrameError("Vasille: only bind namespace is supported");
+                    }
+                }
+            }
+            else {
+                throw attrPath.buildCodeFrameError("Vasille: Spread attribute is not allowed on HTML tags.");
+            }
+        }
+        if (classStatic.length > 0) {
+            attrs.push(t.objectProperty(t.identifier("class"), t.stringLiteral(classStatic.join(" "))));
+        }
+        if (styleStatic.length > 0) {
+            attrs.push(t.objectProperty(t.identifier("style"), t.stringLiteral(styleStatic.map(([id, value]) => `${id.name}:${value.value}`).join(";"))));
+        }
+        const statements = transformJsxArray(path.get("children"), internal);
+        return t.expressionStatement(t.callExpression(t.memberExpression(ctx, t.identifier("tag")), [
+            t.stringLiteral(name.name),
+            t.objectExpression([
+                ...(attrs.length > 0 ? [t.objectProperty(t.identifier("attr"), t.objectExpression(attrs))] : []),
+                ...(events.length > 0 ? [t.objectProperty(t.identifier("events"), t.objectExpression(events))] : []),
+                ...(bind.length > 0 ? [t.objectProperty(t.identifier("bind"), t.objectExpression(bind))] : []),
+                ...(classElements.length > 0 || classObject.length
+                    ? [
+                        t.objectProperty(t.identifier("class"), t.arrayExpression([
+                            ...classElements,
+                            ...(classObject.length > 0 ? [t.objectExpression(classObject)] : []),
+                        ])),
+                    ]
+                    : []),
+                ...(styleObject.length > 0 ? [t.objectProperty(t.identifier("style"), t.objectExpression(styleObject))] : []),
+            ]),
+            ...(statements.length > 0 ? [t.arrowFunctionExpression([ctx], t.blockStatement(statements))] : []),
+        ]));
+    }
+    if (t.isJSXIdentifier(name)) {
+        const element = path.node;
+        const opening = path.get("openingElement");
+        const props = [];
+        let run;
+        for (const attrPath of opening.get("attributes")) {
+            const attr = attrPath.node;
+            // <A prop=../>
+            if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+                // <A prop=".."/>
+                if (t.isStringLiteral(attr.value)) {
+                    props.push(t.objectProperty(id(attr.name.name), attr.value));
+                }
+                // <A prop={..}/>
+                else if (t.isJSXExpressionContainer(attr.value)) {
+                    const isSystem = internal.mapping.has(name.name);
+                    const value = transformJsxExpressionContainer(attrPath.get("value"), internal, !isSystem || attr.name.name === "slot", isSystem && attr.name.name === "slot");
+                    props.push(t.objectProperty(id(attr.name.name), value));
+                }
+                else {
+                    throw attrPath.buildCodeFrameError("Vasille: JSX Elements/Fragments are not supported here");
+                }
+            }
+            // <A {...arg}/>
+            else if (t.isJSXSpreadAttribute(attr)) {
+                props.push(t.spreadElement(attr.argument));
+            }
+            // <A space:name=../>
+            else {
+                throw attrPath.buildCodeFrameError("Vasille: Namespaced attributes names are not supported");
+            }
+        }
+        if (element.children.length === 1 &&
+            t.isJSXExpressionContainer(element.children[0]) &&
+            (t.isFunctionExpression(element.children[0].expression) ||
+                t.isArrowFunctionExpression(element.children[0].expression))) {
+            run = element.children[0].expression;
+            run.params.push(ctx);
+        }
+        else {
+            const statements = transformJsxArray(path.get("children"), internal);
+            if (statements.length > 0) {
+                run = t.arrowFunctionExpression([ctx], t.blockStatement(statements));
+            }
+        }
+        return t.expressionStatement(t.callExpression(t.identifier(name.name), [ctx, t.objectExpression(props), ...(run ? [run] : [])]));
+    }
+    throw path.buildCodeFrameError("Vasille: Unsupported tag detected, html lowercase tagnames and components are accepted");
+}

package/lib/lib.js

@@ -0,0 +1,90 @@
+import * as t from "@babel/types";
+import { checkNode, encodeName } from "./expression.js";
+import { ctx } from "./internal.js";
+import { calls } from "./call.js";
+export function parseCalculateCall(path, internal) {
+    if (t.isCallExpression(path.node) && calls(path.node, ["calculate", "watch"], internal)) {
+        if (path.node.arguments.length !== 1) {
+            throw path.buildCodeFrameError("Vasille: Incorrect number of arguments");
+        }
+        if (t.isFunctionExpression(path.node.arguments[0]) || t.isArrowFunctionExpression(path.node.arguments[0])) {
+            if (path.node.arguments[0].params.length > 0) {
+                throw path.buildCodeFrameError("Vasille: Argument of calculate cannot have parameters");
+            }
+            const exprData = checkNode(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => encodeName(name));
+            return [path.node.arguments[0], ...exprData.found.values()];
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Argument of calculate must be a function");
+        }
+    }
+    return null;
+}
+export function exprCall(path, expr, internal) {
+    const calculateCall = parseCalculateCall(path, internal);
+    if (calculateCall) {
+        return t.callExpression(t.memberExpression(ctx, t.identifier("expr")), calculateCall);
+    }
+    const exprData = checkNode(path, internal);
+    return exprData.self
+        ? exprData.self
+        : exprData.found.size > 0 && expr
+            ? t.callExpression(t.memberExpression(ctx, t.identifier("expr")), [
+                t.arrowFunctionExpression([...exprData.found.keys()].map(name => encodeName(name)), expr),
+                ...exprData.found.values(),
+            ])
+            : null;
+}
+export function forwardOnlyExpr(path, expr, internal) {
+    if (t.isCallExpression(path.node) && calls(path.node, ["calculate"], internal)) {
+        if (path.node.arguments.length !== 1) {
+            throw path.buildCodeFrameError("Vasille: Incorrect number of arguments");
+        }
+        if (t.isFunctionExpression(path.node.arguments[0]) || t.isArrowFunctionExpression(path.node.arguments[0])) {
+            if (path.node.arguments[0].params.length > 0) {
+                throw path.buildCodeFrameError("Vasille: Argument of calculate cannot have parameters");
+            }
+            const exprData = checkNode(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => encodeName(name));
+            return t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), [
+                path.node.arguments[0],
+                ...exprData.found.values(),
+            ]);
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Argument of calculate must be a function");
+        }
+    }
+    const calculateCall = parseCalculateCall(path, internal);
+    if (calculateCall) {
+        return t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), calculateCall);
+    }
+    const exprData = checkNode(path, internal);
+    return exprData.self
+        ? t.callExpression(t.memberExpression(internal.id, t.identifier("fo")), [exprData.self])
+        : exprData.found.size > 0 && expr
+            ? t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), [
+                t.arrowFunctionExpression([...exprData.found.keys()].map(name => encodeName(name)), expr),
+                ...exprData.found.values(),
+            ])
+            : null;
+}
+export function own(expr) {
+    return t.callExpression(t.memberExpression(ctx, t.identifier("own")), [expr]);
+}
+export function ref(expr) {
+    return t.callExpression(t.memberExpression(ctx, t.identifier("ref")), expr ? [expr] : []);
+}
+export function reactiveObject(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("ro")), [ctx, init]);
+}
+export function arrayModel(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("am")), [ctx, ...(init ? [init] : [])]);
+}
+export function setModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("sm")), [ctx, ...args]);
+}
+export function mapModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("mm")), [ctx, ...args]);
+}