babel-plugin-vasille 5.0.4 → 5.1.1

package/README.md

@@ -4,7 +4,7 @@
 
 `SteelFrameKit` is a front-end development kit, which is developed to provide fault tolerant web applications.
 
-[![npm](https://img.shields.io/npm/v/steel-frame?style=flat-square)](https://www.npmjs.com/package/steel-frame)
+[![npm](https://img.shields.io/npm/v/steel-frame?style=round-square)](https://www.npmjs.com/package/steel-frame)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/vasille-js/steel-frame)
 [![Coverage Status](https://coveralls.io/repos/github/vasille-js/steel-frame/badge.svg?branch=v5)](https://coveralls.io/github/vasille-js/steel-frame?branch=v5)
 
@@ -21,6 +21,7 @@
   - [How POWERFUL is SteelFrameKit](#how-powerful-is-steelframekit)
   - [Road map](#road-map)
   - [Change log](#change-log)
+    - [5.1](#51)
     - [5.0](#50)
     - [4.0 - 4.3](#40---43)
     - [3.0 - 3.2](#30---32)
@@ -28,7 +29,6 @@
     - [1.0 - 1.2](#10---12)
   - [Questions](#questions)
 
-
 <hr>
 
 ## Installation
@@ -46,37 +46,41 @@ $ npm create steel-frame
 ```
 
 ### Full documentation:
-* [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)
+
+- [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)
-* [JavaScript Example](https://github.com/vasille-js/example-javascript)
+
+- [TypeScript Example](https://github.com/vasille-js/example-typescript)
+- [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
 ## How SAFE is SteelFrameKit
 
 The safe of your application is ensured by
-* `100%` coverage of code by unit tests.
+
+- `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 `SteelFrameKit` core library are strongly typed, including:
-  * data fields & properties.
-  * computed properties (function parameters and 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.
+- OOP, DRY, KISS and SOLID principles are applied.
+- `strong typing` makes your code safe.
+  All entities of `SteelFrameKit` core library are strongly typed, including:
+  - data fields & properties.
+  - computed properties (function parameters and 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 INTUITIVE is SteelFrameKit
 
 There is the "Hello World":
+
 ```typescript jsx
 import { compose, mount } from "steel-frame";
 
@@ -90,39 +94,46 @@ mount(document.body, App, {});
 ## How POWERFUL is SteelFrameKit
 
 All of these are supported:
-* Components.
-* Reactive values (observables).
-* Inline computed values.
-* Multiline computed values.
-* HTML tags.
-* Component custom slots.
-* 2-way data binding in components.
-* Logic block (if, else).
-* Loops (array, map, set).
-* Dependency injection.
+
+- Components.
+- Reactive values (observables).
+- Inline computed values.
+- Multiline computed values.
+- HTML tags.
+- Component custom slots.
+- 2-way data binding in components.
+- Logic block (if, else).
+- Loops (array, map, set).
+- Dependency injection.
 
 <hr>
 
 ## Road map
 
-* [x] `100%` Test Coverage for core Library v3.
-* [x] Develop the `JSX` library.
-* [x] `100%` Test Coverage for the JSX library.
-* [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).
+- [x] `100%` Test Coverage for core Library v3.
+- [x] Develop the `JSX` library.
+- [x] `100%` Test Coverage for the JSX library.
+- [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).
 
 ## Change log
 
 We respect semantic versioning:
-- Major version is increased when we make incompatible API changes.
-- Minor version is increased when we add functionality.
+
+- A major version is increased when we make incompatible API changes.
+- A minor version is increased when we add functionality.
 - Patch version is increased when we fix bugs.
 
+### 5.1
+
+Add support for web components compile target `web build components`.
+_Web components as custom tags are supported in any version._
+
 ### 5.0
 
 - Add support for context and dependencies injection.
@@ -142,7 +153,7 @@ We respect semantic versioning:
 ### 3.0 - 3.2
 
 - Switch to a babel plugin to compile components code. **[API change]**
-- 100% of code has been covered with unit tests.
+- 100% of the code has been covered with unit tests.
 - New developement direction: `keep it simple`.
 
 ### 2.0 - 2.3
@@ -152,11 +163,11 @@ We respect semantic versioning:
 
 ### 1.0 - 1.2
 
-- Initial version of core library.
+- Initial version of a core library.
 - Developemnt direction: `performance-first`.
 
 ## Questions
 
 If you have questions, feel free to contact the maintainer of the project:
 
-* [Author's Email](mailto:vas.lixcode@gmail.com)
+- [Author's Email](mailto:vas.lixcode@gmail.com)

package/lib/index.js

@@ -13,6 +13,7 @@ function default_1() {
                     replaceWeb: typeof params.opts.replaceWeb === "string" ? params.opts.replaceWeb : undefined,
                     headTag: !!params.opts.headTag,
                     bodyTag: !!params.opts.bodyTag,
+                    shadow: !!params.opts.shadow,
                 });
             },
         },

package/lib/jsx.js

@@ -615,12 +615,37 @@ function transformJsxElement(path, conditions, internal) {
             }
             return ret;
         }
-        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)] : []),
-        ]);
+        if (internal.shadow && mapped === "Slot") {
+            const model = props.find(item => t.isObjectProperty(item) && t.isIdentifier(item.key) && item.key.name === "model");
+            const modelName = t.isObjectProperty(model) &&
+                ((t.isIdentifier(model.value) && model.value.name) ||
+                    ((t.isMemberExpression(model.value) || t.isOptionalMemberExpression(model.value)) &&
+                        t.isIdentifier(model.value.property) &&
+                        model.value.property.name));
+            const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("tag")), [
+                t.stringLiteral("slot"),
+                t.objectExpression(modelName && modelName !== "slot"
+                    ? [
+                        t.objectProperty(t.identifier("a"), t.objectExpression([t.objectProperty(t.identifier("name"), t.stringLiteral(modelName))])),
+                    ]
+                    : []),
+                ...(run ? [run] : []),
+            ]);
+            run = t.arrowFunctionExpression([internal_js_1.ctx], call);
+        }
+        const localComponentName = internal.shadow && internal.componentsImports.get(name.name);
+        const call = localComponentName
+            ? t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("tag")), [
+                t.stringLiteral((0, lib_js_1.toKebabCase)(localComponentName)),
+                t.objectExpression([t.objectProperty(t.identifier("b"), t.objectExpression(props))]),
+                ...(run ? [run] : []),
+            ])
+            : 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

@@ -46,6 +46,8 @@ exports.mapModel = mapModel;
 exports.processModelCall = processModelCall;
 exports.checkReactiveName = checkReactiveName;
 exports.checkNonReactiveName = checkNonReactiveName;
+exports.toKebabCase = toKebabCase;
+exports.nameIsRestricted = nameIsRestricted;
 const t = __importStar(require("@babel/types"));
 const expression_js_1 = require("./expression.js");
 const internal_js_1 = require("./internal.js");
@@ -189,3 +191,18 @@ function checkNonReactiveName(idPath, internal) {
         err(Errors.RulesOfVasille, idPath, "Non-reactive variable name must not start with $", internal);
     }
 }
+function toKebabCase(name) {
+    let index = 0;
+    let fixed = name[index].toLowerCase();
+    for (index++; index < name.length; index++) {
+        const curr = name[index];
+        if (curr === curr.toUpperCase()) {
+            fixed += "-";
+        }
+        fixed += curr.toLowerCase();
+    }
+    return fixed;
+}
+function nameIsRestricted(name) {
+    return name.endsWith("Model") || name.startsWith("prompt");
+}

package/lib/mesh.js

@@ -60,6 +60,7 @@ const order_check_1 = require("./order-check");
 const router_1 = require("./router");
 const utils_1 = require("./utils");
 const transformer_1 = require("./transformer");
+const process_types_1 = require("./process-types");
 function meshOrIgnoreAllExpressions(nodePaths, internal) {
     for (const path of nodePaths) {
         /* istanbul ignore else */
@@ -73,9 +74,19 @@ function meshAllExpressions(nodePaths, internal) {
         meshExpression(path, internal);
     }
 }
-function meshComposeCall(name, path, internal) {
+const restrictedNames = [
+    "annotation-xml",
+    "color-profile",
+    "font-face",
+    "font-face-src",
+    "font-face-uri",
+    "font-face-format",
+    "font-face-name",
+    "missing-glyph",
+];
+function meshComposeCall(name, path, internal, isExported = false) {
     const args = path.isCallExpression() && path.get("arguments");
-    const arg = args && (args[0].isFunctionExpression() || args[0].isArrowFunctionExpression()) && args[0];
+    const arg = args && args[0] && (args[0].isFunctionExpression() || args[0].isArrowFunctionExpression()) && args[0];
     if (!args || !arg || args.length !== 1) {
         return (0, lib_js_1.err)(lib_js_1.Errors.IncorrectArguments, path, "Invalid arguments number", internal);
     }
@@ -84,6 +95,33 @@ function meshComposeCall(name, path, internal) {
     if (internal.devLayer && path.isCallExpression()) {
         path.node.arguments.push((0, transformer_1.nodeToStaticPosition)(path.node), t.stringLiteral(name ? name : "#"));
     }
+    if (internal.shadow && isExported && name && path.isCallExpression()) {
+        const call = path.node;
+        const generics = call.typeParameters?.params;
+        const args = call.arguments;
+        const params = (t.isFunctionExpression(args[0]) || t.isArrowFunctionExpression(args[0])) && args[0].params;
+        const annotation = (generics && generics[0]) ||
+            (params && params[1] && !t.isVoidPattern(params[1]) && params[1].typeAnnotation) ||
+            null;
+        const type = (t.isTSTypeAnnotation(annotation) && annotation.typeAnnotation) || (t.isTSType(annotation) && annotation) || null;
+        const kebabName = (0, lib_js_1.toKebabCase)(name);
+        let fields;
+        if (t.isTSTypeLiteral(type)) {
+            fields = (0, process_types_1.processTypeLiteral)(type);
+        }
+        if (t.isTSTypeReference(type)) {
+            fields = (0, process_types_1.processReference)(type, internal);
+        }
+        if (kebabName.indexOf("-") === -1 || restrictedNames.indexOf(kebabName) !== -1) {
+            (0, lib_js_1.err)(lib_js_1.Errors.ParserError, path, `The name '${kebabName}' is not allowed by WHATWG`, internal);
+        }
+        if (fields) {
+            path.node.arguments.push(t.stringLiteral(kebabName), fields);
+        }
+        else {
+            (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, path, "Missing type for web component composition", internal);
+        }
+    }
 }
 function meshAllUnknown(paths, internal) {
     for (const path of paths) {
@@ -204,6 +242,12 @@ function meshExpression(nodePath, internal) {
                     (0, lib_js_1.err)(lib_js_1.Errors.IncompatibleContext, path, "Prompts can be constructed only from components", internal);
                 }
                 path.node.arguments.unshift(internal_js_1.ctx);
+                if (internal.devLayer) {
+                    while (path.node.arguments.length < 3) {
+                        path.node.arguments.push(t.buildUndefinedNode());
+                    }
+                    path.node.arguments.push((0, transformer_1.nodeToStaticPosition)(path.node));
+                }
             }
             // dependency injection
             else if (internal.isComposing &&
@@ -407,6 +451,9 @@ function ignoreParams(path, internal, allowReactiveId) {
         if (!allowReactiveId || !allowReactiveId.includes("id")) {
             (0, lib_js_1.checkNonReactiveName)(path, internal);
         }
+        if ((0, lib_js_1.nameIsRestricted)(path.node.name)) {
+            (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, path, "This name is restricted (start with `prompt` or ends with `Model`)", internal);
+        }
     }
     // param is object destruction
     else if (path.isObjectPattern()) {
@@ -816,7 +863,7 @@ function meshStatement(path, internal) {
                             report(`File name is not correct, expected ${name}.ts, ${name}.tsx, ${name}.js or ${name}.jsx`);
                         }
                     }
-                    meshComposeCall(id.name, initPath, internal);
+                    meshComposeCall(id.name, initPath, internal, isExported);
                 }
                 // calculate call
                 else if ((0, call_js_1.calls)(initPath, ["calculate"], internal) &&
@@ -892,6 +939,19 @@ function meshStatement(path, internal) {
                     meshClassBody(declarationPath.get("body"), internal);
                 }
             }
+            break;
+        }
+        case "TSInterfaceDeclaration": {
+            const declaration = path.node;
+            (0, process_types_1.registerInterface)(declaration.id.name, declaration.body.body, internal);
+            break;
+        }
+        case "TSTypeAliasDeclaration": {
+            const alias = path.node;
+            if (t.isTSTypeLiteral(alias.typeAnnotation)) {
+                (0, process_types_1.registerInterface)(alias.id.name, alias.typeAnnotation.members, internal);
+            }
+            break;
         }
     }
 }
@@ -902,6 +962,9 @@ function meshFunction(path, internal) {
         if (idPath.isIdentifier()) {
             internal.stack.set(path.node.id.name, {});
             (0, lib_js_1.checkNonReactiveName)(idPath, internal);
+            if (internal.devLayer) {
+                path.insertAfter(internal.setupPosition(idPath.node, path.node));
+            }
         }
     }
     internal.stack.push();

package/lib/process-types.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerInterface = registerInterface;
+exports.processUnion = processUnion;
+exports.processType = processType;
+exports.processSignatures = processSignatures;
+exports.processTypeLiteral = processTypeLiteral;
+exports.processReference = processReference;
+const types_1 = require("@babel/types");
+const any = 0;
+const string = 1;
+const number = 2;
+const boolean = 3;
+function registerInterface(name, members, internal) {
+    internal.interfaces.set(name, members);
+}
+function processUnion(type) {
+    let isString = false;
+    let isNumber = false;
+    let isBoolean = false;
+    let isAny = false;
+    for (const keyword of type.types) {
+        if ((0, types_1.isTSStringKeyword)(keyword)) {
+            isString = true;
+        }
+        else if ((0, types_1.isTSNumberKeyword)(keyword)) {
+            isNumber = true;
+        }
+        else if ((0, types_1.isTSBooleanKeyword)(keyword)) {
+            isBoolean = true;
+        }
+        else if (!(0, types_1.isTSNullKeyword)(keyword) && !(0, types_1.isTSUndefinedKeyword)(keyword)) {
+            isAny = true;
+        }
+    }
+    if (isAny) {
+        return any;
+    }
+    if (isString) {
+        return string;
+    }
+    if (isNumber && !isBoolean) {
+        return number;
+    }
+    if (isBoolean && !isNumber) {
+        return boolean;
+    }
+    return any;
+}
+function processType(type) {
+    if ((0, types_1.isTSUnionType)(type)) {
+        return processUnion(type);
+    }
+    if ((0, types_1.isTSStringKeyword)(type)) {
+        return string;
+    }
+    if ((0, types_1.isTSNumberKeyword)(type)) {
+        return number;
+    }
+    if ((0, types_1.isTSBooleanKeyword)(type)) {
+        return boolean;
+    }
+    return any;
+}
+function processSignatures(members) {
+    const props = [];
+    for (const member of members) {
+        if ((0, types_1.isTSPropertySignature)(member)) {
+            props.push((0, types_1.objectProperty)(member.key, (0, types_1.numericLiteral)(member.typeAnnotation ? processType(member.typeAnnotation.typeAnnotation) : any)));
+        }
+    }
+    return (0, types_1.objectExpression)(props);
+}
+function processTypeLiteral(literal) {
+    return processSignatures(literal.members);
+}
+function processReference(id, internal) {
+    /* istanbul ignore else */
+    if ((0, types_1.isIdentifier)(id.typeName)) {
+        const members = internal.interfaces.get(id.typeName.name);
+        return members ? processSignatures(members) : undefined;
+    }
+}

package/lib/transformer.js

@@ -69,12 +69,44 @@ function extractText(node) {
     // no case found for string literal
     return node.name;
 }
+function extractComponentImport(node, internal) {
+    const name = node.source.value;
+    const match = /^(@\/components|\.)\/([^\/.]+)\.[tj]sx?$/.exec(name);
+    if (!match) {
+        return;
+    }
+    const filename = match[2];
+    const toRemove = [];
+    for (const specifier of node.specifiers) {
+        if (t.isImportDefaultSpecifier(specifier)) {
+            toRemove.push(specifier);
+            internal.componentsImports.set(specifier.local.name, filename);
+        }
+        if (t.isImportSpecifier(specifier)) {
+            const imported = extractText(specifier.imported);
+            // the exported component name must match the file name
+            /* istanbul ignore else */
+            if (imported === filename) {
+                toRemove.push(specifier);
+                internal.componentsImports.set(specifier.local.name, filename);
+            }
+        }
+    }
+    /* istanbul ignore else */
+    if (toRemove.length) {
+        node.specifiers = node.specifiers.filter(item => !toRemove.includes(item));
+    }
+}
 // Handles import declarations and updates internal state
 function handleImportDeclaration(statementPath, internal, ids) {
     const statement = statementPath.node;
     const name = imports.get(statement.source.value);
-    if (!name)
+    if (!name) {
+        if (internal.shadow) {
+            extractComponentImport(statement, internal);
+        }
         return;
+    }
     statement.source.value = internal.replaceWeb;
     internal.prefix = name;
     for (const specifier of statement.specifiers) {
@@ -162,6 +194,7 @@ function transformProgram(path, filename, opts) {
         executionPosition: "VasilleExePos",
         runFn: "VasilleRun",
         wrapFn: "VasilleWrap",
+        setupPosition: "VasilleSetupPosition",
         shareStateById: "VasilleState",
         positionedText: "VasillePosText",
         earlyInspector: "VasilleInspector",
@@ -177,6 +210,8 @@ function transformProgram(path, filename, opts) {
     const internal = {
         stack: new internal_js_1.StackedStates(),
         mapping: new Map(),
+        interfaces: new Map(),
+        componentsImports: new Map(),
         global: "",
         prefix: "Vasille_",
         importStatement: null,
@@ -189,6 +224,7 @@ function transformProgram(path, filename, opts) {
         replaceWeb: opts.replaceWeb ?? (opts.devLayer ? "steel-frame" : "vasille-web"),
         headTag: opts.headTag,
         bodyTag: opts.bodyTag,
+        shadow: opts.shadow,
         ref(arg, area, name) {
             if (opts.devLayer) {
                 return named(call("ref", [arg ? arg : t.buildUndefinedNode(), nodeToStaticPosition(area), getInspector()]), name);
@@ -256,12 +292,12 @@ function transformProgram(path, filename, opts) {
             return t.callExpression(t.memberExpression(left, t.identifier("update")), [right, getExecutionPosition(assign)]);
         },
         wrapFunctionBody(fn) {
-            const params = fn.params.map((item) => {
-                return t.isFunctionParameter(item) ? item : item.parameter;
-            });
-            const body = fn.body;
-            const args = t.identifier("VasilleArgs");
             if (opts.devLayer) {
+                const params = fn.params.map((item) => {
+                    return t.isFunctionParameter(item) ? item : item.parameter;
+                });
+                const body = fn.body;
+                const args = t.identifier("VasilleArgs");
                 fn.body = t.blockStatement([
                     t.returnStatement(call("runFn", [
                         t.arrowFunctionExpression(params, body, fn.async),
@@ -281,6 +317,9 @@ function transformProgram(path, filename, opts) {
             }
             return fn;
         },
+        setupPosition(target, area) {
+            return call("setupPosition", [target, nodeToStaticPosition(area)]);
+        },
         shareStateById(value, name) {
             return shareStateById(value, name);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-vasille",
-  "version": "5.0.4",
+  "version": "5.1.1",
   "description": "Convert Vasille Meta Language code to pure JavaScript",
   "main": "lib/index.js",
   "type": "commonjs",