@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,48 @@
+"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.mapImportDeclarationToMitosisImport = void 0;
+const babel = __importStar(require("@babel/core"));
+const { types } = babel;
+const mapImportDeclarationToMitosisImport = (node) => {
+    const importObject = {
+        imports: {},
+        path: node.source.value,
+        importKind: node.importKind,
+    };
+    for (const specifier of node.specifiers) {
+        if (types.isImportSpecifier(specifier)) {
+            importObject.imports[specifier.local.name] = specifier.imported.name;
+        }
+        else if (types.isImportDefaultSpecifier(specifier)) {
+            importObject.imports[specifier.local.name] = 'default';
+        }
+        else if (types.isImportNamespaceSpecifier(specifier)) {
+            importObject.imports[specifier.local.name] = '*';
+        }
+    }
+    return importObject;
+};
+exports.mapImportDeclarationToMitosisImport = mapImportDeclarationToMitosisImport;

package/dist/src/helpers/nodes/for.d.ts

@@ -0,0 +1,4 @@
+import { ForNode } from '../../types/mitosis-node';
+export declare const getForArguments: (node: ForNode, { excludeCollectionName }?: {
+    excludeCollectionName: boolean;
+}) => string[];

package/dist/src/helpers/nodes/for.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getForArguments = void 0;
+const nullable_1 = require("../nullable");
+const getForArguments = (node, { excludeCollectionName } = { excludeCollectionName: false }) => {
+    return [
+        node.scope.forName || 'item',
+        node.scope.indexName,
+        excludeCollectionName ? undefined : node.scope.collectionName,
+    ].filter(nullable_1.checkIsDefined);
+};
+exports.getForArguments = getForArguments;

package/dist/src/helpers/nullable.d.ts

@@ -0,0 +1,2 @@
+export type Nullable<X> = X | null | undefined;
+export declare const checkIsDefined: <T>(value: Nullable<T>) => value is NonNullable<T>;

package/dist/src/helpers/nullable.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIsDefined = void 0;
+const checkIsDefined = (value) => value !== null && value !== undefined;
+exports.checkIsDefined = checkIsDefined;

package/dist/src/helpers/on-event.d.ts

@@ -0,0 +1,14 @@
+import { MitosisComponent, MitosisNode, MitosisPlugin, OnEventHook } from '..';
+export declare const getOnEventHandlerName: (hook: OnEventHook) => string;
+export declare const getOnEventHooksForNode: ({ node, component, }: {
+    node: MitosisNode;
+    component: MitosisComponent;
+}) => OnEventHook[];
+/**
+ * Adds event handlers from `onEvent` hooks to the appropriate node's bindings.
+ * Only works with frameworks that support custom events in their templates.
+ */
+export declare const processOnEventHooksPlugin: (args?: {
+    setBindings?: boolean;
+    includeRootEvents?: boolean;
+}) => MitosisPlugin;

package/dist/src/helpers/on-event.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processOnEventHooksPlugin = exports.getOnEventHooksForNode = exports.getOnEventHandlerName = void 0;
+const bindings_1 = require("./bindings");
+const capitalize_1 = require("./capitalize");
+const traverse_nodes_1 = require("./traverse-nodes");
+const checkIsEventHandlerNode = (node, hook) => {
+    var _a;
+    return hook.refName === ((_a = node.bindings.ref) === null || _a === void 0 ? void 0 : _a.code);
+};
+const getBindingName = (hook) => {
+    return `on${(0, capitalize_1.capitalize)(hook.eventName)}`;
+};
+const getOnEventHandlerName = (hook) => {
+    return `${hook.refName}_${getBindingName(hook)}`;
+};
+exports.getOnEventHandlerName = getOnEventHandlerName;
+const getOnEventHooksForNode = ({ node, component, }) => {
+    return component.hooks.onEvent.filter((hook) => checkIsEventHandlerNode(node, hook));
+};
+exports.getOnEventHooksForNode = getOnEventHooksForNode;
+/**
+ * Adds event handlers from `onEvent` hooks to the appropriate node's bindings.
+ * Only works with frameworks that support custom events in their templates.
+ */
+const processOnEventHooksPlugin = (args = {}) => () => ({
+    json: {
+        pre: (component) => {
+            const { setBindings = true, includeRootEvents = true } = args;
+            (0, traverse_nodes_1.traverseNodes)(component, (node) => {
+                (0, exports.getOnEventHooksForNode)({ node, component }).forEach((hook) => {
+                    if (!includeRootEvents && hook.isRoot)
+                        return;
+                    const handlerName = getBindingName(hook);
+                    const fnName = (0, exports.getOnEventHandlerName)(hook);
+                    component.state[fnName] = {
+                        code: `${fnName}(${hook.eventArgName}) { ${hook.code} }`,
+                        type: 'method',
+                    };
+                    if (setBindings) {
+                        node.bindings[handlerName] = (0, bindings_1.createSingleBinding)({
+                            code: `state.${fnName}(${hook.eventArgName})`,
+                            arguments: [hook.eventArgName],
+                            bindingType: 'function',
+                        });
+                    }
+                });
+            });
+        },
+    },
+});
+exports.processOnEventHooksPlugin = processOnEventHooksPlugin;

package/dist/src/helpers/output.d.ts

@@ -0,0 +1,5 @@
+import { MitosisConfig, Target } from '..';
+export declare const checkShouldOutputTypeScript: ({ target, options, }: {
+    target: Target;
+    options: MitosisConfig;
+}) => boolean;

package/dist/src/helpers/output.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkShouldOutputTypeScript = void 0;
+const nullable_1 = require("./nullable");
+const checkShouldOutputTypeScript = ({ target, options, }) => {
+    var _a;
+    const targetTsConfig = (_a = options.options[target]) === null || _a === void 0 ? void 0 : _a.typescript;
+    return (0, nullable_1.checkIsDefined)(targetTsConfig) ? targetTsConfig : false;
+};
+exports.checkShouldOutputTypeScript = checkShouldOutputTypeScript;

package/dist/src/helpers/parse-node.d.ts

@@ -0,0 +1,2 @@
+export declare const parseNode: (str: string) => import("..").MitosisNode;
+export declare const parseNodes: (str: string) => import("..").MitosisNode[];

package/dist/src/helpers/parse-node.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseNodes = exports.parseNode = void 0;
+const jsx_1 = require("../parsers/jsx");
+const parseNode = (str) => {
+    return (0, jsx_1.parseJsx)(`
+    export default function MyComponent() {
+      return (${str})
+    }
+  `).children[0];
+};
+exports.parseNode = parseNode;
+const parseNodes = (str) => {
+    return (0, jsx_1.parseJsx)(`
+    export default function MyComponent() {
+      return (<>${str}</>)
+    }
+  `).children[0].children;
+};
+exports.parseNodes = parseNodes;

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

@@ -0,0 +1,9 @@
+import * as babel from '@babel/core';
+export declare function parseCodeToAst(code: string): babel.ParseResult | null;
+export declare function parseCode(code: string): babel.types.Statement[];
+export declare const isCodeBodyExpression: (body: babel.types.Statement[]) => boolean;
+/**
+ * Returns `true` if the `code` is a valid expression. (vs a statement)
+ */
+export declare function isExpression(code: string): boolean;
+export declare const isCodeBodyIdentifier: (body: babel.types.Statement[]) => boolean;

package/dist/src/helpers/parsers.js

@@ -0,0 +1,66 @@
+"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.isCodeBodyIdentifier = exports.isExpression = exports.isCodeBodyExpression = exports.parseCode = exports.parseCodeToAst = void 0;
+const babel = __importStar(require("@babel/core"));
+const plugin_syntax_decorators_1 = __importDefault(require("@babel/plugin-syntax-decorators"));
+const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
+const preset_typescript_1 = __importDefault(require("@babel/preset-typescript"));
+function parseCodeToAst(code) {
+    return babel.parse(code, {
+        presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]],
+        plugins: [
+            [plugin_syntax_typescript_1.default, { isTSX: true }],
+            [plugin_syntax_decorators_1.default, { legacy: true }],
+        ],
+    });
+}
+exports.parseCodeToAst = parseCodeToAst;
+function parseCode(code) {
+    const ast = parseCodeToAst(code);
+    return babel.types.isFile(ast) ? ast.program.body : babel.types.isProgram(ast) ? ast.body : [];
+}
+exports.parseCode = parseCode;
+const isCodeBodyExpression = (body) => body.length == 1 &&
+    (babel.types.isExpression(body[0]) || babel.types.isExpressionStatement(body[0]));
+exports.isCodeBodyExpression = isCodeBodyExpression;
+/**
+ * Returns `true` if the `code` is a valid expression. (vs a statement)
+ */
+function isExpression(code) {
+    try {
+        const body = parseCode(code);
+        return (0, exports.isCodeBodyExpression)(body);
+    }
+    catch (e) {
+        return false;
+    }
+}
+exports.isExpression = isExpression;
+const isCodeBodyIdentifier = (body) => body.length == 1 && babel.types.isIdentifier(body[0]);
+exports.isCodeBodyIdentifier = isCodeBodyIdentifier;

package/dist/src/helpers/patterns.d.ts

@@ -0,0 +1,8 @@
+export declare const GETTER: RegExp;
+export declare const SETTER: RegExp;
+export declare const checkIsGetter: (code: string) => RegExpMatchArray | null;
+export declare const stripGetter: (str: string) => string;
+export declare const replaceGetterWithFunction: (str: string) => string;
+export declare const replaceFunctionWithGetter: (str: string) => string;
+export declare const extractGetterCodeBlock: (getter: string) => string;
+export declare const prefixWithFunction: (str: string) => string;

package/dist/src/helpers/patterns.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefixWithFunction = exports.extractGetterCodeBlock = exports.replaceFunctionWithGetter = exports.replaceGetterWithFunction = exports.stripGetter = exports.checkIsGetter = exports.SETTER = exports.GETTER = void 0;
+exports.GETTER = /^\s*get /;
+exports.SETTER = /^\s*set /;
+const checkIsGetter = (code) => code.match(exports.GETTER);
+exports.checkIsGetter = checkIsGetter;
+const stripGetter = (str) => str.replace(exports.GETTER, '');
+exports.stripGetter = stripGetter;
+const replaceGetterWithFunction = (str) => str.replace(/^(get )?/, 'function ');
+exports.replaceGetterWithFunction = replaceGetterWithFunction;
+const replaceFunctionWithGetter = (str) => str.replace(/^(function )?/, 'get ');
+exports.replaceFunctionWithGetter = replaceFunctionWithGetter;
+const extractGetterCodeBlock = (getter) => getter.replace(/[\S\s]*\(\) \{([\S\s]*)\}[\S\s]*/, '$1').trim();
+exports.extractGetterCodeBlock = extractGetterCodeBlock;
+const prefixWithFunction = (str) => `function ${str}`;
+exports.prefixWithFunction = prefixWithFunction;

package/dist/src/helpers/plugins/process-code/index.d.ts

@@ -0,0 +1,12 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisPlugin } from '../../../types/plugins';
+import { CodeProcessor } from './types';
+export declare const createCodeProcessorPlugin: (codeProcessor: CodeProcessor, { processProperties }?: {
+    processProperties?: boolean | undefined;
+}) => (json: MitosisComponent) => void;
+/**
+ * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
+ */
+export declare const CODE_PROCESSOR_PLUGIN: (codeProcessor: (codeType: import("./types").CodeType, json: MitosisComponent, node?: import("../../..").MitosisNode | undefined) => (code: string, hookType: string, context?: import("neotraverse/legacy").TraverseContext | undefined) => string | (() => void), a_1?: {
+    processProperties?: boolean | undefined;
+} | undefined) => MitosisPlugin;

package/dist/src/helpers/plugins/process-code/index.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CODE_PROCESSOR_PLUGIN = exports.createCodeProcessorPlugin = void 0;
+const function_1 = require("fp-ts/lib/function");
+const nullable_1 = require("../../nullable");
+const traverse_nodes_1 = require("../../traverse-nodes");
+const createCodeProcessorPlugin = (codeProcessor, { processProperties } = { processProperties: false }) => (json) => {
+    var _a;
+    function processHook(key, hook) {
+        var _a;
+        const result = codeProcessor('hooks', json)(hook.code, key);
+        if (typeof result === 'string') {
+            hook.code = result;
+        }
+        else {
+            result();
+        }
+        if (hook.deps) {
+            const result = codeProcessor('hooks-deps', json)(hook.deps, key);
+            if (typeof result === 'string') {
+                hook.deps = result;
+            }
+            else {
+                result();
+            }
+        }
+        if ((_a = hook.depsArray) === null || _a === void 0 ? void 0 : _a.length) {
+            hook.depsArray = hook.depsArray
+                .map((dep) => {
+                const innerResult = codeProcessor('hooks-deps-array', json)(dep, key);
+                if (typeof innerResult === 'string') {
+                    return innerResult;
+                }
+                else {
+                    return '';
+                }
+            })
+                .filter((dep) => !!dep);
+        }
+    }
+    /**
+     * process code in hooks
+     */
+    for (const key in json.hooks) {
+        const typedKey = key;
+        const hooks = json.hooks[typedKey];
+        if ((0, nullable_1.checkIsDefined)(hooks)) {
+            if (Array.isArray(hooks)) {
+                for (const hook of hooks) {
+                    processHook(typedKey, hook);
+                }
+            }
+            else {
+                processHook(typedKey, hooks);
+            }
+        }
+    }
+    for (const key in json.state) {
+        const state = json.state[key];
+        if (state) {
+            const result = codeProcessor('state', json)(state.code, key);
+            if (typeof result === 'string') {
+                state.code = result;
+            }
+            else {
+                result();
+            }
+            if (state.typeParameter) {
+                const result = codeProcessor('types', json)(state.typeParameter, key);
+                if (typeof result === 'string') {
+                    state.typeParameter = result;
+                }
+                else {
+                    result();
+                }
+            }
+        }
+    }
+    for (const key in json.context.set) {
+        const set = json.context.set[key];
+        if (set.ref) {
+            const result = codeProcessor('context-set', json)(set.ref, key);
+            if (typeof result === 'string') {
+                set.ref = result;
+            }
+            else {
+                result();
+            }
+        }
+        if (set.value) {
+            for (const key in set.value) {
+                const value = set.value[key];
+                if (value) {
+                    const result = codeProcessor('context-set', json)(value.code, key);
+                    if (typeof result === 'string') {
+                        value.code = result;
+                    }
+                    else {
+                        result();
+                    }
+                }
+            }
+        }
+    }
+    (0, traverse_nodes_1.traverseNodes)(json, (node, context) => {
+        if (processProperties) {
+            for (const key in node.properties) {
+                const value = node.properties[key];
+                if (key !== '_text' && value) {
+                    const result = codeProcessor('properties', json, node)(value, key);
+                    if (typeof result === 'string') {
+                        node.properties[key] = result;
+                    }
+                    else {
+                        result();
+                    }
+                }
+            }
+        }
+        for (const key in node.bindings) {
+            const value = node.bindings[key];
+            if (value === null || value === void 0 ? void 0 : value.code) {
+                const result = codeProcessor('bindings', json, node)(value.code, key, context);
+                if (typeof result === 'string') {
+                    value.code = result;
+                }
+                else {
+                    result();
+                }
+            }
+        }
+        // Fix web component tag issue due to the babel transform
+        // For exmaple: we pass a tag called "swiper-container", and it will be renamed as "swiper - container" after babel transforming,
+        // because babel will automatically identify the "-" as an operator, and add a space before and after it.
+        const result = node.name.includes('-')
+            ? node.name
+            : codeProcessor('dynamic-jsx-elements', json)(node.name, '');
+        if (typeof result === 'string') {
+            node.name = result;
+        }
+        else {
+            result();
+        }
+    });
+    if (json.types) {
+        json.types = (_a = json.types) === null || _a === void 0 ? void 0 : _a.map((type) => {
+            const result = codeProcessor('types', json)(type, '');
+            if (typeof result === 'string') {
+                return result;
+            }
+            result();
+            return type;
+        });
+    }
+    if (json.propsTypeRef) {
+        const result = codeProcessor('types', json)(json.propsTypeRef, '');
+        if (typeof result === 'string') {
+            json.propsTypeRef = result;
+        }
+        else {
+            result();
+        }
+    }
+};
+exports.createCodeProcessorPlugin = createCodeProcessorPlugin;
+/**
+ * Given a `codeProcessor` function, processes all code expressions within a Mitosis component.
+ */
+exports.CODE_PROCESSOR_PLUGIN = (0, function_1.flow)(exports.createCodeProcessorPlugin, (plugin) => () => ({ json: { post: plugin } }));

package/dist/src/helpers/plugins/process-code/types.d.ts

@@ -0,0 +1,7 @@
+import type { TraverseContext } from 'neotraverse/legacy';
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+export type CodeType = 'hooks' | 'hooks-deps' | 'hooks-deps-array' | 'bindings' | 'properties' | 'state' | 'types' | 'context-set' | 'dynamic-jsx-elements';
+declare function codeProcessor(codeType: CodeType, json: MitosisComponent, node?: MitosisNode): (code: string, hookType: string, context?: TraverseContext) => string | (() => void);
+export type CodeProcessor = typeof codeProcessor;
+export {};

package/dist/src/helpers/plugins/process-code/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/helpers/plugins/process-signals.d.ts

@@ -0,0 +1,22 @@
+import { Node, types } from '@babel/core';
+import { Target } from '../../types/config';
+import { MitosisPlugin } from '../../types/plugins';
+export declare const replaceSignalSetters: ({ code, nodeMaps, }: {
+    code: string;
+    nodeMaps: {
+        from: types.Node;
+        setTo: types.Expression;
+    }[];
+}) => string;
+/**
+ * Processes `Signal` type imports, transforming them to the target's equivalent and adding the import to the component.
+ */
+export declare const getSignalTypePlugin: ({ target }: {
+    target: Target;
+}) => MitosisPlugin;
+/**
+ * Processes `mySignal.value` accessors for props, context, and state.
+ */
+export declare const getSignalAccessPlugin: ({ target }: {
+    target: Target;
+}) => MitosisPlugin;