babel-plugin-vasille 4.1.5 → 4.2.1

package/README.md

@@ -35,6 +35,7 @@ $ npm create vasille
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v4/doc/V4-API.md)
 * [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v4/doc/Router-API.md)
+* [Vasille Compostion function](https://github.com/vasille-js/vasille-js/blob/v4/doc/Compositions.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -103,6 +104,10 @@ All of these are supported:
 
 ## Change log
 
+### 4.2.0
+
+Add support for inlined conditions in JSX, binary `&&` and ternary `?:` operator.
+
 ### 4.1.0
 
 Added SSG (static site generation) as build option `vasille-web build static`.

package/lib/jsx.js

@@ -86,10 +86,19 @@ function transformJsxArray(paths, internal) {
             }
         }
         else if (path.isJSXExpressionContainer()) {
-            const value = transformJsxExpressionContainer(path, internal, false, false, true, true);
-            const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [value]);
-            call.loc = value.loc;
-            result.push(t.expressionStatement(call));
+            const conditionalJsx = tryForConditionalJsx(path, internal);
+            if (conditionalJsx.length) {
+                result.push(...conditionalJsx);
+            }
+            else {
+                const value = transformJsxExpressionContainer(path, internal, false, false, true, true);
+                /* istanbul ignore else */
+                if (!t.isJSXEmptyExpression(value)) {
+                    const call = t.callExpression(t.memberExpression(internal_js_1.ctx, t.identifier("text")), [value]);
+                    call.loc = value.loc;
+                    result.push(t.expressionStatement(call));
+                }
+            }
         }
         else {
             (0, lib_js_1.err)(lib_js_1.Errors.TokenNotSupported, path, "Spread child is not supported", internal);
@@ -98,6 +107,77 @@ function transformJsxArray(paths, internal) {
     result.push(...processConditions(conditions, internal));
     return result;
 }
+function statementsToFunction(arr) {
+    if (arr.length == 1 && t.isExpressionStatement(arr[0])) {
+        return t.arrowFunctionExpression([], arr[0].expression);
+    }
+    else {
+        return t.arrowFunctionExpression([], t.blockStatement(arr));
+    }
+}
+function checkIfExpressionIsConditionalJsx(expr) {
+    return ((t.isLogicalExpression(expr) &&
+        expr.operator === "&&" &&
+        !t.isJSX(expr.left) &&
+        (t.isJSX(expr.right) || checkIfExpressionIsConditionalJsx(expr.right))) ||
+        (t.isConditionalExpression(expr) &&
+            !t.isJSX(expr.test) &&
+            (t.isJSX(expr.consequent) || checkIfExpressionIsConditionalJsx(expr.consequent)) &&
+            (t.isJSX(expr.alternate) || checkIfExpressionIsConditionalJsx(expr.alternate))));
+}
+function processReactiveCondition(path, internal) {
+    (0, lib_js_1.exprCall)(path, path.node, internal, {});
+    return path.node;
+}
+function addConditionToCollection(condition, exprPath, internal, conditions) {
+    if (exprPath.isJSXElement() || exprPath.isJSXFragment()) {
+        const local = { cases: null };
+        conditions.push({
+            condition: processReactiveCondition(condition, internal),
+            slot: statementsToFunction([...transformJsx(exprPath, local, internal), ...processConditions(local, internal)]),
+        });
+    }
+    else {
+        const local = [];
+        const _default = processConditionalJsxExpression(exprPath, internal, local);
+        /* istanbul ignore else */
+        if (local.length) {
+            conditions.push({
+                condition: processReactiveCondition(condition, internal),
+                slot: statementsToFunction(processConditions({ cases: local }, internal, _default)),
+            });
+        }
+    }
+}
+function processConditionalJsxExpression(expr, internal, conditions) {
+    if (expr.isLogicalExpression()) {
+        addConditionToCollection(expr.get("left"), expr.get("right"), internal, conditions);
+        return undefined;
+    }
+    /* istanbul ignore else */
+    if (expr.isConditionalExpression()) {
+        const consent = expr.get("consequent");
+        const alternate = expr.get("alternate");
+        addConditionToCollection(expr.get("test"), consent, internal, conditions);
+        if (alternate.isJSXFragment() || alternate.isJSXElement()) {
+            const local = { cases: null };
+            return statementsToFunction([...transformJsx(alternate, local, internal), ...processConditions(local, internal)]);
+        }
+        return processConditionalJsxExpression(alternate, internal, conditions);
+    }
+}
+function tryForConditionalJsx(path, internal) {
+    const expr = path.get("expression");
+    if (expr.isExpression() && checkIfExpressionIsConditionalJsx(expr.node)) {
+        const conditions = [];
+        const _default = processConditionalJsxExpression(expr, internal, conditions);
+        /* istanbul ignore else */
+        if (_default || conditions.length) {
+            return processConditions({ cases: conditions }, internal, _default);
+        }
+    }
+    return [];
+}
 function transformJsxExpressionContainer(path, internal, acceptSlots, isInternalSlot, acceptsReactive, acceptsRaw) {
     const expression = path.get("expression");
     const loc = expression.node.loc;

package/lib/mesh.js

@@ -533,18 +533,20 @@ function procedureProcessObjectExpression(path, internal, state, prefix) {
                     if (valuePath.isObjectExpression()) {
                         procedureProcessObjectExpression(valuePath, internal, state, `${prefix}${name}.`);
                     }
-                    else {
-                        meshExpression(valuePath, internal);
-                    }
                     if (name.startsWith("$")) {
                         if (internal.isComposing && !internal.isFunctionParsing) {
+                            meshExpression(valuePath, internal);
                             valuePath.replaceWith(internal.ref(valuePath.node));
                             state[name] = 1;
                         }
-                        else {
+                        else if (!((valuePath.isIdentifier() && (0, expression_js_1.idIsIValue)(valuePath)) ||
+                            (valuePath.isMemberExpression() && (0, expression_js_1.memberIsIValue)(valuePath.node)))) {
                             (0, lib_js_1.err)(lib_js_1.Errors.RulesOfVasille, prop.get("key"), "This property is not a reactive", internal);
                         }
                     }
+                    else {
+                        meshExpression(valuePath, internal);
+                    }
                 }
             }
             // the property name is unknown in compile time

package/package.json

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