babel-plugin-vasille 3.1.1 → 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

@@ -1,8 +1,46 @@
-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 () {
+    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.requiresContext = exports.styleOnly = exports.composeOnly = void 0;
+exports.calls = calls;
+const t = __importStar(require("@babel/types"));
+const internal_js_1 = require("./internal.js");
+exports.composeOnly = [
     "forward",
     "watch",
+    "calculate",
     "ref",
     "bind",
     "value",
@@ -11,8 +49,10 @@ export const composeOnly = [
     "mapModel",
     "setModel",
     "reactiveObject",
+    "router",
+    "runOnDestroy",
 ];
-export const styleOnly = [
+exports.styleOnly = [
     "theme",
     "dark",
     "mobile",
@@ -22,31 +62,39 @@ export const styleOnly = [
     "prefersLight",
     "styleSheet",
 ];
-export const requiresContext = ["awaited"];
-const requiresContextSet = new Set(requiresContext);
-export function calls(node, names, internal) {
+exports.requiresContext = ["awaited"];
+const requiresContextSet = new Set(exports.requiresContext);
+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(ctx);
-                }
-                if (mapped === "state") {
-                    internal.stateOnly = true;
-                }
-                if (mapped === "compose" || mapped === "extend") {
-                    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;
             }
@@ -54,13 +102,13 @@ export 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(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

@@ -1,5 +1,41 @@
-import * as t from "@babel/types";
-import { calls } from "./call.js";
+"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.findStyleInNode = findStyleInNode;
+const t = __importStar(require("@babel/types"));
+const call_js_1 = require("./call.js");
 function tryProcessProp(path, pseudo, media, internal) {
     if (t.isObjectMethod(path.node)) {
         throw path.buildCodeFrameError("Vasille: Object methods not supported here");
@@ -11,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 (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");
@@ -25,14 +61,14 @@ function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallb
                 .buildCodeFrameError("Vasille: Expected string literal");
         }
     }
-    if (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 = 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);
@@ -136,13 +172,13 @@ function processProp(path, pseudo, media, internal) {
     }
     return processValue(name, path.get("value"), pseudo, "", media, [], true, internal);
 }
-export function findStyleInNode(path, internal) {
+function findStyleInNode(path, internal) {
     if (t.isExportNamedDeclaration(path.node)) {
         return findStyleInNode(path.get("declaration"), internal);
     }
     if (t.isVariableDeclaration(path.node) &&
         path.node.declarations.length === 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]