babel-plugin-vasille 0.99.0

package/README.md

@@ -0,0 +1,122 @@
+# Vasille
+
+![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/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*.
+
+[![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 SIMPLE is Vasille](#how-simple-is-vasille)
+* [How POWERFUL is Vasille](#how-powerful-is-vasille)
+* [Road Map](#road-map)
+
+
+<hr>
+
+## Installation
+
+```
+npm install vasille-web --save
+```
+
+## How to use Vasille
+
+Create an app from a template
+
+```bash
+$ npx 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)
+
+### 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)
+
+<hr>
+
+## How SAFE is Vasille
+
+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:
+  * data fields & properties.
+  * computed properties (function parameters & result).
+  * methods.
+  * events (defined handlers & event emit).
+  * DOM events & DOM operation (attributing, styling, etc.).
+  * slots of components.
+  * 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
+
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "vasille-dx";
+
+const App = compose(() => {
+  <p>Hello world</p>;
+});
+
+mount(document.body, App, {});
+```
+
+## How POWERFUL is Vasille
+
+All of these are supported:
+* Components.
+* Reactive values (observables).
+* Inline computed values.
+* Multiline computed values.
+* HTML & SVG tags.
+* Component custom slots.
+* 2-way data binding in components.
+* Logic block (if, else).
+* Loops (array, map, set).
+
+<hr>
+
+## Road map
+
+* [x] Update the `Vasille Core` library to version 3.0.
+* [x] `100%` Test Coverage for core Library v3.
+* [x] Develop the `Vasille JSX` library.
+* [x] `100%` Test Coverage for the JSX library.
+* [x] Develop the `Vasille Babel Plugin`.
+* [ ] `100%` Test Coverage fot babel plugin.
+* [ ] Add CSS support (define styles in components).
+* [ ] Add custom `<input/>` components with 2-way value binding.
+* [ ] Add router.
+* [ ] Develop dev-tools extension for debugging.
+* [ ] Develop a lot of libraries for the framework.
+
+## 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

@@ -0,0 +1,51 @@
+import * as t from "@babel/types";
+import { ctx } from "./internal.js";
+export const composeOnly = [
+    "forward",
+    "watch",
+    "ref",
+    "bind",
+    "value",
+    "arrayModel",
+    "mapModel",
+    "setModel",
+    "reactiveObject",
+];
+export const requiresContext = ["awaited", "forward"];
+const requiresContextSet = new Set(requiresContext);
+export function calls(node, names, internal) {
+    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);
+                }
+                return mapped;
+            }
+            return false;
+        }
+        // The global object is overrided
+        if (internal.stack.get(internal.global) !== undefined) {
+            return false;
+        }
+        const propName = t.isMemberExpression(callee)
+            ? t.isIdentifier(callee.property)
+                ? callee.property.name
+                : t.isStringLiteral(callee.property)
+                    ? callee.property.value
+                    : null
+            : null;
+        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);
+                }
+                return callee.object.name;
+            }
+        }
+    }
+    return false;
+}

package/lib/expression.js

@@ -0,0 +1,517 @@
+import * as t from "@babel/types";
+import { StackedStates } from "./internal.js";
+export function encodeName(name) {
+    return t.identifier(`Vasille_${name}`);
+}
+function addIdentifier(path, search) {
+    if (!search.found.has(path.node.name)) {
+        search.found.set(path.node.name, path.node);
+    }
+    path.replaceWith(encodeName(path.node.name));
+}
+function stringify(node) {
+    if (t.isIdentifier(node)) {
+        return node.name;
+    }
+    if (t.isStringLiteral(node)) {
+        return node.value;
+    }
+    if (t.isPrivateName(node)) {
+        return node.id.name;
+    }
+    return "$";
+}
+function extractMemberName(path, search) {
+    const names = [];
+    let it = path.node;
+    while (t.isMemberExpression(it)) {
+        const name = stringify(it.property);
+        if (name === "$" && it !== path.node) {
+            throw path.buildCodeFrameError("Vasille: The reactive/observable value is nested");
+        }
+        it = it.object;
+        names.push();
+    }
+    names.push(stringify(it));
+    if (t.isIdentifier(it) && search.stack.get(it.name) === 1 /* VariableState.Ignored */) {
+        throw path.buildCodeFrameError("Vasille: This node cannot be processed, the root of expression is a local variable");
+    }
+    return names.reverse().join("_");
+}
+function addMemberExpr(path, search) {
+    const name = extractMemberName(path, search);
+    if (!search.found.has(name)) {
+        search.found.set(name, path.node);
+    }
+    path.replaceWith(encodeName(name));
+}
+function addExternalIValue(path, search) {
+    const name = extractMemberName(path, search);
+    if (!search.found.has(name)) {
+        search.found.set(name, path.node.object);
+    }
+    path.replaceWith(encodeName(name));
+}
+function meshIdentifier(path, internal) {
+    const state = internal.stack.get(path.node.name);
+    if (state === 2 /* VariableState.Reactive */ || state === 4 /* VariableState.ReactivePointer */) {
+        path.replaceWith(t.memberExpression(path.node, t.identifier("$")));
+    }
+}
+function meshMember(path, internal) {
+    if (t.isIdentifier(path.node.object) && internal.stack.get(path.node.object.name) === 3 /* VariableState.ReactiveObject */) {
+        path.replaceWith(t.memberExpression(path.node, t.identifier("$")));
+    }
+}
+function meshLValue(path, internal) {
+    if (t.isIdentifier(path.node)) {
+        meshIdentifier(path, internal);
+    }
+    else if (t.isMemberExpression(path.node) || t.isOptionalMemberExpression(path.node)) {
+        meshMember(path, internal);
+    }
+    else {
+        path.traverse({
+            Identifier(path) {
+                meshIdentifier(path, internal);
+            },
+            MemberExpression(path) {
+                meshMember(path, internal);
+            },
+            OptionalMemberExpression(path) {
+                meshMember(path, internal);
+            },
+        });
+    }
+}
+export function checkNode(path, internal) {
+    const search = {
+        external: internal,
+        found: new Map(),
+        self: null,
+        stack: new StackedStates(),
+    };
+    if (t.isIdentifier(path.node)) {
+        const state = internal.stack.get(path.node.name);
+        if (state === 2 /* VariableState.Reactive */ || state == 4 /* VariableState.ReactivePointer */) {
+            search.self = path.node;
+        }
+    }
+    if (t.isMemberExpression(path.node)) {
+        if (t.isIdentifier(path.node.object) &&
+            internal.stack.get(path.node.object.name) === 3 /* VariableState.ReactiveObject */) {
+            search.self = path.node;
+        }
+        if (t.isIdentifier(path.node.property) && path.node.property.name === "$") {
+            search.self = path.node.object;
+        }
+    }
+    if (search.self) {
+        return search;
+    }
+    if (t.isExpression(path.node)) {
+        checkExpression(path, search);
+    }
+    return search;
+}
+export function checkOrIgnoreAllExpressions(nodePaths, search) {
+    for (const path of nodePaths) {
+        if (t.isExpression(path.node)) {
+            checkExpression(path, search);
+        }
+    }
+}
+export function checkAllExpressions(nodePaths, search) {
+    for (const path of nodePaths) {
+        checkExpression(path, search);
+    }
+}
+export function checkAllUnknown(paths, internal) {
+    for (const path of paths) {
+        if (t.isSpreadElement(path.node)) {
+            checkExpression(path.get("argument"), internal);
+        }
+        else if (t.isExpression(path.node)) {
+            checkExpression(path, internal);
+        }
+    }
+}
+export function chekOrIgnoreExpression(path, search) {
+    if (t.isExpression(path.node)) {
+        checkExpression(path, search);
+    }
+}
+export function checkExpression(nodePath, search) {
+    const expr = nodePath.node;
+    if (!expr) {
+        return;
+    }
+    switch (expr.type) {
+        case "TemplateLiteral": {
+            const path = nodePath;
+            checkOrIgnoreAllExpressions(path.get("expressions"), search);
+            break;
+        }
+        case "TaggedTemplateExpression": {
+            const path = nodePath;
+            checkExpression(path.get("quasi"), search);
+            break;
+        }
+        case "Identifier": {
+            if (search.stack.get(expr.name) !== 1 /* VariableState.Ignored */) {
+                if (search.external.stack.get(expr.name) === 2 /* VariableState.Reactive */) {
+                    addIdentifier(nodePath, search);
+                }
+            }
+            break;
+        }
+        case "ArrayExpression": {
+            const path = nodePath;
+            checkAllUnknown(path.get("elements"), search);
+            break;
+        }
+        case "TupleExpression": {
+            const path = nodePath;
+            checkAllUnknown(path.get("elements"), search);
+            break;
+        }
+        case "CallExpression": {
+            const path = nodePath;
+            chekOrIgnoreExpression(path.get("callee"), search);
+            checkAllUnknown(path.get("arguments"), search);
+            break;
+        }
+        case "OptionalCallExpression": {
+            const path = nodePath;
+            checkExpression(path.get("callee"), search);
+            checkAllUnknown(path.get("arguments"), search);
+            break;
+        }
+        case "AssignmentExpression": {
+            const path = nodePath;
+            meshLValue(path.get("left"), search.external);
+            checkExpression(path.get("right"), search);
+            break;
+        }
+        case "MemberExpression":
+        case "OptionalMemberExpression": {
+            const path = nodePath;
+            const node = path.node;
+            checkExpression(path.get("object"), search);
+            chekOrIgnoreExpression(path.get("property"), search);
+            if (t.isIdentifier(node.object) && search.external.stack.get(node.object.name) === 3 /* VariableState.ReactiveObject */) {
+                addMemberExpr(path, search);
+            }
+            else if (t.isIdentifier(node.property) && node.property.name === "$") {
+                addExternalIValue(path, search);
+            }
+            break;
+        }
+        case "BinaryExpression": {
+            const path = nodePath;
+            chekOrIgnoreExpression(path.get("left"), search);
+            checkExpression(path.get("right"), search);
+            break;
+        }
+        case "ConditionalExpression": {
+            const path = nodePath;
+            checkExpression(path.get("test"), search);
+            checkExpression(path.get("consequent"), search);
+            checkExpression(path.get("alternate"), search);
+            break;
+        }
+        case "LogicalExpression": {
+            const path = nodePath;
+            checkExpression(path.get("left"), search);
+            checkExpression(path.get("right"), search);
+            break;
+        }
+        case "NewExpression": {
+            const path = nodePath;
+            chekOrIgnoreExpression(path.get("callee"), search);
+            checkAllUnknown(path.get("arguments"), search);
+            break;
+        }
+        case "SequenceExpression": {
+            const path = nodePath;
+            checkAllExpressions(path.get("expressions"), search);
+            break;
+        }
+        case "ParenthesizedExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "UnaryExpression": {
+            const path = nodePath;
+            checkExpression(path.get("argument"), search);
+            break;
+        }
+        case "UpdateExpression": {
+            const path = nodePath;
+            checkExpression(path.get("argument"), search);
+            break;
+        }
+        case "YieldExpression": {
+            const path = nodePath;
+            checkExpression(path.get("argument"), search);
+            break;
+        }
+        case "AwaitExpression": {
+            const path = nodePath;
+            checkExpression(path.get("argument"), search);
+            break;
+        }
+        case "TypeCastExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "BindExpression": {
+            const path = nodePath;
+            checkExpression(path.get("callee"), search);
+            checkExpression(path.get("object"), search);
+            break;
+        }
+        case "PipelineTopicExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "PipelineBareFunction": {
+            const path = nodePath;
+            checkExpression(path.get("callee"), search);
+            break;
+        }
+        case "TSInstantiationExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "TSAsExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "TSSatisfiesExpression": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "TSTypeAssertion": {
+            const path = nodePath;
+            checkExpression(path.get("expression"), search);
+            break;
+        }
+        case "ObjectExpression": {
+            const path = nodePath;
+            for (const propPath of path.get("properties")) {
+                const prop = propPath.node;
+                if (t.isObjectProperty(prop)) {
+                    const path = propPath;
+                    const valuePath = path.get("value");
+                    if (valuePath instanceof Array) {
+                        checkAllExpressions(valuePath, search);
+                    }
+                    else {
+                        chekOrIgnoreExpression(valuePath, search);
+                    }
+                }
+                else if (t.isObjectMethod(prop)) {
+                    checkFunction(propPath, search);
+                }
+                else {
+                    checkAllUnknown([propPath], search);
+                }
+            }
+            break;
+        }
+        case "FunctionExpression": {
+            checkFunction(nodePath, search);
+            break;
+        }
+        case "ArrowFunctionExpression": {
+            checkFunction(nodePath, search);
+            break;
+        }
+        case "JSXFragment": {
+            throw nodePath.buildCodeFrameError("Vasille: JSX fragment is not allowed here");
+        }
+        case "JSXElement": {
+            throw nodePath.buildCodeFrameError("Vasille: JSX element is not allowed here");
+        }
+    }
+}
+export function checkStatements(paths, search) {
+    for (const path of paths) {
+        checkStatement(path, search);
+    }
+}
+function ignoreLocals(val, search) {
+    if (t.isAssignmentPattern(val)) {
+        val = val.left;
+    }
+    if (t.isIdentifier(val)) {
+        search.stack.set(val.name, 1 /* VariableState.Ignored */);
+    }
+    else if (t.isObjectPattern(val)) {
+        for (const prop of val.properties) {
+            if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
+                search.stack.set(prop.value.name, 1 /* VariableState.Ignored */);
+            }
+            else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
+                search.stack.set(prop.argument.name, 1 /* VariableState.Ignored */);
+            }
+        }
+    }
+    else if (t.isArrayPattern(val)) {
+        for (const element of val.elements) {
+            if (element) {
+                ignoreLocals(element, search);
+            }
+        }
+    }
+    else if (t.isVariableDeclaration(val)) {
+        for (const declarator of val.declarations) {
+            ignoreLocals(declarator.id, search);
+        }
+    }
+}
+export function checkStatement(path, search) {
+    const statement = path.node;
+    if (!statement) {
+        return;
+    }
+    switch (statement.type) {
+        case "BlockStatement":
+            search.stack.push();
+            checkStatements(path.get("body"), search);
+            search.stack.pop();
+            break;
+        case "DoWhileStatement": {
+            const _path = path;
+            checkExpression(_path.get("test"), search);
+            search.stack.push();
+            checkStatement(_path.get("body"), search);
+            search.stack.pop();
+            break;
+        }
+        case "ExpressionStatement":
+            checkExpression(path.get("expression"), search);
+            break;
+        case "ForInStatement": {
+            const _path = path;
+            ignoreLocals(_path.node.left, search);
+            checkExpression(_path.get("right"), search);
+            checkStatement(_path.get("body"), search);
+            break;
+        }
+        case "ForOfStatement": {
+            const _path = path;
+            checkExpression(_path.get("right"), search);
+            search.stack.push();
+            checkStatement(_path.get("body"), search);
+            search.stack.pop();
+            break;
+        }
+        case "ForStatement": {
+            const _path = path;
+            const node = _path.node;
+            if (node.init) {
+                if (t.isExpression(node.init)) {
+                    checkExpression(_path.get("init"), search);
+                }
+                else {
+                    const variablePath = _path.get("init");
+                    for (const declarationPath of variablePath.get("declarations")) {
+                        checkExpression(declarationPath.get("init"), search);
+                    }
+                }
+            }
+            checkExpression(_path.get("test"), search);
+            checkExpression(_path.get("update"), search);
+            search.stack.push();
+            checkStatement(_path.get("body"), search);
+            search.stack.pop();
+            break;
+        }
+        case "FunctionDeclaration":
+            checkFunction(path, search);
+            break;
+        case "IfStatement": {
+            const _path = path;
+            checkExpression(_path.get("test"), search);
+            search.stack.push();
+            checkStatement(_path.get("consequent"), search);
+            search.stack.pop();
+            search.stack.push();
+            checkStatement(_path.get("alternate"), search);
+            search.stack.pop();
+            break;
+        }
+        case "LabeledStatement":
+            search.stack.push();
+            checkStatement(path.get("body"), search);
+            search.stack.pop();
+            break;
+        case "ReturnStatement":
+            checkExpression(path.get("argument"), search);
+            break;
+        case "SwitchStatement": {
+            const _path = path;
+            checkExpression(_path.get("discriminant"), search);
+            search.stack.push();
+            for (const _case of _path.get("cases")) {
+                checkExpression(_case.get("test"), search);
+                checkStatements(_case.get("consequent"), search);
+            }
+            search.stack.pop();
+            break;
+        }
+        case "ThrowStatement":
+            checkExpression(path.get("argument"), search);
+            break;
+        case "TryStatement":
+            checkStatement(path.get("block"), search);
+            break;
+        case "VariableDeclaration": {
+            const _path = path;
+            for (const declaration of _path.get("declarations")) {
+                const expr = declaration.node.init;
+                ignoreLocals(declaration.node.id, search);
+                checkExpression(declaration.get("init"), search);
+            }
+            break;
+        }
+        case "WhileStatement": {
+            const _path = path;
+            checkExpression(_path.get("test"), search);
+            search.stack.push();
+            checkStatement(_path.get("body"), search);
+            search.stack.pop();
+            break;
+        }
+        case "WithStatement": {
+            const _path = path;
+            checkExpression(_path.get("object"), search);
+            search.stack.push();
+            checkStatement(_path.get("body"), search);
+            search.stack.pop();
+            break;
+        }
+        case "ExportNamedDeclaration": {
+            checkStatement(path.get("declaration"), search);
+            break;
+        }
+    }
+}
+export function checkFunction(path, search) {
+    const node = path.node;
+    if (t.isExpression(node.body)) {
+        checkExpression(path.get("body"), search);
+    }
+    else {
+        const bodyPath = path.get("body");
+        checkStatement(bodyPath, search);
+    }
+}

package/lib/index.js

@@ -0,0 +1,11 @@
+import { trProgram } from "./transformer.js";
+export default function () {
+    return {
+        name: "Vasille",
+        visitor: {
+            Program(path, params) {
+                trProgram(path, params.devMode !== false);
+            },
+        },
+    };
+}