@builder.io/mitosis 0.0.90 → 0.0.92

package/dist/src/generators/mitosis.js

@@ -55,6 +55,7 @@ var blockToMitosis = function (json, toMitosisOptions, component) {
             format: 'lite',
             stateType: 'useState',
             stylesType: 'emotion',
+            type: 'dom',
             prettier: options.prettier,
         }, component);
     }

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

@@ -10,9 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
 var lodash_1 = require("lodash");
+var is_children_1 = __importDefault(require("../../helpers/is-children"));
+var slots_1 = require("../../helpers/slots");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
 var for_1 = require("../../helpers/nodes/for");
@@ -133,7 +138,9 @@ var blockToReact = function (json, options, component, parentSlots) {
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
         var processed = (0, helpers_1.processBinding)(json.bindings._text.code, options);
-        if (options.type === 'native') {
+        if (options.type === 'native' &&
+            !(0, is_children_1.default)({ node: json }) &&
+            !(0, slots_1.isSlotProperty)(json.bindings._text.code.split('.')[1] || '')) {
             return "<Text>{".concat(processed, "}</Text>");
         }
         return "{".concat(processed, "}");
@@ -191,6 +198,10 @@ var blockToReact = function (json, options, component, parentSlots) {
                 str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
             }
         }
+        else if (key === 'style' && options.type === 'native' && json.name === 'ScrollView') {
+            // React Native's ScrollView has a different prop for styles: `contentContainerStyle`
+            str += " contentContainerStyle={".concat(useBindingValue, "} ");
+        }
         else {
             if ((0, is_valid_attribute_name_1.isValidAttributeName)(key)) {
                 str += " ".concat(key, "={").concat(useBindingValue, "} ");

package/dist/src/generators/react/generator.d.ts

@@ -1,5 +1,5 @@
 import { TranspilerGenerator } from '../../types/transpiler';
 import { ToReactOptions } from './types';
 export declare const contextPropDrillingKey = "_context";
-export declare const componentToPreact: TranspilerGenerator<ToReactOptions>;
-export declare const componentToReact: TranspilerGenerator<ToReactOptions>;
+export declare const componentToPreact: TranspilerGenerator<Partial<ToReactOptions>>;
+export declare const componentToReact: TranspilerGenerator<Partial<ToReactOptions>>;

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

@@ -34,7 +34,6 @@ 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");
 var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 var plugins_1 = require("../../modules/plugins");
 var context_1 = require("../helpers/context");
@@ -47,6 +46,8 @@ var helpers_2 = require("./helpers");
 var hash_sum_1 = __importDefault(require("hash-sum"));
 var bindings_1 = require("../../helpers/bindings");
 var blocks_1 = require("./blocks");
+var merge_options_1 = require("../../helpers/merge-options");
+var replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
 exports.contextPropDrillingKey = '_context';
 /**
  * If the root Mitosis component only has 1 child, and it is a `Show`/`For` node, then we need to wrap it in a fragment.
@@ -131,6 +132,7 @@ var getInitCode = function (json, options) {
 var DEFAULT_OPTIONS = {
     stateType: 'useState',
     stylesType: 'styled-jsx',
+    type: 'dom',
 };
 var componentToPreact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
@@ -142,7 +144,7 @@ var componentToReact = function (reactOptions) {
     return function (_a) {
         var component = _a.component;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign(__assign({}, DEFAULT_OPTIONS), reactOptions);
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, reactOptions);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
         }
@@ -177,6 +179,35 @@ var componentToReact = function (reactOptions) {
     };
 };
 exports.componentToReact = componentToReact;
+// TODO: import target components when they are required
+var getDefaultImport = function (json, options) {
+    var preact = options.preact, type = options.type;
+    if (preact) {
+        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 } from 'react-native';\n    ";
+    }
+    if (type === 'taro') {
+        return "\n    import * as React from 'react';\n    ";
+    }
+    return "import * as React from 'react';";
+};
+var getPropsDefinition = function (_a) {
+    var json = _a.json;
+    if (!json.defaultProps)
+        return '';
+    var defaultPropsString = Object.keys(json.defaultProps)
+        .map(function (prop) {
+        var _a;
+        var value = json.defaultProps.hasOwnProperty(prop)
+            ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+            : 'undefined';
+        return "".concat(prop, ": ").concat(value);
+    })
+        .join(',');
+    return "".concat(json.name, ".defaultProps = {").concat(defaultPropsString, "};");
+};
 var _componentToReact = function (json, options, isSubComponent) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     if (isSubComponent === void 0) { isSubComponent = false; }
@@ -189,6 +220,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         (0, getters_to_functions_1.gettersToFunctions)(json);
         (0, state_2.updateStateSetters)(json, options);
     }
+    if (!json.name) {
+        json.name = 'MyComponent';
+    }
     // const domRefs = getRefs(json);
     var allRefs = Object.keys(json.refs);
     (0, map_refs_1.mapRefs)(json, function (refName) { return "".concat(refName, ".current"); });
@@ -199,32 +233,33 @@ var _componentToReact = function (json, options, isSubComponent) {
         var meta = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.forwardRef;
         options.forwardRef = meta || forwardRef;
     }
-    var forwardRefType = json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
-        ? "".concat(json.propsTypeRef, "[\"").concat(forwardRef, "\"]")
-        : undefined;
-    var stylesType = options.stylesType || 'emotion';
-    var stateType = options.stateType || 'mobx';
-    if (stateType === 'builder') {
+    var forwardRefType = options.typescript && json.propsTypeRef && forwardRef && json.propsTypeRef !== 'any'
+        ? "<".concat(json.propsTypeRef, "[\"").concat(forwardRef, "\"]>")
+        : '';
+    if (options.stateType === 'builder') {
         // Always use state if we are generate Builder react code
         hasState = true;
     }
-    var useStateCode = stateType === 'useState' && (0, state_2.getUseStateCode)(json, options);
+    var useStateCode = options.stateType === 'useState' ? (0, state_2.getUseStateCode)(json, options) : '';
     if (options.plugins) {
         json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
     }
-    var css = stylesType === 'styled-jsx'
+    var css = options.stylesType === 'styled-jsx'
         ? (0, collect_css_1.collectCss)(json)
-        : stylesType === 'style-tag'
+        : options.stylesType === 'style-tag'
             ? (0, collect_css_1.collectCss)(json, {
                 prefix: (0, hash_sum_1.default)(json),
             })
             : null;
-    var styledComponentsCode = stylesType === 'styled-components' && componentHasStyles && (0, collect_styled_components_1.collectStyledComponents)(json);
+    var styledComponentsCode = (options.stylesType === 'styled-components' &&
+        componentHasStyles &&
+        (0, collect_styled_components_1.collectStyledComponents)(json)) ||
+        '';
     if (options.format !== 'lite') {
         (0, strip_meta_properties_1.stripMetaProperties)(json);
     }
     var reactLibImports = new Set();
-    if (useStateCode && useStateCode.includes('useState')) {
+    if (useStateCode.includes('useState')) {
         reactLibImports.add('useState');
     }
     if ((0, context_1.hasContext)(json) && options.contextType !== 'prop-drill') {
@@ -243,81 +278,75 @@ var _componentToReact = function (json, options, isSubComponent) {
         reactLibImports.add('useEffect');
     }
     var wrap = (0, helpers_2.wrapInFragment)(json) ||
-        (componentHasStyles && (stylesType === 'styled-jsx' || stylesType === 'style-tag')) ||
+        (componentHasStyles &&
+            (options.stylesType === 'styled-jsx' || options.stylesType === 'style-tag')) ||
         isRootSpecialNode(json);
     var _o = getRefsString(json, allRefs, options), hasStateArgument = _o[0], refsString = _o[1];
-    var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
+    // NOTE: `collectReactNativeStyles` must run before style generation in the component generation body, as it has
+    // side effects that delete styles bindings from the JSON.
+    var reactNativeStyles = options.stylesType === 'react-native' && componentHasStyles
+        ? (0, react_native_1.collectReactNativeStyles)(json)
+        : undefined;
     var propType = json.propsTypeRef || 'any';
-    var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
-    var getPropsDefinition = function (_a) {
-        var json = _a.json;
-        if (!json.defaultProps)
-            return '';
-        var defalutPropsString = Object.keys(json.defaultProps)
-            .map(function (prop) {
-            var _a;
-            var value = json.defaultProps.hasOwnProperty(prop)
-                ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                : 'undefined';
-            return "".concat(prop, ": ").concat(value);
-        })
-            .join(',');
-        return "".concat(json.name || 'MyComponent', ".defaultProps = {").concat(defalutPropsString, "};");
-    };
-    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\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    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\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  "])), options.preact
-        ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
-        : options.type !== 'native'
-            ? "import * as React from 'react';"
-            : "\n  import * as React from 'react';\n  import { FlatList, ScrollView, View, StyleSheet, Image, Text } from 'react-native';\n  ", styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
-        ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from '").concat(options.preact ? 'preact/hooks' : 'react', "'")
-        : '', componentHasStyles && stylesType === 'emotion' && options.format !== 'lite'
-        ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
-        : '', hasState && stateType === 'valtio' ? "import { useLocalProxy } from 'valtio/utils';" : '', hasState && stateType === 'solid' ? "import { useMutable } from 'react-solid-state';" : '', stateType === 'mobx' && hasState
-        ? "import { useLocalObservable, observer } from 'mobx-react-lite';"
-        : '', json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
-        component: json,
-        target: options.type === 'native' ? 'reactNative' : 'react',
-    }), stateType === 'mobx' && isForwardRef ? "const ".concat(json.name || 'MyComponent', " = ") : "", isSubComponent || stateType === 'mobx' ? '' : 'export default ', isForwardRef
-        ? "forwardRef".concat(forwardRefType && options.typescript ? "<".concat(forwardRefType, ">") : '', "(")
-        : '', json.name || 'MyComponent', propsArgs, isForwardRef ? ", ".concat(options.forwardRef) : '', options.contextType === 'prop-drill'
+    var componentArgs = ["props".concat(options.typescript ? ":".concat(propType) : ''), options.forwardRef]
+        .filter(Boolean)
+        .join(',');
+    var componentBody = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\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    return (\n      ", "\n      ", "\n      ", "\n      ", "\n    );\n  "])), options.contextType === 'prop-drill'
         ? "const ".concat(exports.contextPropDrillingKey, " = { ...props['").concat(exports.contextPropDrillingKey, "'] };")
         : '', hasStateArgument ? '' : refsString, hasState
-        ? stateType === 'mobx'
+        ? options.stateType === 'mobx'
             ? "const state = useLocalObservable(() => (".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), "));")
-            : stateType === 'useState'
+            : options.stateType === 'useState'
                 ? useStateCode
-                : stateType === 'solid'
+                : options.stateType === 'solid'
                     ? "const state = useMutable(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-                    : stateType === 'builder'
+                    : options.stateType === 'builder'
                         ? "const state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-                        : stateType === 'variables'
+                        : options.stateType === 'variables'
                             ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
                             : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), contextStr || '', ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
-        ? "\n          useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
+        ? "\n        useEffect(() => {\n          ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,
             options: options,
-        }), "\n          }, [])\n          ")
+        }), "\n        }, [])\n        ")
         : '', ((_h = json.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code)
-        ? "useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
+        ? "useEffect(() => {\n          ".concat((0, state_2.processHookCode)({
             str: json.hooks.onMount.code,
             options: options,
-        }), "\n          }, [])")
-        : '', (_k = (_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (hook) { return "useEffect(() => {\n            ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n          },\n          ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _k !== void 0 ? _k : '', ((_l = json.hooks.onUnMount) === null || _l === void 0 ? void 0 : _l.code)
-        ? "useEffect(() => {\n            return () => {\n              ".concat((0, state_2.processHookCode)({
+        }), "\n        }, [])")
+        : '', (_k = (_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map(function (hook) { return "useEffect(() => {\n          ".concat((0, state_2.processHookCode)({ str: hook.code, options: options }), "\n        },\n        ").concat(hook.deps ? (0, state_2.processHookCode)({ str: hook.deps, options: options }) : '', ")"); }).join(';')) !== null && _k !== void 0 ? _k : '', ((_l = json.hooks.onUnMount) === null || _l === void 0 ? void 0 : _l.code)
+        ? "useEffect(() => {\n          return () => {\n            ".concat((0, state_2.processHookCode)({
             str: json.hooks.onUnMount.code,
             options: options,
-        }), "\n            }\n          }, [])")
-        : '', wrap ? (0, helpers_2.openFrag)(options) : '', json.children.map(function (item) { return (0, blocks_1.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
+        }), "\n          }\n        }, [])")
+        : '', wrap ? (0, helpers_2.openFrag)(options) : '', json.children.map(function (item) { return (0, blocks_1.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && options.stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
-        : componentHasStyles && stylesType === 'style-tag'
+        : componentHasStyles && options.stylesType === 'style-tag'
             ? "<style>{`".concat(css, "`}</style>")
-            : '', wrap ? (0, helpers_2.closeFrag)(options) : '', isForwardRef ? ')' : '', getPropsDefinition({ json: json }), !nativeStyles
+            : '', wrap ? (0, helpers_2.closeFrag)(options) : '');
+    var str = (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "function ", "(", ") {\n    ", "\n  }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "], ["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "function ", "(", ") {\n    ", "\n  }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), getDefaultImport(json, options), styledComponentsCode ? "import styled from 'styled-components';\n" : '', reactLibImports.size
+        ? "import { ".concat(Array.from(reactLibImports).join(', '), " } from '").concat(options.preact ? 'preact/hooks' : 'react', "'")
+        : '', componentHasStyles && options.stylesType === 'emotion' && options.format !== 'lite'
+        ? "/** @jsx jsx */\n    import { jsx } from '@emotion/react'".trim()
+        : '', !hasState
         ? ''
-        : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '', stateType === 'mobx'
-        ? "\n      const observed".concat(json.name || 'MyComponent', " = observer(").concat(json.name || 'MyComponent', ");\n      export default observed").concat(json.name || 'MyComponent', ";\n    ")
-        : '');
-    str = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
-    return str;
+        : options.stateType === 'valtio'
+            ? "import { useLocalProxy } from 'valtio/utils';"
+            : options.stateType === 'solid'
+                ? "import { useMutable } from 'react-solid-state';"
+                : options.stateType === 'mobx'
+                    ? "import { useLocalObservable, observer } from 'mobx-react-lite';"
+                    : '', json.types && options.typescript ? json.types.join('\n') : '', (0, render_imports_1.renderPreComponent)({
+        component: json,
+        target: options.type === 'native' ? 'reactNative' : 'react',
+    }), isForwardRef ? "const ".concat(json.name, " = forwardRef").concat(forwardRefType, "(") : '', json.name, componentArgs, componentBody, isForwardRef ? ')' : '', getPropsDefinition({ json: json }), reactNativeStyles
+        ? "const styles = StyleSheet.create(".concat(json5_1.default.stringify(reactNativeStyles), ");")
+        : '', styledComponentsCode !== null && styledComponentsCode !== void 0 ? styledComponentsCode : '', isSubComponent
+        ? ''
+        : options.stateType === 'mobx'
+            ? "\n      const observed".concat(json.name, " = observer(").concat(json.name, ");\n      export default observed").concat(json.name, ";\n    ")
+            : "export default ".concat(json.name, ";"));
+    return (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(str);
 };
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/dist/src/generators/react/types.d.ts

@@ -1,9 +1,9 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactOptions extends BaseTranspilerOptions {
-    stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
-    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
+    stylesType: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
+    stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
     format?: 'lite' | 'safe';
-    type?: 'dom' | 'native';
+    type: 'dom' | 'native' | 'taro';
     preact?: boolean;
     forwardRef?: string;
     experimental?: any;

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

@@ -2,8 +2,8 @@ import { ClassStyleMap } from '../helpers/styles/helpers';
 import { MitosisComponent } from '../types/mitosis-component';
 import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
-    stylesType?: 'emotion' | 'react-native';
-    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
+    stylesType: 'emotion' | 'react-native';
+    stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }
 export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
-export declare const componentToReactNative: TranspilerGenerator<ToReactNativeOptions>;
+export declare const componentToReactNative: TranspilerGenerator<Partial<ToReactNativeOptions>>;

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

@@ -10,15 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,6 +22,8 @@ var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
 var bindings_1 = require("../helpers/bindings");
+var merge_options_1 = require("../helpers/merge-options");
+var is_children_1 = __importDefault(require("../helpers/is-children"));
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
 var collectReactNativeStyles = function (json) {
@@ -88,10 +81,14 @@ var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
                 var _a, _b, _c, _d;
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
                     // TODO: handle TextInput, Image, etc
-                    if (node.name.toLowerCase() === node.name) {
+                    if ((0, is_children_1.default)({ node: node })) {
+                        node.name = '';
+                    }
+                    else if (node.name.toLowerCase() === node.name) {
                         node.name = 'View';
                     }
-                    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)) {
+                    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)) {
                         node.name = 'Text';
                     }
                     if (node.properties.class) {
@@ -121,8 +118,8 @@ var componentToReactNative = function (_options) {
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), type: 'native' });
-        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options);
+        return (0, react_1.componentToReact)(__assign(__assign({}, options), { type: 'native' }))({ component: json, path: path });
     };
 };
 exports.componentToReactNative = componentToReactNative;

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

@@ -1,4 +1,4 @@
-import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
-export interface ToRscOptions extends BaseTranspilerOptions {
-}
-export declare const componentToRsc: TranspilerGenerator<ToRscOptions>;
+import { TranspilerGenerator } from '../types/transpiler';
+import { ToReactOptions } from './react';
+export declare type ToRscOptions = ToReactOptions;
+export declare const componentToRsc: TranspilerGenerator<Partial<ToRscOptions>>;

package/dist/src/generators/rsc.js

@@ -1,24 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,6 +9,7 @@ var traverse_1 = __importDefault(require("traverse"));
 var fast_clone_1 = require("../helpers/fast-clone");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
+var merge_options_1 = require("../helpers/merge-options");
 /**
  * Transform react to be RSC compatible, such as
  * - remove event listeners
@@ -84,7 +65,11 @@ var componentToRsc = function (_options) {
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), stylesType: 'style-tag', stateType: 'variables', contextType: 'prop-drill' });
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
+            stylesType: 'style-tag',
+            stateType: 'variables',
+            contextType: 'prop-drill',
+        });
         return (0, react_1.componentToReact)(options)({ component: json, path: path });
     };
 };

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

@@ -0,0 +1,9 @@
+import { ClassStyleMap } from '../helpers/styles/helpers';
+import { MitosisComponent } from '../types/mitosis-component';
+import { ToReactOptions } from './react';
+import { TranspilerGenerator } from '../types/transpiler';
+export declare const DEFAULT_Component_SET: Set<string>;
+export declare type ToTaroOptions = ToReactOptions;
+export declare const collectTaroStyles: (json: MitosisComponent) => ClassStyleMap;
+export declare const TagMap: Record<string, string>;
+export declare const componentToTaro: TranspilerGenerator<Partial<ToTaroOptions>>;

package/dist/src/generators/taro.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToTaro = exports.TagMap = exports.collectTaroStyles = exports.DEFAULT_Component_SET = void 0;
+var json5_1 = __importDefault(require("json5"));
+var lodash_1 = require("lodash");
+var traverse_1 = __importDefault(require("traverse"));
+var fast_clone_1 = require("../helpers/fast-clone");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var react_1 = require("./react");
+var bindings_1 = require("../helpers/bindings");
+var merge_options_1 = require("../helpers/merge-options");
+// @tarojs/components
+exports.DEFAULT_Component_SET = new Set([
+    'View',
+    'Icon',
+    'Progress',
+    'RichText',
+    'Text',
+    'Button',
+    'Checkbox',
+    'CheckboxGroup',
+    'Form',
+    'Input',
+    'Label',
+    'Picker',
+    'PickerView',
+    'PickerViewColumn',
+    'Radio',
+    'RadioGroup',
+    'Slider',
+    'Switch',
+    'CoverImage',
+    'Textarea',
+    'CoverView',
+    'MovableArea',
+    'MovableView',
+    'ScrollView',
+    'Swiper',
+    'SwiperItem',
+    'Navigator',
+    'Audio',
+    'Camera',
+    'Image',
+    'LivePlayer',
+    'Video',
+    'Canvas',
+    'Ad',
+    'WebView',
+    'Block',
+    'Map',
+    'Slot',
+    'SlotView',
+    'Editor',
+    'MatchMedia',
+    'FunctionalPageNavigator',
+    'LivePusher',
+    'OfficialAccount',
+    'OpenData',
+    'NavigationBar',
+    'PageMeta',
+    'VoipRoom',
+    'AdCustom',
+]);
+// TODO: px to 2 px
+var collectTaroStyles = function (json) {
+    var styleMap = {};
+    var componentIndexes = {};
+    (0, traverse_1.default)(json).forEach(function (item) {
+        var _a;
+        if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof ((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
+            return;
+        }
+        var value = json5_1.default.parse(item.bindings.css.code);
+        delete item.bindings.css;
+        if (!(0, lodash_1.size)(value)) {
+            return;
+        }
+        for (var key in value) {
+            var propertyValue = value[key];
+            // convert px to 2 * px, PX to PX
+            if (typeof propertyValue === 'string' && propertyValue.match(/^\d/)) {
+                var newValue = parseFloat(propertyValue);
+                if (!isNaN(newValue)) {
+                    if (propertyValue.endsWith('px')) {
+                        newValue = 2 * newValue;
+                        value[key] = "".concat(newValue, "px");
+                    }
+                    else {
+                        value[key] = newValue;
+                    }
+                }
+            }
+        }
+        var componentName = (0, lodash_1.camelCase)(item.name || 'view');
+        var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
+        var className = "".concat(componentName).concat(index);
+        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: "styles.".concat(className) });
+        styleMap[className] = value;
+    });
+    return styleMap;
+};
+exports.collectTaroStyles = collectTaroStyles;
+exports.TagMap = {
+    span: 'Text',
+    button: 'Button',
+    input: 'Input',
+    img: 'Image',
+    form: 'Form',
+    textarea: 'Textarea',
+};
+/**
+ * Plugin that handles necessary transformations from React to React Native:
+ * - Converts DOM tags to @tarojs/components
+ * - Removes redundant `class`/`className` attributes
+ */
+var PROCESS_TARO_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            var TaroComponentsImports = { path: '@tarojs/components', imports: {} };
+            json.imports.push(TaroComponentsImports);
+            (0, traverse_1.default)(json).forEach(function (node) {
+                var _a, _b, _c, _d;
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    // TODO: More dom tags convert to  @tarojs/components
+                    if (!!exports.TagMap[node.name]) {
+                        TaroComponentsImports.imports[exports.TagMap[node.name]] = exports.TagMap[node.name];
+                        node.name = exports.TagMap[node.name];
+                    }
+                    else if (node.name.toLowerCase() === node.name) {
+                        TaroComponentsImports.imports.View = 'View';
+                        node.name = 'View';
+                    }
+                    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)) {
+                        TaroComponentsImports.imports.Text = 'Text';
+                        node.name = 'Text';
+                    }
+                    if (node.properties.class) {
+                        delete node.properties.class;
+                    }
+                    if (node.properties.className) {
+                        delete node.properties.className;
+                    }
+                    if (node.bindings.class) {
+                        delete node.bindings.class;
+                    }
+                    if (node.bindings.className) {
+                        delete node.bindings.className;
+                    }
+                }
+            });
+        },
+    },
+}); };
+var DEFAULT_OPTIONS = {
+    stateType: 'useState',
+    plugins: [PROCESS_TARO_PLUGIN],
+};
+var componentToTaro = function (_options) {
+    if (_options === void 0) { _options = {}; }
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, _options, {
+            type: 'taro',
+        });
+        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+    };
+};
+exports.componentToTaro = componentToTaro;