@builder.io/mitosis 0.5.24 → 0.5.25

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

@@ -27,18 +27,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseJsx = void 0;
+const hooks_1 = require("../../constants/hooks");
+const create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const json_1 = require("../../helpers/json");
+const replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
+const signals_1 = require("../../helpers/signals");
 const traverse_nodes_1 = require("../../helpers/traverse-nodes");
 const babel = __importStar(require("@babel/core"));
 const generator_1 = __importDefault(require("@babel/generator"));
-const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 const preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
 const function_1 = require("fp-ts/lib/function");
-const hooks_1 = require("../../constants/hooks");
-const create_mitosis_component_1 = require("../../helpers/create-mitosis-component");
-const json_1 = require("../../helpers/json");
-const replace_new_lines_in_strings_1 = require("../../helpers/replace-new-lines-in-strings");
-const signals_1 = require("../../helpers/signals");
 const ast_1 = require("./ast");
 const component_types_1 = require("./component-types");
 const context_1 = require("./context");
@@ -70,112 +69,94 @@ const beforeParse = (path) => {
  * @returns A JSON representation of the Mitosis component
  */
 function parseJsx(jsx, _options = {}) {
-    var _a;
     let subComponentFunctions = [];
     const options = {
         typescript: false,
         ..._options,
     };
-    const jsxToUse = options.typescript
-        ? jsx
-        : // strip typescript types by running through babel's TS preset.
-            (_a = babel.transform(jsx, {
-                configFile: false,
-                babelrc: false,
-                presets: [typescriptBabelPreset],
-            })) === null || _a === void 0 ? void 0 : _a.code;
     const stateToScope = [];
-    const output = babel.transform(jsxToUse, {
-        configFile: false,
-        babelrc: false,
-        comments: false,
-        plugins: [
-            [plugin_syntax_typescript_1.default, { isTSX: true }],
-            () => ({
-                visitor: {
-                    JSXExpressionContainer(path, context) {
-                        if (types.isJSXEmptyExpression(path.node.expression)) {
-                            path.remove();
-                        }
-                    },
-                    Program(path, context) {
-                        if (context.builder) {
-                            return;
-                        }
-                        beforeParse(path);
-                        context.builder = {
-                            component: (0, create_mitosis_component_1.createMitosisComponent)(),
-                        };
-                        const keepStatements = path.node.body.filter((statement) => (0, helpers_1.isImportOrDefaultExport)(statement) || (0, component_types_1.isTypeOrInterface)(statement));
-                        context.builder.component.exports = (0, exports_1.generateExports)(path);
-                        subComponentFunctions = path.node.body
-                            .filter((node) => !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node))
-                            .map((node) => `export default ${(0, generator_1.default)(node).code}`);
-                        const preComponentCode = (0, function_1.pipe)(path.node.body.filter((statement) => !(0, helpers_1.isImportOrDefaultExport)(statement)), (0, hooks_2.collectModuleScopeHooks)(context.builder.component, options), types.program, generator_1.default, (generatorResult) => generatorResult.code);
-                        // TODO: support multiple? e.g. for others to add imports?
-                        context.builder.component.hooks.preComponent = { code: preComponentCode };
-                        path.replaceWith(types.program(keepStatements));
-                    },
-                    FunctionDeclaration(path, context) {
-                        const { node } = path;
-                        if (types.isIdentifier(node.id)) {
-                            const name = node.id.name;
-                            if (name[0].toUpperCase() === name[0]) {
-                                path.traverse({
-                                    /**
-                                     * Plugin to find all `useTarget()` assignment calls inside of the component function body
-                                     * and replace them with a magic string.
-                                     */
-                                    CallExpression(path) {
-                                        if (!types.isCallExpression(path.node))
-                                            return;
-                                        if (!types.isIdentifier(path.node.callee))
-                                            return;
-                                        if (path.node.callee.name !== hooks_1.HOOKS.TARGET)
-                                            return;
-                                        const targetBlock = (0, use_target_1.getUseTargetStatements)(path);
-                                        if (!targetBlock)
-                                            return;
-                                        const blockId = (0, use_target_1.getTargetId)(context.builder.component);
-                                        // replace the useTarget() call with a magic string
-                                        path.replaceWith(types.stringLiteral((0, use_target_1.getMagicString)(blockId)));
-                                        // store the target block in the component
-                                        context.builder.component.targetBlocks = {
-                                            ...context.builder.component.targetBlocks,
-                                            [blockId]: targetBlock,
-                                        };
-                                    },
-                                });
-                                path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context, stateToScope)));
-                            }
-                        }
-                    },
-                    ImportDeclaration(path, context) {
-                        (0, imports_1.handleImportDeclaration)({ options, path, context });
-                    },
-                    ExportDefaultDeclaration(path) {
-                        path.replaceWith(path.node.declaration);
-                    },
-                    JSXElement(path) {
-                        const { node } = path;
-                        path.replaceWith((0, ast_1.jsonToAst)((0, element_parser_1.jsxElementToJson)(node)));
-                    },
-                    ExportNamedDeclaration(path, context) {
-                        const { node } = path;
-                        if (babel.types.isTSInterfaceDeclaration(node.declaration) ||
-                            babel.types.isTSTypeAliasDeclaration(node.declaration)) {
-                            (0, component_types_1.collectTypes)(path, context);
-                        }
-                    },
-                    TSTypeAliasDeclaration(path, context) {
-                        (0, component_types_1.collectTypes)(path, context);
-                    },
-                    TSInterfaceDeclaration(path, context) {
-                        (0, component_types_1.collectTypes)(path, context);
-                    },
-                },
-            }),
-        ],
+    const jsxToUse = (0, helpers_1.babelStripTypes)(jsx, !options.typescript);
+    const output = (0, helpers_1.babelDefaultTransform)(jsxToUse, {
+        JSXExpressionContainer(path, context) {
+            if (types.isJSXEmptyExpression(path.node.expression)) {
+                path.remove();
+            }
+        },
+        Program(path, context) {
+            if (context.builder) {
+                return;
+            }
+            beforeParse(path);
+            context.builder = {
+                component: (0, create_mitosis_component_1.createMitosisComponent)(),
+            };
+            const keepStatements = path.node.body.filter((statement) => (0, helpers_1.isImportOrDefaultExport)(statement) || (0, component_types_1.isTypeOrInterface)(statement));
+            context.builder.component.exports = (0, exports_1.generateExports)(path);
+            subComponentFunctions = path.node.body
+                .filter((node) => !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node))
+                .map((node) => `export default ${(0, generator_1.default)(node).code}`);
+            const preComponentCode = (0, function_1.pipe)(path, (0, hooks_2.collectModuleScopeHooks)(context, options), types.program, generator_1.default, (generatorResult) => generatorResult.code);
+            // TODO: support multiple? e.g. for others to add imports?
+            context.builder.component.hooks.preComponent = { code: preComponentCode };
+            path.replaceWith(types.program(keepStatements));
+        },
+        FunctionDeclaration(path, context) {
+            const { node } = path;
+            if (types.isIdentifier(node.id)) {
+                const name = node.id.name;
+                if (name[0].toUpperCase() === name[0]) {
+                    path.traverse({
+                        /**
+                         * Plugin to find all `useTarget()` assignment calls inside of the component function body
+                         * and replace them with a magic string.
+                         */
+                        CallExpression(path) {
+                            if (!types.isCallExpression(path.node))
+                                return;
+                            if (!types.isIdentifier(path.node.callee))
+                                return;
+                            if (path.node.callee.name !== hooks_1.HOOKS.TARGET)
+                                return;
+                            const targetBlock = (0, use_target_1.getUseTargetStatements)(path);
+                            if (!targetBlock)
+                                return;
+                            const blockId = (0, use_target_1.getTargetId)(context.builder.component);
+                            // replace the useTarget() call with a magic string
+                            path.replaceWith(types.stringLiteral((0, use_target_1.getMagicString)(blockId)));
+                            // store the target block in the component
+                            context.builder.component.targetBlocks = {
+                                ...context.builder.component.targetBlocks,
+                                [blockId]: targetBlock,
+                            };
+                        },
+                    });
+                    path.replaceWith((0, ast_1.jsonToAst)((0, function_parser_1.componentFunctionToJson)(node, context, stateToScope)));
+                }
+            }
+        },
+        ImportDeclaration(path, context) {
+            (0, imports_1.handleImportDeclaration)({ options, path, context });
+        },
+        ExportDefaultDeclaration(path) {
+            path.replaceWith(path.node.declaration);
+        },
+        JSXElement(path) {
+            const { node } = path;
+            path.replaceWith((0, ast_1.jsonToAst)((0, element_parser_1.jsxElementToJson)(node)));
+        },
+        ExportNamedDeclaration(path, context) {
+            const { node } = path;
+            if (babel.types.isTSInterfaceDeclaration(node.declaration) ||
+                babel.types.isTSTypeAliasDeclaration(node.declaration)) {
+                (0, component_types_1.collectTypes)(path, context);
+            }
+        },
+        TSTypeAliasDeclaration(path, context) {
+            (0, component_types_1.collectTypes)(path, context);
+        },
+        TSInterfaceDeclaration(path, context) {
+            (0, component_types_1.collectTypes)(path, context);
+        },
     });
     if (!output || !output.code) {
         throw new Error('Could not parse JSX');

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

@@ -1,5 +1,5 @@
-import { Project } from 'ts-morph';
 import { MitosisComponent } from '../../types/mitosis-component';
+import { Project } from 'ts-morph';
 export type ParseMitosisOptions = {
     jsonHookNames?: string[];
     compileAwayPackages?: string[];
@@ -9,8 +9,14 @@ export type ParseMitosisOptions = {
     };
     filePath?: string;
 };
+export type ResolvedImport = {
+    path: string;
+    value: string;
+};
 export type Context = {
+    cwd?: string;
     builder: {
         component: MitosisComponent;
+        resolvedImports?: ResolvedImport[];
     };
 };

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.24",
+  "version": "0.5.25",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {