@builder.io/mitosis 0.0.56-99 → 0.0.56

package/dist/src/helpers/state.js

@@ -1,16 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapJsonObjectToStateValue = exports.checkHasState = void 0;
-var lodash_1 = require("lodash");
+exports.checkHasState = void 0;
 var checkHasState = function (component) {
     return Boolean(Object.keys(component.state).length);
 };
 exports.checkHasState = checkHasState;
-var mapJsonToStateValue = function (value) { return ({
-    code: value,
-    type: 'property',
-}); };
-var mapJsonObjectToStateValue = function (value) {
-    return (0, lodash_1.mapValues)(value, mapJsonToStateValue);
-};
-exports.mapJsonObjectToStateValue = mapJsonObjectToStateValue;

package/dist/src/helpers/strip-state-and-props-refs.d.ts

@@ -16,4 +16,4 @@ export declare type StripStateAndPropsRefsOptions = {
  *
  * @todo proper ref replacement with babel
  */
-export declare const stripStateAndPropsRefs: (code?: string, options?: StripStateAndPropsRefsOptions) => string;
+export declare const stripStateAndPropsRefs: (code?: string, _options?: StripStateAndPropsRefsOptions) => string;

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -1,6 +1,27 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripStateAndPropsRefs = void 0;
+var DEFAULT_OPTIONS = {
+    replaceWith: '',
+    contextVars: [],
+    outputVars: [],
+    stateVars: [],
+    context: 'this.',
+    domRefs: [],
+    includeProps: true,
+    includeState: true,
+};
 /**
  * Remove state. and props. from expressions, e.g.
  * state.foo -> foo
@@ -9,48 +30,39 @@ exports.stripStateAndPropsRefs = void 0;
  *
  * @todo proper ref replacement with babel
  */
-var stripStateAndPropsRefs = function (code, options) {
-    if (options === void 0) { options = {}; }
+var stripStateAndPropsRefs = function (code, _options) {
+    if (_options === void 0) { _options = {}; }
     var newCode = code || '';
-    var replacer = options.replaceWith || '';
-    var contextVars = (options === null || options === void 0 ? void 0 : options.contextVars) || [];
-    var outputVars = (options === null || options === void 0 ? void 0 : options.outputVars) || [];
-    var context = (options === null || options === void 0 ? void 0 : options.context) || 'this.';
-    var domRefs = (options === null || options === void 0 ? void 0 : options.domRefs) || [];
-    var stateVars = (options === null || options === void 0 ? void 0 : options.stateVars) || [];
-    if (contextVars.length) {
-        contextVars.forEach(function (_var) {
-            newCode = newCode.replace(
-            // determine expression edge cases - https://regex101.com/r/iNcTSM/1
-            new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
-        });
-    }
-    if (outputVars.length) {
-        outputVars.forEach(function (_var) {
-            // determine expression edge cases onMessage( to this.onMessage.emit(
-            var regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
-            var replacer = '$1' + context + _var + '.emit(';
-            newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
-        });
-    }
-    if (options.includeProps !== false) {
-        if (typeof replacer === 'string') {
-            newCode = newCode.replace(/props\./g, replacer);
+    var _a = __assign(__assign({}, DEFAULT_OPTIONS), _options), replaceWith = _a.replaceWith, contextVars = _a.contextVars, outputVars = _a.outputVars, context = _a.context, domRefs = _a.domRefs, includeProps = _a.includeProps, includeState = _a.includeState, stateVars = _a.stateVars;
+    contextVars.forEach(function (_var) {
+        newCode = newCode.replace(
+        // determine expression edge cases - https://regex101.com/r/iNcTSM/1
+        new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + _var + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g'), '$1' + context + _var + '$2');
+    });
+    outputVars.forEach(function (_var) {
+        // determine expression edge cases onMessage( to this.onMessage.emit(
+        var regexp = '(^|\\s|;|\\()(props\\.?)' + _var + '\\(';
+        var replacer = '$1' + context + _var + '.emit(';
+        newCode = newCode.replace(new RegExp(regexp, 'g'), replacer);
+    });
+    if (includeProps !== false) {
+        if (typeof replaceWith === 'string') {
+            newCode = newCode.replace(/props\./g, replaceWith);
         }
         else {
-            newCode = newCode.replace(/props\.([\$a-z0-9_]+)/gi, function (memo, name) { return replacer(name); });
+            newCode = newCode.replace(/props\.([\$a-z0-9_]+)/gi, function (memo, name) { return replaceWith(name); });
         }
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
             newCode = newCode.replace(/el\.this\.props/g, 'el.props');
         }
     }
-    if (options.includeState !== false) {
-        if (typeof replacer === 'string') {
-            newCode = newCode.replace(/state\./g, replacer);
+    if (includeState !== false) {
+        if (typeof replaceWith === 'string') {
+            newCode = newCode.replace(/state\./g, replaceWith);
         }
         else {
-            newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) { return replacer(name); });
+            newCode = newCode.replace(/state\.([\$a-z0-9_]+)/gi, function (memo, name) { return replaceWith(name); });
         }
     }
     var matchPropertyAccessorsArguments = '\\?\\.|,|\\.|\\(| |;|\\)|\\]|$'; // foo?.stuff | foo) | foo | foo] etc.

package/dist/src/helpers/styles/helpers.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import * as CSS from 'csstype';
 import { MitosisNode } from '../../types/mitosis-node';
 import { MitosisComponent } from '../../types/mitosis-component';
@@ -19,8 +20,8 @@ export declare const hasStyle: (component: MitosisComponent) => boolean;
 export declare type StyleMap = {
     [className: string]: CSS.Properties | StyleMap;
 };
-export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
-export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<StyleMap | CSS.Properties<0 | (string & {}), string & {}>>;
+export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
 /**
  * { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
  */

package/dist/src/parsers/angular.js

@@ -63,8 +63,8 @@ var angularTemplateNodeToMitosisNode = function (node, options) {
                 bindings: {
                     each: { code: transformBinding(expression, options) },
                 },
-                properties: {
-                    _forName: itemName,
+                scope: {
+                    forName: itemName,
                 },
                 children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
             });

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

@@ -40,7 +40,7 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
             useMetadata?: JSONObject | undefined;
         };
         inputs: import("..").MitosisComponentInput[];
-        state: import("../helpers/typescript").Dictionary<import("..").StateValue | undefined>;
+        state: import("..").MitosisState;
         context: {
             get: import("..").ContextGet;
             set: import("..").ContextSet;
@@ -74,7 +74,7 @@ export declare const builderContentToMitosisComponent: (builderContent: BuilderC
         useMetadata?: JSONObject | undefined;
     };
     inputs: import("..").MitosisComponentInput[];
-    state: import("../helpers/typescript").Dictionary<import("..").StateValue | undefined>;
+    state: import("..").MitosisState;
     context: {
         get: import("..").ContextGet;
         set: import("..").ContextSet;

package/dist/src/parsers/builder.js

@@ -51,7 +51,7 @@ 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 state_1 = require("./helpers/state");
 // Omit some superflous styles that can come from Builder's web importer
 var styleOmitList = [
     'backgroundRepeatX',
@@ -299,8 +299,8 @@ var componentMappers = __assign(__assign({ Symbol: function (block, options) {
             bindings: {
                 each: { code: "state.".concat(block.component.options.repeat.collection) },
             },
-            properties: {
-                _forName: block.component.options.repeat.itemName,
+            scope: {
+                forName: block.component.options.repeat.itemName,
             },
             children: (block.children || []).map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); }),
         });
@@ -380,27 +380,29 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     // Special builder properties
     // TODO: support hide and repeat
     var blockBindings = getBlockBindings(block, options);
-    var showBinding = blockBindings.show;
-    if (showBinding) {
+    var code = undefined;
+    if (blockBindings.show) {
+        code = wrapBindingIfNeeded(blockBindings.show, options);
+    }
+    else if (blockBindings.hide) {
+        code = "!(".concat(wrapBindingIfNeeded(blockBindings.hide, options), ")");
+    }
+    if (code) {
         var isFragment = ((_c = block.component) === null || _c === void 0 ? void 0 : _c.name) === 'Fragment';
         // TODO: handle having other things, like a repeat too
         if (isFragment) {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
-                bindings: {
-                    when: { code: wrapBindingIfNeeded(showBinding, options) },
-                },
+                bindings: { when: { code: code } },
                 children: ((_d = block.children) === null || _d === void 0 ? void 0 : _d.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); })) || [],
             });
         }
         else {
             return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
-                bindings: {
-                    when: { code: wrapBindingIfNeeded(showBinding, options) },
-                },
+                bindings: { when: { code: code } },
                 children: [
-                    (0, exports.builderElementToMitosisNode)(__assign(__assign({}, block), { code: __assign(__assign({}, block.code), { bindings: (0, lodash_1.omit)(blockBindings, 'show') }), bindings: (0, lodash_1.omit)(blockBindings, 'show') }), options),
+                    (0, exports.builderElementToMitosisNode)(__assign(__assign({}, block), { code: __assign(__assign({}, block.code), { bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide') }), bindings: (0, lodash_1.omit)(blockBindings, 'show', 'hide') }), options),
                 ],
             });
         }
@@ -417,8 +419,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                         code: wrapBindingIfNeeded((_g = block.repeat) === null || _g === void 0 ? void 0 : _g.collection, options),
                     },
                 },
-                properties: {
-                    _forName: ((_h = block.repeat) === null || _h === void 0 ? void 0 : _h.itemName) || 'item',
+                scope: {
+                    forName: ((_h = block.repeat) === null || _h === void 0 ? void 0 : _h.itemName) || 'item',
                 },
                 children: ((_j = block.children) === null || _j === void 0 ? void 0 : _j.map(function (child) { return (0, exports.builderElementToMitosisNode)(child, options); })) || [],
             });
@@ -434,8 +436,8 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                         code: wrapBindingIfNeeded((_m = block.repeat) === null || _m === void 0 ? void 0 : _m.collection, options),
                     },
                 },
-                properties: {
-                    _forName: ((_o = block.repeat) === null || _o === void 0 ? void 0 : _o.itemName) || 'item',
+                scope: {
+                    forName: ((_o = block.repeat) === null || _o === void 0 ? void 0 : _o.itemName) || 'item',
                 },
                 children: [(0, exports.builderElementToMitosisNode)((0, lodash_1.omit)(useBlock, 'repeat'), options)],
             });
@@ -465,9 +467,9 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
             }
         }
     }
-    var properties = __assign(__assign({}, block.properties), (options.includeBuilderExtras && (_a = {},
+    var properties = __assign(__assign(__assign({}, block.properties), (options.includeBuilderExtras && (_a = {},
         _a['builder-id'] = block.id,
-        _a)));
+        _a))), (options.includeBuilderExtras && getBuilderPropsForSymbol(block)));
     if (block.layerName) {
         properties.$name = block.layerName;
     }
@@ -502,11 +504,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         name: ((_r = (_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === null || _r === void 0 ? void 0 : _r.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
-        properties: __assign(__assign({}, (block.component
-            ? {
-                $tagName: block.tagName,
-            }
-            : null)), properties),
+        properties: __assign(__assign(__assign({}, (block.component && { $tagName: block.tagName })), (block.class && { class: block.class })), properties),
         bindings: __assign(__assign(__assign(__assign({}, bindings), actionBindings), (styleString && {
             style: { code: styleString },
         })), (css &&
@@ -530,6 +528,17 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
     return node;
 };
 exports.builderElementToMitosisNode = builderElementToMitosisNode;
+var getBuilderPropsForSymbol = function (block) {
+    var _a, _b;
+    if (((_a = block.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+        var child = block.children[0];
+        var builderContentId = (_b = child.properties) === null || _b === void 0 ? void 0 : _b['builder-content-id'];
+        if (builderContentId) {
+            return { 'builder-content-id': builderContentId };
+        }
+    }
+    return undefined;
+};
 var getHooks = function (content) {
     var _a, _b;
     var code = convertExportDefaultToReturn(((_a = content.data) === null || _a === void 0 ? void 0 : _a.tsCode) || ((_b = content.data) === null || _b === void 0 ? void 0 : _b.jsCode) || '');
@@ -589,19 +598,30 @@ function extractStateHook(code) {
 }
 exports.extractStateHook = extractStateHook;
 function convertExportDefaultToReturn(code) {
-    var types = babel.types;
-    var body = (0, parsers_1.parseCode)(code);
-    var newBody = body.slice();
-    for (var i = 0; i < body.length; i++) {
-        var statement = body[i];
-        if (types.isExportDefaultDeclaration(statement)) {
-            if (types.isCallExpression(statement.declaration) ||
-                types.isExpression(statement.declaration)) {
-                newBody[i] = types.returnStatement(statement.declaration);
+    try {
+        var types = babel.types;
+        var body = (0, parsers_1.parseCode)(code);
+        var newBody = body.slice();
+        for (var i = 0; i < body.length; i++) {
+            var statement = body[i];
+            if (types.isExportDefaultDeclaration(statement)) {
+                if (types.isCallExpression(statement.declaration) ||
+                    types.isExpression(statement.declaration)) {
+                    newBody[i] = types.returnStatement(statement.declaration);
+                }
             }
         }
+        return (0, generator_1.default)(types.program(newBody)).code || '';
+    }
+    catch (e) {
+        var error = e;
+        if (error.code === 'BABEL_PARSE_ERROR') {
+            return code;
+        }
+        else {
+            throw e;
+        }
     }
-    return (0, generator_1.default)(types.program(newBody)).code || '';
 }
 exports.convertExportDefaultToReturn = convertExportDefaultToReturn;
 // TODO: maybe this should be part of the builder -> Mitosis part
@@ -650,7 +670,7 @@ var isBuilderElement = function (el) {
 };
 exports.isBuilderElement = isBuilderElement;
 var builderContentPartToMitosisComponent = function (builderContent, options) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (options === void 0) { options = {}; }
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, traverse_1.default)(builderContent).forEach(function (elem) {
@@ -679,24 +699,22 @@ var builderContentPartToMitosisComponent = function (builderContent, options) {
             }
         }
     });
-    var _j = 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 = _j.state, code = _j.code;
+    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 componentJson = (0, create_mitosis_component_1.createMitosisComponent)({
-        meta: {
-            useMetadata: {
+        meta: __assign({ useMetadata: {
                 httpRequests: (_c = builderContent.data) === null || _c === void 0 ? void 0 : _c.httpRequests,
-            },
-        },
-        inputs: (_e = (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.inputs) === null || _e === void 0 ? void 0 : _e.map(function (input) { return ({
+            } }, (((_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 ({
             name: input.name,
             defaultValue: input.defaultValue,
         }); }),
-        state: (parsed === null || parsed === void 0 ? void 0 : parsed.state) || __assign(__assign({}, state), (0, state_1.mapJsonObjectToStateValue)((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.state)),
-        hooks: __assign({}, ((((_g = parsed === null || parsed === void 0 ? void 0 : parsed.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code) || (customCode && { code: customCode })) && {
+        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)),
+        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 },
         })),
-        children: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
+        children: (((_j = builderContent.data) === null || _j === void 0 ? void 0 : _j.blocks) || [])
             .filter(function (item) {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/dist/src/parsers/constants/outdated-prefixes.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DO NOT USE THIS PREFIX. It's only used for legacy purposes, within a very small subset of logic in the JSX & Builder parsers.
+ * It will be eliminated in the future, and generators should not need to rely on these prefixes for any reason.
+ */
+export declare const __DO_NOT_USE_FUNCTION_LITERAL_PREFIX = "@builder.io/mitosis/function:";
+/**
+ * DO NOT USE THIS PREFIX. It's only used for legacy purposes, within a very small subset of logic in the JSX & Builder parsers.
+ * It will be eliminated in the future, and generators should not need to rely on these prefixes for any reason.
+ */
+export declare const __DO_NOT_USE_METHOD_LITERAL_PREFIX = "@builder.io/mitosis/method:";

package/dist/src/parsers/constants/outdated-prefixes.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__DO_NOT_USE_METHOD_LITERAL_PREFIX = exports.__DO_NOT_USE_FUNCTION_LITERAL_PREFIX = void 0;
+/**
+ * DO NOT USE THIS PREFIX. It's only used for legacy purposes, within a very small subset of logic in the JSX & Builder parsers.
+ * It will be eliminated in the future, and generators should not need to rely on these prefixes for any reason.
+ */
+exports.__DO_NOT_USE_FUNCTION_LITERAL_PREFIX = "@builder.io/mitosis/function:";
+/**
+ * DO NOT USE THIS PREFIX. It's only used for legacy purposes, within a very small subset of logic in the JSX & Builder parsers.
+ * It will be eliminated in the future, and generators should not need to rely on these prefixes for any reason.
+ */
+exports.__DO_NOT_USE_METHOD_LITERAL_PREFIX = "@builder.io/mitosis/method:";

package/dist/src/parsers/context.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseContext = void 0;
 var babel = __importStar(require("@babel/core"));
 var create_mitosis_context_1 = require("../helpers/create-mitosis-context");
-var jsx_1 = require("./jsx");
+var state_1 = require("./jsx/state");
 var types = babel.types;
 var tsPreset = require('@babel/preset-typescript');
 function parseContext(code, options) {
@@ -51,7 +51,7 @@ function parseContext(code, options) {
                                         if (types.isObjectExpression(firstArg)) {
                                             // TODO: support non object values by parsing any node type
                                             // like the logic within each property value of parseStateObject
-                                            context.value = (0, jsx_1.parseStateObject)(firstArg);
+                                            context.value = (0, state_1.parseStateObjectToMitosisState)(firstArg);
                                             found = true;
                                         }
                                     }

package/dist/src/parsers/helpers/state.d.ts

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

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapJsonObjectToStateValue = void 0;
+var lodash_1 = require("lodash");
+var patterns_1 = require("../../helpers/patterns");
+var outdated_prefixes_1 = require("../constants/outdated-prefixes");
+/**
+ * Sets StateTypeValue based on the string prefixes we've set previously.
+ *
+ * This is a temporary workaround until we eliminate the prefixes and make this StateValueType the
+ * source of truth.
+ */
+var mapJsonToStateValue = function (value) {
+    if (typeof value === 'string') {
+        if (value.startsWith(outdated_prefixes_1.__DO_NOT_USE_FUNCTION_LITERAL_PREFIX)) {
+            return { type: 'function', code: value.replace(outdated_prefixes_1.__DO_NOT_USE_FUNCTION_LITERAL_PREFIX, '') };
+        }
+        else if (value.startsWith(outdated_prefixes_1.__DO_NOT_USE_METHOD_LITERAL_PREFIX)) {
+            var strippedValue = value.replace(outdated_prefixes_1.__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: value };
+};
+var mapJsonObjectToStateValue = function (value) {
+    return (0, lodash_1.mapValues)(value, mapJsonToStateValue);
+};
+exports.mapJsonObjectToStateValue = mapJsonObjectToStateValue;

package/dist/src/parsers/jsx/component-types.d.ts

@@ -1,6 +1,6 @@
 import * as babel from '@babel/core';
 import { Context } from './types';
 export declare const getPropsTypeRef: (node: babel.types.FunctionDeclaration, context: Context) => string | undefined;
-export declare const isTypeImport: (node: babel.Node) => boolean;
 export declare const isTypeOrInterface: (node: babel.Node) => boolean;
 export declare const collectTypes: (node: babel.Node, context: Context) => void;
+export declare function handleTypeImports(path: babel.NodePath<babel.types.Program>, context: Context): void;

package/dist/src/parsers/jsx/component-types.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.collectTypes = exports.isTypeOrInterface = exports.isTypeImport = exports.getPropsTypeRef = void 0;
+exports.handleTypeImports = exports.collectTypes = exports.isTypeOrInterface = exports.getPropsTypeRef = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var types = babel.types;
@@ -71,7 +71,6 @@ var isTypeImport = function (node) {
         // Babel adds an implicit JSX type import that we don't want
         ((_a = node.specifiers[0]) === null || _a === void 0 ? void 0 : _a.local.name) !== 'JSX';
 };
-exports.isTypeImport = isTypeImport;
 var isTypeOrInterface = function (node) {
     return types.isTSTypeAliasDeclaration(node) ||
         types.isTSInterfaceDeclaration(node) ||
@@ -86,3 +85,17 @@ var collectTypes = function (node, context) {
     context.builder.component.types = types.filter(Boolean);
 };
 exports.collectTypes = collectTypes;
+function handleTypeImports(path, context) {
+    for (var _i = 0, _a = path.node.body; _i < _a.length; _i++) {
+        var statement = _a[_i];
+        if (isTypeImport(statement)) {
+            var importDeclaration = statement;
+            // Remove .lite from path if exists, as that will be stripped
+            if (importDeclaration.source.value.endsWith('.lite')) {
+                importDeclaration.source.value = importDeclaration.source.value.replace(/\.lite$/, '');
+            }
+            (0, exports.collectTypes)(statement, context);
+        }
+    }
+}
+exports.handleTypeImports = handleTypeImports;

package/dist/src/parsers/jsx/context.js

@@ -52,7 +52,7 @@ function extractContextComponents(json) {
                 json.context.set[refPath] = {
                     name: name_1,
                     value: value
-                        ? (0, state_1.parseStateObject)(expressionToNode(value))
+                        ? (0, state_1.parseStateObjectToMitosisState)(expressionToNode(value))
                         : undefined,
                 };
                 this.update((0, create_mitosis_node_1.createMitosisNode)({

package/dist/src/parsers/jsx/element-parser.d.ts

@@ -0,0 +1,6 @@
+import * as babel from '@babel/core';
+import { MitosisNode } from '../../types/mitosis-node';
+/**
+ * Parses a JSX element into a MitosisNode.
+ */
+export declare const jsxElementToJson: (node: babel.types.JSXElement | babel.types.JSXExpressionContainer | babel.types.JSXFragment | babel.types.JSXSpreadChild | babel.types.JSXText) => MitosisNode | null;