babel-plugin-vasille 3.1.5 → 4.0.0

package/README.md

@@ -1,8 +1,8 @@
 # Vasille
 
-![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide the best `developer experience` ever. **Our goal is to keep is as simple as possible.** Developing web applications using Vasille must be *as fast as possible*.
+`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
@@ -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)
 
@@ -32,18 +32,9 @@ Create an app from a template
 $ npm create vasille
 ```
 
-Alternative method to create a TypeScript app.
-```bash
-$ npx degit vasille-js/example-typescript my-project
-```
-
-Alternative method to create a JavaScript app.
-```bash
-$ 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)
+* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +51,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 +59,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 +96,8 @@ 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 SSG (static site generation).
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/lib/call.js

@@ -33,22 +33,25 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.requiresContext = exports.styleOnly = exports.composeOnly = void 0;
+exports.hintFunctions = exports.styleOnly = exports.composeOnly = exports.boundaryFunctions = exports.modelFunctions = exports.bindFunctions = exports.reactivityFunctions = exports.composeFunctions = void 0;
 exports.calls = calls;
 const t = __importStar(require("@babel/types"));
-const internal_js_1 = require("./internal.js");
-exports.composeOnly = [
-    "forward",
-    "watch",
-    "ref",
-    "bind",
-    "value",
-    "awaited",
-    "arrayModel",
-    "mapModel",
-    "setModel",
-    "reactiveObject",
+exports.composeFunctions = [
+    "compose",
+    "store",
+    "model",
+    "view",
+    "component",
+    "page",
+    "modal",
+    "prompt",
+    "screen",
 ];
+exports.reactivityFunctions = ["ref", "awaited"];
+exports.bindFunctions = ["watch", "calculate", "bind"];
+exports.modelFunctions = ["arrayModel", "mapModel", "setModel"];
+exports.boundaryFunctions = ["forward", "backward"];
+exports.composeOnly = ["router", "beforeMount", "afterMount", "beforeDestroy"];
 exports.styleOnly = [
     "theme",
     "dark",
@@ -59,31 +62,39 @@ exports.styleOnly = [
     "prefersLight",
     "styleSheet",
 ];
-exports.requiresContext = ["awaited"];
-const requiresContextSet = new Set(exports.requiresContext);
-function calls(node, names, internal) {
+exports.hintFunctions = [
+    ...exports.reactivityFunctions,
+    ...exports.composeFunctions,
+    ...exports.bindFunctions,
+    ...exports.modelFunctions,
+    ...exports.composeOnly,
+    ...exports.styleOnly,
+    ...exports.boundaryFunctions,
+];
+function checkCall(name, internal) {
+    if (name === "store" || name === "model") {
+        internal.stateOnly = true;
+    }
+    else if (exports.composeFunctions.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(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(propName, internal);
         }
     }
     return false;

package/lib/css-transformer.js

@@ -36,40 +36,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.findStyleInNode = findStyleInNode;
 const t = __importStar(require("@babel/types"));
 const call_js_1 = require("./call.js");
+const lib_1 = require("./lib");
 function tryProcessProp(path, pseudo, media, internal) {
-    if (t.isObjectMethod(path.node)) {
-        throw path.buildCodeFrameError("Vasille: Object methods not supported here");
+    if (path.isObjectMethod()) {
+        return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Object methods not supported here", internal, []);
     }
-    if (t.isSpreadElement(path.node)) {
-        throw path.buildCodeFrameError("Vasille: Spread element not supported here");
+    if (path.isSpreadElement()) {
+        return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Spread element not supported here", internal, []);
     }
     return processProp(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");
+            (0, lib_1.err)(lib_1.Errors.Dilemma, path, "The theme seems the be defined twice", internal, false);
         }
         if (t.isStringLiteral(call.arguments[0])) {
             return processValue(name, path.get("arguments")[1], pseudo, `body.${call.arguments[0].value}`, media, mediaDefault, false, internal);
         }
         else {
-            throw path
-                .get("arguments")[0]
-                .buildCodeFrameError("Vasille: Expected string literal");
+            return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("arguments")[0], "Expected string literal", internal, []);
         }
     }
-    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");
+            (0, lib_1.err)(lib_1.Errors.Dilemma, path, "The theme seems the be defined twice", internal);
         }
         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))) {
-        const index = mediaDefaults.indexOf(callee) + 1;
+    const called = mediaDefaults.map(item => (0, call_js_1.calls)(path, [item], internal));
+    if (called.some(v => v)) {
+        const index = called.indexOf(true) + 1;
         if (mediaDefault.includes(index)) {
             return processValue(name, path.get("arguments")[0], pseudo, theme, media, mediaDefault, false, internal);
         }
@@ -96,13 +95,13 @@ function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallb
                 },
             ];
     }
-    if (t.isStringLiteral(path.node)) {
+    if (path.isStringLiteral()) {
         return composeRules(path.node.value);
     }
-    if (t.isNumericLiteral(path.node)) {
+    if (path.isNumericLiteral()) {
         return composeRules(`${path.node.value}px`);
     }
-    if (t.isArrayExpression(path.node)) {
+    if (path.isArrayExpression()) {
         if (path.node.elements.every(item => t.isNumericLiteral(item))) {
             return composeRules(path.node.elements.map(item => `${item.value}px`).join(" "));
         }
@@ -111,21 +110,21 @@ function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallb
                 ...path
                     .get("elements")
                     .map(path => {
-                    if (t.isExpression(path.node)) {
+                    if (path.isExpression()) {
                         return processValue(name, path, pseudo, theme, media, mediaDefault, false, internal);
                     }
                     else {
-                        throw path.buildCodeFrameError("Vasille: Expected expression");
+                        return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Expected expression", internal, []);
                     }
                 })
                     .flat(1),
             ];
         }
         else {
-            throw path.buildCodeFrameError("Vasille: Only numbers arrays are supported here");
+            (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Only numbers arrays are supported here", internal);
         }
     }
-    throw path.buildCodeFrameError("Vasille: Failed o parse value, it is not a string, number or array");
+    return (0, lib_1.err)(lib_1.Errors.ParserError, path, "Failed o parse value, it is not a string, number or array", internal, []);
 }
 function processProp(path, pseudo, media, internal) {
     let name;
@@ -136,14 +135,15 @@ function processProp(path, pseudo, media, internal) {
         name = path.node.key.value;
     }
     else {
-        throw path.get("key").buildCodeFrameError("Vasille: Incompatible key, expect identifier or string literal");
+        return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("key"), "Incompatible key, expect identifier or string literal", internal, []);
     }
+    const valuePath = path.get("value");
     if (name.startsWith("@")) {
         if (media || pseudo) {
-            throw path.get("key").buildCodeFrameError("Vasille: Media queries allowed only in the root of style");
+            return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("key"), "Media queries allowed only in the root of style", internal, []);
         }
-        if (t.isObjectExpression(path.node.value)) {
-            return path.get("value")
+        if (valuePath.isObjectExpression()) {
+            return valuePath
                 .get("properties")
                 .map(item => {
                 return tryProcessProp(item, "", name, internal);
@@ -151,15 +151,15 @@ function processProp(path, pseudo, media, internal) {
                 .flat(1);
         }
         else {
-            throw path.get("value").buildCodeFrameError("Vasille: Expected object expression");
+            (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("value"), "Expected object expression", internal, []);
         }
     }
     if (name.startsWith(":")) {
         if (pseudo) {
-            throw path.get("key").buildCodeFrameError("Vasille: Recursive pseudo classes are restricted");
+            (0, lib_1.err)(lib_1.Errors.ParserError, path.get("key"), "Recursive pseudo classes are restricted", internal, []);
         }
-        if (t.isObjectExpression(path.node.value)) {
-            return path.get("value")
+        if (valuePath.isObjectExpression()) {
+            return valuePath
                 .get("properties")
                 .map(item => {
                 return tryProcessProp(item, name, media, internal);
@@ -167,43 +167,41 @@ function processProp(path, pseudo, media, internal) {
                 .flat(1);
         }
         else {
-            throw path.get("value").buildCodeFrameError("Vasille: Expected object expression");
+            (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("value"), "Expected object expression", internal, []);
         }
     }
     return processValue(name, path.get("value"), pseudo, "", media, [], true, internal);
 }
 function findStyleInNode(path, internal) {
-    if (t.isExportNamedDeclaration(path.node)) {
+    if (path.isExportNamedDeclaration()) {
         return findStyleInNode(path.get("declaration"), internal);
     }
-    if (t.isVariableDeclaration(path.node) &&
+    if (path.isVariableDeclaration() &&
         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]
-            .get("init");
+        const callPath = path.get("declarations")[0].get("init");
         const objPath = callPath.get("arguments")[0];
         if (call.arguments.length !== 1) {
-            throw callPath.buildCodeFrameError("Vasille: styleSheet function has 1 parameter");
+            return (0, lib_1.err)(lib_1.Errors.IncorrectArguments, callPath, "styleSheet function has 1 parameter", internal, true);
         }
         if (!t.isObjectExpression(call.arguments[0])) {
-            throw objPath.buildCodeFrameError("Vasille: Expected object expression");
+            return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, objPath, "Expected object expression", internal, true);
         }
         for (const path of objPath.get("properties")) {
-            if (!t.isObjectProperty(path.node)) {
-                throw path.buildCodeFrameError("Vasille: Expected object property");
+            if (!path.isObjectProperty()) {
+                return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Expected object property", internal, true);
             }
-            const prop = path;
-            if (!t.isObjectExpression(prop.node.value)) {
-                throw prop.get("value").buildCodeFrameError("Vasille: Expected object expression");
+            const valuePath = path.get("value");
+            if (!valuePath.isObjectExpression()) {
+                return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path, "Expected object expression", internal, true);
             }
-            if (!((t.isIdentifier(prop.node.key) && !prop.node.computed) || t.isStringLiteral(prop.node.key))) {
-                throw prop.get("key").buildCodeFrameError("Vasille: Expected identifier of string literal");
+            if (!((t.isIdentifier(path.node.key) && !path.node.computed) || t.isStringLiteral(path.node.key))) {
+                return (0, lib_1.err)(lib_1.Errors.TokenNotSupported, path.get("key"), "Expected identifier of string literal", internal, true);
             }
             const unsorted = [];
             const sorted = {};
-            for (const path of prop.get("value").get("properties")) {
+            for (const path of valuePath.get("properties")) {
                 unsorted.push(...tryProcessProp(path, "", "", internal));
             }
             for (const rule of unsorted) {
@@ -240,7 +238,7 @@ function findStyleInNode(path, internal) {
                     }
                 }
             }
-            prop.get("value").replaceWith(t.arrayExpression(expressions));
+            valuePath.replaceWith(t.arrayExpression(expressions));
         }
         return true;
     }