@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/parsers/jsx/hooks/use-metadata.js

@@ -0,0 +1,184 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveMetadata = void 0;
+const mitosis_imports_1 = require("../../../helpers/mitosis-imports");
+const helpers_1 = require("../../../parsers/jsx/helpers");
+const babel = __importStar(require("@babel/core"));
+const fs_1 = require("fs");
+const path = __importStar(require("path"));
+const getCodeFromImport = (importObject, currentFile) => {
+    if (currentFile) {
+        // resolve path of import
+        const originFile = path.basename(currentFile);
+        const typescript = (0, helpers_1.isTypescriptFile)(originFile);
+        const importFile = (0, helpers_1.isTypescriptFile)(importObject.path) || importObject.path.endsWith('.js')
+            ? importObject.path
+            : `${importObject.path}.${typescript ? 'ts' : 'js'}`;
+        const importFilePath = path.resolve(path.dirname(currentFile), importFile);
+        if ((0, fs_1.existsSync)(importFilePath)) {
+            return { code: (0, fs_1.readFileSync)(importFilePath).toString(), typescript, importFilePath };
+        }
+        return { typescript };
+    }
+    return {};
+};
+const fillDeclarations = ({ declaration, valueToResolve, currentFilePath, nodePath, }) => {
+    let result = {};
+    for (const variable of declaration.declarations) {
+        if (babel.types.isIdentifier(variable.id)) {
+            if (variable.id.name === valueToResolve && variable.init) {
+                const filled = resolveObjectsRecursive({
+                    node: variable.init,
+                    nodePath,
+                    currentFilePath,
+                });
+                result = {
+                    ...result,
+                    ...filled,
+                };
+            }
+        }
+    }
+    return result;
+};
+const resolve = ({ nodePath, currentFilePath, valueToResolve, resolvedImports, }) => {
+    let result = {};
+    const programNodes = nodePath.node.body;
+    for (const statement of programNodes) {
+        if (babel.types.isImportDeclaration(statement)) {
+            const importObject = (0, mitosis_imports_1.mapImportDeclarationToMitosisImport)(statement);
+            if (Object.keys(importObject.imports).includes(valueToResolve)) {
+                if (resolvedImports) {
+                    // We add this statement, to remove it from imports of generated file
+                    resolvedImports.push({ path: importObject.path, value: valueToResolve });
+                }
+                // In this case the variable was imported
+                const { code, typescript, importFilePath } = getCodeFromImport(importObject, currentFilePath);
+                if (code) {
+                    const jsxToUse = (0, helpers_1.babelStripTypes)(code, typescript);
+                    (0, helpers_1.babelDefaultTransform)(jsxToUse, {
+                        Program(path) {
+                            const statements = path.node.body;
+                            for (const pStatement of statements) {
+                                if (babel.types.isExportNamedDeclaration(pStatement)) {
+                                    const declaration = pStatement.declaration;
+                                    if (babel.types.isVariableDeclaration(declaration)) {
+                                        const filledDeclaration = fillDeclarations({
+                                            declaration,
+                                            valueToResolve,
+                                            currentFilePath: importFilePath,
+                                            nodePath: path,
+                                        });
+                                        result = {
+                                            ...result,
+                                            ...filledDeclaration,
+                                        };
+                                    }
+                                }
+                            }
+                        },
+                    });
+                }
+            }
+        }
+        else if (babel.types.isVariableDeclaration(statement)) {
+            // In this case the variable is inside the same file
+            const filledDeclaration = fillDeclarations({
+                declaration: statement,
+                valueToResolve,
+                currentFilePath,
+                nodePath,
+            });
+            result = {
+                ...result,
+                ...filledDeclaration,
+            };
+        }
+    }
+    return result;
+};
+const resolveObjectsRecursive = ({ node, nodePath, currentFilePath, resolvedImports, }) => {
+    let result = {};
+    if (babel.types.isObjectExpression(node)) {
+        for (const prop of node.properties) {
+            if (babel.types.isObjectProperty(prop)) {
+                if (babel.types.isIdentifier(prop.key)) {
+                    const objectKey = prop.key.name;
+                    if (babel.types.isIdentifier(prop.value)) {
+                        const valueToResolve = prop.value.name;
+                        // In this case we have some variable defined in the same or another file
+                        const resolved = resolve({
+                            nodePath,
+                            currentFilePath,
+                            valueToResolve,
+                            resolvedImports,
+                        });
+                        result = {
+                            ...result,
+                            [objectKey]: { ...resolved },
+                        };
+                    }
+                    else {
+                        // In this case we have a primitive value
+                        const json = (0, helpers_1.parseCodeJson)(prop.value);
+                        result = {
+                            ...result,
+                            [objectKey]: json,
+                        };
+                    }
+                }
+            }
+            else if (babel.types.isSpreadElement(prop)) {
+                if (babel.types.isIdentifier(prop.argument)) {
+                    const valueToResolve = prop.argument.name;
+                    result = {
+                        ...result,
+                        ...resolve({ nodePath, currentFilePath, valueToResolve }),
+                    };
+                }
+            }
+            else {
+                // In this case we have a primitive value
+                result = {
+                    ...result,
+                    ...(0, helpers_1.parseCodeJson)(prop),
+                };
+            }
+        }
+    }
+    return result;
+};
+const resolveMetadata = ({ context, node, nodePath, options, }) => {
+    if (context.cwd && (options === null || options === void 0 ? void 0 : options.filePath)) {
+        const resolvedImports = [];
+        const currentFilePath = `${context.cwd}/${options.filePath}`;
+        const metadata = resolveObjectsRecursive({ node, nodePath, currentFilePath, resolvedImports });
+        context.builder.resolvedImports = resolvedImports;
+        return metadata;
+    }
+    return {};
+};
+exports.resolveMetadata = resolveMetadata;

package/dist/src/parsers/jsx/hooks/use-target.d.ts

@@ -0,0 +1,13 @@
+import * as babel from '@babel/core';
+import { MitosisComponent, TargetBlockDefinition } from '../../../types/mitosis-component';
+declare const types: typeof babel.types;
+export declare const getTargetId: (component: MitosisComponent) => string;
+export declare const getMagicString: (targetId: string) => string;
+export declare const USE_TARGET_MAGIC_STRING = "USE_TARGET_BLOCK_";
+export declare const USE_TARGET_MAGIC_REGEX: RegExp;
+export declare const getIdFromMatch: (match: string) => string | undefined;
+/**
+ * This function finds `useTarget()` and converts it our JSON representation
+ */
+export declare const getUseTargetStatements: (path: babel.NodePath<babel.types.CallExpression>) => TargetBlockDefinition | undefined;
+export {};

package/dist/src/parsers/jsx/hooks/use-target.js

@@ -0,0 +1,135 @@
+"use strict";
+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.getUseTargetStatements = exports.getIdFromMatch = exports.USE_TARGET_MAGIC_REGEX = exports.USE_TARGET_MAGIC_STRING = exports.getMagicString = exports.getTargetId = void 0;
+const babel = __importStar(require("@babel/core"));
+const generator_1 = __importDefault(require("@babel/generator"));
+const TARGETS = {
+    alpine: null,
+    angular: null,
+    customElement: null,
+    html: null,
+    mitosis: null,
+    liquid: null,
+    react: null,
+    reactNative: null,
+    solid: null,
+    svelte: null,
+    swift: null,
+    template: null,
+    webcomponent: null,
+    vue: null,
+    stencil: null,
+    qwik: null,
+    marko: null,
+    preact: null,
+    lit: null,
+    rsc: null,
+    taro: null,
+};
+const { types } = babel;
+const getTargetId = (component) => {
+    const latestId = Object.keys(component.targetBlocks || {}).length;
+    const blockId = (latestId + 1).toString();
+    return blockId;
+};
+exports.getTargetId = getTargetId;
+const getMagicString = (targetId) => [exports.USE_TARGET_MAGIC_STRING, targetId].join('');
+exports.getMagicString = getMagicString;
+exports.USE_TARGET_MAGIC_STRING = 'USE_TARGET_BLOCK_';
+// check for uuid.v4() format
+const idRegex = /\d*/;
+const REGEX_BLOCK_NAME = 'blockId';
+exports.USE_TARGET_MAGIC_REGEX = new RegExp(
+// make sure to capture the id of the target block
+`["']${exports.USE_TARGET_MAGIC_STRING}\(?<${REGEX_BLOCK_NAME}>${idRegex.source}\)["']`, 'g');
+const getIdFromMatch = (match) => {
+    var _a;
+    const USE_TARGET_MAGIC_REGEX_WITHOUT_G = new RegExp(`["']${exports.USE_TARGET_MAGIC_STRING}\(?<${REGEX_BLOCK_NAME}>${idRegex.source}\)["']`);
+    const result = match.match(USE_TARGET_MAGIC_REGEX_WITHOUT_G);
+    if (!result)
+        return undefined;
+    return (_a = result.groups) === null || _a === void 0 ? void 0 : _a[REGEX_BLOCK_NAME];
+};
+exports.getIdFromMatch = getIdFromMatch;
+/**
+ * This function finds `useTarget()` and converts it our JSON representation
+ */
+const getUseTargetStatements = (path) => {
+    const useTargetHook = path.node;
+    const obj = useTargetHook.arguments[0];
+    if (!types.isObjectExpression(obj))
+        return undefined;
+    const isInlinedCodeInsideFunctionBody = types.isExpressionStatement(path.parent) && types.isBlockStatement(path.parentPath.parent);
+    const targetBlock = {
+        settings: {
+            requiresDefault: !isInlinedCodeInsideFunctionBody,
+        },
+    };
+    obj.properties.forEach((prop) => {
+        if (!types.isObjectProperty(prop)) {
+            throw new Error('ERROR Parsing `useTarget()`: properties cannot be spread or references');
+        }
+        if (!types.isIdentifier(prop.key)) {
+            throw new Error('ERROR Parsing `useTarget()`: Expected an identifier, instead got: ' + prop.key);
+        }
+        if (!Object.keys(TARGETS).concat('default').includes(prop.key.name)) {
+            throw new Error('ERROR Parsing `useTarget()`: Invalid target: ' + prop.key.name);
+        }
+        const keyName = prop.key.name;
+        const targetCode = prop.value;
+        if (isInlinedCodeInsideFunctionBody) {
+            if (!(types.isArrowFunctionExpression(targetCode) || types.isFunctionExpression(targetCode)))
+                return undefined;
+            const body = targetCode.body;
+            if (types.isBlockStatement(body)) {
+                let code = '';
+                body.body.forEach((statement) => {
+                    code += (0, generator_1.default)(statement).code + '\n';
+                });
+                targetBlock[keyName] = {
+                    code,
+                };
+            }
+            else {
+                targetBlock[keyName] = {
+                    code: (0, generator_1.default)(body).code,
+                };
+            }
+        }
+        else {
+            if (!types.isExpression(targetCode))
+                return undefined;
+            targetBlock[keyName] = {
+                code: (0, generator_1.default)(targetCode).code,
+            };
+        }
+    });
+    return Object.keys(targetBlock).length ? targetBlock : undefined;
+};
+exports.getUseTargetStatements = getUseTargetStatements;

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

@@ -0,0 +1,7 @@
+import * as babel from '@babel/core';
+import { Context, ParseMitosisOptions } from './types';
+export declare const handleImportDeclaration: ({ options, path, context, }: {
+    options: Partial<ParseMitosisOptions>;
+    path: babel.NodePath<babel.types.ImportDeclaration>;
+    context: Context;
+}) => void;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleImportDeclaration = void 0;
+const mitosis_imports_1 = require("../../helpers/mitosis-imports");
+const handleImportDeclaration = ({ options, path, context, }) => {
+    var _a;
+    // @builder.io/mitosis or React imports compile away
+    const customPackages = (options === null || options === void 0 ? void 0 : options.compileAwayPackages) || [];
+    if (['react', '@builder.io/mitosis', '@emotion/react', ...customPackages].includes(path.node.source.value)) {
+        path.remove();
+        return;
+    }
+    const importObject = (0, mitosis_imports_1.mapImportDeclarationToMitosisImport)(path.node);
+    const resolvedImport = (_a = context.builder.resolvedImports) === null || _a === void 0 ? void 0 : _a.find((rImport) => rImport.path === importObject.path);
+    if (resolvedImport) {
+        delete importObject.imports[resolvedImport.value];
+    }
+    if (Object.keys(importObject.imports).length > 0) {
+        context.builder.component.imports.push(importObject);
+    }
+    path.remove();
+};
+exports.handleImportDeclaration = handleImportDeclaration;

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

@@ -0,0 +1,2 @@
+export { parseJsx } from './jsx';
+export { ParseMitosisOptions } from './types';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseJsx = void 0;
+var jsx_1 = require("./jsx");
+Object.defineProperty(exports, "parseJsx", { enumerable: true, get: function () { return jsx_1.parseJsx; } });

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

@@ -0,0 +1,10 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { ParseMitosisOptions } from './types';
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
+export declare function parseJsx(jsx: string, _options?: Partial<ParseMitosisOptions>): MitosisComponent;

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

@@ -0,0 +1,227 @@
+"use strict";
+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.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 preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
+const function_1 = require("fp-ts/lib/function");
+const ast_1 = require("./ast");
+const component_types_1 = require("./component-types");
+const context_1 = require("./context");
+const element_parser_1 = require("./element-parser");
+const exports_1 = require("./exports");
+const function_parser_1 = require("./function-parser");
+const helpers_1 = require("./helpers");
+const hooks_2 = require("./hooks");
+const use_target_1 = require("./hooks/use-target");
+const imports_1 = require("./imports");
+const props_1 = require("./props");
+const props_types_1 = require("./props-types");
+const signals_2 = require("./signals");
+const state_1 = require("./state");
+const { types } = babel;
+const typescriptBabelPreset = [preset_typescript_1.default, { isTSX: true, allExtensions: true }];
+const beforeParse = (path) => {
+    path.traverse({
+        FunctionDeclaration(path) {
+            (0, props_1.undoPropsDestructure)(path);
+        },
+    });
+};
+/**
+ * This function takes the raw string from a Mitosis component, and converts it into a JSON that can be processed by
+ * each generator function.
+ *
+ * @param jsx string representation of the Mitosis component
+ * @returns A JSON representation of the Mitosis component
+ */
+function parseJsx(jsx, _options = {}) {
+    let subComponentFunctions = [];
+    const options = {
+        typescript: false,
+        ..._options,
+    };
+    const stateToScope = [];
+    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, options)));
+                }
+            }
+        },
+        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, _options)));
+        },
+        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');
+    }
+    const stringifiedMitosisComponent = (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*/, '')
+        // Weird bug with adding a newline in a normal at end of a normal string that can't have one
+        // If not one-off find full solve and cause
+        .replace(/\n"/g, '"')
+        .replace(/^\({/, '{')
+        .replace(/}\);$/, '}'));
+    const mitosisComponent = (0, json_1.tryParseJson)(stringifiedMitosisComponent);
+    (0, state_1.mapStateIdentifiers)(mitosisComponent, stateToScope);
+    (0, context_1.extractContextComponents)(mitosisComponent);
+    mitosisComponent.subComponents = subComponentFunctions.map((item) => parseJsx(item, options));
+    const signalTypeImportName = (0, signals_1.getSignalImportName)(jsxToUse);
+    if (signalTypeImportName) {
+        mitosisComponent.signals = { signalTypeImportName };
+    }
+    if (options.tsProject && options.filePath) {
+        // identify optional props.
+        const optionalProps = (0, props_types_1.findOptionalProps)({
+            project: options.tsProject.project,
+            filePath: options.filePath,
+        });
+        optionalProps.forEach((prop) => {
+            var _a;
+            mitosisComponent.props = {
+                ...mitosisComponent.props,
+                [prop]: {
+                    ...(_a = mitosisComponent.props) === null || _a === void 0 ? void 0 : _a[prop],
+                    optional: true,
+                },
+            };
+        });
+        const reactiveValues = (0, signals_2.findSignals)({
+            filePath: options.filePath,
+            project: options.tsProject.project,
+        });
+        reactiveValues.props.forEach((prop) => {
+            var _a;
+            mitosisComponent.props = {
+                ...mitosisComponent.props,
+                [prop]: {
+                    ...(_a = mitosisComponent.props) === null || _a === void 0 ? void 0 : _a[prop],
+                    propertyType: 'reactive',
+                },
+            };
+        });
+        reactiveValues.state.forEach((state) => {
+            if (!mitosisComponent.state[state])
+                return;
+            mitosisComponent.state[state].propertyType = 'reactive';
+        });
+        reactiveValues.context.forEach((context) => {
+            if (!mitosisComponent.context.get[context])
+                return;
+            mitosisComponent.context.get[context].type = 'reactive';
+        });
+    }
+    (0, traverse_nodes_1.traverseNodes)(mitosisComponent, (node) => {
+        node.children = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+    });
+    return mitosisComponent;
+}
+exports.parseJsx = parseJsx;

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

@@ -0,0 +1,5 @@
+import { Project } from 'ts-morph';
+export declare const findOptionalProps: (args: {
+    project: Project;
+    filePath: string;
+}) => string[];

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findOptionalProps = void 0;
+const ts_morph_1 = require("ts-morph");
+const typescript_project_1 = require("../../helpers/typescript-project");
+const findOptionalProps = (args) => {
+    const ast = args.project.getSourceFileOrThrow(args.filePath);
+    if (ast === undefined) {
+        throw new Error('Could not find AST. Please provide either `code` or `filePath` configs.');
+    }
+    const propsSymbol = (0, typescript_project_1.getPropsSymbol)(ast);
+    if (!propsSymbol)
+        return [];
+    return propsSymbol
+        .getDeclarations()[0]
+        .getType()
+        .getProperties()
+        .map((p) => p.getDeclarations()[0])
+        .filter((k) => ts_morph_1.PropertySignature.isPropertySignature(k) && k.hasQuestionToken())
+        .map((k) => k.getName());
+};
+exports.findOptionalProps = findOptionalProps;

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

@@ -0,0 +1,2 @@
+import * as babel from '@babel/core';
+export declare function undoPropsDestructure(path: babel.NodePath<babel.types.FunctionDeclaration>): void;