babel-plugin-vasille 0.99.2 → 0.99.4

package/README.md

@@ -104,8 +104,8 @@ All of these are supported:
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
 * [ ] `100%` Test Coverage fot babel plugin.
-* [ ] Add CSS support (define styles in components).
-* [ ] Add custom `<input/>` components with 2-way value binding.
+* [x] Add CSS support (define styles in components).
+* [ ] Add custom `input` components with 2-way value binding.
 * [ ] Add router.
 * [ ] Develop dev-tools extension for debugging.
 * [ ] Develop a lot of libraries for the framework.

package/lib/call.js

@@ -1,33 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.requiresContext = exports.composeOnly = void 0;
-exports.calls = calls;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-exports.composeOnly = [
+import * as t from "@babel/types";
+import { ctx } from "./internal";
+export const composeOnly = [
     "forward",
     "watch",
     "ref",
@@ -38,9 +11,19 @@ exports.composeOnly = [
     "setModel",
     "reactiveObject",
 ];
-exports.requiresContext = ["awaited", "forward"];
-const requiresContextSet = new Set(exports.requiresContext);
-function calls(node, names, internal) {
+export const styleOnly = [
+    "theme",
+    "dark",
+    "mobile",
+    "tablet",
+    "laptop",
+    "prefersDark",
+    "prefersLight",
+    "webStyleSheet",
+];
+export const requiresContext = ["awaited", "forward"];
+const requiresContextSet = new Set(requiresContext);
+export function calls(node, names, internal) {
     const set = new Set(names);
     const callee = t.isCallExpression(node) ? node.callee : null;
     if (callee) {
@@ -48,15 +31,16 @@ function calls(node, names, internal) {
             const mapped = internal.mapping.get(callee.name);
             if (mapped && set.has(mapped) && internal.stack.get(callee.name) === undefined) {
                 if (requiresContextSet.has(callee.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_1.ctx);
+                    node.arguments.unshift(ctx);
                 }
                 return mapped;
             }
             return false;
         }
-        // The global object is overrided
-        if (internal.stack.get(internal.global) !== undefined) {
-            return false;
+        const global = internal.stack.get(internal.global) === undefined;
+        const cssGlobal = internal.stack.get(internal.cssGlobal) === undefined;
+        if (!global && !cssGlobal) {
+            return;
         }
         const propName = t.isMemberExpression(callee)
             ? t.isIdentifier(callee.property)
@@ -66,12 +50,15 @@ function calls(node, names, internal) {
                     : null
             : null;
         if (t.isMemberExpression(callee) && t.isIdentifier(callee.object) && propName) {
-            if (callee.object.name === internal.global && set.has(propName)) {
+            if (global && callee.object.name === internal.global && set.has(propName)) {
                 if (requiresContextSet.has(callee.object.name) && t.isCallExpression(node)) {
-                    node.arguments.unshift(internal_1.ctx);
+                    node.arguments.unshift(ctx);
                 }
                 return callee.object.name;
             }
+            if (cssGlobal && callee.object.name === internal.cssGlobal && set.has(propName)) {
+                return callee.object.name;
+            }
         }
     }
     return false;

package/lib/css-transformer.js

@@ -0,0 +1,215 @@
+import * as t from "@babel/types";
+import { calls } from "./call";
+function tryProcessProp(path, pseudo, media, internal) {
+    if (t.isObjectMethod(path.node)) {
+        throw path.buildCodeFrameError("Object methods not supported here");
+    }
+    if (t.isSpreadElement(path.node)) {
+        throw path.buildCodeFrameError("Spread element not suppored here");
+    }
+    return processProp(path, pseudo, media, internal);
+}
+const mediaDefaults = ["mobile", "tablet", "laptop", "prefersDark", "prefersLight"];
+function processValue(name, path, pseudo, theme, media, mediaDefault, allowFallback, internal) {
+    if (calls(path.node, ["theme"], internal)) {
+        const call = path.node;
+        if (theme) {
+            throw path.buildCodeFrameError("Vasille: Theme seem the be defined twince");
+        }
+        if (t.isStringLiteral(call.arguments[0])) {
+            return processValue(name, path.get("arguments")[1], pseudo, `body.${call.arguments[0].value}`, media, mediaDefault, false, internal);
+        }
+        else {
+            throw path
+                .get("arguments")[0]
+                .buildCodeFrameError("Vasille: Expected string literal");
+        }
+    }
+    if (calls(path.node, ["dark"], internal)) {
+        if (theme) {
+            throw path.buildCodeFrameError("Vasille: Theme seem the be defined twince");
+        }
+        return processValue(name, path.get("arguments")[0], pseudo, `.dark`, media, mediaDefault, false, internal);
+    }
+    let callee;
+    if ((callee = calls(path.node, mediaDefaults, internal))) {
+        const index = mediaDefaults.indexOf(callee) + 1;
+        if (mediaDefault.includes(index)) {
+            return processValue(name, path.get("arguments")[0], pseudo, theme, media, mediaDefault, false, internal);
+        }
+        return processValue(name, path.get("arguments")[0], pseudo, theme, media, [...mediaDefault, index], false, internal);
+    }
+    function composeRules(value) {
+        return mediaDefault.length
+            ? mediaDefault.map(index => {
+                return {
+                    defaultMediaRule: index,
+                    mediaRule: media,
+                    pseudo: pseudo,
+                    theme: theme,
+                    rule: `${name}:${value}`,
+                };
+            })
+            : [
+                {
+                    defaultMediaRule: 0,
+                    mediaRule: media,
+                    pseudo: pseudo,
+                    theme: theme,
+                    rule: `${name}:${value}`,
+                },
+            ];
+    }
+    if (t.isStringLiteral(path.node)) {
+        return composeRules(path.node.value);
+    }
+    if (t.isNumericLiteral(path.node)) {
+        return composeRules(`${path.node.value}px`);
+    }
+    if (t.isArrayExpression(path.node)) {
+        if (path.node.elements.every(item => t.isNumericLiteral(item))) {
+            return composeRules(path.node.elements.map(item => `${item.value}px`).join(" "));
+        }
+        else if (allowFallback) {
+            return [
+                ...path
+                    .get("elements")
+                    .map(path => {
+                    if (t.isExpression(path.node)) {
+                        return processValue(name, path, pseudo, theme, media, mediaDefault, false, internal);
+                    }
+                    else {
+                        throw path.buildCodeFrameError("Vasille: Exprected expression");
+                    }
+                })
+                    .flat(1),
+            ];
+        }
+        else {
+            throw path.buildCodeFrameError("Vasille: Only numbers arrays are suppored here");
+        }
+    }
+    throw path.buildCodeFrameError("Vasille: Failed o parse value, it is not a string, number or array");
+}
+function processProp(path, pseudo, media, internal) {
+    let name;
+    if (t.isIdentifier(path.node.key)) {
+        name = path.node.key.name;
+    }
+    else if (t.isStringLiteral(path.node.key)) {
+        name = path.node.key.value;
+    }
+    else {
+        throw path.get("key").buildCodeFrameError("Vasille: Incompaible key, exprect idenifier or string literal");
+    }
+    if (name.startsWith("@")) {
+        if (media || pseudo) {
+            throw path.get("key").buildCodeFrameError("Vasille: Media queries allowed inly in the root of style");
+        }
+        if (t.isObjectExpression(path.node.value)) {
+            return path.get("value")
+                .get("properties")
+                .map(item => {
+                return tryProcessProp(item, "", name, internal);
+            })
+                .flat(1);
+        }
+        else {
+            throw path.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+        }
+    }
+    if (name.startsWith(":")) {
+        if (pseudo) {
+            throw path.get("key").buildCodeFrameError("Recursive pseudo classes are restriced");
+        }
+        if (t.isObjectExpression(path.node.value)) {
+            return path.get("value")
+                .get("properties")
+                .map(item => {
+                return tryProcessProp(item, name, media, internal);
+            })
+                .flat(1);
+        }
+        else {
+            throw path.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+        }
+    }
+    return processValue(name, path.get("value"), pseudo, "", media, [], true, internal);
+}
+export function findStyleInNode(path, internal) {
+    if (t.isExpressionStatement(path.node)) {
+        return findStyleInNode(path.get("expression"), internal);
+    }
+    if (t.isExportNamedDeclaration(path.node)) {
+        return findStyleInNode(path.get("declaration"), internal);
+    }
+    if (t.isVariableDeclaration(path.node) &&
+        path.node.declarations.length === 1 &&
+        calls(path.node.declarations[0].init, ["webStyleSheet"], internal)) {
+        const call = path.node.declarations[0].init;
+        const callPath = path
+            .get("declarations")[0]
+            .get("init");
+        const objPath = callPath.get("arguments")[0];
+        if (call.arguments.length !== 1) {
+            throw callPath.buildCodeFrameError("Vasille: webStyleSheet function has 1 parameter");
+        }
+        if (!t.isObjectExpression(call.arguments[0])) {
+            throw objPath.buildCodeFrameError("Vasille: expected object expression");
+        }
+        for (const path of objPath.get("properties")) {
+            if (!t.isObjectProperty(path.node)) {
+                throw path.buildCodeFrameError("Vasille: Expected object property");
+            }
+            const prop = path;
+            if (!t.isObjectExpression(prop.node.value)) {
+                throw prop.get("value").buildCodeFrameError("Vasille: Exprected object expression");
+            }
+            if (!(t.isIdentifier(prop.node.key) || t.isStringLiteral(prop.node.key))) {
+                throw prop.get("key").buildCodeFrameError("Vasille: Expected identifier of string literal");
+            }
+            const unsorted = [];
+            const sorted = {};
+            for (const path of prop.get("value").get("properties")) {
+                unsorted.push(...tryProcessProp(path, "", "", internal));
+            }
+            for (const rule of unsorted) {
+                if (!sorted[rule.defaultMediaRule]) {
+                    sorted[rule.defaultMediaRule] = {};
+                }
+                const defaultMediaRule = sorted[rule.defaultMediaRule];
+                if (!defaultMediaRule[rule.mediaRule]) {
+                    defaultMediaRule[rule.mediaRule] = {};
+                }
+                const mediaRule = defaultMediaRule[rule.mediaRule];
+                if (!mediaRule[rule.theme]) {
+                    mediaRule[rule.theme] = {};
+                }
+                const theme = mediaRule[rule.theme];
+                if (!theme[rule.pseudo]) {
+                    theme[rule.pseudo] = [];
+                }
+                theme[rule.pseudo].push(rule.rule);
+            }
+            const expressions = [];
+            for (const defaultMediaRule in sorted) {
+                for (const mediaRule in sorted[defaultMediaRule]) {
+                    for (const theme in sorted[defaultMediaRule][mediaRule]) {
+                        for (const pseudo in sorted[defaultMediaRule][mediaRule][theme]) {
+                            const rulePack = sorted[defaultMediaRule][mediaRule][theme][pseudo].join(";");
+                            const pseudoPack = pseudo ? `.{}${pseudo}{${rulePack}}` : `.{}{${rulePack}}`;
+                            const themePack = theme ? `${theme} ${pseudoPack}` : pseudoPack;
+                            const mediaRulePack = t.stringLiteral(mediaRule ? `${mediaRule}{${themePack}}` : themePack);
+                            expressions.push(defaultMediaRule !== "0"
+                                ? t.arrayExpression([t.numericLiteral(parseInt(defaultMediaRule)), mediaRulePack])
+                                : mediaRulePack);
+                        }
+                    }
+                }
+            }
+            prop.get("value").replaceWith(t.arrayExpression(expressions));
+        }
+        return true;
+    }
+    return false;
+}

package/lib/expression.js

@@ -1,41 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.encodeName = encodeName;
-exports.checkNode = checkNode;
-exports.checkOrIgnoreAllExpressions = checkOrIgnoreAllExpressions;
-exports.checkAllExpressions = checkAllExpressions;
-exports.checkAllUnknown = checkAllUnknown;
-exports.chekOrIgnoreExpression = chekOrIgnoreExpression;
-exports.checkExpression = checkExpression;
-exports.checkStatements = checkStatements;
-exports.checkStatement = checkStatement;
-exports.checkFunction = checkFunction;
-const t = __importStar(require("@babel/types"));
-const internal_1 = require("./internal");
-function encodeName(name) {
+import * as t from "@babel/types";
+import { StackedStates } from "./internal";
+export function encodeName(name) {
     return t.identifier(`Vasille_${name}`);
 }
 function addIdentifier(path, search) {
@@ -119,12 +84,12 @@ function meshLValue(path, internal) {
         });
     }
 }
-function checkNode(path, internal) {
+export function checkNode(path, internal) {
     const search = {
         external: internal,
         found: new Map(),
         self: null,
-        stack: new internal_1.StackedStates(),
+        stack: new StackedStates(),
     };
     if (t.isIdentifier(path.node)) {
         const state = internal.stack.get(path.node.name);
@@ -149,19 +114,19 @@ function checkNode(path, internal) {
     }
     return search;
 }
-function checkOrIgnoreAllExpressions(nodePaths, search) {
+export function checkOrIgnoreAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
         if (t.isExpression(path.node)) {
             checkExpression(path, search);
         }
     }
 }
-function checkAllExpressions(nodePaths, search) {
+export function checkAllExpressions(nodePaths, search) {
     for (const path of nodePaths) {
         checkExpression(path, search);
     }
 }
-function checkAllUnknown(paths, internal) {
+export function checkAllUnknown(paths, internal) {
     for (const path of paths) {
         if (t.isSpreadElement(path.node)) {
             checkExpression(path.get("argument"), internal);
@@ -171,12 +136,12 @@ function checkAllUnknown(paths, internal) {
         }
     }
 }
-function chekOrIgnoreExpression(path, search) {
+export function chekOrIgnoreExpression(path, search) {
     if (t.isExpression(path.node)) {
         checkExpression(path, search);
     }
 }
-function checkExpression(nodePath, search) {
+export function checkExpression(nodePath, search) {
     const expr = nodePath.node;
     if (!expr) {
         return;
@@ -377,7 +342,7 @@ function checkExpression(nodePath, search) {
         }
     }
 }
-function checkStatements(paths, search) {
+export function checkStatements(paths, search) {
     for (const path of paths) {
         checkStatement(path, search);
     }
@@ -412,7 +377,7 @@ function ignoreLocals(val, search) {
         }
     }
 }
-function checkStatement(path, search) {
+export function checkStatement(path, search) {
     const statement = path.node;
     if (!statement) {
         return;
@@ -540,7 +505,7 @@ function checkStatement(path, search) {
         }
     }
 }
-function checkFunction(path, search) {
+export function checkFunction(path, search) {
     const node = path.node;
     if (t.isExpression(node.body)) {
         checkExpression(path.get("body"), search);

package/lib/index.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = default_1;
-const transformer_1 = require("./transformer");
-function default_1() {
+import { trProgram } from "./transformer";
+export default function () {
     return {
         name: "Vasille",
         visitor: {
             Program(path, params) {
-                (0, transformer_1.trProgram)(path, params.opts.devMode !== false);
+                trProgram(path, params.opts.devMode !== false);
             },
         },
     };

package/lib/internal.js

@@ -1,31 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ctx = exports.StackedStates = void 0;
-const t = __importStar(require("@babel/types"));
-class StackedStates {
+import * as t from "@babel/types";
+export class StackedStates {
     constructor() {
         this.maps = [];
         this.push();
@@ -48,5 +22,4 @@ class StackedStates {
         this.maps[this.maps.length - 1].set(name, state);
     }
 }
-exports.StackedStates = StackedStates;
-exports.ctx = t.identifier("Vasille");
+export const ctx = t.identifier("Vasille");

package/lib/jsx-detect.js

@@ -1,33 +1,5 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.exprHasJsx = exprHasJsx;
-exports.statementHasJsx = statementHasJsx;
-exports.bodyHasJsx = bodyHasJsx;
-const t = __importStar(require("@babel/types"));
-function exprHasJsx(node) {
+import * as t from "@babel/types";
+export function exprHasJsx(node) {
     if (t.isBinaryExpression(node)) {
         return (t.isExpression(node.left) && exprHasJsx(node.left)) || exprHasJsx(node.right);
     }
@@ -48,7 +20,7 @@ function exprHasJsx(node) {
     }
     return t.isJSXElement(node) || t.isJSXFragment(node);
 }
-function statementHasJsx(statement) {
+export function statementHasJsx(statement) {
     if (t.isExpressionStatement(statement)) {
         return exprHasJsx(statement.expression);
     }
@@ -80,7 +52,7 @@ function statementHasJsx(statement) {
     }
     return false;
 }
-function bodyHasJsx(node) {
+export function bodyHasJsx(node) {
     if (t.isExpression(node)) {
         return exprHasJsx(node);
     }