babel-plugin-vasille 4.3.2 → 5.0.0

package/README.md

@@ -1,19 +1,30 @@
-# Vasille
+# Steel Frame
 
-![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v4/doc/img/logo.png)
+![Vasille.js logo](https://raw.githubusercontent.com/vasille-js/vasille-js/refs/heads/v5/doc/img/logo.png)
 
-`Vasille Web` is a front-end framework, which is developed to provide bulletproof frontends.
+`SteelFrameKit` is a front-end development kit, which is developed to provide bulletproof frontends.
 
 [![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
 
 ## Table of content
 
-* [Installation](#installation)
-* [How to use Vasille](#how-to-use-vasille)
-* [How SAFE is Vasille](#how-safe-is-vasille)
-* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
-* [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [Road Map](#road-map)
+- [Steel Frame](#steel-frame)
+  - [Table of content](#table-of-content)
+  - [Installation](#installation)
+  - [How to use SteelFramekit](#how-to-use-steelframekit)
+    - [Full documentation:](#full-documentation)
+    - [Examples](#examples)
+  - [How SAFE is SteelFrameKit](#how-safe-is-steelframekit)
+  - [How INTUITIVE is SteelFrameKit](#how-intuitive-is-steelframekit)
+  - [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
+  - [Road map](#road-map)
+  - [Change log](#change-log)
+    - [5.0.0](#500)
+    - [4.3.0](#430)
+    - [4.2.0](#420)
+    - [4.1.0](#410)
+    - [4.0.0](#400)
+  - [Questions](#questions)
 
 
 <hr>
@@ -21,21 +32,22 @@
 ## Installation
 
 ```
-npm install vasille-web --save
+npm install steel-frame --save
 ```
 
-## How to use Vasille
+## How to use SteelFramekit
 
 Create an app from a template
 
 ```bash
-$ npm create vasille
+$ npm create steel-frame
 ```
 
 ### Full documentation:
-* [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)
-* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
+* [Learn `SteelFrameKit` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v5/doc/V4-API.md)
+* [Router Documentation](https://github.com/vasille-js/vasille-js/blob/v5/doc/Router-API.md)
+* [Compostion functions](https://github.com/vasille-js/vasille-js/blob/v5/doc/Compositions.md)
+* [Dependency injection](https://github.com/vasille-js/vasille-js/blob/v5/doc/Context.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -43,14 +55,14 @@ $ npm create vasille
 
 <hr>
 
-## How SAFE is Vasille
+## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
 * `100%` coverage of code by unit tests.
   Each function, each branch is working as designed.
 * OOP, DRY, KISS and SOLID principles are applied.
 * `strong typing` makes your javascript/typescript code safe as C++ code.
-All entities of `vasille` core library are strongly typed, including:
+All entities of `SteelFrameKit` core library are strongly typed, including:
   * data fields & properties.
   * computed properties (function parameters and result).
   * methods.
@@ -60,11 +72,11 @@ 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 INTUITIVE is Vasille
+## How INTUITIVE is SteelFrameKit
 
 There is the "Hello World":
 ```typescript jsx
-import { compose, mount } from "vasille-dx";
+import { compose, mount } from "steel-frame";
 
 const App = compose(() => {
   <p>Hello world</p>;
@@ -73,7 +85,7 @@ const App = compose(() => {
 mount(document.body, App, {});
 ```
 
-## How POWERFUL is Vasille
+## How POWERFUL is SteelFrameKit
 
 All of these are supported:
 * Components.
@@ -85,25 +97,30 @@ All of these are supported:
 * 2-way data binding in components.
 * Logic block (if, else).
 * Loops (array, map, set).
+* Dependency injection.
 
 <hr>
 
 ## Road map
 
-* [x] Update the `Vasille Core` library to version 3.0.
+* [x] Update the `core` library to version 3.0.
 * [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `Vasille JSX` library.
+* [x] Develop the `JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
-* [x] Develop the `Vasille Babel Plugin`.
+* [x] Develop the `Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
 * [x] Add router.
 * [x] Add SSG (static site generation).
+* [ ] Develop tools extension for debugging (WIP).
 * [ ] Add SSR (server side rendering).
-* [ ] Develop tools extension for debugging.
 
 ## Change log
 
+### 5.0.0
+
+Add support for context and dependencies injection.
+
 ### 4.3.0
 
 Add new function `safe` which make functions safe, errors are reported automatically.
@@ -114,19 +131,14 @@ Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator
 
 ### 4.1.0
 
-Added SSG (static site generation) as build option `vasille-web build static`.
+Added SSG (static site generation) as build option `sf build static`.
 
 ### 4.0.0
 
-Initial version of the framework with file based routing and building scripts (`vasille-web dev` and `vasille-web build spa`).
+Initial version of the framework with file based routing and building scripts (`sf dev` and `sf build spa`).
 
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:
 
 * [Author's Email](mailto:vas.lixcode@gmail.com)
-* [Author's Telegram](https://t.me/lixcode)
-
-<hr>
-
-**Made in Moldova** 🇲🇩

package/lib/call.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hintFunctions = exports.styleOnly = exports.composeOnly = exports.boundaryFunctions = exports.modelFunctions = exports.bindFunctions = exports.reactivityFunctions = exports.composeFunctions = void 0;
+exports.hintFunctions = exports.dependencyInjections = exports.styleOnly = exports.composeOnly = exports.modelFunctions = exports.bindFunctions = exports.asyncFunctions = exports.refFunctions = exports.composeFunctions = void 0;
 exports.calls = calls;
 const t = __importStar(require("@babel/types"));
 exports.composeFunctions = [
@@ -47,10 +47,10 @@ exports.composeFunctions = [
     "prompt",
     "screen",
 ];
-exports.reactivityFunctions = ["ref", "awaited"];
+exports.refFunctions = ["ref"];
+exports.asyncFunctions = ["awaited"];
 exports.bindFunctions = ["watch", "calculate", "bind"];
 exports.modelFunctions = ["arrayModel", "mapModel", "setModel"];
-exports.boundaryFunctions = ["forward", "backward"];
 exports.composeOnly = ["router", "beforeMount", "afterMount", "beforeDestroy"];
 exports.styleOnly = [
     "theme",
@@ -62,14 +62,17 @@ exports.styleOnly = [
     "prefersLight",
     "styleSheet",
 ];
+exports.dependencyInjections = ["share", "receive", "impute"];
 exports.hintFunctions = [
-    ...exports.reactivityFunctions,
+    ...exports.refFunctions,
+    ...exports.asyncFunctions,
     ...exports.composeFunctions,
     ...exports.bindFunctions,
     ...exports.modelFunctions,
     ...exports.composeOnly,
     ...exports.styleOnly,
-    ...exports.boundaryFunctions,
+    ...exports.dependencyInjections,
+    "raw",
 ];
 function checkCall(name, internal) {
     if (name === "store" || name === "model") {

package/lib/expression.js

@@ -33,9 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.encodeName = encodeName;
 exports.idIsIValue = idIsIValue;
 exports.memberIsIValue = memberIsIValue;
+exports.memberIsIValueInExpr = memberIsIValueInExpr;
 exports.exprIsSure = exprIsSure;
 exports.checkNode = checkNode;
 exports.checkOrIgnoreAllExpressions = checkOrIgnoreAllExpressions;
@@ -48,48 +48,40 @@ exports.checkStatement = checkStatement;
 exports.checkFunction = checkFunction;
 const t = __importStar(require("@babel/types"));
 const call_js_1 = require("./call.js");
+const internal_js_1 = require("./internal.js");
 const lib_1 = require("./lib");
 const mesh_1 = require("./mesh");
 const router_1 = require("./router");
 const utils_1 = require("./utils");
-function encodeName(name) {
-    return insertName(name);
-}
 function insertName(name, search) {
-    const id = t.identifier(`Vasille_${name}`);
+    const id = t.identifier(name);
     search?.inserted.add(id);
     return id;
 }
-function addIdentifier(path, search) {
-    const name = unprefixedName(path.node.name);
-    if (!search.found.has(name)) {
-        search.found.set(name, path.node);
-    }
-    path.replaceWith(insertName(name, search));
-}
-function unprefixedName(name) {
-    return name[0] === "$" ? name.slice(1) : name;
-}
-function extractMemberName(path, search) {
-    const names = [];
-    let it = path.node;
-    while (t.isMemberExpression(it)) {
-        names.push((0, utils_1.stringify)(it.property));
-        it = it.object;
+function addExpression(path, search) {
+    const name = path
+        .getSource()
+        .trim()
+        .replace(/\s*\n\s*/g, "");
+    const found = search.found.get(name);
+    if (path.isMemberExpression()) {
+        let it = path.node;
+        while (t.isMemberExpression(it) || t.isIdentifier(it)) {
+            const name = (0, utils_1.stringify)(t.isMemberExpression(it) ? it.property : it);
+            if (it !== path.node && name.startsWith("$")) {
+                (0, lib_1.err)(lib_1.Errors.RulesOfVasille, path, "The reactive/observable value is nested", search.external, null);
+            }
+            it = t.isMemberExpression(it) ? it.object : null;
+        }
     }
-    names.push((0, utils_1.stringify)(it));
-    if (names.filter(name => name.startsWith("$")).length > 1) {
-        (0, lib_1.err)(lib_1.Errors.RulesOfVasille, path, "The reactive/observable value is nested", search.external, null);
+    if (!found) {
+        const paramName = insertName(`Vasille_${search.found.size}`, search);
+        search.found.set(name, { node: path.node, paramName: paramName });
+        path.replaceWith(paramName);
     }
-    return names.reverse().map(unprefixedName).join("_");
-}
-function addMemberExpr(path, search) {
-    const name = extractMemberName(path, search);
-    /* istanbul ignore else */
-    if (!search.found.has(name)) {
-        search.found.set(name, path.node);
+    else {
+        path.replaceWith(found.paramName);
     }
-    path.replaceWith(insertName(name, search));
 }
 function meshIdentifier(path) {
     if (idIsIValue(path)) {
@@ -104,10 +96,25 @@ function memberIsIValue(node) {
     return ((t.isIdentifier(node.property) && node.property.name.startsWith("$")) ||
         (t.isStringLiteral(node.property) && node.property.value.startsWith("$")));
 }
+function memberIsIValueInExpr(path, search) {
+    const node = path.node;
+    const isIValue = memberIsIValue(node);
+    if (isIValue) {
+        let it = node;
+        while (t.isMemberExpression(it) || t.isOptionalMemberExpression(it)) {
+            it = it.object;
+        }
+        if (t.isIdentifier(it) && search.stack.get(it.name, true)) {
+            (0, lib_1.err)(lib_1.Errors.RulesOfVasille, path, "This value looks like a reactive but is not. Move code to standalone function or wrap value in raw call.", search.external);
+        }
+    }
+    return isIValue;
+}
 function exprIsSure(path, internal) {
-    if (path.isMemberExpression() &&
+    if ((path.isMemberExpression() &&
         path.node.computed &&
-        (!t.isStringLiteral(path.node.property) || /^\d+$/.test(path.node.property.value))) {
+        (!t.isStringLiteral(path.node.property) || /^\d+$/.test(path.node.property.value))) ||
+        path.isOptionalMemberExpression()) {
         return false;
     }
     if (!path.isMemberExpression() || !(0, utils_1.stringify)(path.node.property).startsWith("$")) {
@@ -152,7 +159,7 @@ function meshLValue(path, internal) {
         meshLValue(path.get("argument"), internal);
     }
 }
-function checkNode(path, internal) {
+function checkNode(path, internal, area, name) {
     const search = {
         external: internal,
         found: new Map(),
@@ -165,19 +172,21 @@ function checkNode(path, internal) {
             search.self = path.node;
         }
     }
-    if (path.isMemberExpression()) {
+    if (path.isMemberExpression() || path.isOptionalMemberExpression()) {
         if (memberIsIValue(path.node)) {
             search.self = path.node;
         }
     }
     if (path.isExpression() && (0, call_js_1.calls)(path, ["ref"], internal)) {
+        const refValue = path.node.arguments[0];
         (0, mesh_1.meshAllUnknown)(path.get("arguments"), internal);
+        path.replaceWith((0, lib_1.ref)(refValue, internal, area, name));
         search.self = path.node;
     }
     if (search.self) {
         return search;
     }
-    internal.stack.push();
+    internal.stack.push(true);
     /* istanbul ignore else */
     if (path.isExpression()) {
         checkExpression(path, search);
@@ -233,7 +242,7 @@ function checkExpression(nodePath, search) {
             /* istanbul ignore else */
             if (expr && nodePath.isIdentifier()) {
                 if (idIsIValue(nodePath)) {
-                    addIdentifier(nodePath, search);
+                    addExpression(nodePath, search);
                 }
             }
             break;
@@ -253,6 +262,16 @@ function checkExpression(nodePath, search) {
                     (0, lib_1.err)(lib_1.Errors.IncompatibleContext, path, "The router is not available in stores", search.external, null);
                 }
             }
+            else if ((0, call_js_1.calls)(path, ["raw"], search.external) &&
+                path.node.arguments.length === 1 &&
+                t.isExpression(path.node.arguments[0])) {
+                (0, mesh_1.meshExpression)(path.get("arguments")[0], search.external);
+                path.replaceWith(path.node.arguments[0]);
+            }
+            else if (!search.external.stateOnly && (0, call_js_1.calls)(path, call_js_1.dependencyInjections, search.external)) {
+                (0, mesh_1.meshAllUnknown)(path.get("arguments"), search.external);
+                path.node.arguments.unshift(internal_js_1.ctx);
+            }
             else {
                 if ((0, call_js_1.calls)(path, call_js_1.hintFunctions, search.external)) {
                     (0, lib_1.err)(lib_1.Errors.IncompatibleContext, path, "Usage of hints is restricted here", search.external, null);
@@ -278,7 +297,7 @@ function checkExpression(nodePath, search) {
                 checkExpression(right, search);
                 /* istanbul ignore else */
                 if (!t.isPrivateName(property)) {
-                    path.replaceWith(search.external.set(left.node.object, !left.node.computed && t.isIdentifier(property) ? t.stringLiteral(property.name) : property, right.node));
+                    path.replaceWith(search.external.set(left.node.object, !left.node.computed && t.isIdentifier(property) ? t.stringLiteral(property.name) : property, right.node, path.node));
                 }
             }
             else {
@@ -290,9 +309,8 @@ function checkExpression(nodePath, search) {
         case "MemberExpression":
         case "OptionalMemberExpression": {
             const path = nodePath;
-            const node = path.node;
-            if (memberIsIValue(node)) {
-                addMemberExpr(path, search);
+            if (memberIsIValueInExpr(path, search)) {
+                addExpression(path, search);
             }
             else {
                 checkExpression(path.get("object"), search);

package/lib/index.js

@@ -8,7 +8,7 @@ function default_1() {
         visitor: {
             Program(path, params) {
                 (0, transformer_js_1.transformProgram)(path, params.file.opts.filename, {
-                    devMode: params.opts.devMode !== false,
+                    devLayer: params.opts.devLayer === true,
                     strictFolders: params.opts.strictFolders !== false,
                     replaceWeb: typeof params.opts.replaceWeb === "string" ? params.opts.replaceWeb : undefined,
                     headTag: !!params.opts.headTag,

package/lib/internal.js

@@ -33,21 +33,25 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ctx = exports.StackedStates = void 0;
+exports.inspector = exports.runner = exports.ctx = exports.StackedStates = void 0;
 const t = __importStar(require("@babel/types"));
 class StackedStates {
     maps = [];
+    checkingIndex = 0;
     constructor() {
         this.push();
     }
-    push() {
+    push(startChecking) {
+        if (startChecking) {
+            this.checkingIndex = this.maps.length;
+        }
         this.maps.push(new Map());
     }
     pop() {
         this.maps.pop();
     }
-    get(name) {
-        for (let i = this.maps.length - 1; i >= 0; i--) {
+    get(name, checkingContextOnly) {
+        for (let i = this.maps.length - 1; i >= (checkingContextOnly ? this.checkingIndex : 0); i--) {
             if (this.maps[i].has(name)) {
                 return this.maps[i].get(name);
             }
@@ -60,3 +64,5 @@ class StackedStates {
 }
 exports.StackedStates = StackedStates;
 exports.ctx = t.identifier("Vasille");
+exports.runner = t.memberExpression(exports.ctx, t.identifier("runner"));
+exports.inspector = t.memberExpression(exports.runner, t.identifier("inspector"));