babel-plugin-vasille 5.0.3 → 5.1.0

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)
@@ -119,10 +120,15 @@ All of these are supported:
 ## 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 +148,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,7 +158,7 @@ We respect semantic versioning:
 
 ### 1.0 - 1.2
 
-- Initial version of core library.
+- Initial version of a core library.
 - Developemnt direction: `performance-first`.
 
 ## Questions

package/lib/call.js

@@ -97,12 +97,14 @@ function calls(path, names, internal) {
         }
         let propName = null;
         if (t.isMemberExpression(callee)) {
-            /* istanbul ignore else */
             if (t.isIdentifier(callee.property)) {
                 propName = callee.property.name;
             }
-            else if (t.isStringLiteral(callee.property)) {
-                propName = callee.property.value;
+            else {
+                /* istanbul ignore else */
+                if (t.isStringLiteral(callee.property)) {
+                    propName = callee.property.value;
+                }
             }
         }
         if (propName &&

package/lib/expression.js

@@ -141,13 +141,13 @@ function meshMember(path) {
     }
 }
 function meshLValue(path, internal) {
-    /* istanbul ignore else */
     if (path.isIdentifier()) {
         meshIdentifier(path);
     }
     else if (path.isMemberExpression() || path.isOptionalMemberExpression()) {
         const object = path.get("object");
         meshMember(path);
+        /* istanbul ignore else */
         if (object.isLVal()) {
             meshLValue(object, internal);
         }
@@ -160,8 +160,11 @@ function meshLValue(path, internal) {
             }
         }
     }
-    else if (path.isRestElement()) {
-        meshLValue(path.get("argument"), internal);
+    else {
+        /* istanbul ignore else */
+        if (path.isRestElement()) {
+            meshLValue(path.get("argument"), internal);
+        }
     }
 }
 function checkNode(path, internal, area, name) {
@@ -214,12 +217,14 @@ function checkAllExpressions(nodePaths, search) {
 }
 function checkAllUnknown(paths, internal) {
     for (const path of paths) {
-        /* istanbul ignore else */
         if (path.isSpreadElement()) {
             checkExpression(path.get("argument"), internal);
         }
-        else if (path.isExpression()) {
-            checkExpression(path, internal);
+        else {
+            /* istanbul ignore else */
+            if (path.isExpression()) {
+                checkExpression(path, internal);
+            }
         }
     }
 }

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

@@ -289,7 +289,6 @@ function transformJsxElement(path, conditions, internal) {
                     }
                     else if (name.name === "class") {
                         // class={[..]}
-                        /* istanbul ignore else */
                         if (valuePath.isJSXExpressionContainer() && t.isArrayExpression(valuePath.node.expression)) {
                             const arrayExprPath = valuePath.get("expression");
                             for (const elementPath of arrayExprPath.get("elements")) {
@@ -354,19 +353,16 @@ function transformJsxElement(path, conditions, internal) {
                             }
                             attrs.push(t.objectProperty(t.identifier("class"), expressionPath.node));
                         }
-                        // class={name}
-                        else if (expressionPath && expressionPath.isExpression()) {
-                            (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {}, expressionPath.node);
-                            attrs.push(t.objectProperty(t.identifier("class"), expressionPath.node));
-                        }
                         // class="a b"
-                        else if (valuePath.isStringLiteral()) {
-                            classStatic.push(valuePath.node);
+                        else {
+                            /* istanbul ignore else */
+                            if (valuePath.isStringLiteral()) {
+                                classStatic.push(valuePath.node);
+                            }
                         }
                     }
                     else if (name.name === "style") {
                         // style={{..}}
-                        /* istanbul ignore else */
                         if (expressionPath && expressionPath.isObjectExpression()) {
                             for (const propPath of expressionPath.get("properties")) {
                                 // style={{a: b}}
@@ -427,11 +423,14 @@ function transformJsxElement(path, conditions, internal) {
                             attrs.push(t.objectProperty(t.identifier("style"), expressionPath.node));
                         }
                         // style={`a: ${b}px`}
-                        else if (expressionPath && expressionPath.isExpression()) {
-                            if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true }, expressionPath.node)) {
-                                console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
+                        else {
+                            /* istanbul ignore else */
+                            if (expressionPath && expressionPath.isExpression()) {
+                                if ((0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, { strong: true }, expressionPath.node)) {
+                                    console.warn(attrPath.buildCodeFrameError("Vasille: This will slow down your application"));
+                                }
+                                attrs.push(t.objectProperty(t.identifier("style"), expressionPath.node));
                             }
-                            attrs.push(t.objectProperty(t.identifier("style"), expressionPath.node));
                         }
                     }
                     else if (name.name === "callback" && expressionPath && expressionPath.isExpression()) {
@@ -439,7 +438,6 @@ function transformJsxElement(path, conditions, internal) {
                         callback = expressionPath.node;
                     }
                     else {
-                        /* istanbul ignore else */
                         if (expressionPath && expressionPath.isExpression()) {
                             (0, lib_js_1.exprCall)(expressionPath, expressionPath.node, internal, {}, expressionPath.node);
                             attrs.push(idToProp(name, expressionPath.node));
@@ -455,7 +453,6 @@ function transformJsxElement(path, conditions, internal) {
                 if (t.isJSXNamespacedName(name)) {
                     if (name.namespace.name === "bind") {
                         let pushed = false;
-                        /* istanbul ignore else */
                         if (expressionPath) {
                             /* istanbul ignore else */
                             if (expressionPath.isExpression()) {
@@ -464,9 +461,12 @@ function transformJsxElement(path, conditions, internal) {
                                 pushed = true;
                             }
                         }
-                        else if (t.isStringLiteral(attr.value)) {
-                            bind.push(idToProp(name.name, attr.value));
-                            pushed = true;
+                        else {
+                            /* istanbul ignore else */
+                            if (t.isStringLiteral(attr.value)) {
+                                bind.push(idToProp(name.name, attr.value));
+                                pushed = true;
+                            }
                         }
                         if (!pushed) {
                             bind.push(idToProp(name.name, t.booleanLiteral(true)));
@@ -527,7 +527,6 @@ function transformJsxElement(path, conditions, internal) {
                 const valuePath = attrPath.isJSXAttribute() && attrPath.get("value");
                 const needReactive = attr.name.name.startsWith("$");
                 // <A prop=".."/>
-                /* istanbul ignore else */
                 if (t.isStringLiteral(attr.value)) {
                     props.push(idToProp(attr.name, needReactive ? internal.ref(attr.value, attr, undefined) : attr.value));
                 }
@@ -538,8 +537,11 @@ function transformJsxElement(path, conditions, internal) {
                     const value = transformJsxExpressionContainer(valuePath, internal, !isSystem || attr.name.name === "slot", isSystem && attr.name.name === "slot", requiresReactive, !requiresReactive);
                     props.push(idToProp(attr.name, value));
                 }
-                else if (!attr.value) {
-                    props.push(idToProp(attr.name, needReactive ? internal.ref(t.booleanLiteral(true), attr, undefined) : t.booleanLiteral(true)));
+                else {
+                    /* istanbul ignore else */
+                    if (!attr.value) {
+                        props.push(idToProp(attr.name, needReactive ? internal.ref(t.booleanLiteral(true), attr, undefined) : t.booleanLiteral(true)));
+                    }
                 }
             }
             // <A {...arg}/>
@@ -613,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,7 @@ exports.mapModel = mapModel;
 exports.processModelCall = processModelCall;
 exports.checkReactiveName = checkReactiveName;
 exports.checkNonReactiveName = checkNonReactiveName;
+exports.toKebabCase = toKebabCase;
 const t = __importStar(require("@babel/types"));
 const expression_js_1 = require("./expression.js");
 const internal_js_1 = require("./internal.js");
@@ -179,7 +180,8 @@ function processModelCall(path, usage, type, isConst, internal, name) {
             : arrayModel(args, usage, internal, name));
 }
 function checkReactiveName(idPath, internal) {
-    if (!(idPath.isIdentifier() && idPath.node.name.startsWith("$"))) {
+    if (!(idPath.isIdentifier() && idPath.node.name.startsWith("$")) &&
+        !(idPath.isStringLiteral() && idPath.node.value.startsWith("$"))) {
         err(Errors.RulesOfVasille, idPath, "Reactive variable name must start with $", internal);
     }
 }
@@ -188,3 +190,15 @@ 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;
+}

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,15 +95,44 @@ 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) {
-        /* istanbul ignore else */
         if (path.isSpreadElement()) {
             meshExpression(path.get("argument"), internal);
         }
-        else if (path.isExpression()) {
-            meshExpression(path, internal);
+        else {
+            /* istanbul ignore else */
+            if (path.isExpression()) {
+                meshExpression(path, internal);
+            }
         }
     }
 }
@@ -168,15 +208,17 @@ function meshExpression(nodePath, internal) {
                     meshAllUnknown([argPath], internal);
                 }
                 const loc = path.node.loc;
-                /* istanbul ignore else */
                 if ((0, call_js_1.calls)(path, ["arrayModel"], internal)) {
                     path.replaceWith(internal.arrayModel(argPath?.node, path.node, undefined));
                 }
                 else if ((0, call_js_1.calls)(path, ["mapModel"], internal)) {
                     path.replaceWith(internal.mapModel(argPath?.node, path.node, undefined));
                 }
-                else if ((0, call_js_1.calls)(path, ["setModel"], internal)) {
-                    path.replaceWith(internal.setModel(argPath?.node, path.node, undefined));
+                else {
+                    /* istanbul ignore else */
+                    if ((0, call_js_1.calls)(path, ["setModel"], internal)) {
+                        path.replaceWith(internal.setModel(argPath?.node, path.node, undefined));
+                    }
                 }
                 path.node.loc = loc;
             }
@@ -265,14 +307,19 @@ function meshExpression(nodePath, internal) {
             if (t.isExpression(property) && !t.isIdentifier(property)) {
                 meshOrIgnoreExpression(path.get("property"), internal);
             }
-            if ((0, expression_js_1.memberIsIValue)(node) && !(0, expression_js_1.nodeIsMeshed)(path)) {
-                if ((0, expression_js_1.exprIsSure)(path, internal)) {
-                    path.replaceWith(t.memberExpression(path.node, internal_js_1.V));
-                }
-                else {
-                    path.replaceWith(t.optionalMemberExpression(path.node, internal_js_1.V, false, true));
+            if ((0, expression_js_1.memberIsIValue)(node)) {
+                if (!(0, expression_js_1.nodeIsMeshed)(path)) {
+                    if ((0, expression_js_1.exprIsSure)(path, internal)) {
+                        path.replaceWith(t.memberExpression(path.node, internal_js_1.V));
+                    }
+                    else {
+                        path.replaceWith(t.optionalMemberExpression(path.node, internal_js_1.V, false, true));
+                    }
                 }
             }
+            else if (node.computed && t.isIdentifier(property)) {
+                path.replaceWith(internal.match(t.stringLiteral(""), node, node));
+            }
             break;
         }
         case "BinaryExpression": {
@@ -382,7 +429,6 @@ function meshStatements(paths, internal) {
     }
 }
 function ignoreParams(path, internal, allowReactiveId) {
-    /* istanbul ignore else */
     // param with default value
     if (path.isAssignmentPattern()) {
         const left = path.get("left");
@@ -407,6 +453,7 @@ function ignoreParams(path, internal, allowReactiveId) {
     // param is array destruction
     else if (path.isArrayPattern()) {
         for (const element of path.get("elements")) {
+            /* istanbul ignore else */
             if (element) {
                 ignoreParams(element, internal, allowReactiveId && allowReactiveId.includes("array") && ["id", "array"]);
                 if ((!allowReactiveId || !allowReactiveId.includes("array")) && element.isIdentifier()) {
@@ -437,7 +484,6 @@ function ignoreObjectPattern(pattern, internal) {
                     (originName.startsWith("$") ? `rename it to "$${newName}"` : `rename it to "${newName.substring(1)}"`), internal);
             }
             const valuePath = path.get("value");
-            /* istanbul ignore else */
             if (valuePath.isObjectPattern()) {
                 /* istanbul ignore else */
                 if (originName && originName.startsWith("$")) {
@@ -449,23 +495,24 @@ function ignoreObjectPattern(pattern, internal) {
                 const right = valuePath.get("right");
                 ignoreParams(valuePath.get("left"), internal, ["id"]);
                 meshExpression(right, internal);
-                if (property.computed && t.isIdentifier(property.key)) {
-                    right.replaceWith(internal.match(t.stringLiteral(property.key.name), right.node, property));
-                }
-                else if ((t.isIdentifier(property.key) && property.key.name.startsWith("$")) ||
+                if ((t.isIdentifier(property.key) && property.key.name.startsWith("$")) ||
                     (t.isStringLiteral(property.key) && property.key.value.startsWith("$"))) {
                     right.replaceWith(internal.ref(right.node, property, undefined));
                 }
-            }
-            else if (t.isIdentifier(property.value)) {
-                internal.stack.set(property.value.name, {});
-                if (property.computed) {
-                    path
-                        .get("value")
-                        .replaceWith(t.assignmentPattern(property.value, internal.match(t.stringLiteral(property.value.name), null, property)));
+                else {
+                    /* istanbul ignore else */
+                    if (property.computed && !t.isStringLiteral(property.key)) {
+                        (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, valuePath, "Computed property can not be used in destruction", internal);
+                    }
                 }
-                else if (property.value.name.startsWith("$")) {
-                    path.get("value").replaceWith(t.assignmentPattern(property.value, internal.ref(null, property, undefined)));
+            }
+            else {
+                /* istanbul ignore else */
+                if (t.isIdentifier(property.value)) {
+                    internal.stack.set(property.value.name, {});
+                    if (property.value.name.startsWith("$")) {
+                        path.get("value").replaceWith(t.assignmentPattern(property.value, internal.ref(null, property, undefined)));
+                    }
                 }
             }
         }
@@ -477,13 +524,15 @@ function ignoreObjectPattern(pattern, internal) {
 function reactiveArrayPattern(path, internal) {
     if (path.isArrayPattern()) {
         path.get("elements").forEach((element, index) => {
-            /* istanbul ignore else */
             if (index < 2) {
                 (0, lib_js_1.checkReactiveName)(element, internal);
             }
-            else if (element.isIdentifier()) {
-                (0, lib_js_1.checkNonReactiveName)(element, internal);
-                internal.stack.set(element.node.name, {});
+            else {
+                /* istanbul ignore else */
+                if (element.isIdentifier()) {
+                    (0, lib_js_1.checkNonReactiveName)(element, internal);
+                    internal.stack.set(element.node.name, {});
+                }
             }
         });
     }
@@ -519,7 +568,6 @@ function meshForHeader(path, internal) {
 }
 function meshClassBody(path, internal) {
     for (const item of path.get("body")) {
-        /* istanbul ignore else */
         if (item.isClassMethod() || item.isClassPrivateMethod()) {
             meshFunction(item, internal);
         }
@@ -541,11 +589,11 @@ function meshClassBody(path, internal) {
                 meshExpression(item.get("value"), internal);
             }
         }
-        else if (item.isClassAccessorProperty()) {
-            meshExpression(item.get("value"), internal);
-        }
-        else if (item.isClassPrivateProperty()) {
-            meshExpression(item.get("value"), internal);
+        else {
+            /* istanbul ignore else */
+            if (item.isClassPrivateProperty()) {
+                meshExpression(item.get("value"), internal);
+            }
         }
     }
 }
@@ -553,7 +601,6 @@ function procedureProcessObjectExpression(path, internal, state) {
     for (const prop of path.get("properties")) {
         const keyPath = prop.get("key");
         const valuePath = prop.get("value");
-        /* istanbul ignore else */
         if (prop.isObjectProperty()) {
             // the property name is known in compile time
             if ((!prop.node.computed || keyPath.isStringLiteral()) && valuePath.isExpression()) {
@@ -609,13 +656,16 @@ function procedureProcessObjectExpression(path, internal, state) {
             meshStatement(prop.get("body"), internal);
             internal.wrapFunctionBody(prop.node);
         }
-        else if (prop.isSpreadElement()) {
-            const argumentPath = prop.get("argument");
-            if (argumentPath.isObjectExpression()) {
-                procedureProcessObjectExpression(argumentPath, internal, state);
-            }
-            else {
-                meshExpression(argumentPath, internal);
+        else {
+            /* istanbul ignore else */
+            if (prop.isSpreadElement()) {
+                const argumentPath = prop.get("argument");
+                if (argumentPath.isObjectExpression()) {
+                    procedureProcessObjectExpression(argumentPath, internal, state);
+                }
+                else {
+                    meshExpression(argumentPath, internal);
+                }
             }
         }
     }
@@ -804,7 +854,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) &&
@@ -865,7 +915,6 @@ function meshStatement(path, internal) {
         }
         case "ExportDefaultDeclaration": {
             const declarationPath = path.get("declaration");
-            /* istanbul ignore else */
             // export default 23;
             if (declarationPath.isExpression()) {
                 meshExpression(declarationPath, internal);
@@ -875,9 +924,25 @@ function meshStatement(path, internal) {
                 meshFunction(declarationPath, internal);
             }
             // export default class ..
-            else if (declarationPath.isClassDeclaration()) {
-                meshClassBody(declarationPath.get("body"), internal);
+            else {
+                /* istanbul ignore else */
+                if (declarationPath.isClassDeclaration()) {
+                    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;
         }
     }
 }
@@ -898,12 +963,14 @@ function meshFunction(path, internal) {
         ignoreParams(param, internal, false);
     }
     const bodyPath = path.get("body");
-    /* istanbul ignore else */
     if (bodyPath.isExpression()) {
         meshExpression(bodyPath, internal);
     }
-    else if (bodyPath.isBlockStatement()) {
-        meshStatement(bodyPath, internal);
+    else {
+        /* istanbul ignore else */
+        if (bodyPath.isBlockStatement()) {
+            meshStatement(bodyPath, internal);
+        }
     }
     if (path.isFunctionExpression() || path.isArrowFunctionExpression()) {
         path.replaceWith(internal.wrapFunction(path.node));
@@ -918,7 +985,6 @@ function composeExpression(path, internal) {
     switch (expr && expr.type) {
         case "CallExpression":
         case "OptionalCallExpression": {
-            /* istanbul ignore else */
             if ((0, call_js_1.calls)(path, ["watch"], internal)) {
                 (0, lib_js_1.parseCalculateCall)(path, internal, path.node, undefined);
                 const args = path.node.arguments;
@@ -945,11 +1011,14 @@ function composeExpression(path, internal) {
                 }
                 path.get("callee").replaceWith(t.memberExpression(internal_js_1.ctx, t.identifier("runOnDestroy")));
             }
-            else if ((0, call_js_1.calls)(path, ["share"], internal)) {
-                if (internal.stateOnly) {
-                    (0, lib_js_1.err)(lib_js_1.Errors.IncompatibleContext, path, "Stores/Models in Vasille.JS cannot share dependecies", internal);
+            else {
+                /* istanbul ignore else */
+                if ((0, call_js_1.calls)(path, ["share"], internal)) {
+                    if (internal.stateOnly) {
+                        (0, lib_js_1.err)(lib_js_1.Errors.IncompatibleContext, path, "Stores/Models in Vasille.JS cannot share dependencies", internal);
+                    }
+                    path.node.arguments.unshift(internal_js_1.ctx);
                 }
-                path.node.arguments.unshift(internal_js_1.ctx);
             }
             break;
         }
@@ -1016,7 +1085,6 @@ function composeStatement(path, internal) {
                     };
                 }
                 ignoreParams(declaration.get("id"), internal, ["id", "array"]);
-                /* istanbul ignore else */
                 if ((0, call_js_1.calls)(declaration.get("init"), ["awaited"], internal)) {
                     const callPath = declaration.get("init");
                     reactiveArrayPattern(declaration.get("id"), internal);
@@ -1082,13 +1150,13 @@ function composeStatement(path, internal) {
                         (0, lib_js_1.checkNonReactiveName)(idPath, internal);
                     }
                     // const x = { .. }
-                    else if (t.isObjectExpression(init)) {
+                    else if (t.isObjectExpression(init) && !(kind === "let" && id.name.startsWith("$"))) {
                         internal.stack.set(id.name, processObjectExpression(initPath, internal));
                         meshInit = false;
                         (0, lib_js_1.checkNonReactiveName)(idPath, internal);
                     }
                     // const a = []
-                    else if (initPath.isArrayExpression()) {
+                    else if (initPath.isArrayExpression() && !(kind === "let" && id.name.startsWith("$"))) {
                         if (kind !== "const") {
                             (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, declaration, "Arrays must be must be declared as constants", internal);
                         }
@@ -1100,11 +1168,28 @@ function composeStatement(path, internal) {
                     // const s = new Set(), const m = new Map()
                     else if (initPath.isNewExpression() &&
                         t.isIdentifier(initPath.node.callee) &&
-                        ["Set", "Map"].includes(initPath.node.callee.name)) {
+                        ["Set", "Map"].includes(initPath.node.callee.name) &&
+                        !(kind === "let" && id.name.startsWith("$"))) {
                         (0, lib_js_1.processModelCall)(initPath, declaration.node, initPath.node.callee.name, kind === "const", internal, idName());
                         meshInit = false;
                         (0, lib_js_1.checkNonReactiveName)(idPath, internal);
                     }
+                    // const x = y[z]
+                    else if (kind === "const" &&
+                        (initPath.isOptionalMemberExpression() || initPath.isMemberExpression()) &&
+                        initPath.node.computed &&
+                        t.isIdentifier(initPath.node.property)) {
+                        const path = initPath;
+                        const property = path.get("property");
+                        meshExpression(path.get("object"), internal);
+                        /* istanbul ignore else */
+                        if (property.isExpression()) {
+                            meshExpression(property, internal);
+                        }
+                        meshInit = false;
+                        path.replaceWith(internal.match(t.stringLiteral(id.name.startsWith("$") ? "$" : ""), path.node, declaration.node));
+                    }
+                    // let x = ..
                     else if (kind === "let") {
                         meshExpression(declaration.get("init"), internal);
                         if (idPath.isIdentifier() && idPath.node.name.startsWith("$")) {
@@ -1115,6 +1200,7 @@ function composeStatement(path, internal) {
                         }
                         meshInit = false;
                     }
+                    // const x = ..
                     else {
                         const isReactive = (0, lib_js_1.exprCall)(declaration.get("init"), declaration.node.init, internal, {
                             name: idName(),
@@ -1129,9 +1215,6 @@ function composeStatement(path, internal) {
                         meshInit = !isReactive;
                     }
                 }
-                else if (t.isObjectPattern(id)) {
-                    ignoreObjectPattern(declaration.get("id"), internal);
-                }
                 if (meshInit) {
                     meshExpression(declaration.get("init"), internal);
                 }
@@ -1162,13 +1245,15 @@ function compose(path, internal, isInternalSlot, isSlot) {
     if (!isSlot) {
         internal.isComposing = true;
     }
-    /* istanbul ignore else */
     if (body.isExpression()) {
         composeExpression(body, internal);
     }
-    else if (body.isBlockStatement()) {
-        (0, order_check_1.checkOrder)(body.get("body"), internal);
-        composeStatement(body, internal);
+    else {
+        /* istanbul ignore else */
+        if (body.isBlockStatement()) {
+            (0, order_check_1.checkOrder)(body.get("body"), internal);
+            composeStatement(body, internal);
+        }
     }
     if (!isSlot) {
         internal.isComposing = false;

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,34 +69,68 @@ 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) {
-        /* istanbul ignore else */
         if (t.isImportNamespaceSpecifier(specifier)) {
             internal.global = specifier.local.name;
             internal.stylesConnected = true;
         }
-        else if (t.isImportSpecifier(specifier)) {
-            const imported = extractText(specifier.imported);
-            const local = specifier.local.name;
-            if (imported === "bind" || imported === "calculate" || imported === "watch") {
-                ids.expr = local;
-            }
-            if (imported in ids) {
-                ids[imported] = local;
-            }
-            internal.mapping.set(local, imported);
-            if (imported === "styleSheet") {
-                internal.stylesConnected = true;
+        else {
+            /* istanbul ignore else */
+            if (t.isImportSpecifier(specifier)) {
+                const imported = extractText(specifier.imported);
+                const local = specifier.local.name;
+                if (imported === "bind" || imported === "calculate" || imported === "watch") {
+                    ids.expr = local;
+                }
+                if (imported in ids) {
+                    ids[imported] = local;
+                }
+                internal.mapping.set(local, imported);
+                if (imported === "styleSheet") {
+                    internal.stylesConnected = true;
+                }
+                internal.importStatement = statementPath;
             }
-            internal.importStatement = statementPath;
         }
     }
     statement.specifiers = statement.specifiers.filter(spec => {
@@ -175,6 +209,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,
@@ -187,6 +223,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);
@@ -236,9 +273,9 @@ function transformProgram(path, filename, opts) {
         },
         match(name, arg, area) {
             if (opts.devLayer) {
-                return call("match", [name, arg ?? t.buildUndefinedNode(), nodeToStaticPosition(area), getInspector()]);
+                return call("match", [name, arg, nodeToStaticPosition(area), getInspector()]);
             }
-            return call("match", arg ? [name, arg] : [name]);
+            return call("match", [name, arg]);
         },
         set(obj, field, value, area) {
             if (opts.devLayer) {

package/package.json

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