@builder.io/mitosis 0.0.44-21 → 0.0.45-2

package/dist/src/parsers/jsx.js

@@ -300,6 +300,9 @@ var jsxElementToJson = function (node) {
         });
     }
     if (types.isJSXExpressionContainer(node)) {
+        if (types.isJSXEmptyExpression(node.expression)) {
+            return null;
+        }
         // foo.map -> <For each={foo}>...</For>
         if (types.isCallExpression(node.expression) ||
             types.isOptionalCallExpression(node.expression)) {
@@ -337,6 +340,19 @@ var jsxElementToJson = function (node) {
                 // TODO: good warning system for unsupported operators
             }
         }
+        // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
+        if (types.isConditionalExpression(node.expression)) {
+            return create_mitosis_node_1.createMitosisNode({
+                name: 'Show',
+                meta: {
+                    else: jsxElementToJson(node.expression.alternate),
+                },
+                bindings: {
+                    when: generator_1.default(node.expression.test).code,
+                },
+                children: [jsxElementToJson(node.expression.consequent)],
+            });
+        }
         // TODO: support {foo ? bar : baz}
         return create_mitosis_node_1.createMitosisNode({
             bindings: {
@@ -347,25 +363,32 @@ var jsxElementToJson = function (node) {
     if (types.isJSXFragment(node)) {
         return create_mitosis_node_1.createMitosisNode({
             name: 'Fragment',
-            children: node.children.map(function (item) {
-                return jsxElementToJson(item);
-            }),
+            children: node.children
+                .map(function (item) { return jsxElementToJson(item); })
+                .filter(Boolean),
         });
     }
     var nodeName = generator_1.default(node.openingElement.name).code;
     if (nodeName === 'Show') {
         var whenAttr = node.openingElement.attributes.find(function (item) { return types.isJSXAttribute(item) && item.name.name === 'when'; });
+        var elseAttr = node.openingElement.attributes.find(function (item) { return types.isJSXAttribute(item) && item.name.name === 'else'; });
         var whenValue = whenAttr &&
             types.isJSXExpressionContainer(whenAttr.value) &&
             generator_1.default(whenAttr.value.expression).code;
+        var elseValue = elseAttr &&
+            types.isJSXExpressionContainer(elseAttr.value) &&
+            jsxElementToJson(elseAttr.value.expression);
         return create_mitosis_node_1.createMitosisNode({
             name: 'Show',
+            meta: {
+                else: elseValue || undefined,
+            },
             bindings: {
                 when: whenValue || undefined,
             },
-            children: node.children.map(function (item) {
-                return jsxElementToJson(item);
-            }),
+            children: node.children
+                .map(function (item) { return jsxElementToJson(item); })
+                .filter(Boolean),
         });
     }
     // <For ...> control flow component
@@ -428,7 +451,9 @@ var jsxElementToJson = function (node) {
             }
             return memo;
         }, {}),
-        children: node.children.map(function (item) { return jsxElementToJson(item); }),
+        children: node.children
+            .map(function (item) { return jsxElementToJson(item); })
+            .filter(Boolean),
     });
 };
 var getHook = function (node) {
@@ -512,6 +537,18 @@ function mapReactIdentifiers(json) {
                 if (value) {
                     item.bindings[key] = mapReactIdentifiersInExpression(value, stateProperties);
                 }
+                if (key === 'className') {
+                    var currentValue = item.bindings[key];
+                    delete item.bindings[key];
+                    item.bindings.class = currentValue;
+                }
+            }
+            for (var key in item.properties) {
+                if (key === 'class') {
+                    var currentValue = item.properties[key];
+                    delete item.properties[key];
+                    item.properties.class = currentValue;
+                }
             }
         }
     });
@@ -553,11 +590,18 @@ function parseJsx(jsx, options) {
     var useOptions = __assign({ format: 'react' }, options);
     var subComponentFunctions = [];
     var output = babel.transform(jsx, {
+        configFile: false,
+        babelrc: false,
         presets: [[tsPreset, { isTSX: true, allExtensions: true }]],
         plugins: [
             jsxPlugin,
             function () { return ({
                 visitor: {
+                    JSXExpressionContainer: function (path, context) {
+                        if (types.isJSXEmptyExpression(path.node.expression)) {
+                            path.remove();
+                        }
+                    },
                     Program: function (path, context) {
                         if (context.builder) {
                             return;

package/dist/src/plugins/compile-away-builder-components.js

@@ -113,7 +113,7 @@ exports.components = {
         }), components);
     },
     CoreSection: function (node, context, components) {
-        return wrapOutput(node, parse_node_1.parseNode("<div\n      $name=\"section\"\n      css={{\n        width: '100%',\n        alignSelf: 'stretch',\n        flexGrow: '1',\n        boxSizing: 'border-box',\n        maxWidth: '" + ((node.bindings.maxWidth &&
+        return wrapOutput(node, parse_node_1.parseNode("<section\n      $name=\"section\"\n      " + (node.bindings.lazyLoad === 'true' ? 'lazyload="true"' : '') + "\n      css={{\n        width: '100%',\n        alignSelf: 'stretch',\n        flexGrow: '1',\n        boxSizing: 'border-box',\n        maxWidth: '" + ((node.bindings.maxWidth &&
             Number(node.bindings.maxWidth)) ||
             1200) + "px',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'stretch',\n        marginLeft: 'auto',\n        marginRight: 'auto',\n      }}\n    >\n    " + node.children
             .map(function (block) {
@@ -121,7 +121,7 @@ exports.components = {
                 prettier: false,
             });
         })
-            .join('\n') + "\n    </div>"), components);
+            .join('\n') + "\n    </section>"), components);
     },
     Columns: function (node, context, components) {
         var columns = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes).map(function (item) { return ({

package/dist/test/qwik/Todo/bundle.js

@@ -1,4 +1,4 @@
-import { Component, injectMethod, jsxFactory, QRL } from '@builder.io/qwik';
+import { Component, injectMethod, h, QRL } from '@builder.io/qwik';
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 class TodoComponent extends Component {
@@ -21,21 +21,21 @@ class TodoComponent extends Component {
 _defineProperty(TodoComponent, "$templateQRL", "ui:/Todo/bundle.template");
 
 const template = injectMethod(TodoComponent, function () {
-  return jsxFactory("li", {
+  return h("li", {
     class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
-  }, jsxFactory("div", {
+  }, h("div", {
     class: "view"
-  }, jsxFactory("input", {
-    class: "toggle",
+  }, h("input", {
     type: "checkbox",
+    class: "toggle",
     checked: this.todo.completed,
     "on:click": QRL`ui:/Todo/bundle.onInputClick`
-  }), jsxFactory("label", {
+  }), h("label", {
     "on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
-  }, this.todo.text), jsxFactory("button", {
+  }, this.todo.text), h("button", {
     class: "destroy",
     "on:click": QRL`ui:/Todo/bundle.onButtonClick`
-  })), this.editing ? jsxFactory(null, null, jsxFactory("input", {
+  })), this.editing ? h(null, null, h("input", {
     class: "edit",
     value: this.todo.text,
     "on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,

package/dist/test/qwik/Todo_onButtonClick.ts

@@ -1,13 +1,10 @@
 import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
 import { TodoComponent } from "./Todo_component.js";
 
-export default injectEventHandler(
+export const onButtonClick = injectEventHandler(
   TodoComponent,
   provideEvent(),
   async function (this: TodoComponent, event: Event) {
     todosState.todos.splice(todosState.todos.indexOf(this.todo));
   }
 );
-odo));
-  }
-);

package/dist/test/qwik/Todo_onInput2Blur.ts

@@ -1,7 +1,7 @@
 import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
 import { TodoComponent } from "./Todo_component.js";
 
-export const onInput2Blur = injectEventHandler(
+export default injectEventHandler(
   TodoComponent,
   provideEvent(),
   async function (this: TodoComponent, event: Event) {

package/dist/test/qwik/Todo_onLabelDblClick.ts

@@ -1,7 +1,7 @@
 import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
 import { TodoComponent } from "./Todo_component.js";
 
-export default injectEventHandler(
+export const onLabelDblClick = injectEventHandler(
   TodoComponent,
   provideEvent(),
   async function (this: TodoComponent, event: Event) {
@@ -9,6 +9,3 @@ export default injectEventHandler(
     markDirty(this);
   }
 );
-y(this);
-  }
-);

package/dist/test/qwik/Todo_template.tsx

@@ -1,4 +1,4 @@
-import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
+import { injectMethod, QRL, h } from "@builder.io/qwik";
 import { TodoComponent } from "./Todo_component.js";
 
 import { TodosState as todosState } from "../TodosState/public.js";
@@ -14,8 +14,8 @@ export const template = injectMethod(
       >
         <div class="view">
           <input
-            class="toggle"
             type="checkbox"
+            class="toggle"
             checked={this.todo.completed}
             on:click={QRL`ui:/Todo/bundle.onInputClick`}
           />

package/dist/test/qwik/Todos_template.tsx

@@ -1,4 +1,4 @@
-import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
+import { injectMethod, QRL, h } from "@builder.io/qwik";
 import { TodosComponent } from "./Todos_component.js";
 
 import { TodosState as todosState } from "../TodosState/public.js";
@@ -10,8 +10,8 @@ export default injectMethod(TodosComponent, function (this: TodosComponent) {
       {todosState.todos.length ? (
         <>
           <input
-            class="toggle-all"
             type="checkbox"
+            class="toggle-all"
             checked={todosState.allCompleted}
             on:click={QRL`ui:/Todos_onInputClick`}
           />
@@ -19,7 +19,7 @@ export default injectMethod(TodosComponent, function (this: TodosComponent) {
       ) : undefined}
 
       <ul class="todo-list">
-        {todosState.todos.map((todo) => (
+        {todosState.todos?.map((todo) => (
           <>
             <Todo todo={todo}></Todo>
           </>