@builder.io/mitosis 0.3.0 → 0.3.1

package/dist/src/generators/react/blocks.js

@@ -130,7 +130,7 @@ var NATIVE_EVENT_MAPPER = {
     onClick: 'onPress',
 };
 var blockToReact = function (json, options, component, parentSlots) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (parentSlots === void 0) { parentSlots = []; }
     if (NODE_MAPPERS[json.name]) {
         return NODE_MAPPERS[json.name](json, options, component, parentSlots);
@@ -161,7 +161,7 @@ var blockToReact = function (json, options, component, parentSlots) {
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
-                var _d = mapper(key, value, options), newKey = _d[0], newValue = _d[1];
+                var _e = mapper(key, value, options), newKey = _e[0], newValue = _e[1];
                 str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {
@@ -175,16 +175,20 @@ var blockToReact = function (json, options, component, parentSlots) {
         }
     }
     for (var key in json.bindings) {
-        var value = String((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code);
+        // ignore duplicate slot attribute
+        if ((_b = json.slots) === null || _b === void 0 ? void 0 : _b[key]) {
+            continue;
+        }
+        var value = String((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code);
         if (key === 'css' && value.trim() === '{}') {
             continue;
         }
         var useBindingValue = (0, helpers_1.processBinding)(value, options);
-        if (((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.type) === 'spread') {
+        if (((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) === 'spread') {
             str += " {...(".concat(value, ")} ");
         }
         else if (key.startsWith('on')) {
-            var _e = json.bindings[key].arguments, cusArgs = _e === void 0 ? ['event'] : _e;
+            var _f = json.bindings[key].arguments, cusArgs = _f === void 0 ? ['event'] : _f;
             var eventName = options.type === 'native' ? NATIVE_EVENT_MAPPER[key] || key : key;
             str += " ".concat(eventName, "={(").concat(cusArgs.join(','), ") => ").concat((0, state_1.updateStateSettersInCode)(useBindingValue, options), " } ");
         }
@@ -198,7 +202,7 @@ var blockToReact = function (json, options, component, parentSlots) {
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
             if (typeof mapper === 'function') {
-                var _f = mapper(key, useBindingValue, options), newKey = _f[0], newValue = _f[1];
+                var _g = mapper(key, useBindingValue, options), newKey = _g[0], newValue = _g[1];
                 str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {

package/dist/src/generators/react/generator.js

@@ -241,7 +241,7 @@ var getDefaultImport = function (json, options) {
         return "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    ";
     }
     if (type === 'native') {
-        return "\n    import * as React from 'react';\n    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable } from 'react-native';\n    ";
+        return "\n    import * as React from 'react';\n    import { FlatList, ScrollView, View, StyleSheet, Image, Text, Pressable, TextInput } from 'react-native';\n    ";
     }
     if (type === 'taro') {
         return "\n    import * as React from 'react';\n    ";

package/dist/src/generators/react-native/index.js

@@ -116,10 +116,15 @@ var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
                         node.name = '';
                     }
                     else if (node.name.toLowerCase() === node.name && html_tags_1.VALID_HTML_TAGS.includes(node.name)) {
-                        node.name = 'View';
-                        if (node.bindings.onClick) {
+                        if (node.name === 'input') {
+                            node.name = 'TextInput';
+                        }
+                        else if (node.bindings.onClick) {
                             node.name = 'Pressable';
                         }
+                        else {
+                            node.name = 'View';
+                        }
                     }
                     else if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
                         ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {

package/dist/src/parsers/jsx/element-parser.js

@@ -189,66 +189,77 @@ var jsxElementToJson = function (node) {
             }
         }
     }
-    return (0, create_mitosis_node_1.createMitosisNode)({
-        name: nodeName,
-        properties: node.openingElement.attributes.reduce(function (memo, item) {
-            if (types.isJSXAttribute(item)) {
-                var key = (0, helpers_1.transformAttributeName)(item.name.name);
-                var value = item.value;
-                if (types.isStringLiteral(value)) {
-                    memo[key] = value.value;
-                    return memo;
-                }
-                if (types.isJSXExpressionContainer(value) && types.isStringLiteral(value.expression)) {
-                    memo[key] = value.expression.value;
-                    return memo;
-                }
+    // const properties: MitosisNode['properties'] = {}
+    // const bindings: MitosisNode['bindings'] = {}
+    // const slots: MitosisNode['slots'] = {}
+    var _a = node.openingElement.attributes.reduce(function (memo, item) {
+        if (types.isJSXAttribute(item)) {
+            var key = (0, helpers_1.transformAttributeName)(item.name.name);
+            var value = item.value;
+            // <Foo myProp />
+            if (value === null) {
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: 'true' });
+                return memo;
             }
-            return memo;
-        }, {}),
-        bindings: node.openingElement.attributes.reduce(function (memo, item) {
-            if (types.isJSXAttribute(item)) {
-                var key = (0, helpers_1.transformAttributeName)(item.name.name);
-                var value = item.value;
-                // boolean attribute
-                if (value === null) {
-                    memo[key] = (0, bindings_1.createSingleBinding)({ code: 'true' });
-                    return memo;
-                }
-                if (types.isJSXExpressionContainer(value) && !types.isStringLiteral(value.expression)) {
-                    var expression = value.expression;
-                    if (types.isArrowFunctionExpression(expression)) {
-                        if (key.startsWith('on')) {
-                            var args = expression.params.map(function (node) { return node === null || node === void 0 ? void 0 : node.name; });
-                            memo[key] = (0, bindings_1.createSingleBinding)({
-                                code: (0, generator_1.default)(expression.body).code,
-                                arguments: args.length ? args : undefined,
-                            });
-                        }
-                        else {
-                            memo[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression.body).code });
-                        }
-                    }
-                    else {
-                        memo[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression).code });
-                    }
+            // <Foo myProp="hello" />
+            if (types.isStringLiteral(value)) {
+                memo.properties[key] = value.value;
+                return memo;
+            }
+            if (!types.isJSXExpressionContainer(value))
+                return memo;
+            var expression = value.expression;
+            if (types.isStringLiteral(expression)) {
+                // <Foo myProp={"hello"} />
+                memo.properties[key] = expression.value;
+            }
+            else if (types.isArrowFunctionExpression(expression)) {
+                // <Foo myProp={() => {}} />
+                var args = key.startsWith('on')
+                    ? expression.params.map(function (node) { return node === null || node === void 0 ? void 0 : node.name; })
+                    : [];
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: (0, generator_1.default)(expression.body).code,
+                    arguments: args.length ? args : undefined,
+                });
+            }
+            else if (types.isJSXElement(expression)) {
+                // <Foo myProp={<MoreMitosisNode><div /></MoreMitosisNode>} />
+                var slotNode = (0, exports.jsxElementToJson)(expression);
+                if (!slotNode)
                     return memo;
-                }
+                memo.slots[key] = [slotNode];
+                // Temporarily keep the slot as a binding until we migrate generators to use the slots.
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression).code });
             }
-            else if (types.isJSXSpreadAttribute(item)) {
-                // TODO: potentially like Vue store bindings and properties as array of key value pairs
-                // too so can do this accurately when order matters. Also tempting to not support spread,
-                // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
-                var key = (0, generator_1.default)(item.argument).code;
-                memo[key] = {
-                    code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
-                    type: 'spread',
-                    spreadType: 'normal',
-                };
+            else {
+                memo.bindings[key] = (0, bindings_1.createSingleBinding)({ code: (0, generator_1.default)(expression).code });
             }
             return memo;
-        }, {}),
+        }
+        else if (types.isJSXSpreadAttribute(item)) {
+            // TODO: potentially like Vue store bindings and properties as array of key value pairs
+            // too so can do this accurately when order matters. Also tempting to not support spread,
+            // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
+            var key = (0, generator_1.default)(item.argument).code;
+            memo.bindings[key] = {
+                code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
+                type: 'spread',
+                spreadType: 'normal',
+            };
+        }
+        return memo;
+    }, {
+        bindings: {},
+        properties: {},
+        slots: {},
+    }), bindings = _a.bindings, properties = _a.properties, slots = _a.slots;
+    return (0, create_mitosis_node_1.createMitosisNode)({
+        name: nodeName,
+        properties: properties,
+        bindings: bindings,
         children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+        slots: Object.keys(slots).length > 0 ? slots : undefined,
     });
 };
 exports.jsxElementToJson = jsxElementToJson;

package/dist/src/parsers/svelte/helpers/mitosis-node.js

@@ -10,6 +10,7 @@ function createMitosisNode() {
         children: [],
         bindings: {},
         properties: {},
+        slots: {},
     };
 }
 exports.createMitosisNode = createMitosisNode;

package/dist/src/parsers/svelte/html/index.js

@@ -40,6 +40,7 @@ function parseHtmlNode(json, node) {
         children: [],
         bindings: {},
         properties: {},
+        slots: {},
     };
     switch (node.type) {
         case 'Element':

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.3.0",
+  "version": "0.3.1",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {