babel-plugin-vasille 0.99.0

package/lib-node/jsx.js

@@ -0,0 +1,391 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformJsx = transformJsx;
+exports.transformJsxArray = transformJsxArray;
+const t = __importStar(require("@babel/types"));
+const internal_js_1 = require("./internal.js");
+const lib_js_1 = require("./lib.js");
+const mesh_js_1 = require("./mesh.js");
+const jsx_detect_js_1 = require("./jsx-detect.js");
+function transformJsx(path, internal) {
+    if (t.isJSXElement(path.node)) {
+        return [transformJsxElement(path, internal)];
+    }
+    return transformJsxArray(path.get("children"), internal);
+}
+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(internal_js_1.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(internal_js_1.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)) &&
+        (0, jsx_detect_js_1.bodyHasJsx)(path.node.expression.body)) {
+        (0, mesh_js_1.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(internal_js_1.ctx);
+        }
+        else {
+            path.node.expression.params.unshift(internal_js_1.ctx);
+        }
+        return path.node.expression;
+    }
+    else if (isInternalSlot &&
+        (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression))) {
+        path.node.expression.params.unshift(internal_js_1.ctx);
+    }
+    let call = (0, lib_js_1.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)) {
+                                (0, mesh_js_1.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 = (0, lib_js_1.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 = (0, lib_js_1.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)) {
+                                                    (0, mesh_js_1.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 = (0, lib_js_1.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 = (0, lib_js_1.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 = (0, lib_js_1.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)) {
+                                        (0, mesh_js_1.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 = (0, lib_js_1.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)
+                                ? (0, lib_js_1.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(internal_js_1.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([internal_js_1.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(internal_js_1.ctx);
+        }
+        else {
+            const statements = transformJsxArray(path.get("children"), internal);
+            if (statements.length > 0) {
+                run = t.arrowFunctionExpression([internal_js_1.ctx], t.blockStatement(statements));
+            }
+        }
+        return t.expressionStatement(t.callExpression(t.identifier(name.name), [internal_js_1.ctx, t.objectExpression(props), ...(run ? [run] : [])]));
+    }
+    throw path.buildCodeFrameError("Vasille: Unsupported tag detected, html lowercase tagnames and components are accepted");
+}

package/lib-node/lib.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCalculateCall = parseCalculateCall;
+exports.exprCall = exprCall;
+exports.forwardOnlyExpr = forwardOnlyExpr;
+exports.own = own;
+exports.ref = ref;
+exports.reactiveObject = reactiveObject;
+exports.arrayModel = arrayModel;
+exports.setModel = setModel;
+exports.mapModel = mapModel;
+const t = __importStar(require("@babel/types"));
+const expression_js_1 = require("./expression.js");
+const internal_js_1 = require("./internal.js");
+const call_js_1 = require("./call.js");
+function parseCalculateCall(path, internal) {
+    if (t.isCallExpression(path.node) && (0, call_js_1.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 = (0, expression_js_1.checkNode)(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => (0, expression_js_1.encodeName)(name));
+            return [path.node.arguments[0], ...exprData.found.values()];
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Argument of calculate must be a function");
+        }
+    }
+    return null;
+}
+function exprCall(path, expr, internal) {
+    const calculateCall = parseCalculateCall(path, internal);
+    if (calculateCall) {
+        return t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("expr")), calculateCall);
+    }
+    const exprData = (0, expression_js_1.checkNode)(path, internal);
+    return exprData.self
+        ? exprData.self
+        : exprData.found.size > 0 && expr
+            ? t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("expr")), [
+                t.arrowFunctionExpression([...exprData.found.keys()].map(name => (0, expression_js_1.encodeName)(name)), expr),
+                ...exprData.found.values(),
+            ])
+            : null;
+}
+function forwardOnlyExpr(path, expr, internal) {
+    if (t.isCallExpression(path.node) && (0, call_js_1.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 = (0, expression_js_1.checkNode)(path.get("arguments")[0], internal);
+            path.node.arguments[0].params = [...exprData.found.keys()].map(name => (0, expression_js_1.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 = (0, expression_js_1.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 => (0, expression_js_1.encodeName)(name)), expr),
+                ...exprData.found.values(),
+            ])
+            : null;
+}
+function own(expr) {
+    return t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("own")), [expr]);
+}
+function ref(expr) {
+    return t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("ref")), expr ? [expr] : []);
+}
+function reactiveObject(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("ro")), [internal_js_1.ctx, init]);
+}
+function arrayModel(init, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("am")), [internal_js_1.ctx, ...(init ? [init] : [])]);
+}
+function setModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("sm")), [internal_js_1.ctx, ...args]);
+}
+function mapModel(args, internal) {
+    return t.callExpression(t.memberExpression(internal.id, t.identifier("mm")), [internal_js_1.ctx, ...args]);
+}