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

package/dist/src/__tests__/builder.test.js

@@ -22,6 +22,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,8 +66,10 @@ var dedent_1 = __importDefault(require("dedent"));
 var fs = __importStar(require("fs"));
 var builder_1 = require("../generators/builder");
 var mitosis_1 = require("../generators/mitosis");
+var html_1 = require("../generators/html");
 var builder_2 = require("../parsers/builder");
 var jsx_1 = require("../parsers/jsx");
+var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
 /**
  * Load a file using nodejs resolution as a string.
  */
@@ -44,6 +82,7 @@ var customCode = fixture('./data/blocks/custom-code.raw');
 var embed = fixture('./data/blocks/embed.raw');
 var image = fixture('./data/blocks/image.raw');
 var columns = fixture('./data/blocks/columns.raw');
+var lazyLoadSection = JSON.parse(fixture('./data/builder/lazy-load-section.json'));
 describe('Builder', function () {
     test('extractStateHook', function () {
         var code = "useState({ foo: 'bar' }); alert('hi');";
@@ -96,6 +135,22 @@ describe('Builder', function () {
         var mitosis = mitosis_1.componentToMitosis(backToMitosis);
         expect(mitosis).toMatchSnapshot();
     });
+    test('Section', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var mitosisComponent, html;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mitosisComponent = builder_2.builderContentToMitosisComponent(lazyLoadSection);
+                    return [4 /*yield*/, html_1.componentToHtml(mitosisComponent, {
+                            plugins: [compile_away_builder_components_1.compileAwayBuilderComponents()],
+                        })];
+                case 1:
+                    html = _a.sent();
+                    expect(html).toMatchSnapshot();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     test('Regenerate Image', function () {
         var code = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"hi\"\n              css={{\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "], ["\n      import { useState } from \"@builder.io/mitosis\";\n      import { Image } from \"@components\";\n\n      export default function MyComponent(props) {\n        const state = useState({ people: [\"Steve\", \"Sewell\"] });\n\n        return (\n          <div\n            css={{\n              padding: \"20px\",\n            }}\n          >\n            <Image\n              image=\"hi\"\n              css={{\n                display: \"block\",\n              }}\n            />\n          </div>\n        );\n      }\n    "])));
         var json = jsx_1.parseJsx(code);

package/dist/src/__tests__/context.test.js

@@ -6,6 +6,7 @@ var context_1 = require("../parsers/context");
 var react_2 = require("../generators/react");
 var simpleExample = require('./data/context/simple.context.lite');
 var componentWithContext = require('./data/context/component-with-context.lite');
+var renderBlock = require('./data/blocks/builder-render-block.raw');
 describe('Context', function () {
     test('Parse context', function () {
         var json = context_1.parseContext(simpleExample, { name: 'SimpleExample' });
@@ -22,4 +23,10 @@ describe('Context', function () {
         var reactComponent = react_2.componentToReact(json);
         expect(reactComponent).toMatchSnapshot();
     });
+    test('Use and set context in complex components', function () {
+        var json = jsx_1.parseJsx(renderBlock);
+        expect(json).toMatchSnapshot();
+        var reactComponent = react_2.componentToReact(json);
+        expect(reactComponent).toMatchSnapshot();
+    });
 });

package/dist/src/__tests__/data/blocks/columns.raw.jsx

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
 function Column(props) {
     var state = mitosis_1.useState({
-        // TODO: These methods are not used right now, but they will be when
-        // support for dynamic CSS lands
         getColumns: function () {
             return props.columns || [];
         },

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -33,7 +33,7 @@ function SmileReviews(props) {
         </button>
       </mitosis_1.Show>
       <mitosis_1.For each={state.reviews}>
-        {function (review) { return (<div $name="Review" css={{
+        {function (review) { return (<div $name="Review" key={review.id} css={{
                 margin: '10px',
                 padding: '10px',
                 background: 'white',

package/dist/src/__tests__/react-native.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/__tests__/react-native.test.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_native_1 = require("../generators/react-native");
+var jsx_1 = require("../parsers/jsx");
+var basic = require('./data/basic.raw');
+var submitButtonBlock = require('./data/blocks/submit-button.raw');
+var inputBlock = require('./data/blocks/input.raw');
+var selectBlock = require('./data/blocks/select.raw');
+var formBlock = require('./data/blocks/form.raw');
+var button = require('./data/blocks/button.raw');
+var textarea = require('./data/blocks/textarea.raw');
+var img = require('./data/blocks/img.raw');
+var video = require('./data/blocks/video.raw');
+var section = require('./data/blocks/section.raw');
+var text = require('./data/blocks/text.raw');
+var rawText = require('./data/blocks/raw-text.raw');
+var stamped = require('./data/blocks/stamped-io.raw');
+var customCode = require('./data/blocks/custom-code.raw');
+var embed = require('./data/blocks/embed.raw');
+var image = require('./data/blocks/image.raw');
+var columns = require('./data/blocks/columns.raw');
+describe('React', function () {
+    test('Basic', function () {
+        var json = jsx_1.parseJsx(basic);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Input block', function () {
+        var json = jsx_1.parseJsx(inputBlock);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Submit button block', function () {
+        var json = jsx_1.parseJsx(submitButtonBlock);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Select block', function () {
+        var json = jsx_1.parseJsx(selectBlock);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Form block', function () {
+        var json = jsx_1.parseJsx(formBlock);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Button', function () {
+        var json = jsx_1.parseJsx(button);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Textarea', function () {
+        var json = jsx_1.parseJsx(textarea);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Img', function () {
+        var json = jsx_1.parseJsx(img);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Video', function () {
+        var json = jsx_1.parseJsx(video);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Section', function () {
+        var json = jsx_1.parseJsx(section);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Text', function () {
+        var json = jsx_1.parseJsx(text);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('RawText', function () {
+        var json = jsx_1.parseJsx(rawText);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Stamped.io', function () {
+        var json = jsx_1.parseJsx(stamped);
+        var output = react_native_1.componentToReactNative(json, {
+            stateType: 'useState',
+        });
+        expect(output).toMatchSnapshot();
+    });
+    test('CustomCode', function () {
+        var json = jsx_1.parseJsx(customCode);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Embed', function () {
+        var json = jsx_1.parseJsx(customCode);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Image', function () {
+        var json = jsx_1.parseJsx(image);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+    test('Columns', function () {
+        var json = jsx_1.parseJsx(columns);
+        var output = react_native_1.componentToReactNative(json);
+        expect(output).toMatchSnapshot();
+    });
+});

package/dist/src/flow.d.ts

@@ -9,9 +9,9 @@
 export declare function For<T, U extends JSX.Element>(props: {
     each?: readonly T[];
     children: (item: T, index: number) => U;
-}): JSX.Element;
+}): any;
 export declare function Show<T>(props: {
     when: T | undefined | null | false;
     else?: JSX.Element;
-    children: JSX.Element;
-}): JSX.Element;
+    children?: JSX.Element | null;
+}): any;

package/dist/src/generators/builder.d.ts

@@ -10,6 +10,7 @@ declare type InternalOptions = {
 export declare const blockToBuilder: (json: MitosisNode, options?: ToBuilderOptions, _internalOptions?: InternalOptions) => BuilderElement;
 export declare const componentToBuilder: (componentJson: MitosisComponent, options?: ToBuilderOptions) => {
     data: {
+        httpRequests: any;
         jsCode: string;
         tsCode: string;
         blocks: BuilderElement[];

package/dist/src/generators/builder.js

@@ -236,10 +236,12 @@ var blockToBuilder = function (json, options, _internalOptions) {
 };
 exports.blockToBuilder = blockToBuilder;
 var componentToBuilder = function (componentJson, options) {
+    var _a, _b;
     if (options === void 0) { options = {}; }
     var hasState = Boolean(Object.keys(componentJson.state).length);
     var result = fast_clone_1.fastClone({
         data: {
+            httpRequests: (_b = (_a = componentJson === null || componentJson === void 0 ? void 0 : componentJson.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests,
             jsCode: tryFormat(dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ",
                 "\n\n        ", "\n      "])), !has_props_1.hasProps(componentJson) ? '' : "var props = state;", !hasState
                 ? ''
@@ -257,8 +259,8 @@ var componentToBuilder = function (componentJson, options) {
         },
     });
     var subComponentMap = {};
-    for (var _i = 0, _a = componentJson.subComponents; _i < _a.length; _i++) {
-        var subComponent = _a[_i];
+    for (var _i = 0, _c = componentJson.subComponents; _i < _c.length; _i++) {
+        var subComponent = _c[_i];
         var name_1 = subComponent.name;
         subComponentMap[name_1] = exports.componentToBuilder(subComponent, options);
     }

package/dist/src/generators/context/vue.d.ts

@@ -0,0 +1,6 @@
+import { MitosisContext } from '../../types/mitosis-context';
+declare type ContextToVueOptions = {
+    format?: boolean;
+};
+export declare function contextToVue(context: MitosisContext, options?: ContextToVueOptions): string;
+export {};

package/dist/src/generators/context/vue.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.contextToVue = void 0;
+function contextToVue(context, options) {
+    if (options === void 0) { options = {}; }
+    var str = "\n    // Noop file\n    export default {};\n  ";
+    return str;
+}
+exports.contextToVue = contextToVue;

package/dist/src/generators/qwik.js

@@ -153,7 +153,7 @@ var NODE_MAPPERS = {
             .join('\n') + "</>";
     },
     For: function (json, options) {
-        return "{" + processBinding(json.bindings.each, options) + ".map(" + json.properties._forName + " => (\n      <>" + json.children
+        return "{" + processBinding(json.bindings.each, options) + "?.map(" + json.properties._forName + " => (\n      <>" + json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToQwik(item, options); })
             .join('\n') + "</>\n    ))}";
@@ -167,10 +167,10 @@ var NODE_MAPPERS = {
 };
 var getId = function (json, options) {
     var name = json.properties.$name
-        ? lodash_1.camelCase(json.properties.$name)
+        ? camelCase(json.properties.$name)
         : /^h\d$/.test(json.name || '') // don't dashcase h1 into h-1
             ? json.name
-            : lodash_1.camelCase(json.name || 'div');
+            : camelCase(json.name || 'div');
     var newNameNum = (options.namesMap[name] || 0) + 1;
     options.namesMap[name] = newNameNum;
     return capitalize_1.capitalize("" + name + (newNameNum === 1 ? '' : "" + newNameNum));
@@ -248,7 +248,7 @@ var blockToQwik = function (json, options) {
     return str;
 };
 var getComponentName = function (json, options) {
-    return capitalize_1.capitalize(lodash_1.camelCase(json.name || 'my-component'));
+    return capitalize_1.capitalize(camelCase(json.name || 'my-component'));
 };
 // TODO
 var getProvidersString = function (componentJson, options) {
@@ -320,9 +320,9 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                     if (options.plugins) {
                         json = plugins_1.runPostJsonPlugins(json, options.plugins);
                     }
-                    componentName = capitalize_1.capitalize(lodash_1.camelCase(componentJson.name || 'my-component'));
+                    componentName = capitalize_1.capitalize(camelCase(componentJson.name || 'my-component'));
                     strip_meta_properties_1.stripMetaProperties(json);
-                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ",
+                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ",
                         "\n\n    export ",
                         " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ",
                         "\n        ", "\n        ", ")\n    })\n  "])), qwikImport(options), componentName, componentName, render_imports_1.renderPreComponent(__assign(__assign({}, json), { imports: json.imports.map(function (item) {
@@ -333,7 +333,7 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                                     // Get the -1 index of array
                                     .slice(-2, -1)
                                     .pop();
-                                var pascalName = capitalize_1.capitalize(lodash_1.camelCase(name_1));
+                                var pascalName = capitalize_1.capitalize(camelCase(name_1));
                                 clone.path = "../" + pascalName + "/public.js";
                                 for (var key in clone.imports) {
                                     var value = clone.imports[key];
@@ -400,14 +400,14 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                                         jsx: 'react',
                                         isTSX: true,
                                         allExtensions: true,
-                                        jsxFactory: 'jsxFactory',
-                                        jsxPragma: 'jsxFactory',
+                                        jsxFactory: 'h',
+                                        jsxPragma: 'h',
                                     },
                                 ],
                                 [
                                     require('@babel/plugin-transform-react-jsx'),
                                     {
-                                        pragma: 'jsxFactory',
+                                        pragma: 'h',
                                         pragmaFrag: 'null',
                                         throwIfNamespace: false,
                                     },
@@ -442,4 +442,17 @@ var componentToQwik = function (componentJson, toQwikOptions) {
     });
 };
 exports.componentToQwik = componentToQwik;
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+function camelCase(text) {
+    if (text === void 0) { text = ''; }
+    var parts = text.split('-');
+    var first = parts.shift();
+    return first + parts.map(capitalize_1.capitalize).join('');
+}
 var templateObject_1;

package/dist/src/generators/react-native.d.ts

@@ -8,5 +8,5 @@ declare type ToReactNativeOptions = {
     plugins?: Plugin[];
 };
 export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
-export declare const componentToReactNative: (componentJson: MitosisComponent, options: ToReactNativeOptions) => string;
+export declare const componentToReactNative: (componentJson: MitosisComponent, options?: ToReactNativeOptions) => string;
 export {};

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

@@ -21,6 +21,7 @@ var fast_clone_1 = require("../helpers/fast-clone");
 var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
+var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
@@ -32,6 +33,21 @@ var collectReactNativeStyles = function (json) {
                 if (!lodash_1.size(value)) {
                     return;
                 }
+                // Style properties like `"20px"` need to be numbers like `20` for react native
+                for (var key in value) {
+                    var propertyValue = value[key];
+                    if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
+                        var newValue = parseFloat(propertyValue);
+                        if (!isNaN(newValue)) {
+                            value[key] = newValue;
+                        }
+                    }
+                    if (stylePropertiesThatMustBeNumber.has(key) &&
+                        typeof value[key] !== 'number') {
+                        console.warn("Style key " + key + " must be a number, but had value `" + value[key] + "`");
+                        delete value[key];
+                    }
+                }
                 var componentName = lodash_1.camelCase(item.name || 'view');
                 var index = (componentIndexes[componentName] =
                     (componentIndexes[componentName] || 0) + 1);
@@ -45,6 +61,7 @@ var collectReactNativeStyles = function (json) {
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
 var componentToReactNative = function (componentJson, options) {
+    if (options === void 0) { options = {}; }
     var json = fast_clone_1.fastClone(componentJson);
     traverse_1.default(json).forEach(function (node) {
         var _a, _b, _c;

package/dist/src/generators/react.js

@@ -23,21 +23,23 @@ var core_1 = require("@babel/core");
 var dedent_1 = __importDefault(require("dedent"));
 var json5_1 = __importDefault(require("json5"));
 var standalone_1 = require("prettier/standalone");
-var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var traverse_1 = __importDefault(require("traverse"));
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
 var method_literal_prefix_1 = require("../constants/method-literal-prefix");
 var babel_transform_1 = require("../helpers/babel-transform");
 var capitalize_1 = require("../helpers/capitalize");
 var collect_styles_1 = require("../helpers/collect-styles");
+var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var fast_clone_1 = require("../helpers/fast-clone");
 var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
 var get_refs_1 = require("../helpers/get-refs");
 var get_state_object_string_1 = require("../helpers/get-state-object-string");
 var getters_to_functions_1 = require("../helpers/getters-to-functions");
+var handle_missing_state_1 = require("../helpers/handle-missing-state");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var is_valid_attribute_name_1 = require("../helpers/is-valid-attribute-name");
 var map_refs_1 = require("../helpers/map-refs");
+var process_http_requests_1 = require("../helpers/process-http-requests");
 var process_tag_references_1 = require("../helpers/process-tag-references");
 var render_imports_1 = require("../helpers/render-imports");
 var replace_new_lines_in_strings_1 = require("../helpers/replace-new-lines-in-strings");
@@ -58,17 +60,17 @@ var NODE_MAPPERS = {
     },
     For: function (json, options) {
         var wrap = wrapInFragment(json);
-        return "{" + processBinding(json.bindings.each, options) + ".map(" + json.properties._forName + " => (\n      " + (wrap ? '<>' : '') + json.children
+        return "{" + processBinding(json.bindings.each, options) + "?.map(" + json.properties._forName + " => (\n      " + (wrap ? '<>' : '') + json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return exports.blockToReact(item, options); })
             .join('\n') + (wrap ? '</>' : '') + "\n    ))}";
     },
     Show: function (json, options) {
         var wrap = wrapInFragment(json);
-        return "{" + (options.format === 'safe' ? 'Boolean' : '') + "(" + processBinding(json.bindings.when, options) + ") && (\n      " + (wrap ? '<>' : '') + json.children
+        return "{" + processBinding(json.bindings.when, options) + " ? (\n      " + (wrap ? '<>' : '') + json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return exports.blockToReact(item, options); })
-            .join('\n') + (wrap ? '</>' : '') + "\n    )}";
+            .join('\n') + (wrap ? '</>' : '') + "\n    ) : " + (!json.meta.else ? 'null' : exports.blockToReact(json.meta.else, options)) + "}";
     },
 };
 // TODO: Maybe in the future allow defining `string | function` as values
@@ -85,10 +87,18 @@ var blockToReact = function (json, options) {
         return NODE_MAPPERS[json.name](json, options);
     }
     if (json.properties._text) {
-        return json.properties._text;
+        var text = json.properties._text;
+        if (options.type === 'native' && text.trim().length) {
+            return "<Text>" + text + "</Text>";
+        }
+        return text;
     }
     if (json.bindings._text) {
-        return "{" + processBinding(json.bindings._text, options) + "}";
+        var processed = processBinding(json.bindings._text, options);
+        if (options.type === 'native') {
+            return "<Text>{" + processed + "}</Text>";
+        }
+        return "{" + processed + "}";
     }
     var str = '';
     str += "<" + json.name + " ";
@@ -276,7 +286,7 @@ var getInitCode = function (json, options) {
 var componentToReact = function (componentJson, reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     var json = fast_clone_1.fastClone(componentJson);
-    var options = __assign({ stateType: 'useState', stylesType: 'styled-components' }, reactOptions);
+    var options = __assign({ stateType: 'useState', stylesType: 'styled-jsx' }, reactOptions);
     if (options.plugins) {
         json = plugins_1.runPreJsonPlugins(json, options.plugins);
     }
@@ -314,6 +324,8 @@ var componentToReact = function (componentJson, reactOptions) {
 exports.componentToReact = componentToReact;
 var _componentToReact = function (json, options, isSubComponent) {
     if (isSubComponent === void 0) { isSubComponent = false; }
+    process_http_requests_1.processHttpRequests(json);
+    handle_missing_state_1.handleMissingState(json);
     process_tag_references_1.processTagReferences(json);
     addProviderComponents(json, options);
     var componentHasStyles = collect_styles_1.hasStyles(json);
@@ -358,21 +370,21 @@ var _componentToReact = function (json, options, isSubComponent) {
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
         react_native_1.collectReactNativeStyles(json);
-    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n  "], ["\n  ",
-        "\n  ",
+    var str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "function ", "(props) {\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }\n\n    ", "\n\n    ", "\n  "], ["\n  ",
+        "\n  ", "\n  ",
         "\n  ",
         "\n    ",
         "\n    ",
         "\n    ",
-        "\n    ", "\n    ", "\n\n\n    ", "function ",
+        "\n    ", "\n\n    ", "function ",
         "(props) {\n      ",
         "\n      ", "\n      ", "\n      ", "\n\n      ",
         "\n\n      ",
-        "\n\n      return (\n        ", "\n        ",
-        "\n        ", "\n        ", "\n      );\n    }\n\n    ",
-        "\n  "])), options.type !== 'native'
+        "\n\n      return (\n        ", "\n        ", "\n        ",
+        "\n        ", "\n      );\n    }\n\n    ",
+        "\n\n    ", "\n  "])), options.type !== 'native'
         ? ''
-        : "\n  import * as React from 'react';\n  import { View, StyleSheet, Image, Text } from 'react-native';\n  ", reactLibImports.size
+        : "\n  import * as React from 'react';\n  import { View, StyleSheet, Image, Text } from 'react-native';\n  ", styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
         ? "import { " + Array.from(reactLibImports).join(', ') + " } from 'react'"
         : '', componentHasStyles && stylesType === 'emotion' && options.format !== 'lite'
         ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
@@ -382,8 +394,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "import { useMutable } from 'react-solid-state';"
         : '', stateType === 'mobx' && hasState
         ? "import { useLocalObservable } from 'mobx-react-lite';"
-        : '', render_imports_1.renderPreComponent(json), styledComponentsCode ? styledComponentsCode : '', isSubComponent ? '' : 'export default ', json.name ||
-        'MyComponent', hasState
+        : '', render_imports_1.renderPreComponent(json), isSubComponent ? '' : 'export default ', json.name || 'MyComponent', hasState
         ? stateType === 'mobx'
             ? "const state = useLocalObservable(() => (" + get_state_object_string_1.getStateObjectStringFromComponent(json) + "));"
             : stateType === 'useState'
@@ -397,11 +408,11 @@ var _componentToReact = function (json, options, isSubComponent) {
         ? "useEffect(() => {\n            " + processBinding(updateStateSettersInCode(json.hooks.onMount, options), options) + "\n          }, [])"
         : '', json.hooks.onUnMount
         ? "useEffect(() => {\n            " + processBinding(updateStateSettersInCode(json.hooks.onUnMount, options), options) + "\n          }, [])"
-        : '', wrap ? '<>' : '', componentHasStyles && stylesType === 'styled-jsx'
+        : '', wrap ? '<>' : '', json.children.map(function (item) { return exports.blockToReact(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`" + css + "`}</style>"
-        : '', json.children.map(function (item) { return exports.blockToReact(item, options); }).join('\n'), wrap ? '</>' : '', !nativeStyles
+        : '', wrap ? '</>' : '', !nativeStyles
         ? ''
-        : "\n      const styles = StyleSheet.create(" + json5_1.default.stringify(nativeStyles) + ");\n    ");
+        : "\n      const styles = StyleSheet.create(" + json5_1.default.stringify(nativeStyles) + ");\n    ", styledComponentsCode ? styledComponentsCode : '');
     str = replace_new_lines_in_strings_1.stripNewlinesInStrings(str);
     return str;
 };

package/dist/src/generators/template.js

@@ -36,7 +36,7 @@ var blockToTemplate = function (json, options) {
     }
     var str = '';
     if (json.name === 'For') {
-        str += "${" + json.bindings.each + ".map(" + json.properties._forName + " => `";
+        str += "${" + json.bindings.each + "?.map(" + json.properties._forName + " => `";
         if (json.children) {
             str += json.children
                 .map(function (item) { return blockToTemplate(item, options); })

package/dist/src/generators/vue.d.ts

@@ -4,6 +4,10 @@ import { Plugin } from '../modules/plugins';
 export declare type ToVueOptions = {
     prettier?: boolean;
     plugins?: Plugin[];
+    vueVersion?: 2 | 3;
+    cssNamespace?: string;
+    namePrefix?: string;
+    builderRegister?: boolean;
 };
 export declare const blockToVue: (node: MitosisNode, options: ToVueOptions) => string;
 export declare const componentToVue: (component: MitosisComponent, options?: ToVueOptions) => string;