babel-plugin-vasille 3.1.5 → 3.2.1

package/README.md

@@ -11,7 +11,7 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-simple-is-vasille)
+* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,6 +44,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `strong typing` makes your javascript/typescript code safe as C++ code.
 All entities of `vasille` core library are strongly typed, including:
   * data fields & properties.
-  * computed properties (function parameters & result).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ All entities of `vasille` core library are strongly typed, including:
   * references to children.
 * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
-## How SIMPLE is Vasille
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -105,7 +106,7 @@ All of these are supported:
 * [x] Develop the `Vasille Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add router.
+* [x] Add router.
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/lib/bridge.js

@@ -0,0 +1,173 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processBridgeCall = processBridgeCall;
+const t = __importStar(require("@babel/types"));
+const expression_1 = require("./expression");
+const lib_1 = require("./lib");
+const mesh_1 = require("./mesh");
+const utils_1 = require("./utils");
+const bridgeConstName = "bridge";
+function processBridgeCall(path, internal, search) {
+    const node = path.node;
+    if (t.isCallExpression(node) && t.isMemberExpression(node.callee)) {
+        const callee = node.callee;
+        let propName = null;
+        if (t.isIdentifier(callee.object)) {
+            const mapped = internal.mapping.get(callee.object.name);
+            if (mapped && mapped === bridgeConstName && internal.stack.get(callee.object.name) === undefined) {
+                propName = (0, utils_1.stringify)(callee.property);
+            }
+        }
+        if (t.isMemberExpression(callee.object) && t.isIdentifier(callee.object.object)) {
+            const rootName = callee.object.object.name;
+            if (rootName === internal.global &&
+                internal.stack.get(rootName) === undefined &&
+                (0, utils_1.stringify)(callee.object.property) === bridgeConstName) {
+                propName = (0, utils_1.stringify)(callee.property);
+            }
+        }
+        if (propName) {
+            const getArg = (mesh = true) => {
+                if (node.arguments.length !== 1 || !t.isExpression(node.arguments[0])) {
+                    throw path.buildCodeFrameError("Vasille: Expected 1 argument");
+                }
+                if (mesh) {
+                    (0, mesh_1.meshExpression)(path.get("arguments")[0], internal);
+                }
+                return node.arguments[0];
+            };
+            const callWithArg = (name) => {
+                path.replaceWith(t.callExpression(t.memberExpression(internal.id, t.identifier(name)), [getArg()]));
+            };
+            const callWithOptionalArg = (name) => {
+                if (node.arguments.length === 0) {
+                    path.replaceWith(t.callExpression(t.memberExpression(internal.id, t.identifier(name)), []));
+                }
+                else {
+                    callWithArg(name);
+                }
+            };
+            switch (propName) {
+                case "ref": {
+                    callWithArg("r");
+                    break;
+                }
+                case "bind": {
+                    const arg = getArg(false);
+                    const result = (0, expression_1.checkNode)(path.get("arguments")[0], internal);
+                    if (result.self) {
+                        path.replaceWith(result.self);
+                    }
+                    else if (result.found.size > 0) {
+                        const found = result.found;
+                        path.replaceWith(t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), [
+                            t.arrowFunctionExpression([...found.keys()].map(expression_1.encodeName), arg),
+                            t.arrayExpression([...found.values()]),
+                        ]));
+                    }
+                    else {
+                        callWithArg("r");
+                    }
+                    break;
+                }
+                case "calculate":
+                case "watch": {
+                    const args = (0, lib_1.processCalculateCall)(path, internal);
+                    path.replaceWith(t.callExpression(t.memberExpression(internal.id, t.identifier("ex")), args));
+                    break;
+                }
+                case "arrayModel": {
+                    callWithOptionalArg("sam");
+                    break;
+                }
+                case "setModel": {
+                    callWithOptionalArg("ssm");
+                    break;
+                }
+                case "mapModel": {
+                    callWithOptionalArg("smm");
+                    break;
+                }
+                case "reactiveObject": {
+                    callWithArg("sro");
+                    break;
+                }
+                case "value": {
+                    if (!search) {
+                        path.replaceWith(t.memberExpression(getArg(), t.identifier("$")));
+                    }
+                    else {
+                        path.replaceWith(getArg());
+                    }
+                    break;
+                }
+                case "setValue": {
+                    if (node.arguments.length !== 2 || !t.isExpression(node.arguments[0]) || !t.isExpression(node.arguments[1])) {
+                        throw path.buildCodeFrameError("Vasille: Expected 2 arguments");
+                    }
+                    (0, mesh_1.meshExpression)(path.get("arguments")[0], internal);
+                    if (search) {
+                        (0, expression_1.checkExpression)(path.get("arguments")[1], search);
+                    }
+                    else {
+                        (0, mesh_1.meshExpression)(path.get("arguments")[1], internal);
+                    }
+                    path.replaceWith(t.assignmentExpression("=", t.memberExpression(node.arguments[0], t.identifier("$")), node.arguments[1]));
+                    break;
+                }
+                case "stored": {
+                    const arg = getArg(false);
+                    if ((t.isIdentifier(arg) && (0, expression_1.idIsIValue)(path.get("arguments")[0], internal)) ||
+                        (t.isMemberExpression(arg) && (0, expression_1.memberIsIValue)(arg, internal))) {
+                        path.replaceWith(t.memberExpression(arg, t.identifier("$")));
+                    }
+                    else {
+                        callWithArg("rv");
+                    }
+                    break;
+                }
+                case "destroy": {
+                    path.replaceWith(t.callExpression(t.memberExpression(getArg(true), t.identifier("destroy")), []));
+                    break;
+                }
+                default:
+                    throw path.buildCodeFrameError(`Vasille: Unknown bridge method "${propName}"`);
+            }
+            return propName;
+        }
+    }
+    return false;
+}

package/lib/call.js

@@ -40,6 +40,7 @@ const internal_js_1 = require("./internal.js");
 exports.composeOnly = [
     "forward",
     "watch",
+    "calculate",
     "ref",
     "bind",
     "value",
@@ -48,6 +49,8 @@ exports.composeOnly = [
     "mapModel",
     "setModel",
     "reactiveObject",
+    "router",
+    "runOnDestroy",
 ];
 exports.styleOnly = [
     "theme",
@@ -61,29 +64,37 @@ exports.styleOnly = [
 ];
 exports.requiresContext = ["awaited"];
 const requiresContextSet = new Set(exports.requiresContext);
-function calls(node, names, internal) {
+function checkCall(path, name, internal) {
+    const node = path.node;
+    if (requiresContextSet.has(name) && t.isCallExpression(node)) {
+        if (internal.stateOnly) {
+            throw path.buildCodeFrameError(`Vasille: ${name} function can be used only in components`);
+        }
+        node.arguments.unshift(internal_js_1.ctx);
+    }
+    if (name === "store") {
+        internal.stateOnly = true;
+    }
+    if (["compose", "view", "mvcView", "mvvmView", "hybridView", "screen"].includes(name)) {
+        internal.stateOnly = false;
+    }
+    return name;
+}
+function calls(path, names, internal) {
+    const node = path.node;
     const set = new Set(names);
     const callee = t.isCallExpression(node) ? node.callee : null;
     if (callee) {
         if (t.isIdentifier(callee)) {
             const mapped = internal.mapping.get(callee.name);
             if (mapped && set.has(mapped) && internal.stack.get(callee.name) === undefined) {
-                if (requiresContextSet.has(callee.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_js_1.ctx);
-                }
-                if (mapped === "store") {
-                    internal.stateOnly = true;
-                }
-                if (mapped === "compose") {
-                    internal.stateOnly = false;
-                }
-                return mapped;
+                return checkCall(path, mapped, internal);
             }
             return false;
         }
-        const global = internal.stack.get(internal.global) === undefined;
         let propName = null;
         if (t.isMemberExpression(callee)) {
+            /* istanbul ignore else */
             if (t.isIdentifier(callee.property)) {
                 propName = callee.property.name;
             }
@@ -91,13 +102,13 @@ function calls(node, names, internal) {
                 propName = callee.property.value;
             }
         }
-        if (t.isMemberExpression(callee) && t.isIdentifier(callee.object) && propName) {
-            if (global && callee.object.name === internal.global && set.has(propName)) {
-                if (requiresContextSet.has(propName) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_js_1.ctx);
-                }
-                return callee.object.name;
-            }
+        if (propName &&
+            set.has(propName) &&
+            t.isMemberExpression(callee) &&
+            t.isIdentifier(callee.object) &&
+            callee.object.name === internal.global &&
+            internal.stack.get(internal.global) === undefined) {
+            return checkCall(path, propName, internal);
         }
     }
     return false;

package/lib/css-transformer.js

@@ -47,7 +47,7 @@ function tryProcessProp(path, pseudo, media, internal) {
 }
 const mediaDefaults = ["mobile", "tablet", "laptop", "prefersDark", "prefersLight"];
 function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallback, internal) {
-    if ((0, call_js_1.calls)(path.node, ["theme"], internal)) {
+    if ((0, call_js_1.calls)(path, ["theme"], internal)) {
         const call = path.node;
         if (theme) {
             throw path.buildCodeFrameError("Vasille: The theme seems the be defined twice");
@@ -61,14 +61,14 @@ function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallb
                 .buildCodeFrameError("Vasille: Expected string literal");
         }
     }
-    if ((0, call_js_1.calls)(path.node, ["dark"], internal)) {
+    if ((0, call_js_1.calls)(path, ["dark"], internal)) {
         if (theme) {
             throw path.buildCodeFrameError("Vasille: The theme seem the be defined twice");
         }
         return processValue(name, path.get("arguments")[0], pseudo, `.dark`, media, mediaDefault, false, internal);
     }
     let callee;
-    if ((callee = (0, call_js_1.calls)(path.node, mediaDefaults, internal))) {
+    if ((callee = (0, call_js_1.calls)(path, mediaDefaults, internal))) {
         const index = mediaDefaults.indexOf(callee) + 1;
         if (mediaDefault.includes(index)) {
             return processValue(name, path.get("arguments")[0], pseudo, theme, media, mediaDefault, false, internal);
@@ -178,7 +178,7 @@ function findStyleInNode(path, internal) {
     }
     if (t.isVariableDeclaration(path.node) &&
         path.node.declarations.length === 1 &&
-        (0, call_js_1.calls)(path.node.declarations[0].init, ["styleSheet"], internal)) {
+        (0, call_js_1.calls)(path.get("declarations")[0].get("init"), ["styleSheet"], internal)) {
         const call = path.node.declarations[0].init;
         const callPath = path
             .get("declarations")[0]

package/lib/expression.js

@@ -48,42 +48,37 @@ exports.checkStatements = checkStatements;
 exports.checkStatement = checkStatement;
 exports.checkFunction = checkFunction;
 const t = __importStar(require("@babel/types"));
+const bridge_1 = require("./bridge");
 const call_js_1 = require("./call.js");
 const internal_js_1 = require("./internal.js");
+const router_1 = require("./router");
+const utils_1 = require("./utils");
 function encodeName(name) {
-    return t.identifier(`Vasille_${name}`);
+    return insertName(name);
+}
+function insertName(name, search) {
+    const id = t.identifier(`Vasille_${name}`);
+    search?.inserted.add(id);
+    return id;
 }
 function addIdentifier(path, search) {
     if (!search.found.has(path.node.name)) {
         search.found.set(path.node.name, path.node);
     }
-    path.replaceWith(encodeName(path.node.name));
-}
-function stringify(node) {
-    let name = "";
-    if (t.isStringLiteral(node)) {
-        name = node.value;
-    }
-    if (t.isPrivateName(node)) {
-        name = node.id.name;
-    }
-    if (t.isIdentifier(node)) {
-        name = node.name;
-    }
-    return name;
+    path.replaceWith(insertName(path.node.name, search));
 }
 function extractMemberName(path, search) {
     const names = [];
     let it = path.node;
     while (t.isMemberExpression(it)) {
-        const name = stringify(it.property);
+        const name = (0, utils_1.stringify)(it.property);
         if (name === "$" && it !== path.node) {
             throw path.buildCodeFrameError("Vasille: The reactive/observable value is nested");
         }
         it = it.object;
         names.push(name);
     }
-    names.push(stringify(it));
+    names.push((0, utils_1.stringify)(it));
     if (t.isIdentifier(it) &&
         search.stack.get(it.name, internal_js_1.VariableScope.Local) === 1 /* VariableState.Ignored */) {
         throw path.buildCodeFrameError("Vasille: This node cannot be processed, the root of expression is a local variable");
@@ -92,17 +87,18 @@ function extractMemberName(path, search) {
 }
 function addMemberExpr(path, search) {
     const name = extractMemberName(path, search);
+    /* istanbul ignore else */
     if (!search.found.has(name)) {
         search.found.set(name, path.node);
     }
-    path.replaceWith(encodeName(name));
+    path.replaceWith(insertName(name, search));
 }
 function addExternalIValue(path, search) {
     const name = extractMemberName(path, search);
     if (!search.found.has(name)) {
         search.found.set(name, path.node.object);
     }
-    path.replaceWith(encodeName(name));
+    path.replaceWith(insertName(name, search));
 }
 function meshIdentifier(path, internal) {
     if (idIsIValue(path, internal)) {
@@ -149,6 +145,7 @@ function meshMember(path, internal) {
 }
 function meshLValue(path, internal) {
     const node = path.node;
+    /* istanbul ignore else */
     if (t.isIdentifier(node)) {
         meshIdentifier(path, internal);
     }
@@ -157,6 +154,7 @@ function meshLValue(path, internal) {
     }
     else if (t.isArrayPattern(node)) {
         for (const item of path.get("elements")) {
+            /* istanbul ignore else */
             if (t.isOptionalMemberExpression(item.node) || t.isLVal(item.node)) {
                 meshLValue(item, internal);
             }
@@ -171,6 +169,7 @@ function checkNode(path, internal) {
         external: internal,
         found: new Map(),
         self: null,
+        inserted: new Set(),
         stack: internal.stack,
     };
     if (t.isIdentifier(path.node)) {
@@ -191,6 +190,7 @@ function checkNode(path, internal) {
     }
     internal.stack.fixLocalIndex();
     internal.stack.push();
+    /* istanbul ignore else */
     if (t.isExpression(path.node)) {
         checkExpression(path, search);
     }
@@ -200,6 +200,7 @@ function checkNode(path, internal) {
 }
 function checkOrIgnoreAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
+        /* istanbul ignore else */
         if (t.isExpression(path.node)) {
             checkExpression(path, search);
         }
@@ -212,6 +213,7 @@ function checkAllExpressions(nodePaths, search) {
 }
 function checkAllUnknown(paths, internal) {
     for (const path of paths) {
+        /* istanbul ignore else */
         if (t.isSpreadElement(path.node)) {
             checkExpression(path.get("argument"), internal);
         }
@@ -221,6 +223,7 @@ function checkAllUnknown(paths, internal) {
     }
 }
 function checkOrIgnoreExpression(path, search) {
+    /* istanbul ignore else */
     if (t.isExpression(path.node)) {
         checkExpression(path, search);
     }
@@ -241,6 +244,7 @@ function checkExpression(nodePath, search) {
             break;
         }
         case "Identifier": {
+            /* istanbul ignore else */
             if (expr && t.isIdentifier(expr)) {
                 if (idIsIValue(nodePath, search.external, internal_js_1.VariableScope.Global) &&
                     !idIsLocal(nodePath, search.external)) {
@@ -256,11 +260,27 @@ function checkExpression(nodePath, search) {
         }
         case "CallExpression": {
             const path = nodePath;
-            if ((0, call_js_1.calls)(path.node, call_js_1.composeOnly, search.external)) {
-                throw path.buildCodeFrameError("Vasille: Usage of hints is restricted here");
+            const bridge = (0, bridge_1.processBridgeCall)(path, search.external, search);
+            if (bridge) {
+                if (bridge === "value") {
+                    addMemberExpr(nodePath, search);
+                }
+            }
+            else if ((0, call_js_1.calls)(path, ["router"], search.external)) {
+                if (!search.external.stateOnly) {
+                    (0, router_1.routerReplace)(path);
+                }
+                else {
+                    throw path.buildCodeFrameError("Vasille: The router is not available in stores");
+                }
+            }
+            else {
+                if ((0, call_js_1.calls)(path, call_js_1.composeOnly, search.external)) {
+                    throw path.buildCodeFrameError("Vasille: Usage of hints is restricted here");
+                }
+                checkOrIgnoreExpression(path.get("callee"), search);
+                checkAllUnknown(path.get("arguments"), search);
             }
-            checkOrIgnoreExpression(path.get("callee"), search);
-            checkAllUnknown(path.get("arguments"), search);
             break;
         }
         case "OptionalCallExpression": {
@@ -329,6 +349,7 @@ function checkExpression(nodePath, search) {
         case "UpdateExpression": {
             const path = nodePath;
             const arg = path.node.argument;
+            /* istanbul ignore else */
             if (t.isLVal(arg)) {
                 meshLValue(path.get("argument"), search.external);
             }
@@ -407,11 +428,13 @@ function checkStatements(paths, search) {
     }
 }
 function ignoreLocals(val, search) {
+    /* istanbul ignore else */
     if (t.isIdentifier(val)) {
         search.stack.set(val.name, 1 /* VariableState.Ignored */);
     }
     else if (t.isObjectPattern(val)) {
         for (const prop of val.properties) {
+            /* istanbul ignore else */
             if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
                 search.stack.set(prop.value.name, 1 /* VariableState.Ignored */);
             }
@@ -425,6 +448,7 @@ function ignoreLocals(val, search) {
     }
     else if (t.isArrayPattern(val)) {
         for (const element of val.elements) {
+            /* istanbul ignore else */
             if (element && !t.isVoidPattern(element)) {
                 ignoreLocals(element, search);
             }
@@ -432,6 +456,7 @@ function ignoreLocals(val, search) {
     }
     else if (t.isVariableDeclaration(val)) {
         for (const declarator of val.declarations) {
+            /* istanbul ignore else */
             if (!t.isVoidPattern(declarator.id)) {
                 ignoreLocals(declarator.id, search);
             }
@@ -478,6 +503,7 @@ function checkStatement(path, search) {
         case "ForStatement": {
             const _path = path;
             const node = _path.node;
+            /* istanbul ignore else */
             if (node.init) {
                 if (t.isExpression(node.init)) {
                     checkExpression(_path.get("init"), search);
@@ -535,6 +561,7 @@ function checkStatement(path, search) {
         case "TryStatement":
             const handlerPath = path.get("handler");
             checkStatement(path.get("block"), search);
+            /* istanbul ignore else */
             if (handlerPath.node) {
                 checkStatement(handlerPath.get("body"), search);
             }

package/lib/jsx.js

@@ -60,6 +60,7 @@ function transformJsxArray(paths, internal) {
                     .replace(/\s*\n\s*/gm, "\n");
                 const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [t.stringLiteral(fixed)]);
                 call.loc = path.node.loc;
+                /* istanbul ignore else */
                 if (call.loc) {
                     for (const char of path.node.value) {
                         if (!/\s/.test(char)) {
@@ -96,7 +97,7 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
     if (acceptSlots &&
         (t.isFunctionExpression(expression) || t.isArrowFunctionExpression(expression)) &&
         (0, jsx_detect_js_1.bodyHasJsx)(expression.body)) {
-        (0, mesh_js_1.compose)(path.get("expression"), internal, isInternalSlot);
+        (0, mesh_js_1.compose)(path.get("expression"), internal, isInternalSlot, "slot");
         if (!isInternalSlot) {
             if (expression.params.length < 1) {
                 expression.params.push(t.identifier(`_${internal.prefix}`));
@@ -112,11 +113,12 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
     else if (isInternalSlot && (t.isFunctionExpression(expression) || t.isArrowFunctionExpression(expression))) {
         expression.params.unshift(internal_js_1.ctx);
     }
-    let call = (0, lib_js_1.exprCall)(path.get("expression"), expression, internal);
+    const exprPath = path.get("expression");
+    let call = (0, lib_js_1.exprCall)(exprPath, 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 ?? expression;
+    const result = call ?? exprPath.node;
     result.loc = loc;
     return result;
 }
@@ -151,10 +153,12 @@ function transformJsxElement(path, internal) {
             const attr = attrPath.node;
             if (t.isJSXAttribute(attr)) {
                 const name = attr.name;
+                /* istanbul ignore else */
                 if (t.isJSXIdentifier(name)) {
                     if (name.name.startsWith("on")) {
                         if (t.isJSXExpressionContainer(attr.value) && t.isExpression(attr.value.expression)) {
                             const path = attrPath.get("value");
+                            /* istanbul ignore else */
                             if (t.isExpression(path.node.expression)) {
                                 (0, mesh_js_1.meshExpression)(path.get("expression"), internal);
                             }
@@ -168,6 +172,7 @@ function transformJsxElement(path, internal) {
                     }
                     else if (name.name === "class") {
                         // class={[..]}
+                        /* istanbul ignore else */
                         if (t.isJSXExpressionContainer(attr.value) && t.isArrayExpression(attr.value.expression)) {
                             const valuePath = attrPath.get("value");
                             const arrayExprPath = valuePath.get("expression");
@@ -232,8 +237,9 @@ function transformJsxElement(path, internal) {
                             }
                         }
                         // class={name}
-                        else if (t.isJSXExpressionContainer(attr.value) && t.isIdentifier(attr.value.expression)) {
-                            attrs.push(t.objectProperty(t.identifier("class"), attr.value.expression));
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isExpression(attr.value.expression)) {
+                            const expr = (0, lib_js_1.exprCall)(attrPath.get("value"), attr.value.expression, internal) ?? attr.value.expression;
+                            attrs.push(t.objectProperty(t.identifier("class"), expr));
                         }
                         // class="a b"
                         else if (t.isStringLiteral(attr.value)) {
@@ -242,6 +248,7 @@ function transformJsxElement(path, internal) {
                     }
                     else if (name.name === "style") {
                         // style={{..}}
+                        /* istanbul ignore else */
                         if (t.isJSXExpressionContainer(attr.value) && t.isObjectExpression(attr.value.expression)) {
                             const valuePath = attrPath.get("value");
                             const objectPath = valuePath.get("expression");
@@ -308,8 +315,13 @@ function transformJsxElement(path, internal) {
                                 console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
                             }
                         }
+                        else if (t.isJSXExpressionContainer(attr.value) && t.isExpression(attr.value.expression)) {
+                            const expr = (0, lib_js_1.exprCall)(attrPath.get("value"), attr.value.expression, internal) ?? attr.value.expression;
+                            attrs.push(t.objectProperty(t.identifier("style"), expr));
+                        }
                     }
                     else {
+                        /* istanbul ignore else */
                         if (!attr.value || t.isJSXExpressionContainer(attr.value)) {
                             attrs.push(idToProp(name, t.isExpression(attr.value?.expression) ? attr.value.expression : t.booleanLiteral(true)));
                         }
@@ -320,6 +332,7 @@ function transformJsxElement(path, internal) {
                 }
                 if (t.isJSXNamespacedName(name)) {
                     if (name.namespace.name === "bind") {
+                        /* istanbul ignore else */
                         if (t.isJSXExpressionContainer(attr.value) || !attr.value) {
                             const value = t.isExpression(attr.value?.expression)
                                 ? (0, lib_js_1.exprCall)(attrPath.get("value").get("expression"), attr.value.expression, internal)
@@ -384,6 +397,7 @@ function transformJsxElement(path, internal) {
             // <A prop=../>
             if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
                 // <A prop=".."/>
+                /* istanbul ignore else */
                 if (t.isStringLiteral(attr.value)) {
                     props.push(idToProp(attr.name, attr.value));
                 }
@@ -430,7 +444,7 @@ function transformJsxElement(path, internal) {
                 run = t.arrowFunctionExpression(params, t.blockStatement(statements));
             }
         }
-        const call = t.callExpression(t.identifier(name.name), [internal_js_1.ctx, t.objectExpression(props), ...(run ? [run] : [])]);
+        const call = t.callExpression(t.identifier(name.name), [t.objectExpression(props), internal_js_1.ctx, ...(run ? [run] : [])]);
         call.loc = path.node.loc;
         return t.expressionStatement(call);
     }