babel-plugin-vasille 0.99.1 → 0.99.3

package/lib-node/mesh.js

@@ -41,11 +41,11 @@ exports.composeStatements = composeStatements;
 exports.composeStatement = composeStatement;
 exports.compose = compose;
 const t = __importStar(require("@babel/types"));
-const call_js_1 = require("./call.js");
-const internal_js_1 = require("./internal.js");
-const jsx_detect_js_1 = require("./jsx-detect.js");
-const lib_js_1 = require("./lib.js");
-const jsx_js_1 = require("./jsx.js");
+const call_1 = require("./call");
+const internal_1 = require("./internal");
+const jsx_detect_1 = require("./jsx-detect");
+const lib_1 = require("./lib");
+const jsx_1 = require("./jsx");
 function meshOrIgnoreAllExpressions(nodePaths, internal) {
     for (const path of nodePaths) {
         if (t.isExpression(path.node)) {
@@ -65,7 +65,7 @@ function meshComposeCall(call, name, nodePath, internal) {
     }
     const fnPath = nodePath.get("arguments")[0];
     compose(fnPath, internal, false);
-    arg.params.unshift(internal_js_1.ctx);
+    arg.params.unshift(internal_1.ctx);
     if (t.isArrowFunctionExpression(arg) && internal.devMode) {
         fnPath.replaceWith(t.functionExpression(t.identifier(internal.prefix + (name ? name.name : "Default")), arg.params, t.isBlockStatement(arg.body) ? arg.body : t.blockStatement([t.returnStatement(arg.body)]), false, arg.async));
     }
@@ -104,7 +104,7 @@ function meshExpression(nodePath, internal) {
     if (!expr) {
         return;
     }
-    if ((0, call_js_1.calls)(expr, ["compose", "extend"], internal)) {
+    if ((0, call_1.calls)(expr, ["compose", "extend"], internal)) {
         meshComposeCall(expr, null, nodePath, internal);
         return;
     }
@@ -139,15 +139,24 @@ function meshExpression(nodePath, internal) {
             meshAllUnknown(path.get("elements"), internal);
             break;
         }
-        case "CallExpression": {
+        case "CallExpression":
+        case "OptionalCallExpression": {
             const path = nodePath;
-            const callsFn = (0, call_js_1.calls)(path.node, call_js_1.composeOnly, internal);
+            const callsFn = (0, call_1.calls)(path.node, call_1.composeOnly, internal);
+            const callsStyleHint = (0, call_1.calls)(path.node, call_1.styleOnly, internal);
+            const callsStyleCreate = (0, call_1.calls)(path.node, ["webStyleSheet"], internal);
             if (callsFn) {
-                throw path.buildCodeFrameError(`Vasille: Usage of function "${callsFn}" is restricted here`);
+                throw path.buildCodeFrameError(`Vasille: Usage of hint "${callsFn}" is restricted here`);
+            }
+            if (callsStyleHint) {
+                throw path.buildCodeFrameError(`Vasille: Usage of style hint "${callsStyleHint}" is restricted here`);
+            }
+            if (callsStyleCreate) {
+                throw path.buildCodeFrameError("Vasille: Styles can be created in moldule level code only");
             }
             meshOrIgnoreExpression(path.get("callee"), internal);
             meshAllUnknown(path.get("arguments"), internal);
-            if ((0, call_js_1.calls)(path.node, ["calculate"], internal)) {
+            if ((0, call_1.calls)(path.node, ["calculate"], internal)) {
                 if (path.node.arguments.length !== 1 && !t.isExpression(path.node.arguments[0])) {
                     throw path.buildCodeFrameError("Vasille: Incorrect calculate argument");
                 }
@@ -155,18 +164,12 @@ function meshExpression(nodePath, internal) {
             }
             break;
         }
-        case "OptionalCallExpression": {
-            const path = nodePath;
-            meshExpression(path.get("callee"), internal);
-            meshAllUnknown(path.get("arguments"), internal);
-            break;
-        }
         case "AssignmentExpression": {
             const path = nodePath;
             const left = path.node.left;
             meshLValue(path.get("left"), internal);
             if (t.isIdentifier(left) && internal.stack.get(left.name) === 4 /* VariableState.ReactivePointer */) {
-                const replaceWith = (0, lib_js_1.forwardOnlyExpr)(path.get("right"), path.node.right, internal);
+                const replaceWith = (0, lib_1.forwardOnlyExpr)(path.get("right"), path.node.right, internal);
                 if (replaceWith) {
                     path.get("right").replaceWith(replaceWith);
                 }
@@ -513,7 +516,7 @@ function meshStatement(path, internal) {
             for (const declaration of _path.get("declarations")) {
                 const expr = declaration.node.init;
                 let ignore = true;
-                if (expr && t.isIdentifier(declaration.node.id) && (0, call_js_1.calls)(expr, ["compose", "extend"], internal)) {
+                if (expr && t.isIdentifier(declaration.node.id) && (0, call_1.calls)(expr, ["compose", "extend"], internal)) {
                     meshComposeCall(expr, declaration.node.id, declaration.get("init"), internal);
                 }
                 else {
@@ -607,7 +610,7 @@ function composeExpression(path, internal) {
     switch (expr.type) {
         case "AssignmentExpression": {
             const assign = expr;
-            if ((0, call_js_1.calls)(assign.right, ["awaited"], internal)) {
+            if ((0, call_1.calls)(assign.right, ["awaited"], internal)) {
                 reactiveArrayPattern(assign.left, internal);
             }
             else {
@@ -619,27 +622,27 @@ function composeExpression(path, internal) {
         case "OptionalCallExpression": {
             const call = expr;
             let replaced = false;
-            if ((0, call_js_1.calls)(call, ["watch"], internal)) {
-                const args = (0, lib_js_1.parseCalculateCall)(path, internal);
+            if ((0, call_1.calls)(call, ["watch"], internal)) {
+                const args = (0, lib_1.parseCalculateCall)(path, internal);
                 if (args) {
-                    path.replaceWith(t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("watch")), args));
+                    path.replaceWith(t.callExpression(t.memberExpression(internal_1.ctx, t.identifier("watch")), args));
                     replaced = true;
                 }
             }
-            else if ((0, call_js_1.calls)(call, ["arrayModel"], internal)) {
+            else if ((0, call_1.calls)(call, ["arrayModel"], internal)) {
                 const value = call.arguments[0];
                 if (t.isArrayExpression(value)) {
-                    path.replaceWith((0, lib_js_1.arrayModel)(value, internal));
+                    path.replaceWith((0, lib_1.arrayModel)(value, internal));
                     replaced = true;
                 }
                 else {
                     path.buildCodeFrameError(`Vasille: arrayModel requires array expression as argument`);
                 }
             }
-            else if ((0, call_js_1.calls)(call, ["mapModel", "setModel"], internal)) {
+            else if ((0, call_1.calls)(call, ["mapModel", "setModel"], internal)) {
                 const args = call.arguments;
-                const name = (0, call_js_1.calls)(call, ["mapModel", "setModel"], internal);
-                path.replaceWith(name === "mapModel" ? (0, lib_js_1.mapModel)(args, internal) : (0, lib_js_1.setModel)(args, internal));
+                const name = (0, call_1.calls)(call, ["mapModel", "setModel"], internal);
+                path.replaceWith(name === "mapModel" ? (0, lib_1.mapModel)(args, internal) : (0, lib_1.setModel)(args, internal));
                 replaced = true;
             }
             if (!replaced) {
@@ -649,7 +652,7 @@ function composeExpression(path, internal) {
         }
         case "JSXElement":
         case "JSXFragment":
-            path.replaceWithMultiple((0, jsx_js_1.transformJsx)(path, internal));
+            path.replaceWithMultiple((0, jsx_1.transformJsx)(path, internal));
             break;
         default:
             meshExpression(path, internal);
@@ -669,7 +672,7 @@ function composeStatement(path, internal) {
         case "FunctionDeclaration": {
             const _path = path;
             const fn = _path.node;
-            if ((0, jsx_detect_js_1.bodyHasJsx)(fn.body)) {
+            if ((0, jsx_detect_1.bodyHasJsx)(fn.body)) {
                 compose(_path, internal, false);
             }
             else {
@@ -771,7 +774,7 @@ function composeStatement(path, internal) {
                 const id = declaration.node.id;
                 let meshInit = true;
                 ignoreParams(declaration.node.id, internal);
-                if ((0, call_js_1.calls)(declaration.node.init, ["awaited"], internal)) {
+                if ((0, call_1.calls)(declaration.node.init, ["awaited"], internal)) {
                     reactiveArrayPattern(declaration.node.id, internal);
                     meshAllUnknown(declaration.get("init").get("arguments"), internal);
                     meshInit = false;
@@ -779,20 +782,20 @@ function composeStatement(path, internal) {
                 else if (t.isIdentifier(id)) {
                     internal.stack.set(id.name, declares);
                     const init = declaration.node.init;
-                    if ((0, call_js_1.calls)(init, ["value"], internal)) {
+                    if ((0, call_1.calls)(init, ["value"], internal)) {
                         internal.stack.set(id.name, 1 /* VariableState.Ignored */);
                         declaration.get("init").replaceWith(init.arguments[0]);
                         _path.node.kind = kind;
                     }
-                    else if ((0, call_js_1.calls)(init, ["bind"], internal)) {
+                    else if ((0, call_1.calls)(init, ["bind"], internal)) {
                         const argument = init.arguments[0];
                         const replaceWith = declares === 2 /* VariableState.Reactive */
-                            ? (0, lib_js_1.forwardOnlyExpr)(declaration.get("init"), argument, internal)
-                            : (0, lib_js_1.exprCall)(declaration.get("init"), argument, internal);
-                        let insertNode = replaceWith !== null && replaceWith !== void 0 ? replaceWith : (0, lib_js_1.ref)(t.isExpression(argument) ? argument : null);
+                            ? (0, lib_1.forwardOnlyExpr)(declaration.get("init"), argument, internal)
+                            : (0, lib_1.exprCall)(declaration.get("init"), argument, internal);
+                        let insertNode = replaceWith !== null && replaceWith !== void 0 ? replaceWith : (0, lib_1.ref)(t.isExpression(argument) ? argument : null);
                         if (declares === 2 /* VariableState.Reactive */) {
                             internal.stack.set(id.name, 4 /* VariableState.ReactivePointer */);
-                            insertNode = (0, lib_js_1.own)(insertNode);
+                            insertNode = (0, lib_1.own)(insertNode);
                         }
                         else {
                             internal.stack.set(id.name, 2 /* VariableState.Reactive */);
@@ -800,58 +803,58 @@ function composeStatement(path, internal) {
                         declaration.get("init").replaceWith(insertNode);
                         meshInit = !replaceWith;
                     }
-                    else if ((0, call_js_1.calls)(init, ["ref"], internal)) {
+                    else if ((0, call_1.calls)(init, ["ref"], internal)) {
                         const argument = init.arguments[0];
                         internal.stack.set(id.name, 2 /* VariableState.Reactive */);
-                        declaration.get("init").replaceWith((0, lib_js_1.ref)(t.isExpression(argument) ? argument : null));
+                        declaration.get("init").replaceWith((0, lib_1.ref)(t.isExpression(argument) ? argument : null));
                     }
-                    else if ((0, call_js_1.calls)(init, ["reactiveObject"], internal)) {
+                    else if ((0, call_1.calls)(init, ["reactiveObject"], internal)) {
                         const value = init.arguments[0];
                         if (kind !== "const") {
                             declaration.buildCodeFrameError(`Vasille: Reactive objects must be must be declared as constants`);
                         }
                         if (t.isObjectExpression(value)) {
-                            declaration.get("init").replaceWith((0, lib_js_1.reactiveObject)(value, internal));
+                            declaration.get("init").replaceWith((0, lib_1.reactiveObject)(value, internal));
                             internal.stack.set(id.name, 3 /* VariableState.ReactiveObject */);
                         }
                         else {
                             declaration.buildCodeFrameError(`Vasille: reactiveObject requires object expression as argument`);
                         }
                     }
-                    else if ((0, call_js_1.calls)(init, ["arrayModel"], internal)) {
+                    else if ((0, call_1.calls)(init, ["arrayModel"], internal)) {
                         const value = init.arguments[0];
                         if (kind !== "const") {
                             declaration.buildCodeFrameError(`Vasille: Array models must be must be declared as constants`);
                         }
                         if (t.isArrayExpression(value)) {
-                            declaration.get("init").replaceWith((0, lib_js_1.arrayModel)(value, internal));
+                            declaration.get("init").replaceWith((0, lib_1.arrayModel)(value, internal));
                         }
                         else {
                             declaration.buildCodeFrameError(`Vasille: arrayModel requires array expression as argument`);
                         }
                     }
-                    else if ((0, call_js_1.calls)(init, ["mapModel", "setModel"], internal)) {
+                    else if ((0, call_1.calls)(init, ["mapModel", "setModel"], internal)) {
                         const args = init.arguments;
-                        const name = (0, call_js_1.calls)(init, ["mapModel", "setModel"], internal);
+                        const name = (0, call_1.calls)(init, ["mapModel", "setModel"], internal);
                         if (kind !== "const") {
                             declaration.buildCodeFrameError(`Vasille: ${name === "mapModel" ? "Map" : "Set"} models must be declared as constants`);
                         }
                         declaration
                             .get("init")
-                            .replaceWith(name === "mapModel" ? (0, lib_js_1.mapModel)(args, internal) : (0, lib_js_1.setModel)(args, internal));
+                            .replaceWith(name === "mapModel" ? (0, lib_1.mapModel)(args, internal) : (0, lib_1.setModel)(args, internal));
                     }
                     else if (t.isObjectExpression(init)) {
                         if (kind !== "const") {
                             declaration.buildCodeFrameError(`Vasille: Objects must be must be declared as constants`);
                         }
-                        declaration.get("init").replaceWith((0, lib_js_1.reactiveObject)(init, internal));
+                        declaration.get("init").replaceWith((0, lib_1.reactiveObject)(init, internal));
                         internal.stack.set(id.name, 3 /* VariableState.ReactiveObject */);
                     }
                     else if (t.isArrayExpression(init)) {
                         if (kind !== "const") {
                             declaration.buildCodeFrameError(`Vasille: Arrays must be must be declared as constants`);
                         }
-                        declaration.get("init").replaceWith((0, lib_js_1.arrayModel)(init, internal));
+                        declaration.get("init").replaceWith((0, lib_1.arrayModel)(init, internal));
                     }
                     else if (t.isNewExpression(init) && t.isIdentifier(init.callee)) {
                         if (init.callee.name === "Map" || init.callee.name === "Set") {
@@ -860,17 +863,17 @@ function composeStatement(path, internal) {
                             }
                             declaration
                                 .get("init")
-                                .replaceWith(init.callee.name === "Map" ? (0, lib_js_1.mapModel)(init.arguments, internal) : (0, lib_js_1.setModel)(init.arguments, internal));
+                                .replaceWith(init.callee.name === "Map" ? (0, lib_1.mapModel)(init.arguments, internal) : (0, lib_1.setModel)(init.arguments, internal));
                         }
                     }
                     else if (declares === 2 /* VariableState.Reactive */) {
-                        const replaceWith = (0, lib_js_1.forwardOnlyExpr)(declaration.get("init"), declaration.node.init, internal);
+                        const replaceWith = (0, lib_1.forwardOnlyExpr)(declaration.get("init"), declaration.node.init, internal);
                         meshInit = !replaceWith;
                         internal.stack.set(id.name, replaceWith ? 4 /* VariableState.ReactivePointer */ : 2 /* VariableState.Reactive */);
-                        declaration.get("init").replaceWith(replaceWith ? (0, lib_js_1.own)(replaceWith) : (0, lib_js_1.ref)(declaration.node.init));
+                        declaration.get("init").replaceWith(replaceWith ? (0, lib_1.own)(replaceWith) : (0, lib_1.ref)(declaration.node.init));
                     }
                     else {
-                        const replaceWith = (0, lib_js_1.exprCall)(declaration.get("init"), declaration.node.init, internal);
+                        const replaceWith = (0, lib_1.exprCall)(declaration.get("init"), declaration.node.init, internal);
                         if (replaceWith) {
                             declaration.get("init").replaceWith(replaceWith);
                         }

package/lib-node/transformer.js

@@ -25,9 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.trProgram = trProgram;
 const t = __importStar(require("@babel/types"));
-const internal_js_1 = require("./internal.js");
-const mesh_js_1 = require("./mesh.js");
-const imports = new Map([["vasille-dx", "VasilleDX"], ["vasille-web", "VasilleWeb"]]);
+const internal_1 = require("./internal");
+const mesh_1 = require("./mesh");
+const css_transformer_1 = require("./css-transformer");
+const imports = new Map([
+    ["vasille-dx", "VasilleDX"],
+    ["vasille-web", "VasilleWeb"],
+]);
 const ignoreMembers = new Set([
     "value",
     "ref",
@@ -38,12 +42,20 @@ const ignoreMembers = new Set([
     "mapModel",
     "reactiveObject",
     "setModel",
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
 ]);
 function extractText(node) {
     return t.isIdentifier(node) ? node.name : node.value;
 }
 function trProgram(path, devMode) {
     let id;
+    let stylesConnected = false;
     const internal = {
         get id() {
             this.internalUsed = true;
@@ -52,9 +64,10 @@ function trProgram(path, devMode) {
         set id(expr) {
             id = expr;
         },
-        stack: new internal_js_1.StackedStates(),
+        stack: new internal_1.StackedStates(),
         mapping: new Map(),
         global: "",
+        cssGlobal: "",
         prefix: "Vasille_",
         importStatement: null,
         internalUsed: false,
@@ -69,12 +82,19 @@ function trProgram(path, devMode) {
                 for (const specifier of statement.specifiers) {
                     if (t.isImportNamespaceSpecifier(specifier)) {
                         internal.global = specifier.local.name;
+                        if (statement.source.value === "vasille-web") {
+                            internal.cssGlobal = internal.global;
+                            stylesConnected = true;
+                        }
                         id = t.memberExpression(t.identifier(internal.global), t.identifier("$"));
                     }
                     else if (t.isImportSpecifier(specifier)) {
                         const imported = extractText(specifier.imported);
                         const local = specifier.local.name;
                         internal.mapping.set(local, imported);
+                        if (imported === "webStyleSheet") {
+                            stylesConnected = true;
+                        }
                         if (!id) {
                             id = t.identifier(name);
                         }
@@ -90,12 +110,36 @@ function trProgram(path, devMode) {
                     }
                 });
             }
+            else if (statement.source.value === "vasille-css") {
+                for (const specifier of statement.specifiers) {
+                    if (t.isImportSpecifier(specifier)) {
+                        internal.mapping.set(specifier.local.name, extractText(specifier.imported));
+                    }
+                    else if (t.isImportNamespaceSpecifier(specifier)) {
+                        internal.cssGlobal = specifier.local.name;
+                    }
+                }
+                statement.specifiers = statement.specifiers.filter(spec => {
+                    if (!t.isImportSpecifier(spec)) {
+                        return true;
+                    }
+                    else {
+                        return !ignoreMembers.has(extractText(spec.imported));
+                    }
+                });
+                stylesConnected = true;
+            }
         }
         else {
             if (!id) {
+                if (stylesConnected) {
+                    (0, css_transformer_1.findStyleInNode)(statementPath, internal);
+                }
                 return;
             }
-            (0, mesh_js_1.meshStatement)(statementPath, internal);
+            if (!stylesConnected || !(0, css_transformer_1.findStyleInNode)(statementPath, internal)) {
+                (0, mesh_1.meshStatement)(statementPath, internal);
+            }
         }
     }
     if (internal.internalUsed && !internal.global && internal.importStatement) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "babel-plugin-vasille",
-  "version": "0.99.1",
-  "description": "",
+  "version": "0.99.3",
+  "description": "Convert Vasille Meta Language code to pure JavaScript",
   "main": "lib-node/index.js",
   "type": "commonjs",
   "exports": {
@@ -21,7 +21,9 @@
   "keywords": [
     "front-end",
     "framework",
-    "dx"
+    "web",
+    "compiler",
+    "babel"
   ],
   "author": "lixcode",
   "license": "MIT",
@@ -29,9 +31,6 @@
     "url": "https://github.com/vasille-js/vasille-js/issues"
   },
   "homepage": "https://github.com/vasille-js/vasille-js#readme",
-  "dependencies": {
-    "vasille-dx": "^3.0.1"
-  },
   "devDependencies": {
     "@babel/parser": "^7.26.1",
     "@babel/plugin-syntax-jsx": "^7.25.9",
@@ -46,6 +45,8 @@
     "path": "^0.12.7",
     "prettier": "^3.3.3",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vasille-css": "^3.0.3",
+    "vasille-dx": "^3.0.3"
   }
 }