@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/helpers/plugins/process-signals.js

@@ -0,0 +1,179 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSignalAccessPlugin = exports.getSignalTypePlugin = exports.replaceSignalSetters = void 0;
+const core_1 = require("@babel/core");
+const generator_1 = __importDefault(require("@babel/generator"));
+const babel_transform_1 = require("../babel-transform");
+const capitalize_1 = require("../capitalize");
+const nullable_1 = require("../nullable");
+const replace_identifiers_1 = require("../replace-identifiers");
+const signals_1 = require("../signals");
+const process_code_1 = require("./process-code");
+const replaceSignalSetters = ({ code, nodeMaps, }) => {
+    for (const { from, setTo } of nodeMaps) {
+        code = (0, babel_transform_1.babelTransformExpression)(code, {
+            AssignmentExpression(path) {
+                if (path.node.operator !== '=')
+                    return;
+                const lhs = path.node.left;
+                const rhs = path.node.right;
+                if (!core_1.types.isMemberExpression(lhs))
+                    return;
+                if (!(core_1.types.isObjectExpression(rhs) || core_1.types.isIdentifier(rhs)))
+                    return;
+                const signalAccess = lhs.object;
+                if (!core_1.types.isMemberExpression(signalAccess))
+                    return;
+                if ((0, generator_1.default)(signalAccess).code !== (0, generator_1.default)(from).code)
+                    return;
+                /**
+                 * Go from:
+                 *  a.b.c.value.d = e
+                 *
+                 * to:
+                 *  a.b.setC((PREVIOUS_VALUE) => ({ ...PREVIOUS_VALUE, d: e }))
+                 */
+                const setter = core_1.types.cloneNode(setTo);
+                // TO-DO: replace all `value` references inside of the set logic with `PREVIOUS_VALUE`.
+                const prevValueIdentifier = core_1.types.identifier('PREVIOUS_VALUE');
+                const setFn = core_1.types.arrowFunctionExpression([prevValueIdentifier], core_1.types.objectExpression([
+                    core_1.types.spreadElement(prevValueIdentifier),
+                    core_1.types.objectProperty(lhs.property, rhs),
+                ]));
+                const setterExpression = core_1.types.callExpression(setter, [setFn]);
+                path.replaceWith(setterExpression);
+            },
+        });
+    }
+    return code;
+};
+exports.replaceSignalSetters = replaceSignalSetters;
+/**
+ * Processes `Signal` type imports, transforming them to the target's equivalent and adding the import to the component.
+ */
+const getSignalTypePlugin = ({ target }) => () => ({
+    json: {
+        pre: (json) => {
+            var _a;
+            (0, process_code_1.createCodeProcessorPlugin)((codeType, json) => {
+                switch (codeType) {
+                    // Skip these for now because they break for svelte: `<svelte:element>` becomes `<svelte: element>`.
+                    // Besides, fairly impossible to endup with a Signal generic there like `<MyComponent<Signal<number>> />`.
+                    case 'dynamic-jsx-elements':
+                        return (x) => x;
+                    default:
+                        return (code) => {
+                            var _a;
+                            if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
+                                return (0, signals_1.mapSignalType)({
+                                    code,
+                                    signalImportName: json.signals.signalTypeImportName,
+                                    target,
+                                });
+                            }
+                            return code;
+                        };
+                }
+            })(json);
+            if ((_a = json.signals) === null || _a === void 0 ? void 0 : _a.signalTypeImportName) {
+                json.imports = json.imports || [];
+                const signalMappedImport = (0, signals_1.getSignalMitosisImportForTarget)(target);
+                if (signalMappedImport) {
+                    json.imports.push(signalMappedImport);
+                }
+            }
+        },
+    },
+});
+exports.getSignalTypePlugin = getSignalTypePlugin;
+const getSignalMapperForTarget = (target) => {
+    switch (target) {
+        case 'svelte':
+            return {
+                getter: (name) => core_1.types.identifier('$' + name),
+            };
+        case 'preact':
+        case 'reactNative':
+        case 'react':
+        case 'solid':
+            return {
+                getter: (name) => core_1.types.identifier(name),
+                setter: (name) => core_1.types.identifier('set' + (0, capitalize_1.capitalize)(name)),
+            };
+        default:
+            // default case: strip the `.value` accessor
+            return {
+                getter: (name) => core_1.types.identifier(name),
+            };
+    }
+};
+/**
+ * Processes `mySignal.value` accessors for props, context, and state.
+ */
+const getSignalAccessPlugin = ({ target }) => () => ({
+    json: {
+        pre: (x) => {
+            return (0, process_code_1.createCodeProcessorPlugin)((_codeType, json) => (code) => {
+                var _a;
+                const mapSignal = getSignalMapperForTarget(target);
+                const nodeMaps = [];
+                for (const propName in json.props) {
+                    if (json.props[propName].propertyType === 'reactive') {
+                        const getter = core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.getter(propName));
+                        const setter = mapSignal.setter
+                            ? core_1.types.memberExpression(core_1.types.identifier('props'), mapSignal.setter(propName))
+                            : undefined;
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
+                            to: getter,
+                            setTo: setter,
+                        });
+                        nodeMaps.push({
+                            from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('props'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
+                            to: getter,
+                            setTo: setter,
+                        });
+                    }
+                }
+                for (const propName in json.context.get) {
+                    if (json.context.get[propName].type === 'reactive') {
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.identifier(propName), core_1.types.identifier('value')),
+                            to: mapSignal.getter(propName),
+                            setTo: mapSignal.setter ? mapSignal.setter(propName) : undefined,
+                        });
+                    }
+                }
+                for (const propName in json.state) {
+                    if (((_a = json.state[propName]) === null || _a === void 0 ? void 0 : _a.propertyType) === 'reactive') {
+                        const to = core_1.types.memberExpression(core_1.types.identifier('state'), mapSignal.getter(propName));
+                        const setTO = mapSignal.setter ? mapSignal.setter(propName) : undefined;
+                        nodeMaps.push({
+                            from: core_1.types.memberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value')),
+                            to: to,
+                            setTo: setTO,
+                        });
+                        nodeMaps.push({
+                            from: core_1.types.optionalMemberExpression(core_1.types.memberExpression(core_1.types.identifier('state'), core_1.types.identifier(propName)), core_1.types.identifier('value'), false, true),
+                            to: to,
+                            setTo: setTO,
+                        });
+                    }
+                }
+                const filteredNodeMaps = nodeMaps.filter((x) => (0, nullable_1.checkIsDefined)(x.setTo));
+                // we run state-setter replacement first, because otherwise the other one will catch it.
+                if (filteredNodeMaps.length) {
+                    code = (0, exports.replaceSignalSetters)({ code, nodeMaps: filteredNodeMaps });
+                }
+                if (nodeMaps.length) {
+                    code = (0, replace_identifiers_1.replaceNodes)({ code, nodeMaps });
+                }
+                return code;
+            })(x);
+        },
+    },
+});
+exports.getSignalAccessPlugin = getSignalAccessPlugin;

package/dist/src/helpers/plugins/process-target-blocks.d.ts

@@ -0,0 +1,6 @@
+import { Targets } from '../../targets';
+import { MitosisPlugin } from '../../types/plugins';
+/**
+ * Processes `useTarget()` blocks for a given target.
+ */
+export declare const processTargetBlocks: (target: Targets) => MitosisPlugin;

package/dist/src/helpers/plugins/process-target-blocks.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processTargetBlocks = void 0;
+const use_target_1 = require("../../parsers/jsx/hooks/use-target");
+const bindings_1 = require("../bindings");
+const process_code_1 = require("./process-code");
+const getBlockForTarget = ({ target, targetBlock, }) => {
+    switch (target) {
+        default:
+            return targetBlock[target] || targetBlock['default'];
+    }
+};
+/**
+ * Processes `useTarget()` blocks for a given target.
+ */
+const processTargetBlocks = (target) => {
+    const plugin = (0, process_code_1.createCodeProcessorPlugin)((codeType, json, node) => (code, key) => {
+        var _a;
+        if (codeType === 'properties') {
+            const matches = code.includes(use_target_1.USE_TARGET_MAGIC_STRING);
+            const property = node === null || node === void 0 ? void 0 : node.properties[key];
+            if (!matches || !property)
+                return code;
+            node.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `"${property}"` });
+            return () => {
+                delete node.properties[key];
+            };
+        }
+        const matches = code.match(use_target_1.USE_TARGET_MAGIC_REGEX);
+        if (!matches)
+            return code;
+        for (const m of matches) {
+            // get the captured ID of the target block
+            const targetId = (0, use_target_1.getIdFromMatch)(m);
+            if (!targetId)
+                continue;
+            // find the target block in the component, or the default target block
+            const targetBlock = (_a = json.targetBlocks) === null || _a === void 0 ? void 0 : _a[targetId];
+            if (!targetBlock) {
+                throw new Error(`Could not find \`useTarget()\` value in "${json.name}".`);
+            }
+            const block = getBlockForTarget({ target, targetBlock });
+            if (!block) {
+                if (targetBlock.settings.requiresDefault) {
+                    throw new Error(`Could not find \`useTarget()\` value in "${json.name}" for target "${target}", and no default value was set.`);
+                }
+                else {
+                    // if we don't need a default, then that means we allow for nothing to be injected, e.g. when we are in a function body.
+                    code = code.replaceAll(m, '');
+                    continue;
+                }
+            }
+            code = code.replaceAll(m, block.code);
+        }
+        return code;
+    }, { processProperties: true });
+    return () => ({ json: { pre: plugin } });
+};
+exports.processTargetBlocks = processTargetBlocks;

package/dist/src/helpers/process-http-requests.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '..';
+export declare function processHttpRequests(json: MitosisComponent): void;

package/dist/src/helpers/process-http-requests.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processHttpRequests = void 0;
+function processHttpRequests(json) {
+    var _a, _b;
+    const httpRequests = (_b = (_a = json === null || json === void 0 ? void 0 : json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata) === null || _b === void 0 ? void 0 : _b.httpRequests;
+    if (httpRequests) {
+        for (const key in httpRequests) {
+            if (!json.state[key]) {
+                json.state[key] = { code: 'null', type: 'property', propertyType: 'normal' };
+            }
+            const value = httpRequests[key];
+            // TODO: unravel our proxy. aka parse out methods, header, etc
+            // and remove our proxy from being used anymore
+            json.hooks.onMount.push({
+                code: `
+        fetch("${value}").then(res => res.json()).then(result => {
+          state.${key} = result;
+        })
+        `,
+            });
+        }
+    }
+}
+exports.processHttpRequests = processHttpRequests;

package/dist/src/helpers/remove-surrounding-block.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Remove the surrounding block for a function, for instance
+ *
+ * `{ const foo = "bar" }` -> `const foo = "bar"`
+ */
+export declare function removeSurroundingBlock(code: string): string;

package/dist/src/helpers/remove-surrounding-block.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeSurroundingBlock = void 0;
+/**
+ * Remove the surrounding block for a function, for instance
+ *
+ * `{ const foo = "bar" }` -> `const foo = "bar"`
+ */
+function removeSurroundingBlock(code) {
+    let str = code;
+    // Object literal like { foo: ... } should not be unwrapped
+    if (str.match(/^\s*{\s*[a-z0-9]+:/i)) {
+        return str;
+    }
+    // Empty object literal
+    if (str.replace(/\s+/g, '') === '{}') {
+        return str;
+    }
+    const bracesRegex = /^\s*\{([\s\S]+)\}\s*$/;
+    if (bracesRegex.test(str)) {
+        return str.replace(bracesRegex, '$1');
+    }
+    return str;
+}
+exports.removeSurroundingBlock = removeSurroundingBlock;

package/dist/src/helpers/render-imports.d.ts

@@ -0,0 +1,42 @@
+import { Target } from '../types/config';
+import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
+export declare const checkIsComponentImport: (theImport: MitosisImport) => boolean;
+export declare const transformImportPath: ({ theImport, target, preserveFileExtensions, explicitImportFileExtension, }: {
+    theImport: MitosisImport;
+    target: Target;
+    preserveFileExtensions: boolean;
+    explicitImportFileExtension: boolean;
+}) => string;
+export interface ImportValues {
+    starImport: string | null;
+    defaultImport: string | null;
+    namedImports: string | null;
+}
+type ImportArgs = {
+    target: Target;
+    asyncComponentImports: boolean;
+    preserveFileExtensions?: boolean;
+    component?: MitosisComponent | null | undefined;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
+    importMapper?: Function | null | undefined;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
+    explicitImportFileExtension?: boolean;
+    /**
+     * This is only used by Angular generator, and will be deprecated in the future.
+     */
+    componentsUsed?: string[];
+};
+export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, explicitImportFileExtension, }: ImportArgs & {
+    theImport: MitosisImport;
+}) => string;
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, excludeExportAndLocal, }: Omit<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports"> & Partial<Pick<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports">> & {
+    component: MitosisComponent;
+    target: Target;
+    excludeMitosisComponents?: boolean | undefined;
+    excludeExportAndLocal?: boolean | undefined;
+}) => string;
+export {};

package/dist/src/helpers/render-imports.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPreComponent = exports.renderImport = exports.transformImportPath = exports.checkIsComponentImport = void 0;
+const component_file_extensions_1 = require("./component-file-extensions");
+const DEFAULT_IMPORT = 'default';
+const STAR_IMPORT = '*';
+const getStarImport = ({ theImport }) => {
+    for (const key in theImport.imports) {
+        const value = theImport.imports[key];
+        if (value === STAR_IMPORT) {
+            return key;
+        }
+    }
+    return null;
+};
+const getDefaultImport = ({ theImport }) => {
+    for (const key in theImport.imports) {
+        const value = theImport.imports[key];
+        if (value === DEFAULT_IMPORT) {
+            return key;
+        }
+    }
+    return null;
+};
+const CONTEXT_IMPORTS = ['context.lite', 'context.lite.ts', 'context.lite.js'];
+const checkIsContextImport = (theImport) => CONTEXT_IMPORTS.some((contextPath) => theImport.path.endsWith(contextPath));
+const checkIsComponentImport = (theImport) => !checkIsContextImport(theImport) &&
+    component_file_extensions_1.COMPONENT_IMPORT_EXTENSIONS.some((contextPath) => theImport.path.endsWith(contextPath));
+exports.checkIsComponentImport = checkIsComponentImport;
+const transformImportPath = ({ theImport, target, preserveFileExtensions, explicitImportFileExtension, }) => {
+    // We need to drop the `.lite` from context files, because the context generator does so as well.
+    if (checkIsContextImport(theImport)) {
+        let path = theImport.path;
+        CONTEXT_IMPORTS.forEach((contextPath) => {
+            if (path.endsWith(contextPath)) {
+                path = path.replace(contextPath, 'context.js');
+            }
+        });
+        return path;
+    }
+    if (preserveFileExtensions)
+        return theImport.path;
+    if ((0, exports.checkIsComponentImport)(theImport)) {
+        return theImport.path.replace(component_file_extensions_1.INPUT_EXTENSION_REGEX, (0, component_file_extensions_1.getComponentFileExtensionForTarget)({ target, type: 'import', explicitImportFileExtension }));
+    }
+    return theImport.path;
+};
+exports.transformImportPath = transformImportPath;
+const getNamedImports = ({ theImport }) => {
+    const namedImports = Object.entries(theImport.imports)
+        .filter(([, value]) => ![DEFAULT_IMPORT, STAR_IMPORT].includes(value))
+        .map(([key, value]) => {
+        return key !== value ? `${value} as ${key}` : value;
+    });
+    if (namedImports.length > 0) {
+        return `{ ${namedImports.join(', ')} }`;
+    }
+    else {
+        return null;
+    }
+};
+const getImportedValues = ({ theImport }) => {
+    const starImport = getStarImport({ theImport });
+    const defaultImport = getDefaultImport({ theImport });
+    const namedImports = getNamedImports({ theImport });
+    return { starImport, defaultImport, namedImports };
+};
+const getImportValue = ({ defaultImport, namedImports, starImport }) => {
+    if (starImport) {
+        return ` * as ${starImport} `;
+    }
+    else {
+        return [defaultImport, namedImports].filter(Boolean).join(', ');
+    }
+};
+const renderImport = ({ theImport, target, asyncComponentImports, preserveFileExtensions = false, component = undefined, componentsUsed = [], importMapper, explicitImportFileExtension = false, }) => {
+    const importedValues = getImportedValues({ theImport });
+    const path = (0, exports.transformImportPath)({
+        theImport,
+        target,
+        preserveFileExtensions,
+        explicitImportFileExtension,
+    });
+    const importValue = getImportValue(importedValues);
+    const isComponentImport = (0, exports.checkIsComponentImport)(theImport);
+    const shouldBeAsyncImport = asyncComponentImports && isComponentImport;
+    const isTypeImport = theImport.importKind === 'type';
+    // For lit (components) we just want to do a plain import
+    // https://lit.dev/docs/components/rendering/#composing-templates
+    if (isComponentImport && target === 'lit') {
+        return `import '${path}';`;
+    }
+    if (shouldBeAsyncImport) {
+        const isVueImport = target === 'vue';
+        if (isVueImport && importedValues.namedImports) {
+            console.warn('Vue: Async Component imports cannot include named imports. Dropping async import. This might break your code.');
+        }
+        else {
+            return `const ${importValue} = () => import('${path}')
+      .then(x => x.default)
+      .catch(err => {
+        console.error('Error while attempting to dynamically import component ${importValue} at ${path}', err);
+        throw err;
+      });`;
+        }
+    }
+    if (importMapper) {
+        const importMapperResult = importMapper(component, theImport, importedValues, componentsUsed);
+        // If import mapper has no result we skip this
+        if (importMapperResult) {
+            return importMapperResult;
+        }
+    }
+    return importValue
+        ? `import ${isTypeImport ? 'type' : ''} ${importValue} from '${path}';`
+        : `import '${path}';`;
+};
+exports.renderImport = renderImport;
+const renderImports = ({ imports, target, asyncComponentImports, excludeMitosisComponents, preserveFileExtensions = false, component, componentsUsed, importMapper, explicitImportFileExtension, }) => imports
+    .filter((theImport) => {
+    if (
+    // Remove compile away components
+    theImport.path === '@builder.io/components' ||
+        // TODO: Mitosis output needs this
+        theImport.path.startsWith('@builder.io/mitosis')) {
+        return false;
+    }
+    else if (excludeMitosisComponents && theImport.path.includes('.lite')) {
+        return false;
+    }
+    else {
+        return true;
+    }
+})
+    .map((theImport) => (0, exports.renderImport)({
+    theImport,
+    target,
+    asyncComponentImports,
+    preserveFileExtensions,
+    component,
+    componentsUsed,
+    importMapper,
+    explicitImportFileExtension,
+}))
+    .join('\n');
+const renderPreComponent = ({ component, target, excludeMitosisComponents, asyncComponentImports = false, preserveFileExtensions = false, componentsUsed = [], importMapper, explicitImportFileExtension = false, excludeExportAndLocal = false, }) => {
+    var _a;
+    return `
+    ${renderImports({
+        imports: component.imports,
+        target,
+        asyncComponentImports,
+        excludeMitosisComponents,
+        preserveFileExtensions,
+        component,
+        componentsUsed,
+        importMapper,
+        explicitImportFileExtension,
+    })}
+    ${excludeExportAndLocal ? '' : renderExportAndLocal(component)}
+    ${((_a = component.hooks.preComponent) === null || _a === void 0 ? void 0 : _a.code) || ''}
+  `;
+};
+exports.renderPreComponent = renderPreComponent;
+const renderExportAndLocal = (component) => {
+    return Object.keys(component.exports || {})
+        .map((key) => component.exports[key].code)
+        .join('\n');
+};

package/dist/src/helpers/replace-identifiers.d.ts

@@ -0,0 +1,27 @@
+import { types } from '@babel/core';
+export type ReplaceTo = string | ((accessedProperty: string, matchedIdentifier: string) => string) | null;
+type ReplaceArgs = {
+    code: string;
+    from: string | string[];
+    to: ReplaceTo;
+};
+export type NodeMap = {
+    from: types.Node;
+    condition?: (path: babel.NodePath<types.Node>) => boolean;
+    to: types.Node;
+};
+/**
+ * @deprecated Use `replaceNodes` instead.
+ */
+export declare const replaceIdentifiers: ({ code, from, to }: ReplaceArgs) => string;
+export declare const replaceStateIdentifier: (to: ReplaceArgs['to']) => (code: string) => string;
+export declare const replacePropsIdentifier: (to: ReplaceArgs['to']) => (code: string) => string;
+/**
+ * Replaces all instances of a Babel AST Node with a new Node within a code string.
+ * Uses `generate()` to convert the Node to a string and compare them.
+ */
+export declare const replaceNodes: ({ code, nodeMaps }: {
+    code: string;
+    nodeMaps: NodeMap[];
+}) => string;
+export {};