@builder.io/mitosis 0.0.56-98 → 0.0.57

package/dist/src/index.d.ts

@@ -26,7 +26,6 @@ export declare const useDefaultProps: <T = {
 export * from './parsers/jsx';
 export * from './parsers/builder';
 export * from './parsers/angular';
-export * from './parsers/liquid';
 export * from './parsers/context';
 export * from './generators/vue';
 export * from './generators/angular';
@@ -50,7 +49,6 @@ export * from './generators/template';
 export * from './generators/swift-ui';
 export * from './generators/lit';
 export * from './generators/react-native';
-export * from './helpers/parse-reactive-script';
 export * from './helpers/is-mitosis-node';
 export * from './types/mitosis-node';
 export * from './types/mitosis-component';

package/dist/src/index.js

@@ -64,7 +64,6 @@ exports.useDefaultProps = useDefaultProps;
 __exportStar(require("./parsers/jsx"), exports);
 __exportStar(require("./parsers/builder"), exports);
 __exportStar(require("./parsers/angular"), exports);
-__exportStar(require("./parsers/liquid"), exports);
 __exportStar(require("./parsers/context"), exports);
 __exportStar(require("./generators/vue"), exports);
 __exportStar(require("./generators/angular"), exports);
@@ -88,7 +87,6 @@ __exportStar(require("./generators/template"), exports);
 __exportStar(require("./generators/swift-ui"), exports);
 __exportStar(require("./generators/lit"), exports);
 __exportStar(require("./generators/react-native"), exports);
-__exportStar(require("./helpers/parse-reactive-script"), exports);
 __exportStar(require("./helpers/is-mitosis-node"), exports);
 __exportStar(require("./types/mitosis-node"), exports);
 __exportStar(require("./types/mitosis-component"), exports);

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;

package/dist/src/parsers/jsx/element-parser.js

@@ -0,0 +1,243 @@
+"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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxElementToJson = void 0;
+var babel = __importStar(require("@babel/core"));
+var generator_1 = __importDefault(require("@babel/generator"));
+var nullable_1 = require("../../helpers/nullable");
+var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
+var function_1 = require("fp-ts/lib/function");
+var types = babel.types;
+var getForArguments = function (params) {
+    var _a = params
+        .filter(function (param) { return types.isIdentifier(param); })
+        .map(function (param) { return param.name; })
+        .filter(nullable_1.checkIsDefined), forName = _a[0], indexName = _a[1], collectionName = _a[2];
+    return {
+        forName: forName,
+        collectionName: collectionName,
+        indexName: indexName,
+    };
+};
+/**
+ * Parses a JSX element into a MitosisNode.
+ */
+var jsxElementToJson = function (node) {
+    if (types.isJSXText(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            properties: {
+                _text: node.value,
+            },
+        });
+    }
+    if (types.isJSXExpressionContainer(node)) {
+        if (types.isJSXEmptyExpression(node.expression)) {
+            return null;
+        }
+        // foo.map -> <For each={foo}>...</For>
+        if (types.isCallExpression(node.expression) ||
+            types.isOptionalCallExpression(node.expression)) {
+            var callback = node.expression.arguments[0];
+            if (types.isArrowFunctionExpression(callback)) {
+                if (types.isIdentifier(callback.params[0])) {
+                    var forArguments = getForArguments(callback.params);
+                    return (0, create_mitosis_node_1.createMitosisNode)({
+                        name: 'For',
+                        bindings: {
+                            each: {
+                                code: (0, generator_1.default)(node.expression.callee)
+                                    .code // Remove .map or potentially ?.map
+                                    .replace(/\??\.map$/, ''),
+                            },
+                        },
+                        scope: forArguments,
+                        children: [(0, exports.jsxElementToJson)(callback.body)],
+                    });
+                }
+            }
+        }
+        // {foo && <div />} -> <Show when={foo}>...</Show>
+        if (types.isLogicalExpression(node.expression)) {
+            if (node.expression.operator === '&&') {
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'Show',
+                    bindings: {
+                        when: { code: (0, generator_1.default)(node.expression.left).code },
+                    },
+                    children: [(0, exports.jsxElementToJson)(node.expression.right)],
+                });
+            }
+            else {
+                // TODO: good warning system for unsupported operators
+            }
+        }
+        // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
+        if (types.isConditionalExpression(node.expression)) {
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Show',
+                meta: {
+                    else: (0, exports.jsxElementToJson)(node.expression.alternate),
+                },
+                bindings: {
+                    when: { code: (0, generator_1.default)(node.expression.test).code },
+                },
+                children: [(0, exports.jsxElementToJson)(node.expression.consequent)],
+            });
+        }
+        // TODO: support {foo ? bar : baz}
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            bindings: {
+                _text: { code: (0, generator_1.default)(node.expression).code },
+            },
+        });
+    }
+    if (types.isJSXFragment(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'Fragment',
+            children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+        });
+    }
+    // TODO: support spread attributes
+    if (types.isJSXSpreadChild(node)) {
+        return null;
+    }
+    var nodeName = (0, generator_1.default)(node.openingElement.name).code;
+    if (nodeName === 'Show') {
+        var whenAttr = node.openingElement.attributes.find(function (item) { return types.isJSXAttribute(item) && item.name.name === 'when'; });
+        var elseAttr = node.openingElement.attributes.find(function (item) { return types.isJSXAttribute(item) && item.name.name === 'else'; });
+        var whenValue = whenAttr && types.isJSXExpressionContainer(whenAttr.value)
+            ? (0, generator_1.default)(whenAttr.value.expression).code
+            : undefined;
+        var elseValue = elseAttr &&
+            types.isJSXExpressionContainer(elseAttr.value) &&
+            (0, exports.jsxElementToJson)(elseAttr.value.expression);
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            name: 'Show',
+            meta: {
+                else: elseValue || undefined,
+            },
+            bindings: __assign({}, (whenValue ? { when: { code: whenValue } } : {})),
+            children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+        });
+    }
+    // <For ...> control flow component
+    if (nodeName === 'For') {
+        var child = node.children.find(function (item) {
+            return types.isJSXExpressionContainer(item);
+        });
+        if ((0, nullable_1.checkIsDefined)(child)) {
+            var childExpression = child.expression;
+            if (types.isArrowFunctionExpression(childExpression)) {
+                var forArguments = getForArguments(childExpression === null || childExpression === void 0 ? void 0 : childExpression.params);
+                var forCode = (0, function_1.pipe)(node.openingElement.attributes[0], function (attr) {
+                    if (types.isJSXAttribute(attr) && types.isJSXExpressionContainer(attr.value)) {
+                        return (0, generator_1.default)(attr.value.expression).code;
+                    }
+                    else {
+                        // TO-DO: is an empty string valid here?
+                        return '';
+                    }
+                });
+                return (0, create_mitosis_node_1.createMitosisNode)({
+                    name: 'For',
+                    bindings: {
+                        each: {
+                            code: forCode,
+                        },
+                    },
+                    scope: forArguments,
+                    children: [(0, exports.jsxElementToJson)(childExpression.body)],
+                });
+            }
+        }
+    }
+    return (0, create_mitosis_node_1.createMitosisNode)({
+        name: nodeName,
+        properties: node.openingElement.attributes.reduce(function (memo, item) {
+            if (types.isJSXAttribute(item)) {
+                var key = item.name.name;
+                var value = item.value;
+                if (types.isStringLiteral(value)) {
+                    memo[key] = value.value;
+                    return memo;
+                }
+                if (types.isJSXExpressionContainer(value) && types.isStringLiteral(value.expression)) {
+                    memo[key] = value.expression.value;
+                    return memo;
+                }
+            }
+            return memo;
+        }, {}),
+        bindings: node.openingElement.attributes.reduce(function (memo, item) {
+            if (types.isJSXAttribute(item)) {
+                var key = item.name.name;
+                var value = item.value;
+                if (types.isJSXExpressionContainer(value) && !types.isStringLiteral(value.expression)) {
+                    var expression = value.expression;
+                    if (types.isArrowFunctionExpression(expression)) {
+                        if (key.startsWith('on')) {
+                            memo[key] = {
+                                code: (0, generator_1.default)(expression.body).code,
+                                arguments: expression.params.map(function (node) { return node === null || node === void 0 ? void 0 : node.name; }),
+                            };
+                        }
+                        else {
+                            memo[key] = { code: (0, generator_1.default)(expression.body).code };
+                        }
+                    }
+                    else {
+                        memo[key] = { code: (0, generator_1.default)(expression).code };
+                    }
+                    return memo;
+                }
+            }
+            else if (types.isJSXSpreadAttribute(item)) {
+                // TODO: potentially like Vue store bindings and properties as array of key value pairs
+                // too so can do this accurately when order matters. Also tempting to not support spread,
+                // as some frameworks do not support it (e.g. Angular) tho Angular may be the only one
+                memo._spread = {
+                    code: types.stringLiteral((0, generator_1.default)(item.argument).code).value,
+                };
+            }
+            return memo;
+        }, {}),
+        children: node.children.map(exports.jsxElementToJson).filter(nullable_1.checkIsDefined),
+    });
+};
+exports.jsxElementToJson = jsxElementToJson;