@builder.io/mitosis 0.0.77 → 0.0.79

package/dist/src/generators/html.js

@@ -99,9 +99,11 @@ var addUpdateAfterSet = function (json, options) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 var value = (_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code;
-                var newValue = addUpdateAfterSetInCode(value, options);
-                if (newValue !== value) {
-                    item.bindings[key].code = newValue;
+                if (value) {
+                    var newValue = addUpdateAfterSetInCode(value, options);
+                    if (newValue !== value) {
+                        item.bindings[key].code = newValue;
+                    }
                 }
             }
         }
@@ -351,6 +353,7 @@ var blockToHtml = function (json, options, blockOptions) {
     return str;
 };
 function addUpdateAfterSetInCode(code, options, useString) {
+    if (code === void 0) { code = ''; }
     if (useString === void 0) { useString = options.format === 'class' ? 'this.update' : 'update'; }
     var updates = 0;
     return (0, babel_transform_1.babelTransformExpression)(code, {

package/dist/src/generators/qwik/component-generator.js

@@ -16,7 +16,6 @@ exports.componentToQwik = void 0;
 var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var collect_css_1 = require("../../helpers/styles/collect-css");
-var mitosis_component_1 = require("../../types/mitosis-component");
 var state_1 = require("../../helpers/state");
 var add_prevent_default_1 = require("./add-prevent-default");
 var convert_method_to_function_1 = require("./convert-method-to-function");
@@ -24,7 +23,7 @@ var jsx_1 = require("./jsx");
 var src_generator_1 = require("./src-generator");
 var plugins_1 = require("../../modules/plugins");
 var traverse_1 = __importDefault(require("traverse"));
-var stable_serialize_1 = require("./stable-serialize");
+var stable_inject_1 = require("./stable-inject");
 Error.stackTraceLimit = 9999;
 // TODO(misko): styles are not processed.
 var DEBUG = false;
@@ -84,7 +83,7 @@ var componentToQwik = function (userOptions) {
                 : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentFn]), true, true);
             file.exportDefault(component.name);
             emitStyles(file, css_1);
-            DEBUG && file.exportConst('COMPONENT', (0, stable_serialize_1.stableJSONserialize)(component));
+            DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
             var sourceFile = '// GENERATED BY MITOSIS\n\n' + file.toString();
             if (userOptions.plugins) {
                 sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, userOptions.plugins);
@@ -108,7 +107,7 @@ function emitExports(file, component) {
 }
 function emitTagNameHack(file, component, metadataValue) {
     if (typeof metadataValue === 'string' && metadataValue) {
-        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, stateToMethodOrGetter(component.state), getLexicalScopeVars(component)), ';');
+        file.src.emit(metadataValue, '=', (0, convert_method_to_function_1.convertMethodToFunction)(metadataValue, getStateMethodsAndGetters(component.state), getLexicalScopeVars(component)), ';');
     }
 }
 function emitUseClientEffect(file, component) {
@@ -165,20 +164,22 @@ function emitUseContextProvider(file, component) {
     Object.keys(component.context.set).forEach(function (ctxKey) {
         var context = component.context.set[ctxKey];
         file.src.emit(file.import(file.qwikModule, 'useContextProvider').localName, '(', context.name, ',', file.import(file.qwikModule, 'useStore').localName, '({');
-        context.value &&
-            Object.keys(context.value).forEach(function (prop) {
-                var propValue = context.value[prop];
-                file.src.emit(prop, ':');
-                if ((propValue === null || propValue === void 0 ? void 0 : propValue.type) === 'getter') {
+        for (var _i = 0, _a = Object.keys(context.value || {}); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            var propValue = context.value[prop];
+            file.src.emit(prop, ':');
+            switch (propValue === null || propValue === void 0 ? void 0 : propValue.type) {
+                case 'getter':
                     file.src.emit('(()=>{', extractGetterBody(propValue.code), '})(),');
-                }
-                else if (typeof propValue == 'function') {
+                    continue;
+                case 'function':
+                case 'method':
                     throw new Error('Qwik: Functions are not supported in context');
-                }
-                else {
-                    file.src.emit((0, stable_serialize_1.stableJSONserialize)(propValue));
-                }
-            });
+                case 'property':
+                    file.src.emit((0, stable_inject_1.stableInject)(propValue.code), ',');
+                    continue;
+            }
+        }
         file.src.emit('})', ');');
     });
 }
@@ -218,7 +219,7 @@ function emitUseStore(file, stateInit) {
             file.src.emit('<any>');
         }
         file.src.emit('(');
-        file.src.emit((0, stable_serialize_1.stableJSONserialize)(state));
+        file.src.emit((0, stable_inject_1.stableInject)(state));
         file.src.emit(');');
     }
     else {
@@ -236,7 +237,7 @@ function emitStateMethodsAndRewriteBindings(file, component, metadata) {
     var _a;
     var lexicalArgs = getLexicalScopeVars(component);
     var state = emitStateMethods(file, component.state, lexicalArgs);
-    var methodMap = stateToMethodOrGetter(component.state);
+    var methodMap = getStateMethodsAndGetters(component.state);
     rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
     return state;
 }
@@ -246,7 +247,7 @@ var checkIsObjectWithCodeBlock = function (obj) {
 function rewriteCodeExpr(component, methodMap, lexicalArgs, replace) {
     if (replace === void 0) { replace = {}; }
     (0, traverse_1.default)(component).forEach(function (item) {
-        if (!((0, mitosis_component_1.checkIsCodeValue)(item) || checkIsObjectWithCodeBlock(item))) {
+        if (!checkIsObjectWithCodeBlock(item)) {
             return;
         }
         var code = (0, convert_method_to_function_1.convertMethodToFunction)(item.code, methodMap, lexicalArgs);
@@ -273,34 +274,38 @@ function emitImports(file, component) {
 function emitStateMethods(file, componentState, lexicalArgs) {
     var stateValues = {};
     var stateInit = [stateValues];
-    var methodMap = stateToMethodOrGetter(componentState);
-    Object.keys(componentState).forEach(function (key) {
+    var methodMap = getStateMethodsAndGetters(componentState);
+    for (var key in componentState) {
         var stateValue = componentState[key];
-        if ((0, mitosis_component_1.checkIsCodeValue)(stateValue)) {
-            var code = stateValue.code;
-            var prefixIdx = 0;
-            if (stateValue.type === 'getter') {
-                prefixIdx += 'get '.length;
-            }
-            else if (stateValue.type === 'function') {
-                prefixIdx += 'function '.length;
-            }
-            code = code.substring(prefixIdx);
-            code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
-            var functionName = code.split(/\(/)[0];
-            if (stateValue.type === 'getter') {
-                stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
-            }
-            if (!file.options.isTypeScript) {
-                // Erase type information
-                code = convertTypeScriptToJS(code);
-            }
-            file.exportConst(functionName, 'function ' + code, true);
-        }
-        else {
-            stateValues[key] = stateValue === null || stateValue === void 0 ? void 0 : stateValue.code;
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'method':
+            case 'getter':
+            case 'function':
+                var code = stateValue.code;
+                var prefixIdx = 0;
+                if (stateValue.type === 'getter') {
+                    prefixIdx += 'get '.length;
+                }
+                else if (stateValue.type === 'function') {
+                    prefixIdx += 'function '.length;
+                }
+                code = code.substring(prefixIdx);
+                code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', "(".concat(lexicalArgs.join(','), ","));
+                var functionName = code.split(/\(/)[0];
+                if (stateValue.type === 'getter') {
+                    stateInit.push("state.".concat(key, "=").concat(functionName, "(").concat(lexicalArgs.join(','), ")"));
+                }
+                if (!file.options.isTypeScript) {
+                    // Erase type information
+                    code = convertTypeScriptToJS(code);
+                }
+                file.exportConst(functionName, 'function ' + code, true);
+                continue;
+            case 'property':
+                stateValues[key] = stateValue.code;
+                continue;
         }
-    });
+    }
     return stateInit;
 }
 function convertTypeScriptToJS(code) {
@@ -311,7 +316,7 @@ function extractGetterBody(code) {
     var end = code.lastIndexOf('}');
     return code.substring(start + 1, end).trim();
 }
-function stateToMethodOrGetter(state) {
+function getStateMethodsAndGetters(state) {
     var methodMap = {};
     Object.keys(state).forEach(function (key) {
         var stateVal = state[key];

package/dist/src/generators/qwik/stable-inject.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Similar to our `stableJSONSerialize` function, except that it does not stringify the values: it injects them as-is.
+ * This is needed for our `MitosisState` values which are JS expressions stored as strings.
+ */
+export declare function stableInject(obj: any): string;

package/dist/src/generators/qwik/stable-inject.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableInject = void 0;
+/**
+ * Similar to our `stableJSONSerialize` function, except that it does not stringify the values: it injects them as-is.
+ * This is needed for our `MitosisState` values which are JS expressions stored as strings.
+ */
+function stableInject(obj) {
+    var output = [];
+    _serialize(output, obj);
+    return output.join('');
+}
+exports.stableInject = stableInject;
+function _serialize(output, obj) {
+    if (obj == null) {
+        output.push('null');
+    }
+    else if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            output.push('[');
+            var sep = '';
+            for (var i = 0; i < obj.length; i++) {
+                output.push(sep);
+                _serialize(output, obj[i]);
+                sep = ',';
+            }
+            output.push(']');
+        }
+        else {
+            var keys = Object.keys(obj).sort();
+            output.push('{');
+            var sep = '';
+            for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+                var key = keys_1[_i];
+                var value = obj[key];
+                if (value !== undefined) {
+                    output.push(sep);
+                    output.push(JSON.stringify(key));
+                    output.push(':');
+                    _serialize(output, value);
+                    sep = ',';
+                }
+            }
+            output.push('}');
+        }
+    }
+    else {
+        output.push(obj);
+    }
+}

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

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (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 capitalize_1 = require("../../helpers/capitalize");
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
@@ -36,11 +35,14 @@ var processStateValue = function (options) {
     var mapValue = valueMapper(options);
     return function (_a) {
         var key = _a[0], stateVal = _a[1];
+        if (!stateVal) {
+            return '';
+        }
         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, "))"); });
+            return (0, function_1.pipe)(value, 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;
+        var value = stateVal.code || '';
+        var type = stateVal.type;
         if (typeof value === 'string') {
             switch (type) {
                 case 'getter':

package/dist/src/generators/solid/state/signals.js

@@ -1,10 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSignalsCode = void 0;
-var json5_1 = __importDefault(require("json5"));
 var function_1 = require("fp-ts/lib/function");
 var patterns_1 = require("../../../helpers/patterns");
 var helpers_1 = require("./helpers");
@@ -13,11 +9,14 @@ var processSignalStateValue = function (_a) {
     var mapValue = (0, helpers_1.updateStateCode)({ options: options, component: component });
     return function (_a) {
         var key = _a[0], stateVal = _a[1];
+        if (!stateVal) {
+            return '';
+        }
         var getDefaultCase = function () {
-            return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, function (x) { return "const [".concat(key, ", ").concat((0, helpers_1.getStateSetterName)(key), "] = createSignal(").concat(x, ")"); });
+            return (0, function_1.pipe)(value, mapValue, function (x) { return "const [".concat(key, ", ").concat((0, helpers_1.getStateSetterName)(key), "] = createSignal(").concat(x, ")"); });
         };
-        var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
-        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
+        var value = stateVal.code;
+        var type = stateVal.type;
         if (typeof value === 'string') {
             switch (type) {
                 case 'getter':

package/dist/src/generators/solid/state/store.js

@@ -8,13 +8,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStoreCode = void 0;
 var core_1 = require("@babel/core");
-var json5_1 = __importDefault(require("json5"));
 var babel_transform_1 = require("../../../helpers/babel-transform");
 var capitalize_1 = require("../../../helpers/capitalize");
 var function_1 = require("fp-ts/lib/function");
@@ -45,12 +41,15 @@ var getStoreCode = function (_a) {
     var mapValue = (0, helpers_1.updateStateCode)({ options: options, component: component });
     var stateUpdater = function (_a) {
         var key = _a[0], stateVal = _a[1];
+        if (!stateVal) {
+            return '';
+        }
         var getCreateStoreStr = function (initialValue) {
             return "const [".concat(key, ", ").concat((0, helpers_1.getStateSetterName)(key), "] = createStore(").concat(initialValue, ")");
         };
-        var getDefaultCase = function () { return (0, function_1.pipe)(value, json5_1.default.stringify, mapValue, getCreateStoreStr); };
-        var value = stateVal === null || stateVal === void 0 ? void 0 : stateVal.code;
-        var type = stateVal === null || stateVal === void 0 ? void 0 : stateVal.type;
+        var getDefaultCase = function () { return (0, function_1.pipe)(value, mapValue, getCreateStoreStr); };
+        var value = stateVal.code;
+        var type = stateVal.type;
         if (typeof value === 'string') {
             switch (type) {
                 case 'getter':

package/dist/src/helpers/babel-transform.d.ts

@@ -3,6 +3,5 @@ import type { Visitor } from '@babel/traverse';
 export declare const babelTransform: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => babel.BabelFileResult | null;
 export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined) => string;
 declare type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
-export declare const getType: (code: string, initialType: ExpressionType) => ExpressionType;
 export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType) => string;
 export {};

package/dist/src/helpers/babel-transform.js

@@ -32,7 +32,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.babelTransformExpression = exports.getType = exports.babelTransformCode = exports.babelTransform = void 0;
+exports.babelTransformExpression = exports.babelTransformCode = exports.babelTransform = void 0;
 var babel = __importStar(require("@babel/core"));
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
@@ -104,13 +104,12 @@ var getType = function (code, initialType) {
     }
     return initialType;
 };
-exports.getType = getType;
 var babelTransformExpression = function (code, visitor, initialType) {
     if (initialType === void 0) { initialType = 'unknown'; }
     if (!code) {
         return '';
     }
-    var type = (0, exports.getType)(code, initialType);
+    var type = getType(code, initialType);
     var useCode = type === 'functionBody' ? "function(){".concat(code, "}") : code;
     if (type !== 'expression') {
         try {

package/dist/src/helpers/get-state-object-string.js

@@ -10,12 +10,8 @@ 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.getStateObjectStringFromComponent = exports.stringifyContextValue = exports.getMemberObjectString = void 0;
-var json5_1 = __importDefault(require("json5"));
 var DEFAULT_OPTIONS = {
     format: 'object',
     keyPrefix: '',
@@ -56,7 +52,7 @@ var convertStateMemberToString = function (_a) {
                 if (data === false) {
                     return undefined;
                 }
-                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(json5_1.default.stringify(code), 'data', typeParameter));
+                return "".concat(keyPrefix, " ").concat(key).concat(keyValueDelimiter, " ").concat(valueMapper(code, 'data', typeParameter));
             }
             default:
                 break;

package/dist/src/helpers/handle-missing-state.js

@@ -6,7 +6,7 @@ function handleMissingState(json) {
     var stateUsed = (0, get_state_used_1.getStateUsed)(json);
     Array.from(stateUsed).forEach(function (property) {
         if (!(property in json.state)) {
-            json.state[property] = { code: null, type: 'property' };
+            json.state[property] = { code: 'null', type: 'property' };
         }
     });
 }

package/dist/src/helpers/plugins/process-code.js

@@ -55,7 +55,7 @@ var CODE_PROCESSOR_PLUGIN = function (codeProcessor) {
                 }
                 for (var key in json.state) {
                     var state = json.state[key];
-                    if (state && state.type !== 'property') {
+                    if (state) {
                         state.code = codeProcessor('state')(state.code);
                     }
                 }

package/dist/src/helpers/process-http-requests.js

@@ -8,7 +8,7 @@ function processHttpRequests(json) {
     if (httpRequests) {
         for (var key in httpRequests) {
             if (!json.state[key]) {
-                json.state[key] = { code: null, type: 'property' };
+                json.state[key] = { code: 'null', type: 'property' };
             }
             var value = httpRequests[key];
             // TODO: unravel our proxy. aka parse out methods, header, etc

package/dist/src/index.d.ts

@@ -31,6 +31,7 @@ export declare const useDefaultProps: <T = {
 }>(value: T) => T;
 export declare const useStyle: (value: string) => any;
 export * from './parsers/jsx';
+export * from './parsers/svelte';
 export * from './parsers/builder';
 export * from './parsers/angular';
 export * from './parsers/context';

package/dist/src/index.js

@@ -68,6 +68,7 @@ exports.useDefaultProps = useDefaultProps;
 var useStyle = function (value) { return null; };
 exports.useStyle = useStyle;
 __exportStar(require("./parsers/jsx"), exports);
+__exportStar(require("./parsers/svelte"), exports);
 __exportStar(require("./parsers/builder"), exports);
 __exportStar(require("./parsers/angular"), exports);
 __exportStar(require("./parsers/context"), exports);

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

@@ -0,0 +1,34 @@
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { MitosisNode } from '../../types/mitosis-node';
+import { MitosisComponent, MitosisState } from '../..';
+declare type InternalOptions = {
+    skipMapper?: boolean;
+};
+export declare const symbolBlocksAsChildren = false;
+export declare type BuilderToMitosisOptions = {
+    context?: {
+        [key: string]: any;
+    };
+    includeBuilderExtras?: boolean;
+    preserveTextBlocks?: boolean;
+};
+export declare type InternalBuilderToMitosisOptions = BuilderToMitosisOptions & {
+    context: {
+        [key: string]: any;
+    };
+};
+export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
+/**
+ * Take Builder custom jsCode and extract the contents of the useState hook
+ * and return it as a JS object along with the inputted code with the hook
+ * code extracted
+ */
+export declare function extractStateHook(code: string): {
+    code: string;
+    state: MitosisState;
+};
+export declare function convertExportDefaultToReturn(code: string): string;
+export declare const createBuilderElement: (options?: Partial<BuilderElement>) => BuilderElement;
+export declare const isBuilderElement: (el: unknown) => el is BuilderElement;
+export declare const builderContentToMitosisComponent: (builderContent: BuilderContent, options?: BuilderToMitosisOptions) => MitosisComponent;
+export {};

package/dist/src/parsers/{builder.js → builder/builder.js}

@@ -42,16 +42,17 @@ var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
-var fast_clone_1 = require("../helpers/fast-clone");
+var fast_clone_1 = require("../../helpers/fast-clone");
 var traverse_1 = __importDefault(require("traverse"));
-var media_sizes_1 = require("../constants/media-sizes");
-var capitalize_1 = require("../helpers/capitalize");
-var create_mitosis_component_1 = require("../helpers/create-mitosis-component");
-var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
-var jsx_1 = require("./jsx");
-var parsers_1 = require("../helpers/parsers");
-var __1 = require("..");
-var state_1 = require("./helpers/state");
+var media_sizes_1 = require("../../constants/media-sizes");
+var capitalize_1 = require("../../helpers/capitalize");
+var create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+var jsx_1 = require("../jsx");
+var parsers_1 = require("../../helpers/parsers");
+var __1 = require("../..");
+var helpers_1 = require("./helpers");
+var state_1 = require("../jsx/state");
 // Omit some superflous styles that can come from Builder's web importer
 var styleOmitList = [
     'backgroundRepeatX',
@@ -573,7 +574,7 @@ function extractStateHook(code) {
                 if (types.isIdentifier(expression.callee) && expression.callee.name === 'useState') {
                     var arg = expression.arguments[0];
                     if (types.isObjectExpression(arg)) {
-                        state = (0, jsx_1.parseStateObject)(arg);
+                        state = (0, state_1.parseStateObjectToMitosisState)(arg);
                         newBody.splice(i, 1);
                     }
                 }
@@ -584,7 +585,7 @@ function extractStateHook(code) {
                             expression.callee.property.name === 'assign') {
                             var arg = expression.arguments[1];
                             if (types.isObjectExpression(arg)) {
-                                state = (0, jsx_1.parseStateObject)(arg);
+                                state = (0, state_1.parseStateObjectToMitosisState)(arg);
                                 newBody.splice(i, 1);
                             }
                         }
@@ -702,15 +703,19 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
     var _k = extractStateHook(((_a = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = builderContent === null || builderContent === void 0 ? void 0 : builderContent.data) === null || _b === void 0 ? void 0 : _b.jsCode) || ''), state = _k.state, code = _k.code;
     var customCode = convertExportDefaultToReturn(code);
     var parsed = getHooks(builderContent);
+    var parsedState = (parsed === null || parsed === void 0 ? void 0 : parsed.state) || {};
+    var mitosisState = Object.keys(parsedState).length > 0
+        ? parsedState
+        : __assign(__assign({}, state), (0, helpers_1.mapBuilderContentStateToMitosisState)(((_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.state) || {}));
     var componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
         meta: __assign({ useMetadata: {
-                httpRequests: (_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.httpRequests,
-            } }, (((_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.cssCode) && { cssCode: builderContent.data.cssCode })),
-        inputs: (_f = (_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.inputs) === null || _f === void 0 ? void 0 : _f.map(function (input) { return ({
+                httpRequests: (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.httpRequests,
+            } }, (((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode })),
+        inputs: (_g = (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.inputs) === null || _g === void 0 ? void 0 : _g.map(function (input) { return ({
             name: input.name,
             defaultValue: input.defaultValue,
         }); }),
-        state: (parsed === null || parsed === void 0 ? void 0 : parsed.state) || __assign(__assign({}, state), (0, state_1.mapJsonObjectToStateValue)((_g = builderContent.data) === null || _g === void 0 ? void 0 : _g.state)),
+        state: mitosisState,
         hooks: __assign({}, ((((_h = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code) || (customCode && { code: customCode })) && {
             onMount: (parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) || { code: customCode },
         })),

package/dist/src/parsers/{helpers/state.d.ts → builder/helpers.d.ts}

@@ -1,3 +1,3 @@
-import { JSONObject } from '../../types/json';
 import { MitosisComponent } from '../../types/mitosis-component';
-export declare const mapJsonObjectToStateValue: (value: JSONObject) => MitosisComponent['state'];
+import { JSONObject } from '../../types/json';
+export declare const mapBuilderContentStateToMitosisState: (value: JSONObject) => MitosisComponent['state'];

package/dist/src/parsers/builder/helpers.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapBuilderContentStateToMitosisState = void 0;
+var patterns_1 = require("../../helpers/patterns");
+var lodash_1 = require("lodash");
+var __DO_NOT_USE_FUNCTION_LITERAL_PREFIX = "@builder.io/mitosis/function:";
+var __DO_NOT_USE_METHOD_LITERAL_PREFIX = "@builder.io/mitosis/method:";
+/**
+ * Maps the Builder State format to the Mitosis State format.
+ */
+var mapJsonToStateValue = function (value) {
+    if (typeof value === 'string') {
+        if (value.startsWith(__DO_NOT_USE_FUNCTION_LITERAL_PREFIX)) {
+            return { type: 'function', code: value.replace(__DO_NOT_USE_FUNCTION_LITERAL_PREFIX, '') };
+        }
+        else if (value.startsWith(__DO_NOT_USE_METHOD_LITERAL_PREFIX)) {
+            var strippedValue = value.replace(__DO_NOT_USE_METHOD_LITERAL_PREFIX, '');
+            var isGet = Boolean(strippedValue.match(patterns_1.GETTER));
+            var type = isGet ? 'getter' : 'method';
+            return { type: type, code: strippedValue };
+        }
+    }
+    return { type: 'property', code: JSON.stringify(value) };
+};
+var mapBuilderContentStateToMitosisState = function (value) { return (0, lodash_1.mapValues)(value, mapJsonToStateValue); };
+exports.mapBuilderContentStateToMitosisState = mapBuilderContentStateToMitosisState;

package/dist/src/parsers/builder/index.d.ts

@@ -0,0 +1 @@
+export * from './builder';

package/dist/src/parsers/builder/index.js

@@ -0,0 +1,17 @@
+"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("./builder"), exports);