@builder.io/mitosis 0.0.56-13 → 0.0.56-16

package/dist/src/parsers/jsx.js

@@ -59,8 +59,10 @@ var create_mitosis_component_1 = require("../helpers/create-mitosis-component");
 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 get_bindings_1 = require("../helpers/get-bindings");
 var replace_new_lines_in_strings_1 = require("../helpers/replace-new-lines-in-strings");
 var json_1 = require("../helpers/json");
+var hooks_1 = require("../constants/hooks");
 var jsxPlugin = require('@babel/plugin-syntax-jsx');
 var tsPreset = require('@babel/preset-typescript');
 exports.selfClosingTags = new Set([
@@ -80,9 +82,7 @@ exports.selfClosingTags = new Set([
     'wbr',
 ]);
 var types = babel.types;
-var arrayToAst = function (array) {
-    return types.arrayExpression(array.map(function (item) { return jsonToAst(item); }));
-};
+var arrayToAst = function (array) { return types.arrayExpression(array.map(jsonToAst)); };
 var jsonToAst = function (json) {
     if (types.isNode(json)) {
         if (types.isJSXText(json)) {
@@ -111,6 +111,7 @@ var jsonToAst = function (json) {
 };
 var jsonObjectToAst = function (json) {
     if (!json) {
+        // TO-DO: This looks concerning...
         return json;
     }
     var properties = [];
@@ -144,8 +145,7 @@ var parseStateObject = function (object) {
     var properties = object.properties;
     var useProperties = properties.map(function (item) {
         if (types.isObjectProperty(item)) {
-            if (types.isFunctionExpression(item.value) ||
-                types.isArrowFunctionExpression(item.value)) {
+            if (types.isFunctionExpression(item.value) || types.isArrowFunctionExpression(item.value)) {
                 return (0, exports.createFunctionStringLiteralObjectProperty)(item.key, item.value);
             }
         }
@@ -172,12 +172,28 @@ var parseCodeJson = function (node) {
     var code = (0, generator_1.default)(node).code;
     return (0, json_1.tryParseJson)(code);
 };
+var getPropsTypeRef = function (node) {
+    var param = node.params[0];
+    // TODO: component function params name must be props
+    if (babel.types.isIdentifier(param) &&
+        param.name === 'props' &&
+        babel.types.isTSTypeAnnotation(param.typeAnnotation)) {
+        var paramIdentifier = babel.types.variableDeclaration('let', [
+            babel.types.variableDeclarator(param),
+        ]);
+        return (0, generator_1.default)(paramIdentifier)
+            .code.replace(/^let\sprops:\s+/, '')
+            .replace(/;/g, '');
+    }
+    return undefined;
+};
 var componentFunctionToJson = function (node, context) {
     var _a;
     var hooks = {};
     var state = {};
     var accessedContext = {};
     var setContext = {};
+    var refs = {};
     for (var _i = 0, _b = node.body.body; _i < _b.length; _i++) {
         var item = _b[_i];
         if (types.isExpressionStatement(item)) {
@@ -191,19 +207,28 @@ var componentFunctionToJson = function (node, context) {
                             var key = keyNode.name;
                             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)
-                                    ? (0, exports.parseStateObject)(valueNode)
-                                    : undefined,
-                            };
+                            if (valueNode) {
+                                if (types.isObjectExpression(valueNode)) {
+                                    var value = (0, exports.parseStateObject)(valueNode);
+                                    setContext[keyPath] = {
+                                        name: keyNode.name,
+                                        value: value,
+                                    };
+                                }
+                                else {
+                                    var ref = (0, generator_1.default)(valueNode).code;
+                                    setContext[keyPath] = {
+                                        name: keyNode.name,
+                                        ref: ref,
+                                    };
+                                }
+                            }
                         }
                     }
                     else if (expression.callee.name === 'onMount' ||
                         expression.callee.name === 'useEffect') {
                         var firstArg = expression.arguments[0];
-                        if (types.isFunctionExpression(firstArg) ||
-                            types.isArrowFunctionExpression(firstArg)) {
+                        if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
                             var code = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
                                 // Remove arbitrary block wrapping if any
@@ -218,8 +243,7 @@ var componentFunctionToJson = function (node, context) {
                     else if (expression.callee.name === 'onUpdate') {
                         var firstArg = expression.arguments[0];
                         var secondArg = expression.arguments[1];
-                        if (types.isFunctionExpression(firstArg) ||
-                            types.isArrowFunctionExpression(firstArg)) {
+                        if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
                             var code = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
                                 // Remove arbitrary block wrapping if any
@@ -228,8 +252,7 @@ var componentFunctionToJson = function (node, context) {
                                 .replace(/^{/, '')
                                 .replace(/}$/, '');
                             if (!secondArg ||
-                                (types.isArrayExpression(secondArg) &&
-                                    secondArg.elements.length > 0)) {
+                                (types.isArrayExpression(secondArg) && secondArg.elements.length > 0)) {
                                 var depsCode = secondArg ? (0, generator_1.default)(secondArg).code : '';
                                 hooks.onUpdate = __spreadArray(__spreadArray([], (hooks.onUpdate || []), true), [
                                     {
@@ -242,8 +265,7 @@ var componentFunctionToJson = function (node, context) {
                     }
                     else if (expression.callee.name === 'onUnMount') {
                         var firstArg = expression.arguments[0];
-                        if (types.isFunctionExpression(firstArg) ||
-                            types.isArrowFunctionExpression(firstArg)) {
+                        if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
                             var code = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
                                 // Remove arbitrary block wrapping if any
@@ -256,8 +278,7 @@ var componentFunctionToJson = function (node, context) {
                     }
                     else if (expression.callee.name === 'onInit') {
                         var firstArg = expression.arguments[0];
-                        if (types.isFunctionExpression(firstArg) ||
-                            types.isArrowFunctionExpression(firstArg)) {
+                        if (types.isFunctionExpression(firstArg) || types.isArrowFunctionExpression(firstArg)) {
                             var code = (0, generator_1.default)(firstArg.body)
                                 .code.trim()
                                 // Remove arbitrary block wrapping if any
@@ -283,8 +304,7 @@ var componentFunctionToJson = function (node, context) {
                 // React format, like:
                 // const [foo, setFoo] = useState(...)
                 if (types.isArrayPattern(declaration.id)) {
-                    var varName = types.isIdentifier(declaration.id.elements[0]) &&
-                        declaration.id.elements[0].name;
+                    var varName = types.isIdentifier(declaration.id.elements[0]) && declaration.id.elements[0].name;
                     if (varName) {
                         var value = init.arguments[0];
                         // Function as init, like:
@@ -300,18 +320,17 @@ var componentFunctionToJson = function (node, context) {
                     }
                 }
                 // Legacy format, like:
-                // const state = useState({...})
+                // const state = useStore({...})
                 else if (types.isIdentifier(init.callee)) {
-                    if (init.callee.name === 'useState') {
+                    if (init.callee.name === hooks_1.HOOKS.STATE || init.callee.name === hooks_1.HOOKS.STORE) {
                         var firstArg = init.arguments[0];
                         if (types.isObjectExpression(firstArg)) {
-                            state = (0, exports.parseStateObject)(firstArg);
+                            Object.assign(state, (0, exports.parseStateObject)(firstArg));
                         }
                     }
-                    else if (init.callee.name === 'useContext') {
+                    else if (init.callee.name === hooks_1.HOOKS.CONTEXT) {
                         var firstArg = init.arguments[0];
-                        if (types.isVariableDeclarator(declaration) &&
-                            types.isIdentifier(declaration.id)) {
+                        if (types.isVariableDeclarator(declaration) && types.isIdentifier(declaration.id)) {
                             if (types.isIdentifier(firstArg)) {
                                 var varName = declaration.id.name;
                                 var name_1 = firstArg.name;
@@ -320,15 +339,34 @@ var componentFunctionToJson = function (node, context) {
                                     path: (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(context.builder.component.imports, name_1),
                                 };
                             }
+                            else {
+                                var varName = declaration.id.name;
+                                var name_2 = (0, generator_1.default)(firstArg).code;
+                                accessedContext[varName] = {
+                                    name: name_2,
+                                    path: '',
+                                };
+                            }
+                        }
+                    }
+                    else if (init.callee.name === hooks_1.HOOKS.REF) {
+                        if (types.isIdentifier(declaration.id)) {
+                            var firstArg = init.arguments[0];
+                            var varName = declaration.id.name;
+                            refs[varName] = {
+                                argument: (0, generator_1.default)(firstArg).code,
+                            };
+                            // Typescript Parameter
+                            if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
+                                refs[varName].typeParameter = (0, generator_1.default)(init.typeParameters.params[0]).code;
+                            }
                         }
                     }
                 }
             }
         }
     }
-    var theReturn = node.body.body.find(function (item) {
-        return types.isReturnStatement(item);
-    });
+    var theReturn = node.body.body.find(function (item) { return types.isReturnStatement(item); });
     var children = [];
     if (theReturn) {
         var value = theReturn.argument;
@@ -336,10 +374,19 @@ var componentFunctionToJson = function (node, context) {
             children.push(jsxElementToJson(value));
         }
     }
-    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: {
+    var localExports = context.builder.component.exports;
+    if (localExports) {
+        var bindingsCode_1 = (0, get_bindings_1.getBindingsCode)(children);
+        Object.keys(localExports).forEach(function (name) {
+            var found = bindingsCode_1.find(function (code) { return code.match(new RegExp("\\b".concat(name, "\\b"))); });
+            localExports[name].usedInLocal = Boolean(found);
+        });
+        context.builder.component.exports = localExports;
+    }
+    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, refs: refs, hooks: hooks, context: {
             get: accessedContext,
             set: setContext,
-        } }));
+        }, propsTypeRef: getPropsTypeRef(node) }));
 };
 var jsxElementToJson = function (node) {
     if (types.isJSXText(node)) {
@@ -422,9 +469,7 @@ var jsxElementToJson = function (node) {
     if (types.isJSXFragment(node)) {
         return (0, create_mitosis_node_1.createMitosisNode)({
             name: 'Fragment',
-            children: node.children
-                .map(function (item) { return jsxElementToJson(item); })
-                .filter(Boolean),
+            children: node.children.map(function (item) { return jsxElementToJson(item); }).filter(Boolean),
         });
     }
     var nodeName = (0, generator_1.default)(node.openingElement.name).code;
@@ -443,16 +488,12 @@ var jsxElementToJson = function (node) {
                 else: elseValue || undefined,
             },
             bindings: __assign({}, (whenValue ? { when: { code: whenValue } } : {})),
-            children: node.children
-                .map(function (item) { return jsxElementToJson(item); })
-                .filter(Boolean),
+            children: node.children.map(function (item) { return jsxElementToJson(item); }).filter(Boolean),
         });
     }
     // <For ...> control flow component
     if (nodeName === 'For') {
-        var child = node.children.find(function (item) {
-            return types.isJSXExpressionContainer(item);
-        });
+        var child = node.children.find(function (item) { return types.isJSXExpressionContainer(item); });
         if (types.isJSXExpressionContainer(child)) {
             var childExpression = child.expression;
             if (types.isArrowFunctionExpression(childExpression)) {
@@ -461,8 +502,8 @@ var jsxElementToJson = function (node) {
                     name: 'For',
                     bindings: {
                         each: {
-                            code: (0, generator_1.default)(node.openingElement
-                                .attributes[0].value.expression).code,
+                            code: (0, generator_1.default)(node.openingElement.attributes[0]
+                                .value.expression).code,
                         },
                     },
                     scope: {
@@ -524,9 +565,7 @@ var jsxElementToJson = function (node) {
             }
             return memo;
         }, {}),
-        children: node.children
-            .map(function (item) { return jsxElementToJson(item); })
-            .filter(Boolean),
+        children: node.children.map(function (item) { return jsxElementToJson(item); }).filter(Boolean),
     });
 };
 var getHook = function (node) {
@@ -645,8 +684,7 @@ function mapReactIdentifiers(json) {
 }
 var expressionToNode = function (str) {
     var code = "export default ".concat(str);
-    return babel.parse(code).program
-        .body[0].declaration;
+    return babel.parse(code).program.body[0].declaration;
 };
 /**
  * Convert <Context.Provider /> to hooks formats by mutating the
@@ -658,10 +696,10 @@ function extractContextComponents(json) {
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if (item.name.endsWith('.Provider')) {
                 var value = (_b = (_a = item.bindings) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.code;
-                var name_2 = item.name.split('.')[0];
-                var refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name_2);
+                var name_3 = item.name.split('.')[0];
+                var refPath = (0, trace_reference_to_module_path_1.traceReferenceToModulePath)(json.imports, name_3);
                 json.context.set[refPath] = {
-                    name: name_2,
+                    name: name_3,
                     value: value
                         ? (0, exports.parseStateObject)(expressionToNode(value))
                         : undefined,
@@ -679,6 +717,63 @@ function extractContextComponents(json) {
 var isImportOrDefaultExport = function (node) {
     return types.isExportDefaultDeclaration(node) || types.isImportDeclaration(node);
 };
+var isTypeOrInterface = function (node) {
+    return types.isTSTypeAliasDeclaration(node) ||
+        types.isTSInterfaceDeclaration(node) ||
+        (types.isExportNamedDeclaration(node) && types.isTSTypeAliasDeclaration(node.declaration)) ||
+        (types.isExportNamedDeclaration(node) && types.isTSInterfaceDeclaration(node.declaration));
+};
+var collectTypes = function (node, context) {
+    var typeStr = (0, generator_1.default)(node).code;
+    var _a = context.builder.component.types, types = _a === void 0 ? [] : _a;
+    types.push(typeStr);
+    context.builder.component.types = types.filter(Boolean);
+};
+var collectInterfaces = function (node, context) {
+    var interfaceStr = (0, generator_1.default)(node).code;
+    var _a = context.builder.component.interfaces, interfaces = _a === void 0 ? [] : _a;
+    interfaces.push(interfaceStr);
+    context.builder.component.interfaces = interfaces.filter(Boolean);
+};
+var beforeParse = function (path) {
+    path.traverse({
+        FunctionDeclaration: function (path) {
+            undoPropsDestructure(path);
+        },
+    });
+};
+function undoPropsDestructure(path) {
+    var node = path.node;
+    if (node.params.length && types.isObjectPattern(node.params[0])) {
+        var param = node.params[0];
+        var propsMap_1 = param.properties.reduce(function (pre, cur) {
+            if (types.isObjectProperty(cur) &&
+                types.isIdentifier(cur.key) &&
+                types.isIdentifier(cur.value)) {
+                pre[cur.value.name] = "props.".concat(cur.key.name);
+                return pre;
+            }
+            return pre;
+        }, {});
+        if (param.typeAnnotation) {
+            node.params = [
+                __assign(__assign({}, babel.types.identifier('props')), { typeAnnotation: param.typeAnnotation }),
+            ];
+            path.replaceWith(node);
+        }
+        path.traverse({
+            JSXExpressionContainer: function (path) {
+                var node = path.node;
+                if (types.isIdentifier(node.expression)) {
+                    var name_4 = node.expression.name;
+                    if (propsMap_1[name_4]) {
+                        path.replaceWith(babel.types.jsxExpressionContainer(babel.types.identifier(propsMap_1[name_4])));
+                    }
+                }
+            },
+        });
+    }
+}
 /**
  * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
  * each generator function.
@@ -708,17 +803,56 @@ function parseJsx(jsx, options) {
                         if (context.builder) {
                             return;
                         }
+                        beforeParse(path);
                         context.builder = {
                             component: (0, create_mitosis_component_1.createMitosisComponent)(),
                         };
-                        var keepStatements = path.node.body.filter(function (statement) {
-                            return isImportOrDefaultExport(statement);
+                        var keepStatements = path.node.body.filter(function (statement) { return isImportOrDefaultExport(statement) || isTypeOrInterface(statement); });
+                        var exportsOrLocalVariables = path.node.body.filter(function (statement) {
+                            return !isImportOrDefaultExport(statement) &&
+                                !isTypeOrInterface(statement) &&
+                                !types.isExpressionStatement(statement);
                         });
+                        context.builder.component.exports = exportsOrLocalVariables.reduce(function (pre, node) {
+                            var _a, _b;
+                            var name, isFunction;
+                            if (babel.types.isExportNamedDeclaration(node)) {
+                                if (babel.types.isVariableDeclaration(node.declaration) &&
+                                    babel.types.isIdentifier(node.declaration.declarations[0].id)) {
+                                    name = node.declaration.declarations[0].id.name;
+                                    isFunction = babel.types.isFunction(node.declaration.declarations[0].init);
+                                }
+                                if (babel.types.isFunctionDeclaration(node.declaration)) {
+                                    name = (_a = node.declaration.id) === null || _a === void 0 ? void 0 : _a.name;
+                                    isFunction = true;
+                                }
+                            }
+                            else {
+                                if (babel.types.isVariableDeclaration(node) &&
+                                    babel.types.isIdentifier(node.declarations[0].id)) {
+                                    name = node.declarations[0].id.name;
+                                    isFunction = babel.types.isFunction(node.declarations[0].init);
+                                }
+                                if (babel.types.isFunctionDeclaration(node)) {
+                                    name = (_b = node.id) === null || _b === void 0 ? void 0 : _b.name;
+                                    isFunction = true;
+                                }
+                            }
+                            if (name) {
+                                pre[name] = {
+                                    code: (0, generator_1.default)(node).code,
+                                    isFunction: isFunction,
+                                };
+                            }
+                            else {
+                                console.warn('Could not parse export or variable: ignoring node', node);
+                            }
+                            return pre;
+                        }, {});
                         var cutStatements = path.node.body.filter(function (statement) { return !isImportOrDefaultExport(statement); });
                         subComponentFunctions = path.node.body
                             .filter(function (node) {
-                            return !types.isExportDefaultDeclaration(node) &&
-                                types.isFunctionDeclaration(node);
+                            return !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node);
                         })
                             .map(function (node) { return "export default ".concat((0, generator_1.default)(node).code); });
                         cutStatements = collectMetadata(cutStatements, context.builder.component, useOptions);
@@ -731,15 +865,16 @@ function parseJsx(jsx, options) {
                     FunctionDeclaration: function (path, context) {
                         var node = path.node;
                         if (types.isIdentifier(node.id)) {
-                            var name_3 = node.id.name;
-                            if (name_3[0].toUpperCase() === name_3[0]) {
+                            var name_5 = node.id.name;
+                            if (name_5[0].toUpperCase() === name_5[0]) {
                                 path.replaceWith(jsonToAst(componentFunctionToJson(node, context)));
                             }
                         }
                     },
                     ImportDeclaration: function (path, context) {
                         // @builder.io/mitosis or React imports compile away
-                        if (['react', '@builder.io/mitosis', '@emotion/react'].includes(path.node.source.value)) {
+                        var customPackages = (options === null || options === void 0 ? void 0 : options.compileAwayPackages) || [];
+                        if (__spreadArray(['react', '@builder.io/mitosis', '@emotion/react'], customPackages, true).includes(path.node.source.value)) {
                             path.remove();
                             return;
                         }
@@ -750,7 +885,8 @@ function parseJsx(jsx, options) {
                         for (var _i = 0, _a = path.node.specifiers; _i < _a.length; _i++) {
                             var specifier = _a[_i];
                             if (types.isImportSpecifier(specifier)) {
-                                importObject.imports[specifier.imported.name] = specifier.local.name;
+                                importObject.imports[specifier.imported.name] =
+                                    specifier.local.name;
                             }
                             else if (types.isImportDefaultSpecifier(specifier)) {
                                 importObject.imports[specifier.local.name] = 'default';
@@ -769,6 +905,22 @@ function parseJsx(jsx, options) {
                         var node = path.node;
                         path.replaceWith(jsonToAst(jsxElementToJson(node)));
                     },
+                    ExportNamedDeclaration: function (path, context) {
+                        var node = path.node;
+                        var newTypeStr = (0, generator_1.default)(node).code;
+                        if (babel.types.isTSInterfaceDeclaration(node.declaration)) {
+                            collectInterfaces(path.node, context);
+                        }
+                        if (babel.types.isTSTypeAliasDeclaration(node.declaration)) {
+                            collectTypes(path.node, context);
+                        }
+                    },
+                    TSTypeAliasDeclaration: function (path, context) {
+                        collectTypes(path.node, context);
+                    },
+                    TSInterfaceDeclaration: function (path, context) {
+                        collectInterfaces(path.node, context);
+                    },
                 },
             }); },
         ],
@@ -785,9 +937,7 @@ function parseJsx(jsx, options) {
     var parsed = (0, json_1.tryParseJson)(toParse);
     mapReactIdentifiers(parsed);
     extractContextComponents(parsed);
-    parsed.subComponents = subComponentFunctions.map(function (item) {
-        return parseJsx(item, useOptions);
-    });
+    parsed.subComponents = subComponentFunctions.map(function (item) { return parseJsx(item, useOptions); });
     return parsed;
 }
 exports.parseJsx = parseJsx;