@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/index.d.ts

@@ -0,0 +1,96 @@
+import { JSX } from '../jsx-runtime';
+import { Dictionary } from './helpers/typescript';
+import { ComponentMetadata } from './types/metadata';
+import { ReactivityType, TargetBlock } from './types/mitosis-component';
+export * from './flow';
+export * from './generators/alpine';
+export * from './generators/angular';
+export * from './generators/builder';
+export * from './generators/context/angular';
+export * from './generators/context/qwik';
+export * from './generators/context/react';
+export * from './generators/context/rsc';
+export * from './generators/context/solid';
+export * from './generators/context/svelte';
+export * from './generators/context/vue';
+export * from './generators/html';
+export * from './generators/liquid';
+export * from './generators/lit';
+export * from './generators/marko';
+export * from './generators/mitosis';
+export * from './generators/qwik/index';
+export * from './generators/react';
+export * from './generators/react-native';
+export * from './generators/rsc';
+export * from './generators/solid';
+export * from './generators/stencil';
+export * from './generators/svelte';
+export * from './generators/swift';
+export * from './generators/taro';
+export * from './generators/template';
+export * from './generators/vue';
+export { checkIsLiteComponentFilePath, checkIsMitosisComponentFilePath, checkIsSvelteComponentFilePath, getComponentFileExtensionForTarget, renameComponentFile, renameComponentImport, renameImport, } from './helpers/component-file-extensions';
+export { createMitosisNode } from './helpers/create-mitosis-node';
+export * from './helpers/is-mitosis-node';
+export { checkShouldOutputTypeScript } from './helpers/output';
+export * from './helpers/signals';
+export * from './helpers/typescript-project';
+export * from './parsers/angular';
+export * from './parsers/builder';
+export * from './parsers/context';
+export * from './parsers/jsx';
+export * from './parsers/svelte';
+export * from './plugins/compile-away-builder-components';
+export * from './plugins/compile-away-components';
+export * from './plugins/map-styles';
+export * from './symbols/symbol-processor';
+export * from './targets';
+export * from './types/config';
+export * from './types/mitosis-component';
+export * from './types/mitosis-node';
+export * from './types/plugins';
+export * from './types/transpiler';
+declare function Provider<T>(props: {
+    value: T;
+    children: JSX.Element;
+}): any;
+export type Context<T> = {
+    Provider: typeof Provider<T>;
+};
+export type Signal<T> = {
+    value: T;
+};
+export declare function useStore<T>(obj: T): T;
+export declare function useState<T>(obj: T, args: {
+    reactive: true;
+}): [Signal<T>, (value: T) => void];
+export declare function useState<T>(obj: T, args?: {
+    reactive?: boolean;
+}): [T, (value: T) => void];
+export declare function useRef<T>(obj?: null | void | T): T;
+export declare function useContext<T = Dictionary<any>>(key: Context<T>, type?: ReactivityType): T;
+export declare function createContext<T = Dictionary<any>>(value: T, args: {
+    reactive: true;
+}): Context<Signal<T>>;
+export declare function createContext<T = Dictionary<any>>(value: T, args?: {
+    reactive?: boolean;
+}): Context<T>;
+export declare function setContext<T = Dictionary<any>>(key: Context<T>, value: Partial<T>, options?: {
+    type?: ReactivityType;
+}): void;
+export declare function onMount(fn: () => any, args?: {
+    onSSR?: boolean;
+}): void;
+export declare function onUpdate(fn: () => any, deps?: any[]): void;
+export declare function onInit(fn: () => any): void;
+export declare function onUnMount(fn: () => any): void;
+export declare function useDynamicTag(fn: () => any): void;
+export declare function onError(fn: () => any): void;
+export declare function useMetadata(obj: ComponentMetadata): void;
+export declare function useDefaultProps<T = Dictionary<any>>(value: T): T;
+export declare function useStyle(value: string): void;
+/**
+ * Adds an event listener to a given element ref.
+ */
+export declare function onEvent<E extends Event, T extends Element>(eventName: string, fn: (event: E, element: T) => any, elementRef: T, isRoot?: boolean): void;
+export declare function useTarget<Return>(dict: TargetBlock<Return>): Return;

package/dist/src/index.js

@@ -0,0 +1,74 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkShouldOutputTypeScript = exports.createMitosisNode = exports.renameImport = exports.renameComponentImport = exports.renameComponentFile = exports.getComponentFileExtensionForTarget = exports.checkIsSvelteComponentFilePath = exports.checkIsMitosisComponentFilePath = exports.checkIsLiteComponentFilePath = void 0;
+__exportStar(require("./flow"), exports);
+__exportStar(require("./generators/alpine"), exports);
+__exportStar(require("./generators/angular"), exports);
+__exportStar(require("./generators/builder"), exports);
+__exportStar(require("./generators/context/angular"), exports);
+__exportStar(require("./generators/context/qwik"), exports);
+__exportStar(require("./generators/context/react"), exports);
+__exportStar(require("./generators/context/rsc"), exports);
+__exportStar(require("./generators/context/solid"), exports);
+__exportStar(require("./generators/context/svelte"), exports);
+__exportStar(require("./generators/context/vue"), exports);
+__exportStar(require("./generators/html"), exports);
+__exportStar(require("./generators/liquid"), exports);
+__exportStar(require("./generators/lit"), exports);
+__exportStar(require("./generators/marko"), exports);
+__exportStar(require("./generators/mitosis"), exports);
+__exportStar(require("./generators/qwik/index"), exports);
+__exportStar(require("./generators/react"), exports);
+__exportStar(require("./generators/react-native"), exports);
+__exportStar(require("./generators/rsc"), exports);
+__exportStar(require("./generators/solid"), exports);
+__exportStar(require("./generators/stencil"), exports);
+__exportStar(require("./generators/svelte"), exports);
+__exportStar(require("./generators/swift"), exports);
+__exportStar(require("./generators/taro"), exports);
+__exportStar(require("./generators/template"), exports);
+__exportStar(require("./generators/vue"), exports);
+var component_file_extensions_1 = require("./helpers/component-file-extensions");
+Object.defineProperty(exports, "checkIsLiteComponentFilePath", { enumerable: true, get: function () { return component_file_extensions_1.checkIsLiteComponentFilePath; } });
+Object.defineProperty(exports, "checkIsMitosisComponentFilePath", { enumerable: true, get: function () { return component_file_extensions_1.checkIsMitosisComponentFilePath; } });
+Object.defineProperty(exports, "checkIsSvelteComponentFilePath", { enumerable: true, get: function () { return component_file_extensions_1.checkIsSvelteComponentFilePath; } });
+Object.defineProperty(exports, "getComponentFileExtensionForTarget", { enumerable: true, get: function () { return component_file_extensions_1.getComponentFileExtensionForTarget; } });
+Object.defineProperty(exports, "renameComponentFile", { enumerable: true, get: function () { return component_file_extensions_1.renameComponentFile; } });
+Object.defineProperty(exports, "renameComponentImport", { enumerable: true, get: function () { return component_file_extensions_1.renameComponentImport; } });
+Object.defineProperty(exports, "renameImport", { enumerable: true, get: function () { return component_file_extensions_1.renameImport; } });
+var create_mitosis_node_1 = require("./helpers/create-mitosis-node");
+Object.defineProperty(exports, "createMitosisNode", { enumerable: true, get: function () { return create_mitosis_node_1.createMitosisNode; } });
+__exportStar(require("./helpers/is-mitosis-node"), exports);
+var output_1 = require("./helpers/output");
+Object.defineProperty(exports, "checkShouldOutputTypeScript", { enumerable: true, get: function () { return output_1.checkShouldOutputTypeScript; } });
+__exportStar(require("./helpers/signals"), exports);
+__exportStar(require("./helpers/typescript-project"), exports);
+__exportStar(require("./parsers/angular"), exports);
+__exportStar(require("./parsers/builder"), exports);
+__exportStar(require("./parsers/context"), exports);
+__exportStar(require("./parsers/jsx"), exports);
+__exportStar(require("./parsers/svelte"), exports);
+__exportStar(require("./plugins/compile-away-builder-components"), exports);
+__exportStar(require("./plugins/compile-away-components"), exports);
+__exportStar(require("./plugins/map-styles"), exports);
+__exportStar(require("./symbols/symbol-processor"), exports);
+__exportStar(require("./targets"), exports);
+__exportStar(require("./types/config"), exports);
+__exportStar(require("./types/mitosis-component"), exports);
+__exportStar(require("./types/mitosis-node"), exports);
+__exportStar(require("./types/plugins"), exports);
+__exportStar(require("./types/transpiler"), exports);

package/dist/src/modules/plugins.d.ts

@@ -0,0 +1,25 @@
+import { MitosisComponent } from '../types/mitosis-component';
+import { MitosisPlugin } from '../types/plugins';
+export type { MitosisPlugin };
+export declare const runPreJsonPlugins: ({ json, plugins, options, }: {
+    json: MitosisComponent;
+    plugins: MitosisPlugin[];
+    options?: any;
+}) => MitosisComponent;
+export declare const runPostJsonPlugins: ({ json, plugins, options, }: {
+    json: MitosisComponent;
+    plugins: MitosisPlugin[];
+    options?: any;
+}) => MitosisComponent;
+export declare const runPreCodePlugins: ({ code, plugins, options, json, }: {
+    json: MitosisComponent;
+    code: string;
+    plugins: MitosisPlugin[];
+    options?: any;
+}) => string;
+export declare const runPostCodePlugins: ({ code, plugins, options, json, }: {
+    json: MitosisComponent;
+    code: string;
+    plugins: MitosisPlugin[];
+    options?: any;
+}) => string;

package/dist/src/modules/plugins.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runPostCodePlugins = exports.runPreCodePlugins = exports.runPostJsonPlugins = exports.runPreJsonPlugins = void 0;
+const runPreJsonPlugins = ({ json, plugins, options, }) => {
+    var _a;
+    let useJson = json;
+    for (const plugin of plugins) {
+        const preFunction = (_a = plugin(options).json) === null || _a === void 0 ? void 0 : _a.pre;
+        if (preFunction) {
+            useJson = preFunction(json) || json;
+        }
+    }
+    return useJson;
+};
+exports.runPreJsonPlugins = runPreJsonPlugins;
+const runPostJsonPlugins = ({ json, plugins, options, }) => {
+    var _a;
+    let useJson = json;
+    for (const plugin of plugins) {
+        const postFunction = (_a = plugin(options).json) === null || _a === void 0 ? void 0 : _a.post;
+        if (postFunction) {
+            useJson = postFunction(json) || json;
+        }
+    }
+    return useJson;
+};
+exports.runPostJsonPlugins = runPostJsonPlugins;
+const runPreCodePlugins = ({ code, plugins, options, json, }) => {
+    var _a;
+    let string = code;
+    for (const plugin of plugins) {
+        const preFunction = (_a = plugin(options).code) === null || _a === void 0 ? void 0 : _a.pre;
+        if (preFunction) {
+            string = preFunction(string, json);
+        }
+    }
+    return string;
+};
+exports.runPreCodePlugins = runPreCodePlugins;
+const runPostCodePlugins = ({ code, plugins, options, json, }) => {
+    var _a;
+    let string = code;
+    for (const plugin of plugins) {
+        const postFunction = (_a = plugin(options).code) === null || _a === void 0 ? void 0 : _a.post;
+        if (postFunction) {
+            string = postFunction(string, json);
+        }
+    }
+    return string;
+};
+exports.runPostCodePlugins = runPostCodePlugins;

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

@@ -0,0 +1,5 @@
+import { MitosisComponent } from '../types/mitosis-component';
+interface AngularToMitosisOptions {
+}
+export declare function angularToMitosisComponent(code: string, options?: AngularToMitosisOptions): MitosisComponent;
+export {};

package/dist/src/parsers/angular.js

@@ -0,0 +1,154 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.angularToMitosisComponent = void 0;
+const compiler_1 = require("@angular/compiler");
+const core_1 = require("@babel/core");
+const lodash_1 = require("lodash");
+const typescript_1 = __importDefault(require("typescript"));
+const babel_transform_1 = require("../helpers/babel-transform");
+const bindings_1 = require("../helpers/bindings");
+const capitalize_1 = require("../helpers/capitalize");
+const create_mitosis_component_1 = require("../helpers/create-mitosis-component");
+const create_mitosis_node_1 = require("../helpers/create-mitosis-node");
+const getTsAST = (code) => {
+    return typescript_1.default.createSourceFile('code.ts', code, typescript_1.default.ScriptTarget.Latest, true);
+};
+const transformBinding = (binding, _options) => {
+    return (0, babel_transform_1.babelTransformCode)(binding, {
+        Identifier(path) {
+            const name = path.node.name;
+            if ((core_1.types.isObjectProperty(path.parent) && path.parent.key === path.node) ||
+                (core_1.types.isMemberExpression(path.parent) && path.parent.property === path.node)) {
+                return;
+            }
+            if (!(name.startsWith('state.') || name === 'event' || name === '$event')) {
+                path.replaceWith(core_1.types.identifier(`state.${name}`));
+            }
+        },
+    });
+};
+const isElement = (node) => 
+// TODO: theres got to be a better way than this
+Array.isArray(node.attributes);
+const isTemplate = (node) => 
+// TODO: theres got to be a better way than this
+Array.isArray(node.templateAttrs);
+const isText = (node) => typeof node.value === 'string';
+const isBoundText = (node) => typeof node.value === 'object';
+const angularTemplateNodeToMitosisNode = (node, options) => {
+    if (isTemplate(node)) {
+        const ngIf = node.templateAttrs.find((item) => item.name === 'ngIf');
+        if (ngIf) {
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'Show',
+                bindings: {
+                    when: (0, bindings_1.createSingleBinding)({
+                        code: transformBinding(ngIf.value.source, options),
+                    }),
+                },
+                children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
+            });
+        }
+        const ngFor = node.templateAttrs.find((item) => item.name === 'ngFor');
+        if (ngFor) {
+            const value = ngFor.value.source;
+            const split = value.split(/let\s|\sof\s/);
+            const [_let, itemName, _of, expression] = split;
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'For',
+                bindings: {
+                    each: (0, bindings_1.createSingleBinding)({ code: transformBinding(expression, options) }),
+                },
+                scope: {
+                    forName: itemName,
+                },
+                children: [angularTemplateNodeToMitosisNode((0, lodash_1.omit)(node, 'templateAttrs'), options)],
+            });
+        }
+    }
+    if (isElement(node)) {
+        const properties = {};
+        const bindings = {};
+        for (const input of node.inputs) {
+            bindings[input.name] = (0, bindings_1.createSingleBinding)({
+                code: transformBinding(input.value.source, options),
+            });
+        }
+        for (const output of node.outputs) {
+            bindings['on' + (0, capitalize_1.capitalize)(output.name)] = (0, bindings_1.createSingleBinding)({
+                code: transformBinding(output.handler
+                    .source // TODO: proper reference replace
+                    .replace(/\$event/g, 'event'), options),
+            });
+        }
+        for (const attribute of node.attributes) {
+            properties[attribute.name] = attribute.value;
+        }
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            name: node.name,
+            properties,
+            bindings: bindings,
+            children: node.children.map((node) => angularTemplateNodeToMitosisNode(node, options)),
+        });
+    }
+    if (isText(node)) {
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            properties: {
+                _text: node.value,
+            },
+        });
+    }
+    if (isBoundText(node)) {
+        // TODO: handle the bindings
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            properties: {
+                _text: node.value.source,
+            },
+        });
+    }
+    throw new Error(`Element node type {${node}} is not supported`);
+};
+const angularTemplateToMitosisNodes = (template, options) => {
+    const ast = (0, compiler_1.parseTemplate)(template, '.');
+    const blocks = ast.nodes.map((node) => angularTemplateNodeToMitosisNode(node, options));
+    return blocks;
+};
+const parseTypescript = (code, options) => {
+    const component = (0, create_mitosis_component_1.createMitosisComponent)();
+    const ast = getTsAST(code);
+    for (const statement of ast.statements) {
+        if (typescript_1.default.isClassDeclaration(statement)) {
+            const decorators = typescript_1.default.canHaveDecorators(statement) ? typescript_1.default.getDecorators(statement) : undefined;
+            if (decorators) {
+                for (const decorator of decorators) {
+                    // TODO: proper reference tracing
+                    if (typescript_1.default.isCallExpression(decorator.expression))
+                        if (typescript_1.default.isIdentifier(decorator.expression.expression) &&
+                            decorator.expression.expression.text === 'Component') {
+                            const firstArg = decorator.expression.arguments[0];
+                            if (typescript_1.default.isObjectLiteralExpression(firstArg)) {
+                                firstArg.properties.find((item) => {
+                                    if (typescript_1.default.isPropertyAssignment(item)) {
+                                        if (typescript_1.default.isIdentifier(item.name) && item.name.text === 'template') {
+                                            if (typescript_1.default.isTemplateLiteral(item.initializer)) {
+                                                const template = item.initializer.getText().trim().slice(1, -1);
+                                                component.children = angularTemplateToMitosisNodes(template, options);
+                                            }
+                                        }
+                                    }
+                                });
+                            }
+                        }
+                }
+            }
+        }
+    }
+    return component;
+};
+function angularToMitosisComponent(code, options = {}) {
+    return parseTypescript(code, options);
+}
+exports.angularToMitosisComponent = angularToMitosisComponent;

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

@@ -0,0 +1,55 @@
+import { MitosisComponent, MitosisState } from '../../types/mitosis-component';
+import { BuilderContent, BuilderElement } from '@builder.io/sdk';
+import { MitosisNode } from '../../types/mitosis-node';
+export declare const getStyleStringFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => string;
+type InternalOptions = {
+    skipMapper?: boolean;
+};
+export declare const symbolBlocksAsChildren = false;
+type BuilderToMitosisOptions = {
+    context?: {
+        [key: string]: any;
+    };
+    includeBuilderExtras?: boolean;
+    preserveTextBlocks?: boolean;
+    includeSpecialBindings?: boolean;
+    includeMeta?: boolean;
+    /**
+     * When `true`, invalid bindings will be escaped as strings with special comments.
+     * This can then be used to have LLMs such as Claude attempt to repair the broken code.
+     * Defaults to `false`.
+     */
+    escapeInvalidCode?: boolean;
+    /**
+     * When `true`, the `blocksSlots` field on Mitosis Nodes will be used to transform
+     * deeply nested Builder elements found in component options. Note that not every
+     * generator supports parsing `blocksSlots`.
+     * Defaults to `false`.
+     */
+    enableBlocksSlots?: boolean;
+};
+export declare const builderElementToMitosisNode: (block: BuilderElement, options: BuilderToMitosisOptions, _internalOptions?: InternalOptions) => MitosisNode;
+export declare const getMetaFromBlock: (block: BuilderElement, options: BuilderToMitosisOptions) => {};
+/**
+ * Take Builder custom jsCode and extract the contents of the useStore hook
+ * and return it as a JS object along with the inputted code with the hook
+ * code extracted
+ */
+export declare function extractStateHook(code: string): {
+    code: string;
+    state: MitosisState;
+};
+/**
+ * Extracts Mitosis state from Builder state.
+ * @param mitosisState Mitosis state to update
+ * @param builderState Builder state to extract from
+ * @returns
+ */
+export declare function extractMitosisStateFromBuilderState(mitosisState: MitosisState, builderState?: {
+    [key: string]: any;
+}): void;
+export declare function convertExportDefaultToReturn(code: string): string;
+export declare const createBuilderElement: (options?: Partial<BuilderElement>) => BuilderElement;
+export declare const isBuilderElement: (el: unknown) => el is BuilderElement;
+export declare const builderContentToMitosisComponent: (builderContent: BuilderContent, options?: BuilderToMitosisOptions) => MitosisComponent;
+export {};