@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/generators/vue/vue.js

@@ -0,0 +1,272 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToVue = void 0;
+const apply_meta_tagname_1 = require("../../helpers/apply-meta-tagname");
+const babel_transform_1 = require("../../helpers/babel-transform");
+const bindings_1 = require("../../helpers/bindings");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_props_1 = require("../../helpers/get-props");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const map_refs_1 = require("../../helpers/map-refs");
+const merge_options_1 = require("../../helpers/merge-options");
+const on_event_1 = require("../../helpers/on-event");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const process_http_requests_1 = require("../../helpers/process-http-requests");
+const render_imports_1 = require("../../helpers/render-imports");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const slots_1 = require("../../helpers/slots");
+const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const function_1 = require("fp-ts/lib/function");
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const standalone_1 = require("prettier/standalone");
+const plugins_1 = require("../../modules/plugins");
+const functions_1 = require("../helpers/functions");
+const blocks_1 = require("./blocks");
+const compositionApi_1 = require("./compositionApi");
+const helpers_1 = require("./helpers");
+const optionsApi_1 = require("./optionsApi");
+// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
+function processDynamicComponents(json, _options) {
+    (0, legacy_1.default)(json).forEach((node) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name.includes('.')) {
+                node.bindings.is = (0, bindings_1.createSingleBinding)({ code: node.name });
+                node.name = 'component';
+            }
+        }
+    });
+}
+function processForKeys(json, _options) {
+    (0, legacy_1.default)(json).forEach((node) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name === 'For') {
+                const firstChild = node.children[0];
+                if (firstChild && firstChild.bindings.key) {
+                    node.bindings.key = firstChild.bindings.key;
+                    delete firstChild.bindings.key;
+                }
+            }
+        }
+    });
+}
+/**
+ * This plugin handle `onUpdate` code that watches dependencies.
+ * We need to apply this workaround to be able to watch specific dependencies in Vue 2: https://stackoverflow.com/a/45853349
+ *
+ * We add a `computed` property for the dependencies, and a matching `watch` function for the `onUpdate` code
+ */
+const onUpdatePlugin = (options) => ({
+    json: {
+        post: (component) => {
+            if (component.hooks.onUpdate) {
+                component.hooks.onUpdate
+                    .filter((hook) => { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })
+                    .forEach((hook, index) => {
+                    var _a;
+                    const code = `get ${(0, helpers_1.getOnUpdateHookName)(index)} () {
+            return {
+              ${(_a = hook.deps) === null || _a === void 0 ? void 0 : _a.slice(1, -1).split(',').map((dep, k) => {
+                        const val = dep.trim();
+                        return `${k}: ${val}`;
+                    }).join(',')}
+            }
+          }`;
+                    component.state[(0, helpers_1.getOnUpdateHookName)(index)] = {
+                        code,
+                        type: 'getter',
+                    };
+                });
+            }
+        },
+    },
+});
+const BASE_OPTIONS = {
+    api: 'options',
+    defineComponent: true,
+    casing: 'pascal',
+};
+const componentToVue = (userOptions) => ({ component: _component, path }) => {
+    var _a, _b, _c, _d, _e, _f;
+    // Make a copy we can safely mutate, similar to babel's toolchain can be used
+    let component = (0, fast_clone_1.fastClone)(_component);
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'vue',
+        component,
+        defaults: BASE_OPTIONS,
+        userOptions: userOptions,
+    });
+    if (options.api === 'composition') {
+        options.asyncComponentImports = false;
+    }
+    options.plugins.unshift((0, on_event_1.processOnEventHooksPlugin)(), ...(options.api === 'options' ? [onUpdatePlugin] : []), ...(options.api === 'composition' ? [functions_1.FUNCTION_HACK_PLUGIN] : []), (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+        if (options.api === 'composition') {
+            switch (codeType) {
+                case 'hooks':
+                    return (code) => (0, helpers_1.processBinding)({ code, options, json: component });
+                case 'state':
+                    return (code) => (0, helpers_1.processBinding)({ code, options, json: component });
+                case 'bindings':
+                    return (0, function_1.flow)(
+                    // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                    babel_transform_1.convertTypeScriptToJS, (code) => (0, helpers_1.processBinding)({ code, options, json: component, codeType }));
+                case 'context-set':
+                    return (code) => (0, helpers_1.processBinding)({ code, options, json: component, preserveGetter: true });
+                case 'hooks-deps':
+                    return (0, replace_identifiers_1.replaceStateIdentifier)(null);
+                case 'properties':
+                case 'dynamic-jsx-elements':
+                case 'hooks-deps-array':
+                case 'types':
+                    return (c) => c;
+            }
+        }
+        else {
+            switch (codeType) {
+                case 'hooks':
+                    return (code) => (0, helpers_1.processBinding)({ code, options, json: component });
+                case 'bindings':
+                    return (0, function_1.flow)(
+                    // Strip types from any JS code that ends up in the template, because Vue does not support TS code in templates.
+                    babel_transform_1.convertTypeScriptToJS, (code) => (0, helpers_1.processBinding)({ code, options, json: component, codeType }));
+                case 'properties':
+                case 'dynamic-jsx-elements':
+                case 'hooks-deps':
+                case 'hooks-deps-array':
+                case 'types':
+                    return (c) => c;
+                case 'state':
+                    return (c) => (0, helpers_1.processBinding)({ code: c, options, json: component });
+                case 'context-set':
+                    return (code) => (0, helpers_1.processBinding)({
+                        code,
+                        options,
+                        json: component,
+                        thisPrefix: '_this',
+                        preserveGetter: true,
+                    });
+            }
+        }
+    }));
+    (0, process_http_requests_1.processHttpRequests)(component);
+    processDynamicComponents(component, options);
+    processForKeys(component, options);
+    component = (0, plugins_1.runPreJsonPlugins)({ json: component, plugins: options.plugins });
+    if (options.api === 'options') {
+        (0, map_refs_1.mapRefs)(component, (refName) => `this.$refs.${refName}`);
+    }
+    // need to run this before we process the component's code
+    const props = Array.from((0, get_props_1.getProps)(component));
+    const elementProps = props.filter((prop) => !(0, slots_1.isSlotProperty)(prop));
+    const slotsProps = props.filter((prop) => (0, slots_1.isSlotProperty)(prop));
+    component = (0, plugins_1.runPostJsonPlugins)({ json: component, plugins: options.plugins });
+    const css = (0, collect_css_1.collectCss)(component, {
+        prefix: (_b = (_a = options.cssNamespace) === null || _a === void 0 ? void 0 : _a.call(options)) !== null && _b !== void 0 ? _b : undefined,
+    });
+    // Apply the meta tagName to the component BEFORE we strip the meta properties
+    (0, apply_meta_tagname_1.applyMetaTagName)(component);
+    (0, strip_meta_properties_1.stripMetaProperties)(component);
+    const templateStrBody = component.children
+        .map((item) => (0, blocks_1.blockToVue)(item, options, { isRootNode: true }))
+        .join('\n');
+    const template = options.casing === 'kebab'
+        ? (0, helpers_1.renameMitosisComponentsToKebabCase)(templateStrBody)
+        : templateStrBody;
+    const onUpdateWithDeps = ((_c = component.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter((hook) => { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
+    const onUpdateWithoutDeps = ((_d = component.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.filter((hook) => { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
+    const getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'getter'));
+    // import from vue
+    let vueImports = [];
+    if (options.asyncComponentImports) {
+        vueImports.push('defineAsyncComponent');
+    }
+    if (options.api === 'options' && options.defineComponent) {
+        vueImports.push('defineComponent');
+    }
+    if (options.api === 'composition') {
+        onUpdateWithDeps.length && vueImports.push('watch');
+        component.hooks.onMount.length && vueImports.push('onMounted');
+        ((_e = component.hooks.onUnMount) === null || _e === void 0 ? void 0 : _e.code) && vueImports.push('onUnmounted');
+        onUpdateWithoutDeps.length && vueImports.push('onUpdated');
+        (0, lodash_1.size)(getterKeys) && vueImports.push('computed');
+        (0, lodash_1.size)(component.context.set) && vueImports.push('provide');
+        (0, lodash_1.size)(component.context.get) && vueImports.push('inject');
+        (0, lodash_1.size)(Object.keys(component.state).filter((key) => { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) + (0, lodash_1.size)(component.refs) && vueImports.push('ref');
+        (0, lodash_1.size)(slotsProps) && vueImports.push('useSlots');
+    }
+    const tsLangAttribute = options.typescript ? `lang='ts'` : '';
+    let str = (0, dedent_1.dedent) `
+    ${template.trim().length > 0
+        ? `<template>
+      ${template}
+    </template>`
+        : ''}
+
+
+    <script ${options.api === 'composition' ? 'setup' : ''} ${tsLangAttribute}>
+      ${vueImports.length ? `import { ${(0, lodash_1.uniq)(vueImports).sort().join(', ')} } from "vue"` : ''}
+
+      ${(0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component,
+        target: 'vue',
+        asyncComponentImports: options.asyncComponentImports,
+    })}
+
+      ${(options.typescript && ((_f = component.types) === null || _f === void 0 ? void 0 : _f.join('\n'))) || ''}
+
+      ${options.api === 'composition'
+        ? (0, compositionApi_1.generateCompositionApiScript)(component, options, template, elementProps, onUpdateWithDeps, onUpdateWithoutDeps)
+        : (0, optionsApi_1.generateOptionsApiScript)(component, options, path, template, elementProps, onUpdateWithDeps, onUpdateWithoutDeps)}
+    </script>
+
+    ${!css.trim().length
+        ? ''
+        : `<style scoped>
+      ${css}
+    </style>`}
+  `;
+    str = (0, plugins_1.runPreCodePlugins)({
+        json: component,
+        code: str,
+        plugins: options.plugins,
+        options: { json: component },
+    });
+    if (true || options.prettier !== false) {
+        try {
+            str = (0, standalone_1.format)(str, {
+                parser: 'vue',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-typescript'),
+                    require('prettier/parser-html'),
+                    require('prettier/parser-postcss'),
+                    require('prettier/parser-babel'),
+                ],
+            });
+        }
+        catch (err) {
+            console.warn('Could not prettify', { string: str }, err);
+        }
+    }
+    str = (0, plugins_1.runPostCodePlugins)({ json: component, code: str, plugins: options.plugins });
+    for (const pattern of removePatterns) {
+        str = str.replace(pattern, '').trim();
+    }
+    str = str.replace(/<script(.*)>\n?<\/script>/g, '').trim();
+    return str;
+};
+exports.componentToVue = componentToVue;
+// Remove unused artifacts like empty script or style tags
+const removePatterns = [
+    `<script>
+export default {};
+</script>`,
+    `<style>
+</style>`,
+];

package/dist/src/helpers/apply-meta-tagname.d.ts

@@ -0,0 +1,2 @@
+import { MitosisComponent } from '../types/mitosis-component';
+export declare const applyMetaTagName: (json: MitosisComponent) => MitosisComponent;

package/dist/src/helpers/apply-meta-tagname.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyMetaTagName = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("./is-mitosis-node");
+const applyMetaTagName = (json) => {
+    (0, legacy_1.default)(json).forEach((item) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if (item.properties.$tagName) {
+                item.name = item.properties.$tagName;
+                delete item.properties.$tagName;
+            }
+        }
+    });
+    return json;
+};
+exports.applyMetaTagName = applyMetaTagName;

package/dist/src/helpers/babel-transform.d.ts

@@ -0,0 +1,7 @@
+import * as babel from '@babel/core';
+import type { Visitor } from '@babel/traverse';
+export declare const babelTransformCode: <VisitorContextType = any>(code: string, visitor?: babel.Visitor<VisitorContextType> | undefined, stripTypes?: boolean) => string;
+type ExpressionType = 'expression' | 'unknown' | 'block' | 'functionBody';
+export declare const babelTransformExpression: <VisitorContextType = any>(code: string, visitor: babel.Visitor<VisitorContextType>, initialType?: ExpressionType, stripTypes?: boolean) => string;
+export declare const convertTypeScriptToJS: (code: string) => string;
+export {};

package/dist/src/helpers/babel-transform.js

@@ -0,0 +1,130 @@
+"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.convertTypeScriptToJS = exports.babelTransformExpression = exports.babelTransformCode = 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"));
+const function_1 = require("fp-ts/lib/function");
+const patterns_1 = require("./patterns");
+const handleErrorOrExpression = ({ code, useCode, result, visitor, stripTypes, }) => {
+    try {
+        // If it can't, e.g. this is an expression or code fragment, modify the code below and try again
+        // Detect method fragments. These get passed sometimes and otherwise
+        // generate compile errors. They are of the form `foo() { ... }`
+        const isMethod = Boolean(!code.trim().startsWith('function') && code.trim().match(/^[a-z0-9_]+\s*\([^\)]*\)\s*[\{:]/i));
+        const isGetter = (0, patterns_1.checkIsGetter)(code);
+        const isMethodOrGetter = isMethod || isGetter;
+        if (isMethodOrGetter) {
+            useCode = `function ${useCode}`;
+        }
+        result = (0, function_1.pipe)(
+        // Parse the code as an expression (instead of the default, a block) by giving it a fake variable assignment
+        // e.g. if the code parsed is { ... } babel will treat that as a block by deafult, unless processed as an expression
+        // that is an object
+        `let _ = ${useCode}`, (code) => (0, exports.babelTransformCode)(code, visitor, stripTypes), trimSemicolons, 
+        // Remove our fake variable assignment
+        (str) => str.replace(/let _ =\s/, ''));
+        if (isMethodOrGetter) {
+            return result.replace('function', '');
+        }
+        return result;
+    }
+    catch (err) {
+        console.error('Error parsing code:\n', { code, result, useCode });
+        throw err;
+    }
+};
+const babelTransform = ({ code, visitor, stripTypes, }) => {
+    return babel.transform(code, {
+        sourceFileName: 'file.tsx',
+        configFile: false,
+        babelrc: false,
+        parserOpts: { allowReturnOutsideFunction: true },
+        ...(stripTypes ? { presets: [[preset_typescript_1.default, { isTSX: true, allExtensions: true }]] } : {}),
+        plugins: [
+            [plugin_syntax_typescript_1.default, { isTSX: true }],
+            [plugin_syntax_decorators_1.default, { legacy: true }],
+            ...(visitor ? [() => ({ visitor })] : []),
+        ],
+    });
+};
+const babelTransformCode = (code, visitor, stripTypes = false) => { var _a; return ((_a = babelTransform({ code, visitor, stripTypes })) === null || _a === void 0 ? void 0 : _a.code) || ''; };
+exports.babelTransformCode = babelTransformCode;
+// Babel adds trailing semicolons, but for expressions we need those gone
+// TODO: maybe detect if the original code ended with one, and keep it if so, for the case
+// of appending several fragements
+const trimSemicolons = (code) => code.replace(/;$/, '');
+const trimExpression = (type) => (code) => {
+    switch (type) {
+        case 'functionBody':
+            return code.replace(/^function\s*\(\)\s*\{/, '').replace(/\};?$/, '');
+        default:
+            return trimSemicolons(code);
+    }
+};
+const getType = (code, initialType) => {
+    // match for object literal like { foo: ... }
+    if (initialType === 'unknown' && code.trim().match(/^\s*{\s*[a-z0-9]+:/i)) {
+        return 'expression';
+    }
+    // For Builder content
+    if (initialType === 'unknown' &&
+        (code.includes('return _virtual_index') || code.trim().startsWith('return ')) &&
+        !code.trim().startsWith('function')) {
+        return 'functionBody';
+    }
+    return initialType;
+};
+const babelTransformExpression = (code, visitor, initialType = 'unknown', stripTypes = false) => {
+    if (!code) {
+        return '';
+    }
+    const isGetter = code.trim().startsWith('get ');
+    return (0, function_1.pipe)(code, isGetter ? patterns_1.replaceGetterWithFunction : function_1.identity, (code) => {
+        const type = getType(code, initialType);
+        const useCode = type === 'functionBody' ? `function(){${code}}` : code;
+        return { type, useCode };
+    }, ({ type, useCode }) => {
+        if (type !== 'expression') {
+            try {
+                return (0, function_1.pipe)((0, exports.babelTransformCode)(useCode, visitor, stripTypes), trimExpression(type));
+            }
+            catch (error) {
+                return handleErrorOrExpression({ code, useCode, result: null, visitor, stripTypes });
+            }
+        }
+        else {
+            return handleErrorOrExpression({ code, useCode, result: null, visitor, stripTypes });
+        }
+    }, isGetter ? patterns_1.replaceFunctionWithGetter : function_1.identity);
+};
+exports.babelTransformExpression = babelTransformExpression;
+const convertTypeScriptToJS = (code) => (0, exports.babelTransformExpression)(code, {}, 'unknown', true);
+exports.convertTypeScriptToJS = convertTypeScriptToJS;

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

@@ -0,0 +1,6 @@
+import { Binding } from '../types/mitosis-node';
+type SingleBinding = Omit<Binding & {
+    type: 'single';
+}, 'type'>;
+export declare const createSingleBinding: (args: Omit<SingleBinding, 'bindingType'> & Partial<Pick<SingleBinding, 'bindingType'>>) => Binding;
+export {};

package/dist/src/helpers/bindings.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSingleBinding = void 0;
+const createSingleBinding = (args) => ({
+    ...args,
+    bindingType: args.bindingType || 'expression',
+    type: 'single',
+});
+exports.createSingleBinding = createSingleBinding;

package/dist/src/helpers/camel-case.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+export declare function camelCase(text?: string): string;

package/dist/src/helpers/camel-case.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelCase = void 0;
+const capitalize_1 = require("./capitalize");
+/**
+ * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
+ *
+ * loadash: `camelCase('A-BC')` => "ABc"
+ * this fn: `camelCase('A-BC')` => "ABC"
+ *
+ */
+function camelCase(text = '') {
+    const parts = text.split('-');
+    const first = parts.shift();
+    return first + parts.map(capitalize_1.capitalize).join('');
+}
+exports.camelCase = camelCase;

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

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/dist/src/helpers/capitalize.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.capitalize = void 0;
+const capitalize = (str) => {
+    if (!str) {
+        return str;
+    }
+    return str[0].toUpperCase() + str.slice(1);
+};
+exports.capitalize = capitalize;

package/dist/src/helpers/class-components.d.ts

@@ -0,0 +1,13 @@
+import { Target } from '../types/config';
+import { MitosisComponent } from '../types/mitosis-component';
+export type ProcessBindingOptions = {
+    events: string[];
+    props: string[];
+    target: Target;
+    replaceWith?: string;
+    skipAppendEmit?: boolean;
+};
+/**
+ * We use this for generators like stencil and angular
+ */
+export declare const processClassComponentBinding: (json: MitosisComponent, code: string, processBindingOptions: ProcessBindingOptions) => string;

package/dist/src/helpers/class-components.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processClassComponentBinding = void 0;
+const strip_state_and_props_refs_1 = require("../helpers/strip-state-and-props-refs");
+const event_handlers_1 = require("./event-handlers");
+/**
+ * We need to "emit" events those can be on multiple places, so we do it as post step
+ */
+const appendEmits = (str, { name }, { events, props, target, skipAppendEmit }) => {
+    let code = str;
+    if (events.length) {
+        for (const event of events) {
+            const eventWithoutOn = (0, event_handlers_1.getEventNameWithoutOn)(event);
+            if (props.includes(eventWithoutOn)) {
+                console.error(`
+Component ${name} has an event ${event} that conflicts with prop ${eventWithoutOn} for target ${target}.
+Please rename the prop or the event.
+`);
+            }
+            if (!skipAppendEmit) {
+                code = code.replaceAll(`props.${event}(`, `props.${eventWithoutOn}.emit(`);
+            }
+            code = code.replaceAll(`props.${event}`, `props.${eventWithoutOn}`);
+        }
+    }
+    return code;
+};
+/**
+ * We use this for generators like stencil and angular
+ */
+const processClassComponentBinding = (json, code, processBindingOptions) => {
+    const { replaceWith = 'this.' } = processBindingOptions;
+    let resolvedCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(appendEmits(code, json, processBindingOptions), {
+        replaceWith,
+    });
+    if (json.exports) {
+        // We need to use local exports with `this.` in stencil and angular
+        Object.entries(json.exports)
+            .filter(([, value]) => value.usedInLocal)
+            .forEach(([key]) => {
+            resolvedCode = resolvedCode.replaceAll(key, `${replaceWith}${key}`);
+        });
+    }
+    if (json.context.get) {
+        for (const key of Object.keys(json.context.get)) {
+            resolvedCode = resolvedCode.replaceAll(key, `${replaceWith}${key}`);
+        }
+    }
+    return resolvedCode;
+};
+exports.processClassComponentBinding = processClassComponentBinding;

package/dist/src/helpers/component-file-extensions.d.ts

@@ -0,0 +1,50 @@
+import { MitosisConfig, Target } from '../types/config';
+export declare const COMPONENT_IMPORT_EXTENSIONS: string[];
+export declare const checkIsSvelteComponentFilePath: (filePath: string) => boolean;
+export declare const checkIsLiteComponentFilePath: (filePath: string) => boolean;
+export declare const checkIsMitosisComponentFilePath: (filePath: string) => boolean;
+/**
+ * Matches `.svelte`, `.lite.tsx`, `.lite.jsx` files (with optional `.jsx`/`.tsx` extension)
+ */
+export declare const INPUT_EXTENSION_REGEX: RegExp;
+export declare const renameComponentFile: ({ path, target, options, }: {
+    path: string;
+    target: Target;
+    options: MitosisConfig;
+}) => string;
+export declare const renameComponentImport: ({ importPath, target, explicitImportFileExtension, }: {
+    importPath: string;
+    target: Target;
+    explicitImportFileExtension: boolean;
+}) => string;
+export declare const renameImport: ({ importPath, target, explicitImportFileExtension, }: {
+    importPath: string;
+    target: Target;
+    explicitImportFileExtension: boolean;
+}) => string;
+type Args = {
+    target: Target;
+} & ({
+    /**
+     * Whether we are rendering an import statement or a filename.
+     */
+    type: 'import';
+    explicitImportFileExtension: boolean;
+} | {
+    /**
+     * Whether we are rendering an import statement or a filename.
+     */
+    type: 'filename';
+    isTypescript: boolean;
+});
+/**
+ * Provides the correct file extension for a given component. This is used:
+ *  - in `core` to render import statements within other components.
+ *  - in `cli` to render filenames for generated components, and import statements within plain `.js`/`.ts` files.
+ */
+export declare const getComponentFileExtensionForTarget: (args: Args) => string;
+export declare const getFileExtensionForTarget: ({ target, explicitImportFileExtension, }: {
+    target: Target;
+    explicitImportFileExtension: boolean;
+}) => string;
+export {};