babel-plugin-vasille 0.99.4 → 3.1.0

package/lib/jsx-detect.js

@@ -9,15 +9,6 @@ export function exprHasJsx(node) {
     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) {
@@ -50,6 +41,17 @@ export function statementHasJsx(statement) {
     if (t.isReturnStatement(statement)) {
         return !!statement.argument && exprHasJsx(statement.argument);
     }
+    if (t.isTryStatement(statement)) {
+        return (statementHasJsx(statement.block) ||
+            (!!statement.handler && statementHasJsx(statement.handler.body)) ||
+            (!!statement.finalizer && statementHasJsx(statement.finalizer)));
+    }
+    if (t.isIfStatement(statement)) {
+        return statementHasJsx(statement.consequent) || (!!statement.alternate && statementHasJsx(statement.alternate));
+    }
+    if (t.isForStatement(statement)) {
+        return statementHasJsx(statement.body);
+    }
     return false;
 }
 export function bodyHasJsx(node) {

package/lib/jsx.js

@@ -1,8 +1,8 @@
 import * as t from "@babel/types";
-import { ctx } from "./internal";
-import { exprCall } from "./lib";
-import { compose, meshExpression } from "./mesh";
-import { bodyHasJsx } from "./jsx-detect";
+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)];
@@ -54,37 +54,32 @@ export function transformJsxArray(paths, internal) {
     return result;
 }
 function transformJsxExpressionContainer(path, internal, acceptSlots, isInternalSlot) {
-    if (!t.isExpression(path.node.expression)) {
-        return t.booleanLiteral(true);
-    }
-    const loc = path.node.expression.loc;
+    const expression = path.node.expression;
+    const loc = expression.loc;
     if (acceptSlots &&
-        (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression)) &&
-        bodyHasJsx(path.node.expression.body)) {
+        (t.isFunctionExpression(expression) || t.isArrowFunctionExpression(expression)) &&
+        bodyHasJsx(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));
+            if (expression.params.length < 1) {
+                expression.params.push(t.identifier(`_${internal.prefix}`));
             }
-            path.node.expression.params.push(ctx);
+            expression.params.push(ctx);
         }
         else {
-            path.node.expression.params.unshift(ctx);
+            expression.params.unshift(ctx);
         }
-        path.node.expression.loc = loc;
-        return path.node.expression;
+        expression.loc = loc;
+        return expression;
     }
-    else if (isInternalSlot &&
-        (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression))) {
-        path.node.expression.params.unshift(ctx);
+    else if (isInternalSlot && (t.isFunctionExpression(expression) || t.isArrowFunctionExpression(expression))) {
+        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]);
+    let call = exprCall(path.get("expression"), expression, internal);
+    if (!call && t.isIdentifier(expression) && internal.stack.get(expression.name) === 3 /* VariableState.ReactiveObject */) {
+        call = t.callExpression(t.memberExpression(internal.id, t.identifier("rop")), [expression]);
     }
-    const result = call !== null && call !== void 0 ? call : path.node.expression;
+    const result = call ?? expression;
     result.loc = loc;
     return result;
 }
@@ -104,7 +99,6 @@ function idToProp(id, value, from) {
     return t.objectProperty(expr, value);
 }
 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");
@@ -146,7 +140,7 @@ function transformJsxElement(path, internal) {
                                     // class={[cond && "string"]}
                                     if (t.isLogicalExpression(item) && item.operator === "&&" && t.isStringLiteral(item.right)) {
                                         const call = exprCall(elementPath.get("left"), item.left, internal);
-                                        classObject.push(idToProp(item.right, call !== null && call !== void 0 ? call : item.left));
+                                        classObject.push(idToProp(item.right, call ?? item.left));
                                     }
                                     // class={[{..}]}
                                     else if (t.isObjectExpression(item)) {
@@ -154,7 +148,7 @@ function transformJsxElement(path, internal) {
                                             // 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;
+                                                const value = exprCall(prop.get("value"), prop.node.value, internal) ?? prop.node.value;
                                                 if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
                                                     meshExpression(prop.get("key"), internal);
                                                 }
@@ -166,7 +160,7 @@ function transformJsxElement(path, internal) {
                                             }
                                             // class={[{a(){}}]}
                                             else {
-                                                throw propPath.buildCodeFrameError("Vasille: Methods are not alllowed here");
+                                                throw propPath.buildCodeFrameError("Vasille: Methods are not allowed here");
                                             }
                                         }
                                     }
@@ -177,7 +171,7 @@ function transformJsxElement(path, internal) {
                                     // class={[..]}
                                     else {
                                         const call = exprCall(elementPath, item, internal);
-                                        classElements.push(call !== null && call !== void 0 ? call : item);
+                                        classElements.push(call ?? item);
                                     }
                                 }
                                 // class={[...array]}
@@ -195,19 +189,19 @@ function transformJsxElement(path, internal) {
                             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));
+                            attrs.push(t.objectProperty(t.identifier("class"), value ?? attr.value.expression));
                             if (value) {
                                 console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
                             }
                         }
+                        // class={name}
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isIdentifier(attr.value.expression)) {
+                            attrs.push(t.objectProperty(t.identifier("class"), attr.value.expression));
+                        }
                         // class="a b"
                         else if (t.isStringLiteral(attr.value)) {
                             classStatic.push(attr.value);
                         }
-                        // class=<div/>
-                        else {
-                            throw attrPath.buildCodeFrameError('Vasille: Value of "class" attribute must be an array expression');
-                        }
                     }
                     else if (name.name === "style") {
                         // style={{..}}
@@ -218,7 +212,7 @@ function transformJsxElement(path, internal) {
                                 // 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;
+                                    const value = exprCall(prop.get("value"), prop.node.value, internal) ?? prop.node.value;
                                     if (t.isExpression(prop.node.key) && !t.isIdentifier(prop.node.key)) {
                                         meshExpression(prop.get("key"), internal);
                                     }
@@ -254,10 +248,14 @@ function transformJsxElement(path, internal) {
                                 }
                                 // style={{a(){}}}
                                 else {
-                                    throw propPath.buildCodeFrameError("Vasille: Methods are not alllowed here");
+                                    throw propPath.buildCodeFrameError("Vasille: Methods are not allowed here");
                                 }
                             }
                         }
+                        // style=".."
+                        else if (t.isStringLiteral(attr.value)) {
+                            attrs.push(t.objectProperty(t.identifier("style"), attr.value));
+                        }
                         // style={".."}
                         else if (t.isJSXExpressionContainer(attr.value) && t.isStringLiteral(attr.value.expression)) {
                             attrs.push(t.objectProperty(t.identifier("style"), attr.value.expression));
@@ -268,42 +266,32 @@ function transformJsxElement(path, internal) {
                             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));
+                            attrs.push(t.objectProperty(t.identifier("style"), 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(idToProp(name, t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true)));
+                        if (!attr.value || t.isJSXExpressionContainer(attr.value)) {
+                            attrs.push(idToProp(name, t.isExpression(attr.value?.expression) ? attr.value.expression : t.booleanLiteral(true)));
                         }
                         else if (t.isStringLiteral(attr.value)) {
                             attrs.push(idToProp(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)
+                        if (t.isJSXExpressionContainer(attr.value) || !attr.value) {
+                            const value = t.isExpression(attr.value?.expression)
+                                ? exprCall(attrPath.get("value").get("expression"), attr.value.expression, internal)
                                 : undefined;
-                            bind.push(idToProp(name.name, value !== null && value !== void 0 ? value : (t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true))));
+                            bind.push(idToProp(name.name, value ?? (t.isExpression(attr.value?.expression) ? attr.value.expression : t.booleanLiteral(true))));
                         }
                         else if (t.isStringLiteral(attr.value)) {
                             bind.push(idToProp(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");
@@ -368,8 +356,8 @@ function transformJsxElement(path, internal) {
                     const value = transformJsxExpressionContainer(attrPath.get("value"), internal, !isSystem || attr.name.name === "slot", isSystem && attr.name.name === "slot");
                     props.push(idToProp(attr.name, value));
                 }
-                else {
-                    throw attrPath.buildCodeFrameError("Vasille: JSX Elements/Fragments are not supported here");
+                else if (!attr.value) {
+                    props.push(idToProp(attr.name, t.booleanLiteral(true)));
                 }
             }
             // <A {...arg}/>
@@ -381,22 +369,33 @@ function transformJsxElement(path, internal) {
                 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);
+        const filteredChildren = element.children.filter(item => {
+            if (!t.isJSXText(item)) {
+                return true;
+            }
+            return !!item.value.trim();
+        });
+        const isInternal = internal.mapping.has(name.name);
+        if (filteredChildren.length === 1 &&
+            t.isJSXExpressionContainer(filteredChildren[0]) &&
+            (t.isFunctionExpression(filteredChildren[0].expression) ||
+                t.isArrowFunctionExpression(filteredChildren[0].expression))) {
+            transformJsxExpressionContainer(path.get("children")[element.children.indexOf(filteredChildren[0])], internal, true, isInternal);
+            run = filteredChildren[0].expression;
         }
         else {
             const statements = transformJsxArray(path.get("children"), internal);
             if (statements.length > 0) {
-                run = t.arrowFunctionExpression([ctx], t.blockStatement(statements));
+                const params = [ctx];
+                if (!isInternal) {
+                    params.unshift(t.identifier(`_${internal.prefix}`));
+                }
+                run = t.arrowFunctionExpression(params, t.blockStatement(statements));
             }
         }
         const call = t.callExpression(t.identifier(name.name), [ctx, t.objectExpression(props), ...(run ? [run] : [])]);
         call.loc = path.node.loc;
         return t.expressionStatement(call);
     }
-    throw path.buildCodeFrameError("Vasille: Unsupported tag detected, html lowercase tagnames and components are accepted");
+    throw path.buildCodeFrameError("Vasille: Unsupported tag detected, html lowercase tag names and components are accepted");
 }

package/lib/lib.js

@@ -1,19 +1,29 @@
 import * as t from "@babel/types";
-import { checkNode, encodeName } from "./expression";
-import { ctx } from "./internal";
-import { calls } from "./call";
+import { checkNode, encodeName } from "./expression.js";
+import { ctx } from "./internal.js";
+import { calls } from "./call.js";
+export function named(call, name, internal, argPos) {
+    if (internal.devMode && !internal.stateOnly && name) {
+        while (argPos && call.arguments.length < argPos) {
+            call.arguments.push(t.buildUndefinedNode());
+        }
+        call.arguments.push(...(typeof name === "string" ? [t.stringLiteral(name)] : name.map(item => t.stringLiteral(item))));
+    }
+    return call;
+}
 export function parseCalculateCall(path, internal) {
     if (t.isCallExpression(path.node) && calls(path.node, ["calculate", "watch"], internal)) {
+        const call = path.node.arguments[0];
         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) {
+        if (t.isFunctionExpression(call) || t.isArrowFunctionExpression(call)) {
+            if (call.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()];
+            call.params = [...exprData.found.keys()].map(name => encodeName(name));
+            return [call, t.arrayExpression([...exprData.found.values()])];
         }
         else {
             throw path.buildCodeFrameError("Vasille: Argument of calculate must be a function");
@@ -21,41 +31,36 @@ export function parseCalculateCall(path, internal) {
     }
     return null;
 }
-export function exprCall(path, expr, internal) {
+export function exprCall(path, expr, internal, name) {
     const calculateCall = parseCalculateCall(path, internal);
     if (calculateCall) {
-        return t.callExpression(t.memberExpression(ctx, t.identifier("expr")), calculateCall);
+        return named(t.callExpression(internal.stateOnly
+            ? t.memberExpression(internal.id, t.identifier("ex"))
+            : t.memberExpression(ctx, t.identifier("expr")), calculateCall), name, internal);
+    }
+    if (t.isCallExpression(expr) &&
+        calls(expr, ["forward"], internal) &&
+        expr.arguments.length === 1 &&
+        t.isExpression(expr.arguments[0])) {
+        const data = exprCall(path.get("arguments")[0], expr.arguments[0], internal);
+        if (data && !t.isCallExpression(data)) {
+            return t.callExpression(t.memberExpression(internal.id, t.identifier("fo")), [data]);
+        }
     }
     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;
+    if (exprData.self) {
+        return exprData.self;
+    }
+    const names = [...exprData.found.keys()].map(name => encodeName(name));
+    const dependencies = t.arrayExpression([...exprData.found.values()]);
+    if (names.length > 0 && expr) {
+        return named(t.callExpression(internal.stateOnly
+            ? t.memberExpression(internal.id, t.identifier("ex"))
+            : t.memberExpression(ctx, t.identifier("expr")), [t.arrowFunctionExpression(names, expr), dependencies]), name, internal);
+    }
+    return 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);
@@ -66,25 +71,38 @@ export function forwardOnlyExpr(path, expr, internal) {
         : 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(),
+                t.arrayExpression([...exprData.found.values()]),
             ])
             : null;
 }
-export function own(expr) {
-    return t.callExpression(t.memberExpression(ctx, t.identifier("own")), [expr]);
+export function own(expr, internal, name) {
+    if (internal.stateOnly &&
+        t.isCallExpression(expr) &&
+        t.isMemberExpression(expr.callee) &&
+        t.isIdentifier(expr.callee.property) &&
+        expr.callee.property.name === "fo" &&
+        t.isIdentifier(expr.callee.object) &&
+        expr.callee.object === internal.id) {
+        return expr;
+    }
+    return named(t.callExpression(internal.stateOnly
+        ? t.memberExpression(internal.id, t.identifier("fo"))
+        : t.memberExpression(ctx, t.identifier("own")), [expr]), name, internal);
 }
-export function ref(expr) {
-    return t.callExpression(t.memberExpression(ctx, t.identifier("ref")), expr ? [expr] : []);
+export function ref(expr, internal, name) {
+    return named(t.callExpression(internal.stateOnly
+        ? t.memberExpression(internal.id, t.identifier("r"))
+        : t.memberExpression(ctx, t.identifier("ref")), expr ? [expr] : []), name, internal, 1);
 }
-export function reactiveObject(init, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("ro")), [ctx, init]);
+export function reactiveObject(init, internal, name) {
+    return named(t.callExpression(t.memberExpression(internal.id, t.identifier(internal.stateOnly ? "sro" : "ro")), internal.stateOnly ? [init] : [ctx, init]), name, internal);
 }
-export function arrayModel(init, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("am")), [ctx, ...(init ? [init] : [])]);
+export function arrayModel(init, internal, name) {
+    return named(t.callExpression(t.memberExpression(internal.id, t.identifier(internal.stateOnly ? "sam" : "am")), internal.stateOnly ? (init ? [init] : []) : [ctx, ...(init ? [init] : [])]), name, internal, 2);
 }
-export function setModel(args, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("sm")), [ctx, ...args]);
+export function setModel(args, internal, name) {
+    return named(t.callExpression(t.memberExpression(internal.id, t.identifier(internal.stateOnly ? "ssm" : "sm")), internal.stateOnly ? args : [ctx, ...args]), name, internal);
 }
-export function mapModel(args, internal) {
-    return t.callExpression(t.memberExpression(internal.id, t.identifier("mm")), [ctx, ...args]);
+export function mapModel(args, internal, name) {
+    return named(t.callExpression(t.memberExpression(internal.id, t.identifier(internal.stateOnly ? "smm" : "mm")), internal.stateOnly ? args : [ctx, ...args]), name, internal);
 }