@builder.io/mitosis 0.0.45 → 0.0.46

package/dist/src/parsers/jsx.js

@@ -36,7 +36,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseJsx = exports.METADATA_HOOK_NAME = exports.parseStateObject = exports.createFunctionStringLiteralObjectProperty = exports.createFunctionStringLiteral = exports.selfClosingTags = void 0;
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
-var JSON5 = __importStar(require("json5"));
 var trace_reference_to_module_path_1 = require("../helpers/trace-reference-to-module-path");
 var traverse_1 = __importDefault(require("traverse"));
 var function_literal_prefix_1 = require("../constants/function-literal-prefix");
@@ -48,6 +47,7 @@ var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var replace_idenifiers_1 = require("../helpers/replace-idenifiers");
 var replace_new_lines_in_strings_1 = require("../helpers/replace-new-lines-in-strings");
+var json_1 = require("../helpers/json");
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
 exports.selfClosingTags = new Set([
@@ -114,11 +114,11 @@ var jsonObjectToAst = function (json) {
     return newNode;
 };
 var createFunctionStringLiteral = function (node) {
-    return types.stringLiteral("" + function_literal_prefix_1.functionLiteralPrefix + generator_1.default(node).code);
+    return types.stringLiteral("".concat(function_literal_prefix_1.functionLiteralPrefix).concat((0, generator_1.default)(node).code));
 };
 exports.createFunctionStringLiteral = createFunctionStringLiteral;
 var createFunctionStringLiteralObjectProperty = function (key, node) {
-    return types.objectProperty(key, exports.createFunctionStringLiteral(node));
+    return types.objectProperty(key, (0, exports.createFunctionStringLiteral)(node));
 };
 exports.createFunctionStringLiteralObjectProperty = createFunctionStringLiteralObjectProperty;
 var uncapitalize = function (str) {
@@ -133,11 +133,11 @@ var parseStateObject = function (object) {
         if (types.isObjectProperty(item)) {
             if (types.isFunctionExpression(item.value) ||
                 types.isArrowFunctionExpression(item.value)) {
-                return exports.createFunctionStringLiteralObjectProperty(item.key, item.value);
+                return (0, exports.createFunctionStringLiteralObjectProperty)(item.key, item.value);
             }
         }
         if (types.isObjectMethod(item)) {
-            return types.objectProperty(item.key, types.stringLiteral("" + method_literal_prefix_1.methodLiteralPrefix + generator_1.default(__assign(__assign({}, item), { returnType: null })).code));
+            return types.objectProperty(item.key, types.stringLiteral("".concat(method_literal_prefix_1.methodLiteralPrefix).concat((0, generator_1.default)(__assign(__assign({}, item), { returnType: null })).code)));
         }
         // Remove typescript types, e.g. from
         // { foo: ('string' as SomeType) }
@@ -151,29 +151,13 @@ var parseStateObject = function (object) {
         return item;
     });
     var newObject = types.objectExpression(useProperties);
-    var code;
-    var obj;
-    try {
-        code = generator_1.default(newObject).code;
-        obj = JSON5.parse(code);
-    }
-    catch (err) {
-        console.error('Could not JSON5 parse object:\n', code);
-        throw err;
-    }
+    var obj = parseCodeJson(newObject);
     return obj;
 };
 exports.parseStateObject = parseStateObject;
-var parseJson = function (node) {
-    var code;
-    try {
-        code = generator_1.default(node).code;
-        return JSON5.parse(code);
-    }
-    catch (err) {
-        console.error('Could not JSON5 parse object:\n', code);
-        throw err;
-    }
+var parseCodeJson = function (node) {
+    var code = (0, generator_1.default)(node).code;
+    return (0, json_1.tryParseJson)(code);
 };
 var componentFunctionToJson = function (node, context) {
     var _a;
@@ -192,12 +176,12 @@ var componentFunctionToJson = function (node, context) {
                         var keyNode = expression.arguments[0];
                         if (types.isIdentifier(keyNode)) {
                             var key = keyNode.name;
-                            var keyPath = trace_reference_to_module_path_1.traceReferenceToModulePath(context.builder.component.imports, key);
+                            var keyPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(context.builder.component.imports, key);
                             var valueNode = expression.arguments[1];
                             setContext[keyPath] = {
                                 name: keyNode.name,
                                 value: valueNode && types.isObjectExpression(valueNode)
-                                    ? exports.parseStateObject(valueNode)
+                                    ? (0, exports.parseStateObject)(valueNode)
                                     : undefined,
                             };
                         }
@@ -207,7 +191,7 @@ var componentFunctionToJson = function (node, context) {
                         var firstArg = expression.arguments[0];
                         if (types.isFunctionExpression(firstArg) ||
                             types.isArrowFunctionExpression(firstArg)) {
-                            hooks.onMount = generator_1.default(firstArg.body)
+                            hooks.onMount = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
                                 // Remove abtrary block wrapping if any
                                 // AKA
@@ -221,7 +205,7 @@ var componentFunctionToJson = function (node, context) {
         }
         if (types.isFunctionDeclaration(item)) {
             if (types.isIdentifier(item.id)) {
-                state[item.id.name] = "" + function_literal_prefix_1.functionLiteralPrefix + generator_1.default(item).code;
+                state[item.id.name] = "".concat(function_literal_prefix_1.functionLiteralPrefix).concat((0, generator_1.default)(item).code);
             }
         }
         if (types.isVariableDeclaration(item)) {
@@ -238,12 +222,12 @@ var componentFunctionToJson = function (node, context) {
                         // Function as init, like:
                         // useState(() => true)
                         if (types.isArrowFunctionExpression(value)) {
-                            state[varName] = parseJson(value.body);
+                            state[varName] = parseCodeJson(value.body);
                         }
                         else {
                             // Value as init, like:
                             // useState(true)
-                            state[varName] = parseJson(value);
+                            state[varName] = parseCodeJson(value);
                         }
                     }
                 }
@@ -253,7 +237,7 @@ var componentFunctionToJson = function (node, context) {
                     if (init.callee.name === 'useState') {
                         var firstArg = init.arguments[0];
                         if (types.isObjectExpression(firstArg)) {
-                            state = exports.parseStateObject(firstArg);
+                            state = (0, exports.parseStateObject)(firstArg);
                         }
                     }
                     else if (init.callee.name === 'useContext') {
@@ -265,7 +249,7 @@ var componentFunctionToJson = function (node, context) {
                                 var name_1 = firstArg.name;
                                 accessedContext[varName] = {
                                     name: name_1,
-                                    path: trace_reference_to_module_path_1.traceReferenceToModulePath(context.builder.component.imports, name_1),
+                                    path: (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(context.builder.component.imports, name_1),
                                 };
                             }
                         }
@@ -284,16 +268,14 @@ var componentFunctionToJson = function (node, context) {
             children.push(jsxElementToJson(value));
         }
     }
-    return create_mitosis_component_1.createMitosisComponent(__assign(__assign({}, context.builder.component), { name: (_a = node.id) === null || _a === void 0 ? void 0 : _a.name, state: state,
-        children: children,
-        hooks: hooks, context: {
+    return (0, create_mitosis_component_1.createMitosisComponent)(__assign(__assign({}, context.builder.component), { name: (_a = node.id) === null || _a === void 0 ? void 0 : _a.name, state: state, children: children, hooks: hooks, context: {
             get: accessedContext,
             set: setContext,
         } }));
 };
 var jsxElementToJson = function (node) {
     if (types.isJSXText(node)) {
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             properties: {
                 _text: node.value,
             },
@@ -310,10 +292,10 @@ var jsxElementToJson = function (node) {
             if (types.isArrowFunctionExpression(callback)) {
                 if (types.isIdentifier(callback.params[0])) {
                     var forName = callback.params[0].name;
-                    return create_mitosis_node_1.createMitosisNode({
+                    return (0, create_mitosis_node_1.createMitosisNode)({
                         name: 'For',
                         bindings: {
-                            each: generator_1.default(node.expression.callee)
+                            each: (0, generator_1.default)(node.expression.callee)
                                 .code // Remove .map or potentially ?.map
                                 .replace(/\??\.map$/, ''),
                         },
@@ -328,10 +310,10 @@ var jsxElementToJson = function (node) {
         // {foo && <div />} -> <Show when={foo}>...</Show>
         if (types.isLogicalExpression(node.expression)) {
             if (node.expression.operator === '&&') {
-                return create_mitosis_node_1.createMitosisNode({
+                return (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'Show',
                     bindings: {
-                        when: generator_1.default(node.expression.left).code,
+                        when: (0, generator_1.default)(node.expression.left).code,
                     },
                     children: [jsxElementToJson(node.expression.right)],
                 });
@@ -342,43 +324,43 @@ var jsxElementToJson = function (node) {
         }
         // {foo ? <div /> : <span />} -> <Show when={foo} else={<span />}>...</Show>
         if (types.isConditionalExpression(node.expression)) {
-            return create_mitosis_node_1.createMitosisNode({
+            return (0, create_mitosis_node_1.createMitosisNode)({
                 name: 'Show',
                 meta: {
                     else: jsxElementToJson(node.expression.alternate),
                 },
                 bindings: {
-                    when: generator_1.default(node.expression.test).code,
+                    when: (0, generator_1.default)(node.expression.test).code,
                 },
                 children: [jsxElementToJson(node.expression.consequent)],
             });
         }
         // TODO: support {foo ? bar : baz}
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             bindings: {
-                _text: generator_1.default(node.expression).code,
+                _text: (0, generator_1.default)(node.expression).code,
             },
         });
     }
     if (types.isJSXFragment(node)) {
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Fragment',
             children: node.children
                 .map(function (item) { return jsxElementToJson(item); })
                 .filter(Boolean),
         });
     }
-    var nodeName = generator_1.default(node.openingElement.name).code;
+    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) &&
-            generator_1.default(whenAttr.value.expression).code;
+            (0, generator_1.default)(whenAttr.value.expression).code;
         var elseValue = elseAttr &&
             types.isJSXExpressionContainer(elseAttr.value) &&
             jsxElementToJson(elseAttr.value.expression);
-        return create_mitosis_node_1.createMitosisNode({
+        return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Show',
             meta: {
                 else: elseValue || undefined,
@@ -401,10 +383,10 @@ var jsxElementToJson = function (node) {
             if (types.isArrowFunctionExpression(childExpression)) {
                 var argName = childExpression.params[0]
                     .name;
-                return create_mitosis_node_1.createMitosisNode({
+                return (0, create_mitosis_node_1.createMitosisNode)({
                     name: 'For',
                     bindings: {
-                        each: generator_1.default(node.openingElement.attributes[0]
+                        each: (0, generator_1.default)(node.openingElement.attributes[0]
                             .value.expression).code,
                     },
                     properties: {
@@ -415,7 +397,7 @@ var jsxElementToJson = function (node) {
             }
         }
     }
-    return create_mitosis_node_1.createMitosisNode({
+    return (0, create_mitosis_node_1.createMitosisNode)({
         name: nodeName,
         properties: node.openingElement.attributes.reduce(function (memo, item) {
             if (types.isJSXAttribute(item)) {
@@ -435,10 +417,10 @@ var jsxElementToJson = function (node) {
                 if (types.isJSXExpressionContainer(value)) {
                     var expression = value.expression;
                     if (types.isArrowFunctionExpression(expression)) {
-                        memo[key] = generator_1.default(expression.body).code;
+                        memo[key] = (0, generator_1.default)(expression.body).code;
                     }
                     else {
-                        memo[key] = generator_1.default(expression).code;
+                        memo[key] = (0, generator_1.default)(expression).code;
                     }
                     return memo;
                 }
@@ -447,7 +429,7 @@ var jsxElementToJson = function (node) {
                 // 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 = types.stringLiteral(generator_1.default(item.argument).code);
+                memo._spread = types.stringLiteral((0, generator_1.default)(item.argument).code);
             }
             return memo;
         }, {}),
@@ -484,13 +466,12 @@ var collectMetadata = function (nodes, component, options) {
             return true;
         }
         if (types.isIdentifier(hook.callee) && hookNames.has(hook.callee.name)) {
-            var code = generator_1.default(hook.arguments[0]).code;
             try {
-                component.meta[hook.callee.name] = JSON5.parse(code);
+                component.meta[hook.callee.name] = parseCodeJson(hook.arguments[0]);
                 return false;
             }
             catch (e) {
-                console.error("Error parsing metadata hook " + hook.callee.name, code);
+                console.error("Error parsing metadata hook ".concat(hook.callee.name));
                 throw e;
             }
         }
@@ -498,17 +479,17 @@ var collectMetadata = function (nodes, component, options) {
     });
 };
 function mapReactIdentifiersInExpression(expression, stateProperties) {
-    var setExpressions = stateProperties.map(function (propertyName) { return "set" + capitalize_1.capitalize(propertyName); });
-    return babel_transform_1.babelTransformExpression(
+    var setExpressions = stateProperties.map(function (propertyName) { return "set".concat((0, capitalize_1.capitalize)(propertyName)); });
+    return (0, babel_transform_1.babelTransformExpression)(
     // foo -> state.foo
-    replace_idenifiers_1.replaceIdentifiers(expression, stateProperties, function (name) { return "state." + name; }), {
+    (0, replace_idenifiers_1.replaceIdentifiers)(expression, stateProperties, function (name) { return "state.".concat(name); }), {
         CallExpression: function (path) {
             if (types.isIdentifier(path.node.callee)) {
                 if (setExpressions.includes(path.node.callee.name)) {
                     // setFoo -> foo
                     var statePropertyName = uncapitalize(path.node.callee.name.slice(3));
                     // setFoo(...) -> state.foo = ...
-                    path.replaceWith(types.assignmentExpression('=', types.identifier("state." + statePropertyName), path.node.arguments[0]));
+                    path.replaceWith(types.assignmentExpression('=', types.identifier("state.".concat(statePropertyName)), path.node.arguments[0]));
                 }
             }
         },
@@ -530,8 +511,8 @@ function mapReactIdentifiers(json) {
                     mapReactIdentifiersInExpression(value.replace(function_literal_prefix_1.functionLiteralPrefix, ''), stateProperties);
         }
     }
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             for (var key in item.bindings) {
                 var value = item.bindings[key];
                 if (value) {
@@ -554,7 +535,7 @@ function mapReactIdentifiers(json) {
     });
 }
 var expressionToNode = function (str) {
-    var code = "export default " + str;
+    var code = "export default ".concat(str);
     return babel.parse(code).program
         .body[0].declaration;
 };
@@ -563,19 +544,19 @@ var expressionToNode = function (str) {
  * MitosisComponent tree
  */
 function extractContextComponents(json) {
-    traverse_1.default(json).forEach(function (item) {
-        if (is_mitosis_node_1.isMitosisNode(item)) {
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if (item.name.endsWith('.Provider')) {
                 var value = item.bindings.value;
                 var name_2 = item.name.split('.')[0];
-                var refPath = trace_reference_to_module_path_1.traceReferenceToModulePath(json.imports, name_2);
+                var refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name_2);
                 json.context.set[refPath] = {
                     name: name_2,
                     value: value
-                        ? exports.parseStateObject(expressionToNode(value))
+                        ? (0, exports.parseStateObject)(expressionToNode(value))
                         : undefined,
                 };
-                this.update(create_mitosis_node_1.createMitosisNode({
+                this.update((0, create_mitosis_node_1.createMitosisNode)({
                     name: 'Fragment',
                     children: item.children,
                 }));
@@ -585,6 +566,9 @@ function extractContextComponents(json) {
         }
     });
 }
+var isImportOrDefaultExport = function (node) {
+    return types.isExportDefaultDeclaration(node) || types.isImportDeclaration(node);
+};
 function parseJsx(jsx, options) {
     if (options === void 0) { options = {}; }
     var useOptions = __assign({ format: 'react' }, options);
@@ -607,11 +591,7 @@ function parseJsx(jsx, options) {
                             return;
                         }
                         context.builder = {
-                            component: create_mitosis_component_1.createMitosisComponent(),
-                        };
-                        var isImportOrDefaultExport = function (node) {
-                            return types.isExportDefaultDeclaration(node) ||
-                                types.isImportDeclaration(node);
+                            component: (0, create_mitosis_component_1.createMitosisComponent)(),
                         };
                         var keepStatements = path.node.body.filter(function (statement) {
                             return isImportOrDefaultExport(statement);
@@ -622,10 +602,10 @@ function parseJsx(jsx, options) {
                             return !types.isExportDefaultDeclaration(node) &&
                                 types.isFunctionDeclaration(node);
                         })
-                            .map(function (node) { return "export default " + generator_1.default(node).code; });
+                            .map(function (node) { return "export default ".concat((0, generator_1.default)(node).code); });
                         cutStatements = collectMetadata(cutStatements, context.builder.component, useOptions);
                         // TODO: support multiple? e.g. for others to add imports?
-                        context.builder.component.hooks.preComponent = generator_1.default(types.program(cutStatements)).code;
+                        context.builder.component.hooks.preComponent = (0, generator_1.default)(types.program(cutStatements)).code;
                         path.replaceWith(types.program(keepStatements));
                     },
                     FunctionDeclaration: function (path, context) {
@@ -673,7 +653,7 @@ function parseJsx(jsx, options) {
             }); },
         ],
     });
-    var toParse = replace_new_lines_in_strings_1.stripNewlinesInStrings(output
+    var toParse = (0, replace_new_lines_in_strings_1.stripNewlinesInStrings)(output
         .code.trim()
         // Occasional issues where comments get kicked to the top. Full fix should strip these sooner
         .replace(/^\/\*[\s\S]*?\*\/\s*/, '')
@@ -682,15 +662,7 @@ function parseJsx(jsx, options) {
         .replace(/\n"/g, '"')
         .replace(/^\({/, '{')
         .replace(/}\);$/, '}'));
-    var parsed;
-    try {
-        parsed = JSON5.parse(toParse);
-    }
-    catch (err) {
-        debugger;
-        console.error('Could not parse code', toParse);
-        throw err;
-    }
+    var parsed = (0, json_1.tryParseJson)(toParse);
     mapReactIdentifiers(parsed);
     extractContextComponents(parsed);
     parsed.subComponents = subComponentFunctions.map(function (item) {