babel-plugin-vasille 5.0.4 → 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/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,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");
@@ -189,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,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) {
@@ -816,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) &&
@@ -892,6 +930,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;
         }
     }
 }

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) {
@@ -177,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,
@@ -189,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);

package/package.json

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