babel-plugin-vasille 0.99.1 → 0.99.2

package/README.md

@@ -47,7 +47,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vas[README.md](..%2Ftest%2Fmy-app%2FREADME.md)ille-js/example-javascript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 

package/lib/call.js

@@ -1,6 +1,33 @@
-import * as t from "@babel/types";
-import { ctx } from "./internal.js";
-export const composeOnly = [
+"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.requiresContext = exports.composeOnly = void 0;
+exports.calls = calls;
+const t = __importStar(require("@babel/types"));
+const internal_1 = require("./internal");
+exports.composeOnly = [
     "forward",
     "watch",
     "ref",
@@ -11,9 +38,9 @@ export const composeOnly = [
     "setModel",
     "reactiveObject",
 ];
-export const requiresContext = ["awaited", "forward"];
-const requiresContextSet = new Set(requiresContext);
-export function calls(node, names, internal) {
+exports.requiresContext = ["awaited", "forward"];
+const requiresContextSet = new Set(exports.requiresContext);
+function calls(node, names, internal) {
     const set = new Set(names);
     const callee = t.isCallExpression(node) ? node.callee : null;
     if (callee) {
@@ -21,7 +48,7 @@ export function calls(node, names, internal) {
             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(ctx);
+                    node.arguments.unshift(internal_1.ctx);
                 }
                 return mapped;
             }
@@ -41,7 +68,7 @@ export function calls(node, names, internal) {
         if (t.isMemberExpression(callee) && t.isIdentifier(callee.object) && propName) {
             if (callee.object.name === internal.global && set.has(propName)) {
                 if (requiresContextSet.has(callee.object.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(ctx);
+                    node.arguments.unshift(internal_1.ctx);
                 }
                 return callee.object.name;
             }

package/lib/expression.js

@@ -1,6 +1,41 @@
-import * as t from "@babel/types";
-import { StackedStates } from "./internal.js";
-export function encodeName(name) {
+"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.encodeName = encodeName;
+exports.checkNode = checkNode;
+exports.checkOrIgnoreAllExpressions = checkOrIgnoreAllExpressions;
+exports.checkAllExpressions = checkAllExpressions;
+exports.checkAllUnknown = checkAllUnknown;
+exports.chekOrIgnoreExpression = chekOrIgnoreExpression;
+exports.checkExpression = checkExpression;
+exports.checkStatements = checkStatements;
+exports.checkStatement = checkStatement;
+exports.checkFunction = checkFunction;
+const t = __importStar(require("@babel/types"));
+const internal_1 = require("./internal");
+function encodeName(name) {
     return t.identifier(`Vasille_${name}`);
 }
 function addIdentifier(path, search) {
@@ -84,12 +119,12 @@ function meshLValue(path, internal) {
         });
     }
 }
-export function checkNode(path, internal) {
+function checkNode(path, internal) {
     const search = {
         external: internal,
         found: new Map(),
         self: null,
-        stack: new StackedStates(),
+        stack: new internal_1.StackedStates(),
     };
     if (t.isIdentifier(path.node)) {
         const state = internal.stack.get(path.node.name);
@@ -114,19 +149,19 @@ export function checkNode(path, internal) {
     }
     return search;
 }
-export function checkOrIgnoreAllExpressions(nodePaths, search) {
+function checkOrIgnoreAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
         if (t.isExpression(path.node)) {
             checkExpression(path, search);
         }
     }
 }
-export function checkAllExpressions(nodePaths, search) {
+function checkAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
         checkExpression(path, search);
     }
 }
-export function checkAllUnknown(paths, internal) {
+function checkAllUnknown(paths, internal) {
     for (const path of paths) {
         if (t.isSpreadElement(path.node)) {
             checkExpression(path.get("argument"), internal);
@@ -136,12 +171,12 @@ export function checkAllUnknown(paths, internal) {
         }
     }
 }
-export function chekOrIgnoreExpression(path, search) {
+function chekOrIgnoreExpression(path, search) {
     if (t.isExpression(path.node)) {
         checkExpression(path, search);
     }
 }
-export function checkExpression(nodePath, search) {
+function checkExpression(nodePath, search) {
     const expr = nodePath.node;
     if (!expr) {
         return;
@@ -342,7 +377,7 @@ export function checkExpression(nodePath, search) {
         }
     }
 }
-export function checkStatements(paths, search) {
+function checkStatements(paths, search) {
     for (const path of paths) {
         checkStatement(path, search);
     }
@@ -377,7 +412,7 @@ function ignoreLocals(val, search) {
         }
     }
 }
-export function checkStatement(path, search) {
+function checkStatement(path, search) {
     const statement = path.node;
     if (!statement) {
         return;
@@ -505,7 +540,7 @@ export function checkStatement(path, search) {
         }
     }
 }
-export function checkFunction(path, search) {
+function checkFunction(path, search) {
     const node = path.node;
     if (t.isExpression(node.body)) {
         checkExpression(path.get("body"), search);

package/lib/index.js

@@ -1,10 +1,13 @@
-import { trProgram } from "./transformer.js";
-export default function () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const transformer_1 = require("./transformer");
+function default_1() {
     return {
         name: "Vasille",
         visitor: {
             Program(path, params) {
-                trProgram(path, params.devMode !== false);
+                (0, transformer_1.trProgram)(path, params.opts.devMode !== false);
             },
         },
     };

package/lib/internal.js

@@ -1,5 +1,31 @@
-import * as t from "@babel/types";
-export class StackedStates {
+"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.ctx = exports.StackedStates = void 0;
+const t = __importStar(require("@babel/types"));
+class StackedStates {
     constructor() {
         this.maps = [];
         this.push();
@@ -22,4 +48,5 @@ export class StackedStates {
         this.maps[this.maps.length - 1].set(name, state);
     }
 }
-export const ctx = t.identifier("Vasille");
+exports.StackedStates = StackedStates;
+exports.ctx = t.identifier("Vasille");

package/lib/jsx-detect.js

@@ -1,5 +1,33 @@
-import * as t from "@babel/types";
-export function exprHasJsx(node) {
+"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.exprHasJsx = exprHasJsx;
+exports.statementHasJsx = statementHasJsx;
+exports.bodyHasJsx = bodyHasJsx;
+const t = __importStar(require("@babel/types"));
+function exprHasJsx(node) {
     if (t.isBinaryExpression(node)) {
         return (t.isExpression(node.left) && exprHasJsx(node.left)) || exprHasJsx(node.right);
     }
@@ -20,7 +48,7 @@ export function exprHasJsx(node) {
     }
     return t.isJSXElement(node) || t.isJSXFragment(node);
 }
-export function statementHasJsx(statement) {
+function statementHasJsx(statement) {
     if (t.isExpressionStatement(statement)) {
         return exprHasJsx(statement.expression);
     }
@@ -52,7 +80,7 @@ export function statementHasJsx(statement) {
     }
     return false;
 }
-export function bodyHasJsx(node) {
+function bodyHasJsx(node) {
     if (t.isExpression(node)) {
         return exprHasJsx(node);
     }

package/lib/jsx.js

@@ -1,15 +1,42 @@
-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) {
+"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_1 = require("./internal");
+const lib_1 = require("./lib");
+const mesh_1 = require("./mesh");
+const jsx_detect_1 = require("./jsx-detect");
+function transformJsx(path, internal) {
     if (t.isJSXElement(path.node)) {
         return [transformJsxElement(path, internal)];
     }
     return transformJsxArray(path.get("children"), internal);
 }
-export function transformJsxArray(paths, internal) {
+function transformJsxArray(paths, internal) {
     const result = [];
     for (const path of paths) {
         if (t.isJSXElement(path.node) || t.isJSXFragment(path.node)) {
@@ -21,12 +48,31 @@ export function transformJsxArray(paths, internal) {
                     .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)])));
+                const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("text")), [t.stringLiteral(fixed)]);
+                call.loc = path.node.loc;
+                if (call.loc) {
+                    for (const char of path.node.value) {
+                        if (!/\s/.test(char)) {
+                            break;
+                        }
+                        if (char === "\n") {
+                            call.loc.start.column = 0;
+                            call.loc.start.line++;
+                        }
+                        else {
+                            call.loc.start.column++;
+                        }
+                        call.loc.start.index++;
+                    }
+                }
+                result.push(t.expressionStatement(call));
             }
         }
         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])));
+            const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("text")), [value]);
+            call.loc = value.loc;
+            result.push(t.expressionStatement(call));
         }
         else {
             throw path.buildCodeFrameError("Vasille: Spread child is not supported");
@@ -38,40 +84,51 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
     if (!t.isExpression(path.node.expression)) {
         return t.booleanLiteral(true);
     }
+    const loc = path.node.expression.loc;
     if (acceptSlots &&
         (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression)) &&
-        bodyHasJsx(path.node.expression.body)) {
-        compose(path.get("expression"), internal, isInternalSlot);
+        (0, jsx_detect_1.bodyHasJsx)(path.node.expression.body)) {
+        (0, mesh_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(ctx);
+            path.node.expression.params.push(internal_1.ctx);
         }
         else {
-            path.node.expression.params.unshift(ctx);
+            path.node.expression.params.unshift(internal_1.ctx);
         }
+        path.node.expression.loc = loc;
         return path.node.expression;
     }
     else if (isInternalSlot &&
         (t.isFunctionExpression(path.node.expression) || t.isArrowFunctionExpression(path.node.expression))) {
-        path.node.expression.params.unshift(ctx);
+        path.node.expression.params.unshift(internal_1.ctx);
     }
-    let call = exprCall(path.get("expression"), path.node.expression, internal);
+    let call = (0, lib_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;
+    const result = call !== null && call !== void 0 ? call : path.node.expression;
+    result.loc = loc;
+    return result;
 }
-function id(str) {
+function idToProp(id, value, from) {
+    let str = t.isIdentifier(id) || t.isJSXIdentifier(id) ? id.name : id.value;
+    let expr;
+    if (from) {
+        str = str.substring(from);
+    }
     if (/^[\w_]+$/.test(str)) {
-        return t.identifier(str);
+        expr = t.identifier(str);
     }
     else {
-        return t.stringLiteral(str);
+        expr = t.stringLiteral(str);
     }
+    expr.loc = id.loc;
+    return t.objectProperty(expr, value);
 }
 function transformJsxElement(path, internal) {
     var _a, _b;
@@ -95,9 +152,9 @@ function transformJsxElement(path, internal) {
                         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);
+                                (0, mesh_1.meshExpression)(path.get("expression"), internal);
                             }
-                            events.push(t.objectProperty(id(name.name.substring(2)), path.node.expression));
+                            events.push(idToProp(name, path.node.expression, 2));
                         }
                         else {
                             throw attrPath
@@ -115,8 +172,8 @@ function transformJsxElement(path, internal) {
                                 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));
+                                        const call = (0, lib_1.exprCall)(elementPath.get("left"), item.left, internal);
+                                        classObject.push(idToProp(item.right, call !== null && call !== void 0 ? call : item.left));
                                     }
                                     // class={[{..}]}
                                     else if (t.isObjectExpression(item)) {
@@ -124,9 +181,9 @@ 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 = (_a = (0, lib_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)) {
-                                                    meshExpression(prop.get("key"), internal);
+                                                    (0, mesh_1.meshExpression)(prop.get("key"), internal);
                                                 }
                                                 classObject.push(t.objectProperty(prop.node.key, value));
                                             }
@@ -142,11 +199,11 @@ function transformJsxElement(path, internal) {
                                     }
                                     // class={[".."]}
                                     else if (t.isStringLiteral(elementPath.node)) {
-                                        classStatic.push(elementPath.node.value);
+                                        classStatic.push(elementPath.node);
                                     }
                                     // class={[..]}
                                     else {
-                                        const call = exprCall(elementPath, item, internal);
+                                        const call = (0, lib_1.exprCall)(elementPath, item, internal);
                                         classElements.push(call !== null && call !== void 0 ? call : item);
                                     }
                                 }
@@ -164,7 +221,7 @@ function transformJsxElement(path, internal) {
                         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);
+                            const value = (0, lib_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"));
@@ -172,10 +229,7 @@ function transformJsxElement(path, internal) {
                         }
                         // class="a b"
                         else if (t.isStringLiteral(attr.value)) {
-                            const splitted = attr.value.value.split(" ");
-                            for (const item of splitted) {
-                                classStatic.push(item);
-                            }
+                            classStatic.push(attr.value);
                         }
                         // class=<div/>
                         else {
@@ -191,9 +245,9 @@ 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 = (_b = (0, lib_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)) {
-                                        meshExpression(prop.get("key"), internal);
+                                        (0, mesh_1.meshExpression)(prop.get("key"), internal);
                                     }
                                     // style={{a: "b"}} -> static in compile time
                                     if (t.isIdentifier(prop.node.key) && t.isStringLiteral(prop.node.value)) {
@@ -240,7 +294,7 @@ function transformJsxElement(path, internal) {
                             const jsxAttrPath = attrPath;
                             const jsxContainerPath = jsxAttrPath.get("value");
                             const literalPath = jsxContainerPath.get("expression");
-                            const value = exprCall(literalPath, attr.value.expression, internal);
+                            const value = (0, lib_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"));
@@ -253,10 +307,10 @@ function transformJsxElement(path, internal) {
                     }
                     else {
                         if (t.isJSXExpressionContainer(attr.value)) {
-                            attrs.push(t.objectProperty(id(name.name), t.isExpression(attr.value.expression) ? attr.value.expression : t.booleanLiteral(true)));
+                            attrs.push(idToProp(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));
+                            attrs.push(idToProp(name, attr.value));
                         }
                         else {
                             throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
@@ -267,12 +321,12 @@ function transformJsxElement(path, internal) {
                     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)
+                                ? (0, lib_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))));
+                            bind.push(idToProp(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));
+                            bind.push(idToProp(name.name, attr.value));
                         }
                         else {
                             throw attrPath.buildCodeFrameError("Vasille: Value of bind must be an expression or string");
@@ -288,13 +342,16 @@ function transformJsxElement(path, internal) {
             }
         }
         if (classStatic.length > 0) {
-            attrs.push(t.objectProperty(t.identifier("class"), t.stringLiteral(classStatic.join(" "))));
+            const first = classStatic[0];
+            const value = classStatic.length === 1 ? classStatic[0] : t.stringLiteral(classStatic.map(item => item.value).join(" "));
+            value.loc = first.loc;
+            attrs.push(t.objectProperty(t.identifier("class"), value));
         }
         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")), [
+        const call = t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("tag")), [
             t.stringLiteral(name.name),
             t.objectExpression([
                 ...(attrs.length > 0 ? [t.objectProperty(t.identifier("attr"), t.objectExpression(attrs))] : []),
@@ -310,27 +367,33 @@ function transformJsxElement(path, internal) {
                     : []),
                 ...(styleObject.length > 0 ? [t.objectProperty(t.identifier("style"), t.objectExpression(styleObject))] : []),
             ]),
-            ...(statements.length > 0 ? [t.arrowFunctionExpression([ctx], t.blockStatement(statements))] : []),
-        ]));
+            ...(statements.length > 0 ? [t.arrowFunctionExpression([internal_1.ctx], t.blockStatement(statements))] : []),
+        ]);
+        call.loc = path.node.loc;
+        return t.expressionStatement(call);
     }
     if (t.isJSXIdentifier(name)) {
         const element = path.node;
         const opening = path.get("openingElement");
         const props = [];
         let run;
+        const mapped = internal.mapping.get(name.name);
+        if (mapped === "Debug" && internal.stack.get(name.name) === undefined && !internal.devMode) {
+            return t.emptyStatement();
+        }
         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));
+                    props.push(idToProp(attr.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));
+                    props.push(idToProp(attr.name, value));
                 }
                 else {
                     throw attrPath.buildCodeFrameError("Vasille: JSX Elements/Fragments are not supported here");
@@ -350,15 +413,17 @@ function transformJsxElement(path, internal) {
             (t.isFunctionExpression(element.children[0].expression) ||
                 t.isArrowFunctionExpression(element.children[0].expression))) {
             run = element.children[0].expression;
-            run.params.push(ctx);
+            run.params.push(internal_1.ctx);
         }
         else {
             const statements = transformJsxArray(path.get("children"), internal);
             if (statements.length > 0) {
-                run = t.arrowFunctionExpression([ctx], t.blockStatement(statements));
+                run = t.arrowFunctionExpression([internal_1.ctx], t.blockStatement(statements));
             }
         }
-        return t.expressionStatement(t.callExpression(t.identifier(name.name), [ctx, t.objectExpression(props), ...(run ? [run] : [])]));
+        const call = t.callExpression(t.identifier(name.name), [internal_1.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");
 }