babel-plugin-vasille 4.3.3 → 5.0.0

package/lib/jsx.js

@@ -37,11 +37,11 @@ exports.transformJsx = transformJsx;
 exports.transformJsxArray = transformJsxArray;
 exports.processConditions = processConditions;
 const t = __importStar(require("@babel/types"));
-const call_1 = require("./call");
 const internal_js_1 = require("./internal.js");
 const jsx_detect_js_1 = require("./jsx-detect.js");
 const lib_js_1 = require("./lib.js");
 const mesh_js_1 = require("./mesh.js");
+const transformer_1 = require("./transformer");
 function transformJsx(path, conditions, internal) {
     if (path.isJSXElement()) {
         return transformJsxElement(path, conditions, internal);
@@ -64,7 +64,9 @@ function transformJsxArray(paths, internal) {
                     .replace(/\n\s+$/m, "")
                     .replace(/^\s*\n\s+/m, "")
                     .replace(/\s*\n\s*/gm, "\n");
-                const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [t.stringLiteral(fixed)]);
+                const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [
+                    internal.devLayer ? internal.positionedText(t.stringLiteral(fixed), path.node) : t.stringLiteral(fixed),
+                ]);
                 call.loc = path.node.loc;
                 /* istanbul ignore else */
                 if (call.loc) {
@@ -94,7 +96,9 @@ function transformJsxArray(paths, internal) {
                 const value = transformJsxExpressionContainer(path, internal, false, false, true, true);
                 /* istanbul ignore else */
                 if (!t.isJSXEmptyExpression(value)) {
-                    const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [value]);
+                    const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [
+                        internal.devLayer ? internal.positionedText(value, value) : value,
+                    ]);
                     call.loc = value.loc;
                     result.push(t.expressionStatement(call));
                 }
@@ -126,7 +130,7 @@ function checkIfExpressionIsConditionalJsx(expr) {
             (t.isJSX(expr.alternate) || checkIfExpressionIsConditionalJsx(expr.alternate))));
 }
 function processReactiveCondition(path, internal) {
-    (0, lib_js_1.exprCall)(path, path.node, internal, {});
+    (0, lib_js_1.exprCall)(path, path.node, internal, {}, path.node);
     return path.node;
 }
 function addConditionToCollection(condition, exprPath, internal, conditions) {
@@ -203,49 +207,10 @@ function transformJsxExpressionContainer(path, internal, acceptSlots, isInternal
     /* istanbul ignore else */
     if (expression.isExpression()) {
         if (acceptsReactive) {
-            // cals backward
-            if ((0, call_1.calls)(expression, ["backward"], internal)) {
-                const argPath = expression.get("arguments")[0];
-                if (argPath && argPath.isExpression()) {
-                    const argValue = argPath.node;
-                    if ((0, lib_js_1.exprCall)(argPath, argPath.node, internal, { strong: true })) {
-                        if (!argPath.isMemberExpression() && !argPath.isIdentifier()) {
-                            argPath.node = argValue;
-                            (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, argPath, "A reactive variable or object field expected, reactive expression are forward only", internal);
-                        }
-                    }
-                    else {
-                        argPath.node = argValue;
-                        (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, argPath, "The backward argument is not reactive", internal);
-                    }
-                }
-                else {
-                    (0, lib_js_1.err)(lib_js_1.Errors.IncorrectArguments, expression, "The argument is missing", internal);
-                }
-            }
-            // calls forward
-            else if ((0, call_1.calls)(expression, ["forward"], internal)) {
-                const argPath = expression.get("arguments")[0];
-                if (argPath && argPath.isExpression()) {
-                    const argValue = argPath.node;
-                    if (!(0, lib_js_1.exprCall)(argPath, argPath.node, internal, { strong: true })) {
-                        argPath.node = argValue;
-                        (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, argPath, "A reactive expression expected, argument value is constant", internal);
-                    }
-                    else {
-                        expression.node.arguments.unshift(internal_js_1.ctx);
-                    }
-                }
-                else {
-                    (0, lib_js_1.err)(lib_js_1.Errors.IncorrectArguments, expression, "The argument is missing", internal);
-                }
-            }
             // two-side binding
-            else {
-                const isReactive = (0, lib_js_1.exprCall)(expression, expression.node, internal, { strong: !acceptsRaw });
-                if (!isReactive && !acceptsRaw) {
-                    expression.replaceWith(internal.ref(expression.node));
-                }
+            const isReactive = (0, lib_js_1.exprCall)(expression, expression.node, internal, { strong: !acceptsRaw }, expression.node);
+            if (!isReactive && !acceptsRaw) {
+                expression.replaceWith(internal.ref(expression.node, expression.node, undefined));
             }
         }
         else {
@@ -333,7 +298,7 @@ function transformJsxElement(path, conditions, internal) {
                                     if (elementPath.isLogicalExpression() &&
                                         elementPath.node.operator === "&&" &&
                                         t.isStringLiteral(elementPath.node.right)) {
-                                        (0, lib_js_1.exprCall)(elementPath.get("left"), elementPath.node.left, internal, {});
+                                        (0, lib_js_1.exprCall)(elementPath.get("left"), elementPath.node.left, internal, {}, elementPath.node);
                                         classObject.push(idToProp(elementPath.node.right, elementPath.node.left));
                                     }
                                     // class={[{..}]}
@@ -345,7 +310,7 @@ function transformJsxElement(path, conditions, internal) {
                                                 const valuePath = propPath.get("value");
                                                 /* istanbul ignore else */
                                                 if (valuePath.isExpression()) {
-                                                    (0, lib_js_1.exprCall)(valuePath, valuePath.node, internal, {});
+                                                    (0, lib_js_1.exprCall)(valuePath, valuePath.node, internal, {}, elementPath.node);
                                                 }
                                                 if (keyPath.isExpression() && !keyPath.isIdentifier()) {
                                                     (0, mesh_js_1.meshExpression)(keyPath, internal);
@@ -368,7 +333,7 @@ function transformJsxElement(path, conditions, internal) {
                                     }
                                     // class={[..]}
                                     else {
-                                        (0, lib_js_1.exprCall)(elementPath, elementPath.node, internal, { strong: true });
+                                        (0, lib_js_1.exprCall)(elementPath, elementPath.node, internal, { strong: true }, elementPath.node);
                                         classElements.push(elementPath.node);
                                     }
                                 }
@@ -384,14 +349,14 @@ function transformJsxElement(path, conditions, internal) {
                         }
                         // class={`a ${b}`}
                         else if (expressionPath && expressionPath.isExpression()) {
-                            if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true })) {
+                            if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true }, expressionPath.node)) {
                                 console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
                             }
                             attrs.push(t.objectProperty(t.identifier("class"), expressionPath.node));
                         }
                         // class={name}
                         else if (expressionPath && expressionPath.isExpression()) {
-                            (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {});
+                            (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {}, expressionPath.node);
                             attrs.push(t.objectProperty(t.identifier("class"), expressionPath.node));
                         }
                         // class="a b"
@@ -410,7 +375,7 @@ function transformJsxElement(path, conditions, internal) {
                                     const valuePath = prop.get("value");
                                     /* istanbul ignore else */
                                     if (valuePath.isExpression()) {
-                                        (0, lib_js_1.exprCall)(valuePath, valuePath.node, internal, { strong: true });
+                                        (0, lib_js_1.exprCall)(valuePath, valuePath.node, internal, { strong: true }, prop.node);
                                     }
                                     const value = valuePath.node;
                                     const keyPath = propPath.get("key");
@@ -463,7 +428,7 @@ function transformJsxElement(path, conditions, internal) {
                         }
                         // style={`a: ${b}px`}
                         else if (expressionPath && expressionPath.isExpression()) {
-                            if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true })) {
+                            if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true }, expressionPath.node)) {
                                 console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
                             }
                             attrs.push(t.objectProperty(t.identifier("style"), expressionPath.node));
@@ -476,7 +441,7 @@ function transformJsxElement(path, conditions, internal) {
                     else {
                         /* istanbul ignore else */
                         if (expressionPath && expressionPath.isExpression()) {
-                            (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {});
+                            (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {}, expressionPath.node);
                             attrs.push(idToProp(name, expressionPath.node));
                         }
                         else if (t.isStringLiteral(attr.value)) {
@@ -494,7 +459,7 @@ function transformJsxElement(path, conditions, internal) {
                         if (expressionPath) {
                             /* istanbul ignore else */
                             if (expressionPath.isExpression()) {
-                                (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true });
+                                (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true }, expressionPath.node);
                                 bind.push(idToProp(name.name, expressionPath.node));
                                 pushed = true;
                             }
@@ -529,19 +494,20 @@ function transformJsxElement(path, conditions, internal) {
         const call = 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))] : []),
+                ...(attrs.length > 0 ? [t.objectProperty(t.identifier("a"), t.objectExpression(attrs))] : []),
+                ...(events.length > 0 ? [t.objectProperty(t.identifier("e"), t.objectExpression(events))] : []),
+                ...(bind.length > 0 ? [t.objectProperty(t.identifier("b"), t.objectExpression(bind))] : []),
                 ...(classElements.length > 0 || classObject.length
                     ? [
-                        t.objectProperty(t.identifier("class"), t.arrayExpression([
+                        t.objectProperty(t.identifier("c"), t.arrayExpression([
                             ...classElements,
                             ...(classObject.length > 0 ? [t.objectExpression(classObject)] : []),
                         ])),
                     ]
                     : []),
-                ...(styleObject.length > 0 ? [t.objectProperty(t.identifier("style"), t.objectExpression(styleObject))] : []),
-                ...(callback ? [t.objectProperty(t.identifier("callback"), callback)] : []),
+                ...(styleObject.length > 0 ? [t.objectProperty(t.identifier("s"), t.objectExpression(styleObject))] : []),
+                ...(callback ? [t.objectProperty(t.identifier("k"), callback)] : []),
+                ...(internal.devLayer ? [t.objectProperty(t.identifier("usage"), (0, transformer_1.nodeToStaticPosition)(path.node))] : []),
             ]),
             ...(statements.length > 0 ? [t.arrowFunctionExpression([internal_js_1.ctx], t.blockStatement(statements))] : []),
         ]);
@@ -554,9 +520,6 @@ function transformJsxElement(path, conditions, internal) {
         const props = [];
         let run;
         const mapped = internal.mapping.get(name.name);
-        if (mapped === "Debug" && internal.stack.get(name.name) === undefined && !internal.devMode) {
-            return processConditions(conditions, internal);
-        }
         for (const attrPath of opening.get("attributes")) {
             const attr = attrPath.node;
             // <A prop=../>
@@ -566,7 +529,7 @@ function transformJsxElement(path, conditions, internal) {
                 // <A prop=".."/>
                 /* istanbul ignore else */
                 if (t.isStringLiteral(attr.value)) {
-                    props.push(idToProp(attr.name, needReactive ? internal.ref(attr.value) : attr.value));
+                    props.push(idToProp(attr.name, needReactive ? internal.ref(attr.value, attr, undefined) : attr.value));
                 }
                 // <A prop={..}/>
                 else if (valuePath && valuePath.isJSXExpressionContainer()) {
@@ -576,7 +539,7 @@ function transformJsxElement(path, conditions, internal) {
                     props.push(idToProp(attr.name, value));
                 }
                 else if (!attr.value) {
-                    props.push(idToProp(attr.name, needReactive ? internal.ref(t.booleanLiteral(true)) : t.booleanLiteral(true)));
+                    props.push(idToProp(attr.name, needReactive ? internal.ref(t.booleanLiteral(true), attr, undefined) : t.booleanLiteral(true)));
                 }
             }
             // <A {...arg}/>
@@ -650,7 +613,12 @@ function transformJsxElement(path, conditions, internal) {
             }
             return ret;
         }
-        const call = t.callExpression(t.identifier(name.name), [t.objectExpression(props), internal_js_1.ctx, ...(run ? [run] : [])]);
+        const call = t.callExpression(t.identifier(name.name), [
+            t.objectExpression(props),
+            internal_js_1.ctx,
+            ...(run ? [run] : internal.devLayer ? [t.buildUndefinedNode()] : []),
+            ...(internal.devLayer ? [(0, transformer_1.nodeToStaticPosition)(path.node)] : []),
+        ]);
         call.loc = path.node.loc;
         return [...ret, t.expressionStatement(call)];
     }

package/lib/lib.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Errors = void 0;
 exports.err = err;
-exports.named = named;
 exports.processCalculateCall = processCalculateCall;
 exports.parseCalculateCall = parseCalculateCall;
 exports.bindCall = bindCall;
@@ -52,6 +51,7 @@ const expression_js_1 = require("./expression.js");
 const internal_js_1 = require("./internal.js");
 const call_js_1 = require("./call.js");
 const mesh_1 = require("./mesh");
+const transformer_1 = require("./transformer");
 var Errors;
 (function (Errors) {
     Errors[Errors["IncorrectArguments"] = 1] = "IncorrectArguments";
@@ -72,19 +72,7 @@ function err(e, node, content, internal, ret) {
     console.log(error);
     return ret;
 }
-function unprefixedName(name) {
-    return name[0] === "$" ? name.substring(1) : name;
-}
-function named(call, name, internal, argPos) {
-    if (internal.devMode && name) {
-        while (argPos && call.arguments.length < argPos) {
-            call.arguments.push(t.buildUndefinedNode());
-        }
-        call.arguments.push(...(typeof name === "string" ? [name] : name.map(item => item)).map(name => t.stringLiteral(unprefixedName(name))));
-    }
-    return call;
-}
-function processCalculateCall(path, internal) {
+function processCalculateCall(path, internal, area, name) {
     const call = path.node.arguments[0];
     if (path.node.arguments.length !== 1) {
         return err(Errors.IncorrectArguments, path, "Incorrect number of arguments", internal, false);
@@ -93,32 +81,39 @@ function processCalculateCall(path, internal) {
         if (call.params.length > 0) {
             return err(Errors.IncorrectArguments, path.get("arguments")[0], "Argument of calculate cannot have parameters", internal, false);
         }
-        const exprData = (0, expression_js_1.checkNode)(path.get("arguments")[0], internal);
-        call.params = [...exprData.found.keys()].map(name => (0, expression_js_1.encodeName)(name));
+        const exprData = (0, expression_js_1.checkNode)(path.get("arguments")[0], internal, area, name);
+        call.params = [...exprData.found.values()].map(item => item.paramName);
         path.node.arguments.unshift(internal.isComposing ? internal_js_1.ctx : t.nullLiteral());
-        path.node.arguments.push(t.arrayExpression([...exprData.found.values()]));
+        path.node.arguments.push(t.arrayExpression([...exprData.found.values()].map(item => item.node)));
+        if (internal.devLayer) {
+            path.node.arguments.push(t.arrayExpression([...exprData.found.keys()].map(name => t.identifier(name))), (0, transformer_1.nodeToStaticPosition)(area), (0, transformer_1.inspectorOf)(internal));
+            /* istanbul ignore else */
+            if (name) {
+                path.replaceWith(internal.shareStateById(path.node, name));
+            }
+        }
         return true;
     }
     return err(Errors.IncorrectArguments, path, "Argument of calculate must be a function", internal, false);
 }
-function parseCalculateCall(path, internal) {
+function parseCalculateCall(path, internal, area, name) {
     if (path.isCallExpression() && (0, call_js_1.calls)(path, ["calculate", "watch"], internal)) {
-        return processCalculateCall(path, internal);
+        return processCalculateCall(path, internal, area, name);
     }
     return false;
 }
 function bindCall(path, expr, data, internal, name) {
-    const names = [...data.keys()].map(expression_js_1.encodeName);
-    const dependencies = t.arrayExpression([...data.values()]);
+    const names = [...data.values()].map(item => item.paramName);
+    const dependencies = [...data.values()].map(item => item.node);
+    const codes = [...data.keys()];
     if (names.length > 0 && expr) {
-        path.replaceWith(named(internal.expr(t.arrowFunctionExpression(names, expr), dependencies), name, internal, 3));
+        path.replaceWith(internal.expr(t.arrowFunctionExpression(names, expr), dependencies, codes, expr, name));
         return true;
     }
     return false;
 }
-function exprCall(path, expr, internal, opts) {
-    if (parseCalculateCall(path, internal)) {
-        named(path.node, opts.name, internal, 3);
+function exprCall(path, expr, internal, opts, area) {
+    if (parseCalculateCall(path, internal, area, opts.name)) {
         return true;
     }
     if (t.isCallExpression(expr) &&
@@ -126,56 +121,62 @@ function exprCall(path, expr, internal, opts) {
         expr.arguments.length === 1 &&
         t.isExpression(expr.arguments[0])) {
         const argPath = path.get("arguments")[0];
-        const exprData = (0, expression_js_1.checkNode)(argPath, internal);
+        const exprData = (0, expression_js_1.checkNode)(argPath, internal, area, opts.name);
         if (exprData.self) {
-            path.replaceWith(internal.forward(exprData.self));
+            path.replaceWith(exprData.self);
         }
         else if (exprData.found.size > 0) {
-            argPath.replaceWith(t.arrowFunctionExpression([...exprData.found.keys()].map(expression_js_1.encodeName), argPath.node));
+            argPath.replaceWith(t.arrowFunctionExpression([...exprData.found.values()].map(item => item.paramName), argPath.node));
             expr.arguments.unshift(internal.isComposing ? internal_js_1.ctx : t.nullLiteral());
-            expr.arguments.push(t.arrayExpression([...exprData.found.values()]));
-            named(expr, opts.name, internal, 3);
+            expr.arguments.push(t.arrayExpression([...exprData.found.values()].map(item => item.node)));
+            if (internal.devLayer) {
+                expr.arguments.push(t.arrayExpression([...exprData.found.keys()].map(item => t.stringLiteral(item))), (0, transformer_1.nodeToStaticPosition)(area), (0, transformer_1.inspectorOf)(internal));
+                /* istanbul ignore else */
+                if (opts.name) {
+                    path.replaceWith(internal.shareStateById(path.node, opts.name));
+                }
+            }
         }
         else {
-            path.replaceWith(named(internal.ref(argPath.node), opts.name, internal, 1));
+            path.replaceWith(internal.ref(argPath.node, area, opts.name));
         }
         return true;
     }
-    const exprData = (0, expression_js_1.checkNode)(path, internal);
+    const exprData = (0, expression_js_1.checkNode)(path, internal, area, opts.name);
     if (exprData.self) {
         if (!opts.strong || (0, expression_js_1.exprIsSure)(path, internal)) {
             path.replaceWith(exprData.self);
         }
         else {
-            path.replaceWith(internal.ensure(exprData.self));
+            path.replaceWith(internal.ensure(exprData.self, area));
         }
         return true;
     }
     return bindCall(path, expr, exprData.found, internal, opts.name);
 }
-function ref(expr, internal, name) {
-    return named(internal.ref(expr), name, internal, 1);
+function ref(expr, internal, area, name) {
+    return internal.ref(t.isExpression(expr) ? expr : null, area, name);
 }
-function arrayModel(args, internal, name) {
-    return named(internal.arrayModel(args[0]), name, internal, 2);
+function arrayModel(args, usage, internal, name) {
+    return internal.arrayModel(args[0], usage, name);
 }
-function setModel(args, internal, name) {
-    return named(internal.setModel(args[0]), name, internal, 2);
+function setModel(args, usage, internal, name) {
+    return internal.setModel(args[0], usage, name);
 }
-function mapModel(args, internal, name) {
-    return named(internal.mapModel(args[0]), name, internal, 2);
+function mapModel(args, usage, internal, name) {
+    return internal.mapModel(args[0], usage, name);
 }
-function processModelCall(path, type, isConst, internal, name) {
+function processModelCall(path, usage, type, isConst, internal, name) {
     const args = path.node.arguments;
     if (!isConst) {
         err(Errors.RulesOfVasille, path, `${type} models must be declared as constants`, internal);
     }
     (0, mesh_1.meshAllUnknown)(path.get("arguments"), internal);
     path.replaceWith(type === "Map"
-        ? mapModel(args, internal, name)
+        ? mapModel(args, usage, internal, name)
         : type === "Set"
-            ? setModel(args, internal, name)
-            : arrayModel(args, internal, name));
+            ? setModel(args, usage, internal, name)
+            : arrayModel(args, usage, internal, name));
 }
 function checkReactiveName(idPath, internal) {
     if (!(idPath.isIdentifier() && idPath.node.name.startsWith("$"))) {