@builder.io/mitosis 0.0.56-99 → 0.0.58

package/dist/src/generators/{react.js → react/generator.js}

@@ -19,43 +19,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToReact = exports.componentToPreact = exports.blockToReact = void 0;
-var core_1 = require("@babel/core");
 var dedent_1 = __importDefault(require("dedent"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var standalone_1 = require("prettier/standalone");
-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_css_1 = require("../helpers/styles/collect-css");
-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_props_ref_1 = require("../helpers/get-props-ref");
-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");
-var strip_meta_properties_1 = require("../helpers/strip-meta-properties");
-var strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
-var plugins_1 = require("../modules/plugins");
-var jsx_1 = require("../parsers/jsx");
-var context_1 = require("./helpers/context");
-var react_native_1 = require("./react-native");
-var collect_styled_components_1 = require("../helpers/styles/collect-styled-components");
-var helpers_1 = require("../helpers/styles/helpers");
-var slots_1 = require("../helpers/slots");
-var state_1 = require("../helpers/state");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+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_props_ref_1 = require("../../helpers/get-props-ref");
+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_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");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var plugins_1 = require("../../modules/plugins");
+var jsx_1 = require("../../parsers/jsx");
+var context_1 = require("../helpers/context");
+var react_native_1 = require("../react-native");
+var collect_styled_components_1 = require("../../helpers/styles/collect-styled-components");
+var helpers_1 = require("../../helpers/styles/helpers");
+var state_1 = require("../../helpers/state");
+var state_2 = require("./state");
+var helpers_2 = require("./helpers");
 var hash_sum_1 = __importDefault(require("hash-sum"));
+var for_1 = require("../../helpers/nodes/for");
 var openFrag = function (options) { return getFragment('open', options); };
 var closeFrag = function (options) { return getFragment('close', options); };
 function getFragment(type, options) {
@@ -82,9 +76,9 @@ var NODE_MAPPERS = {
                 parentSlots.push({ key: propKey, value: (_a = json.bindings[key]) === null || _a === void 0 ? void 0 : _a.code });
                 return '';
             }
-            return "{".concat(processBinding('props.children', options), "}");
+            return "{".concat((0, helpers_2.processBinding)('props.children', options), "}");
         }
-        var slotProp = processBinding(json.bindings.name.code, options).replace('name=', '');
+        var slotProp = (0, helpers_2.processBinding)(json.bindings.name.code, options).replace('name=', '');
         return "{".concat(slotProp, "}");
     },
     Fragment: function (json, options) {
@@ -94,11 +88,12 @@ var NODE_MAPPERS = {
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? getFragment('close', options) : '');
     },
-    For: function (json, options) {
-        var _a, _b;
+    For: function (_json, options) {
+        var _a;
+        var json = _json;
         var wrap = wrapInFragment(json);
-        var forArguments = (((_a = json === null || json === void 0 ? void 0 : json.scope) === null || _a === void 0 ? void 0 : _a.For) || []).join(',');
-        return "{".concat(processBinding((_b = json.bindings.each) === null || _b === void 0 ? void 0 : _b.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
+        var forArguments = (0, for_1.getForArguments)(json).join(', ');
+        return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ))}");
@@ -106,7 +101,7 @@ var NODE_MAPPERS = {
     Show: function (json, options) {
         var _a;
         var wrap = wrapInFragment(json);
-        return "{".concat(processBinding((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
+        return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return (0, exports.blockToReact)(item, options); })
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options), "}");
@@ -142,7 +137,7 @@ var blockToReact = function (json, options, parentSlots) {
         return text;
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        var processed = processBinding(json.bindings._text.code, options);
+        var processed = (0, helpers_2.processBinding)(json.bindings._text.code, options);
         if (options.type === 'native') {
             return "<Text>{".concat(processed, "}</Text>");
         }
@@ -151,7 +146,7 @@ var blockToReact = function (json, options, parentSlots) {
     var str = '';
     str += "<".concat(json.name, " ");
     if ((_b = json.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
-        str += " {...(".concat(processBinding(json.bindings._spread.code, options), ")} ");
+        str += " {...(".concat((0, helpers_2.processBinding)(json.bindings._spread.code, options), ")} ");
     }
     for (var key in json.properties) {
         var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
@@ -182,10 +177,10 @@ var blockToReact = function (json, options, parentSlots) {
         if (key === 'css' && value.trim() === '{}') {
             continue;
         }
-        var useBindingValue = processBinding(value, options);
+        var useBindingValue = (0, helpers_2.processBinding)(value, options);
         if (key.startsWith('on')) {
             var _e = json.bindings[key].arguments, cusArgs = _e === void 0 ? ['event'] : _e;
-            str += " ".concat(key, "={(").concat(cusArgs.join(','), ") => ").concat(updateStateSettersInCode(useBindingValue, options), " } ");
+            str += " ".concat(key, "={(").concat(cusArgs.join(','), ") => ").concat((0, state_2.updateStateSettersInCode)(useBindingValue, options), " } ");
         }
         else if (key.startsWith('slot')) {
             // <Component slotProjected={<AnotherComponent />} />
@@ -250,87 +245,13 @@ var getRefsString = function (json, refs, options) {
         // domRefs must have null argument
         var argument = ((_b = json['refs'][ref]) === null || _b === void 0 ? void 0 : _b.argument) || (domRefs.has(ref) ? 'null' : '');
         hasStateArgument = /state\./.test(argument);
-        code += "\nconst ".concat(ref, " = useRef").concat(typeParameter ? "<".concat(typeParameter, ">") : '', "(").concat(processBinding(updateStateSettersInCode(argument, options), options), ");");
+        code += "\nconst ".concat(ref, " = useRef").concat(typeParameter ? "<".concat(typeParameter, ">") : '', "(").concat((0, state_2.processHookCode)({
+            str: argument,
+            options: options,
+        }), ");");
     }
     return [hasStateArgument, code];
 };
-/**
- * Removes all `this.` references.
- */
-var stripThisRefs = function (str, options) {
-    if (options.stateType !== 'useState') {
-        return str;
-    }
-    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
-};
-var processBinding = function (str, options) {
-    if (options.stateType !== 'useState') {
-        return str;
-    }
-    if ((0, slots_1.isSlotProperty)(str)) {
-        return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
-            includeState: true,
-            includeProps: false,
-        });
-    }
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
-        includeState: true,
-        includeProps: false,
-    });
-};
-var getUseStateCode = function (json, options) {
-    var _a;
-    var str = '';
-    var state = json.state;
-    var valueMapper = function (val) {
-        var x = processBinding(updateStateSettersInCode(val, options), options);
-        return stripThisRefs(x, options);
-    };
-    var lineItemDelimiter = '\n\n\n';
-    for (var key in state) {
-        var value = (_a = state[key]) === null || _a === void 0 ? void 0 : _a.code;
-        var defaultCase = "const [".concat(key, ", set").concat((0, capitalize_1.capitalize)(key), "] = useState(() => (").concat(valueMapper(json5_1.default.stringify(value)), "))");
-        if (typeof value === 'string') {
-            if (value.startsWith(function_literal_prefix_1.functionLiteralPrefix)) {
-                var useValue = value.replace(function_literal_prefix_1.functionLiteralPrefix, '');
-                var mappedVal = valueMapper(useValue);
-                str += mappedVal;
-            }
-            else if (value.startsWith(method_literal_prefix_1.methodLiteralPrefix)) {
-                var methodValue = value.replace(method_literal_prefix_1.methodLiteralPrefix, '');
-                var useValue = methodValue.replace(/^(get )?/, 'function ');
-                str += valueMapper(useValue);
-            }
-            else {
-                str += defaultCase;
-            }
-        }
-        else {
-            str += defaultCase;
-        }
-        str += lineItemDelimiter;
-    }
-    return str;
-};
-var updateStateSetters = function (json, options) {
-    if (options.stateType !== 'useState') {
-        return;
-    }
-    (0, traverse_1.default)(json).forEach(function (item) {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            for (var key in item.bindings) {
-                var values = item.bindings[key];
-                var newValue = updateStateSettersInCode(values === null || values === void 0 ? void 0 : values.code, options);
-                if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
-                    item.bindings[key] = {
-                        code: newValue,
-                        arguments: values === null || values === void 0 ? void 0 : values.arguments,
-                    };
-                }
-            }
-        }
-    });
-};
 function addProviderComponents(json, options) {
     for (var key in json.context.set) {
         var _a = json.context.set[key], name_1 = _a.name, value = _a.value;
@@ -347,28 +268,6 @@ function addProviderComponents(json, options) {
         }
     }
 }
-var updateStateSettersInCode = function (value, options) {
-    if (options.stateType !== 'useState') {
-        return value;
-    }
-    return (0, babel_transform_1.babelTransformExpression)(value, {
-        AssignmentExpression: function (path) {
-            var node = path.node;
-            if (core_1.types.isMemberExpression(node.left)) {
-                if (core_1.types.isIdentifier(node.left.object)) {
-                    // TODO: utillity to properly trace this reference to the beginning
-                    if (node.left.object.name === 'state') {
-                        // TODO: ultimately support other property access like strings
-                        var propertyName = node.left.property.name;
-                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier("set".concat((0, capitalize_1.capitalize)(propertyName))), [
-                            node.right,
-                        ]));
-                    }
-                }
-            }
-        },
-    });
-};
 function getContextString(component, options) {
     var str = '';
     for (var key in component.context.get) {
@@ -378,7 +277,7 @@ function getContextString(component, options) {
 }
 var getInitCode = function (json, options) {
     var _a;
-    return processBinding(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', options);
+    return (0, helpers_2.processBinding)(((_a = json.hooks.init) === null || _a === void 0 ? void 0 : _a.code) || '', options);
 };
 var DEFAULT_OPTIONS = {
     stateType: 'useState',
@@ -439,7 +338,7 @@ var _componentToReact = function (json, options, isSubComponent) {
     var componentHasStyles = (0, helpers_1.hasCss)(json);
     if (options.stateType === 'useState') {
         (0, getters_to_functions_1.gettersToFunctions)(json);
-        updateStateSetters(json, options);
+        (0, state_2.updateStateSetters)(json, options);
     }
     // const domRefs = getRefs(json);
     var allRefs = Object.keys(json.refs);
@@ -460,7 +359,7 @@ var _componentToReact = function (json, options, isSubComponent) {
         // Always use state if we are generate Builder react code
         hasState = true;
     }
-    var useStateCode = stateType === 'useState' && getUseStateCode(json, options);
+    var useStateCode = stateType === 'useState' && (0, state_2.getUseStateCode)(json, options);
     if (options.plugins) {
         json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
     }
@@ -521,11 +420,20 @@ var _componentToReact = function (json, options, isSubComponent) {
                         ? "var state = useBuilderState(".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), ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
-        ? "\n          useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(json.hooks.onInit.code, options), options), "\n          })\n          ")
+        ? "\n          useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
+            str: json.hooks.onInit.code,
+            options: options,
+        }), "\n          })\n          ")
         : '', ((_h = json.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code)
-        ? "useEffect(() => {\n            ".concat(processBinding(updateStateSettersInCode(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(processBinding(updateStateSettersInCode(hook.code, options), options), "\n          }, \n          ").concat(hook.deps ? processBinding(updateStateSettersInCode(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(processBinding(updateStateSettersInCode(json.hooks.onUnMount.code, options), options), "\n            }\n          }, [])")
+        ? "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)({
+            str: json.hooks.onUnMount.code,
+            options: options,
+        }), "\n            }\n          }, [])")
         : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : componentHasStyles && stylesType === 'style-tag'

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

@@ -0,0 +1,2 @@
+import { ToReactOptions } from './types';
+export declare const processBinding: (str: string, options: ToReactOptions) => string;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processBinding = void 0;
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var processBinding = function (str, options) {
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(str, {
+        includeState: true,
+        includeProps: false,
+    });
+};
+exports.processBinding = processBinding;

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

@@ -0,0 +1,2 @@
+export * from './generator';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./generator"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,9 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { ToReactOptions } from './types';
+export declare const processHookCode: ({ str, options }: {
+    str: string;
+    options: ToReactOptions;
+}) => string;
+export declare const getUseStateCode: (json: MitosisComponent, options: ToReactOptions) => string;
+export declare const updateStateSetters: (json: MitosisComponent, options: ToReactOptions) => void;
+export declare const updateStateSettersInCode: (value: string, options: ToReactOptions) => string;

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

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
+var core_1 = require("@babel/core");
+var json5_1 = __importDefault(require("json5"));
+var traverse_1 = __importDefault(require("traverse"));
+var babel_transform_1 = require("../../helpers/babel-transform");
+var capitalize_1 = require("../../helpers/capitalize");
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var function_1 = require("fp-ts/lib/function");
+var helpers_1 = require("./helpers");
+var patterns_1 = require("../../helpers/patterns");
+/**
+ * Removes all `this.` references.
+ */
+var stripThisRefs = function (str, options) {
+    if (options.stateType !== 'useState') {
+        return str;
+    }
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
+var processHookCode = function (_a) {
+    var str = _a.str, options = _a.options;
+    return (0, helpers_1.processBinding)((0, exports.updateStateSettersInCode)(str, options), options);
+};
+exports.processHookCode = processHookCode;
+var valueMapper = function (options) { return function (val) {
+    var x = (0, exports.processHookCode)({ str: val, options: options });
+    return stripThisRefs(x, options);
+}; };
+var getSetStateFnName = function (stateName) { return "set".concat((0, capitalize_1.capitalize)(stateName)); };
+var processStateValue = function (options) {
+    var mapValue = valueMapper(options);
+    return function (_a) {
+        var key = _a[0], stateVal = _a[1];
+        var getDefaultCase = function () {
+            return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, function (x) { return "const [".concat(key, ", ").concat(getSetStateFnName(key), "] = useState(() => (").concat(x, "))"); });
+        };
+        var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
+        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
+        if (typeof value === 'string') {
+            switch (type) {
+                case 'getter':
+                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+                case 'function':
+                    return mapValue(value);
+                case 'method':
+                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
+                default:
+                    return getDefaultCase();
+            }
+        }
+        else {
+            return getDefaultCase();
+        }
+    };
+};
+var getUseStateCode = function (json, options) {
+    var lineItemDelimiter = '\n\n\n';
+    var stringifiedState = Object.entries(json.state).map(processStateValue(options));
+    return stringifiedState.join(lineItemDelimiter);
+};
+exports.getUseStateCode = getUseStateCode;
+var updateStateSetters = function (json, options) {
+    if (options.stateType !== 'useState') {
+        return;
+    }
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            for (var key in item.bindings) {
+                var values = item.bindings[key];
+                var newValue = (0, exports.updateStateSettersInCode)(values === null || values === void 0 ? void 0 : values.code, options);
+                if (newValue !== (values === null || values === void 0 ? void 0 : values.code)) {
+                    item.bindings[key] = {
+                        code: newValue,
+                        arguments: values === null || values === void 0 ? void 0 : values.arguments,
+                    };
+                }
+            }
+        }
+    });
+};
+exports.updateStateSetters = updateStateSetters;
+var updateStateSettersInCode = function (value, options) {
+    if (options.stateType !== 'useState') {
+        return value;
+    }
+    return (0, babel_transform_1.babelTransformExpression)(value, {
+        AssignmentExpression: function (path) {
+            var node = path.node;
+            if (core_1.types.isMemberExpression(node.left)) {
+                if (core_1.types.isIdentifier(node.left.object)) {
+                    // TODO: utillity to properly trace this reference to the beginning
+                    if (node.left.object.name === 'state') {
+                        // TODO: ultimately support other property access like strings
+                        var propertyName = node.left.property.name;
+                        path.replaceWith(core_1.types.callExpression(core_1.types.identifier(getSetStateFnName(propertyName)), [node.right]));
+                    }
+                }
+            }
+        },
+    });
+};
+exports.updateStateSettersInCode = updateStateSettersInCode;

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

@@ -0,0 +1,10 @@
+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';
+    format?: 'lite' | 'safe';
+    type?: 'dom' | 'native';
+    preact?: boolean;
+    forwardRef?: string;
+    experimental?: any;
+}

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

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

package/dist/src/generators/solid/index.d.ts

@@ -0,0 +1,3 @@
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToSolidOptions } from './types';
+export declare const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>>;