@builder.io/mitosis 0.7.6 → 0.9.0

package/dist/src/generators/angular/signals/plugins/get-code-processor-plugins.js

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCodeProcessorPlugins = void 0;
+const babel_transform_1 = require("../../../../helpers/babel-transform");
+const class_components_1 = require("../../../../helpers/class-components");
+const event_handlers_1 = require("../../../../helpers/event-handlers");
+const process_code_1 = require("../../../../helpers/plugins/process-code");
+const mitosis_node_1 = require("../../../../types/mitosis-node");
+const types_1 = require("@babel/types");
+const isStateOrPropsExpression = (path) => {
+    return ((0, types_1.isMemberExpression)(path.node) &&
+        (0, types_1.isIdentifier)(path.node.object) &&
+        (0, types_1.isIdentifier)(path.node.property) &&
+        (path.node.object.name === 'props' || path.node.object.name === 'state'));
+};
+const handleAssignmentExpression = (path) => {
+    if ((0, types_1.isMemberExpression)(path.node.left) &&
+        (0, types_1.isIdentifier)(path.node.left.object) &&
+        (0, types_1.isIdentifier)(path.node.left.property) &&
+        path.node.left.object.name === 'state') {
+        const root = (0, types_1.memberExpression)(path.node.left, (0, types_1.identifier)('set'));
+        root.extra = { ...root.extra, updateExpression: true };
+        const call = (0, types_1.callExpression)(root, [path.node.right]);
+        path.replaceWith(call);
+    }
+};
+const handleMemberExpression = (path) => {
+    var _a, _b, _c, _d;
+    if (((_a = path.node.extra) === null || _a === void 0 ? void 0 : _a.makeCallExpressionDone) || ((_c = (_b = path.parentPath) === null || _b === void 0 ? void 0 : _b.node.extra) === null || _c === void 0 ? void 0 : _c.updateExpression)) {
+        // Don't add a function if we've done it already
+        return;
+    }
+    if ((0, types_1.isCallExpression)(path.parent) &&
+        (0, types_1.isMemberExpression)(path.parent.callee) &&
+        (0, types_1.isIdentifier)(path.parent.callee.object) &&
+        (path.parent.callee.object.name === 'props' || path.parent.callee.object.name === 'state') &&
+        !((_d = path.parent.callee.extra) === null || _d === void 0 ? void 0 : _d.updateExpression)) {
+        // Don't add a function if it is already
+        return;
+    }
+    if (isStateOrPropsExpression(path)) {
+        path.node.extra = { ...path.node.extra, makeCallExpressionDone: true };
+        path.replaceWith((0, types_1.callExpression)(path.node, []));
+    }
+};
+const handleHookAndStateOnEvents = (path, isHookDepArray) => {
+    if ((0, types_1.isIdentifier)(path.node.property) && (0, event_handlers_1.checkIsEvent)(path.node.property.name)) {
+        if ((0, types_1.isIfStatement)(path.parent)) {
+            // We don't do anything if the event is in an IfStatement
+            path.node.extra = { ...path.node.extra, updateExpression: true };
+            return true;
+        }
+        else if ((0, types_1.isCallExpression)(path.parent) &&
+            (0, types_1.isIdentifier)(path.node.object) &&
+            (0, types_1.isMemberExpression)(path.parent.callee)) {
+            // We add "emit" to events
+            const root = (0, types_1.memberExpression)(path.node, (0, types_1.identifier)('emit'));
+            root.extra = { ...root.extra, updateExpression: true };
+            path.replaceWith(root);
+        }
+        else if (isHookDepArray && (0, types_1.isIdentifier)(path.node.object)) {
+            const iden = (0, types_1.identifier)(`// "${path.node.object.name}.${path.node.property.name}" is an event skip it.`);
+            path.replaceWith(iden);
+            return true;
+        }
+    }
+    return false;
+};
+const transformHooksAndState = (code, isHookDepArray) => {
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        AssignmentExpression(path) {
+            handleAssignmentExpression(path);
+        },
+        UpdateExpression(path) {
+            /*
+             * If we have a function like this:
+             * `state._counter++;`
+             *
+             * We need to convert it and use the "update" example from https://angular.dev/guide/signals#writable-signals:
+             * `state._counter.update(_counter=>_counter++)`
+             *
+             */
+            if ((0, types_1.isMemberExpression)(path.node.argument) &&
+                (0, types_1.isIdentifier)(path.node.argument.object) &&
+                path.node.argument.object.name === 'state' &&
+                (0, types_1.isIdentifier)(path.node.argument.property)) {
+                const root = (0, types_1.memberExpression)(path.node.argument, (0, types_1.identifier)('update'));
+                root.extra = { ...root.extra, updateExpression: true };
+                const argument = path.node.argument.property;
+                const block = (0, types_1.blockStatement)([
+                    (0, types_1.expressionStatement)((0, types_1.updateExpression)(path.node.operator, argument)),
+                    (0, types_1.returnStatement)(argument),
+                ]);
+                const arrowFunction = (0, types_1.arrowFunctionExpression)([argument], block);
+                const call = (0, types_1.callExpression)(root, [arrowFunction]);
+                path.replaceWith(call);
+            }
+        },
+        MemberExpression(path) {
+            const skip = handleHookAndStateOnEvents(path, isHookDepArray);
+            if (skip) {
+                return;
+            }
+            handleMemberExpression(path);
+        },
+    });
+};
+const addToImportCall = (json, importName) => {
+    const isImportCall = json.imports.find((imp) => imp.imports[importName]);
+    const isExportCall = json.exports ? !!json.exports[importName] : false;
+    if (isImportCall || isExportCall) {
+        json.compileContext.angular.extra.importCalls.push(importName);
+    }
+};
+const transformBindings = (json, code) => {
+    return (0, babel_transform_1.babelTransformExpression)(code, {
+        BlockStatement() {
+            console.error(`
+Component ${json.name} has a BlockStatement inside JSX'. 
+This will cause an error in Angular.
+Please create and call a new function instead with this code:
+${code}`);
+        },
+        CallExpression(path) {
+            // If we call a function from an import we need to add it to the Component as well
+            if ((0, types_1.isIdentifier)(path.node.callee)) {
+                addToImportCall(json, path.node.callee.name);
+            }
+        },
+        Identifier(path) {
+            // If we use a constant from an import we need to add it to the Component as well
+            if ((0, types_1.isIdentifier)(path.node)) {
+                addToImportCall(json, path.node.name);
+            }
+        },
+        StringLiteral(path) {
+            var _a;
+            // We cannot use " for string literal in template
+            if ((_a = path.node.extra) === null || _a === void 0 ? void 0 : _a.raw) {
+                path.node.extra.raw = path.node.extra.raw.replaceAll('"', "'");
+            }
+        },
+        AssignmentExpression(path) {
+            handleAssignmentExpression(path);
+        },
+        MemberExpression(path) {
+            handleMemberExpression(path);
+        },
+    });
+};
+const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
+    return [
+        ...(options.plugins || []),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'bindings':
+                    return (code, key, context) => {
+                        var _a, _b, _c;
+                        let replaceWith = '';
+                        if (key === 'key') {
+                            /**
+                             * If we have a key attribute we need to check if it is inside a @for loop.
+                             * We will create a new function for the key attribute.
+                             * Therefore, we need to add "this" to state and props.
+                             */
+                            const isForParent = ((_c = (_b = (_a = context === null || context === void 0 ? void 0 : context.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.node) === null || _c === void 0 ? void 0 : _c.name) === mitosis_node_1.ForNodeName;
+                            if (isForParent) {
+                                replaceWith = 'this.';
+                            }
+                        }
+                        return (0, class_components_1.processClassComponentBinding)(json, transformBindings(json, code), {
+                            ...processBindingOptions,
+                            replaceWith,
+                        });
+                    };
+                case 'hooks-deps-array':
+                case 'hooks':
+                case 'state':
+                    return (code) => {
+                        return (0, class_components_1.processClassComponentBinding)(json, transformHooksAndState(code, codeType === 'hooks-deps-array'), processBindingOptions);
+                    };
+                case 'properties':
+                case 'hooks-deps':
+                case 'context-set':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (code) => {
+                        return (0, class_components_1.processClassComponentBinding)(json, code, processBindingOptions);
+                    };
+            }
+        }),
+    ];
+};
+exports.getCodeProcessorPlugins = getCodeProcessorPlugins;

package/dist/src/generators/angular/types.d.ts

@@ -1,7 +1,8 @@
-import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare const BUILT_IN_COMPONENTS: Set<string>;
+export type AngularApi = 'classic' | 'signals';
 export interface ToAngularOptions extends BaseTranspilerOptions {
+    api?: AngularApi;
     state?: 'class-properties' | 'inline-with-wrappers';
     standalone?: boolean;
     preserveImports?: boolean;
@@ -12,7 +13,6 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     experimental?: {
         injectables?: (variableName: string, variableType: string) => string;
         inject?: boolean;
-        outputs?: (json: MitosisComponent, variableName: string) => string;
     };
 }
 export declare const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions;
@@ -28,6 +28,7 @@ export type AngularMetadata = {
      */
     nativeEvents?: string[];
     /**
+     * @deprecated Rename component in *.lite.tsx
      * Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component)
      */
     selector?: string;
@@ -40,6 +41,26 @@ export type AngularMetadata = {
      * Overwrite default sanitizeInnerHTML. Default is `false`
      */
     sanitizeInnerHTML?: boolean;
+    /**
+     * @deprecated Only for api=classic
+     * Add additional @Output() properties to the component.
+     * Can be used with `useTarget({angular: ()=> ...})` if needed.
+     */
+    outputs?: string[];
+    /**
+     * Only for api=signals
+     */
+    signals?: {
+        /**
+         * Turns every property in this array to [`model`](https://angular.dev/api/core/model).
+         * This is useful if you want to use ngModel(`[(prop)]`) syntax in Angular.
+         */
+        writeable?: string[];
+        /**
+         * Adds [`.required`](https://angular.dev/api/core/input#required()) to the `input()` properties.
+         */
+        required?: string[];
+    };
 };
 export type AngularBlockOptions = {
     childComponents?: string[];

package/dist/src/generators/angular/types.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_ANGULAR_OPTIONS = exports.BUILT_IN_COMPONENTS = void 0;
 exports.BUILT_IN_COMPONENTS = new Set(['Show', 'For', 'Fragment', 'Slot']);
 exports.DEFAULT_ANGULAR_OPTIONS = {
+    api: 'classic',
     state: 'inline-with-wrappers',
     preserveImports: false,
     preserveFileExtensions: false,

package/dist/src/generators/mitosis/generator.js

@@ -1,27 +1,4 @@
 "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 };
 };
@@ -42,8 +19,6 @@ const render_imports_1 = require("../../helpers/render-imports");
 const state_1 = require("../../helpers/state");
 const plugins_1 = require("../../modules/plugins");
 const mitosis_node_1 = require("../../types/mitosis-node");
-const babel = __importStar(require("@babel/core"));
-const plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
 const json5_1 = __importDefault(require("json5"));
 const standalone_1 = require("prettier/standalone");
 const react_1 = require("../react");
@@ -126,8 +101,17 @@ const blockToMitosis = (json, toMitosisOptions = {}, component, insideJsx) => {
         if (text.includes('<') || text.includes('>')) {
             // test if this can parse as jsx
             try {
-                babel.parse(`let _ = <>${text}</>;`, {
-                    plugins: [[plugin_syntax_typescript_1.default, { isTSX: true }]],
+                /**
+                 * We intentionally use the typescript parser here because texts like ">" will crash
+                 * in the typescript parser but will not crash in the babel parser. The Prettier
+                 * formatting that is run after JSX is generated also uses the typescript parser,
+                 * so we want to make sure that doesn't crash.
+                 */
+                (0, standalone_1.check)(`let _ = <>${text}</>;`, {
+                    parser: 'typescript',
+                    plugins: [
+                        require('prettier/parser-typescript'), // To support running in browsers
+                    ],
                 });
                 isInvalidJsx = false;
             }

package/dist/src/generators/qwik/component-generator.js

@@ -38,6 +38,7 @@ const PLUGINS = [
             case 'context-set':
             case 'hooks':
             case 'hooks-deps':
+            case 'hooks-deps-array':
             case 'properties':
             case 'dynamic-jsx-elements':
                 // update signal getters to have `.value`

package/dist/src/generators/solid/index.js

@@ -135,6 +135,7 @@ const componentToSolid = (passedOptions) => ({ component }) => {
                 case 'bindings':
                 case 'hooks':
                 case 'hooks-deps':
+                case 'hooks-deps-array':
                 case 'properties':
                     return (0, helpers_2.updateStateCode)({
                         component: json,

package/dist/src/generators/stencil/blocks.js

@@ -4,6 +4,7 @@ exports.blockToStencil = void 0;
 const html_tags_1 = require("../../constants/html_tags");
 const helpers_1 = require("../../generators/stencil/helpers");
 const collect_class_string_1 = require("../../generators/stencil/helpers/collect-class-string");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const for_1 = require("../../helpers/nodes/for");
 const transform_to_jsx_1 = require("../../helpers/transform-to-jsx");
@@ -93,7 +94,7 @@ const blockToStencil = ({ json, options = {}, insideJsx, rootRef, childComponent
         ${code.startsWith('this.') ? code : `this.${code}`} = el}
       } `;
         }
-        else if ((0, helpers_1.isEvent)(key)) {
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
             const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
             str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
         }

package/dist/src/generators/stencil/component.js

@@ -7,6 +7,7 @@ const helpers_1 = require("../../generators/stencil/helpers");
 const get_code_processor_plugins_1 = require("../../generators/stencil/plugins/get-code-processor-plugins");
 const dash_case_1 = require("../../helpers/dash-case");
 const dedent_1 = require("../../helpers/dedent");
+const event_handlers_1 = require("../../helpers/event-handlers");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
 const get_props_1 = require("../../helpers/get-props");
@@ -36,14 +37,14 @@ const componentToStencil = (_options = {
         (0, map_refs_1.mapRefs)(json, (refName) => `this.${refName}`);
         let css = (0, collect_css_1.collectCss)(json);
         let props = Array.from((0, get_props_1.getProps)(json));
-        const events = props.filter((prop) => (0, helpers_1.isEvent)(prop));
+        const events = props.filter((prop) => (0, event_handlers_1.checkIsEvent)(prop));
         const defaultProps = json.defaultProps;
         const childComponents = (0, get_child_components_1.getChildComponents)(json);
-        const processBindingOptions = { events };
         props = props.filter((prop) => {
             // Stencil doesn't need children as a prop
             return prop !== 'children';
         });
+        const processBindingOptions = { events, props, target: 'stencil' };
         options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
         if (options.plugins) {
             json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });

package/dist/src/generators/stencil/helpers/index.d.ts

@@ -1,11 +1,6 @@
 import { StencilPropOption, ToStencilOptions } from '../../../generators/stencil/types';
 import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
 import { MitosisNode } from '../../../types/mitosis-node';
-export declare const isEvent: (key: string) => boolean;
-export type ProcessBindingOptions = {
-    events: string[];
-};
-export declare const processBinding: (json: MitosisComponent, code: string, { events }: ProcessBindingOptions) => string;
 export declare const getTagName: (name: string, { prefix }: ToStencilOptions) => string;
 export declare const getPropsAsCode: ({ props, propOptions, defaultProps, json, }: {
     props: string[];

package/dist/src/generators/stencil/helpers/index.js

@@ -1,40 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExportsAndLocal = exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
+exports.getExportsAndLocal = exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = void 0;
 const dash_case_1 = require("../../../helpers/dash-case");
 const event_handlers_1 = require("../../../helpers/event-handlers");
 const render_imports_1 = require("../../../helpers/render-imports");
-const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
-const isEvent = (key) => (0, event_handlers_1.checkIsEvent)(key);
-exports.isEvent = isEvent;
-/**
- * We need to "emit" events those can be on multiple places, so we do it as post step
- */
-const appendEmits = (str, events) => {
-    let code = str;
-    if (events.length) {
-        for (const event of events) {
-            const eventWithoutOn = (0, event_handlers_1.getEventNameWithoutOn)(event);
-            code = code
-                .replaceAll(`props.${event}(`, `props.${eventWithoutOn}.emit(`)
-                .replaceAll(`props.${event}`, `props.${eventWithoutOn}`);
-        }
-    }
-    return code;
-};
-const processBinding = (json, code, { events }) => {
-    let resolvedCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(appendEmits(code, events), { replaceWith: 'this.' });
-    if (json.exports) {
-        // We need to use local exports with `this.` in stencil
-        Object.entries(json.exports)
-            .filter(([, value]) => value.usedInLocal)
-            .forEach(([key]) => {
-            resolvedCode = resolvedCode.replaceAll(key, `this.${key}`);
-        });
-    }
-    return resolvedCode;
-};
-exports.processBinding = processBinding;
 const getTagName = (name, { prefix }) => {
     const dashName = (0, dash_case_1.dashCase)(name);
     if (prefix) {
@@ -61,7 +30,7 @@ const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => {
             propsTypeRef !== 'unknown' &&
             propsTypeRef !== 'never' &&
             !isInternalType;
-        if ((0, exports.isEvent)(item)) {
+        if ((0, event_handlers_1.checkIsEvent)(item)) {
             // Stencil adds "on" to every `@Event` so we need to remove "on" from event props
             // https://stenciljs.com/docs/events#using-events-in-jsx
             const eventType = hasTyping

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.d.ts

@@ -1,4 +1,4 @@
-import { ProcessBindingOptions } from '../../../generators/stencil/helpers';
 import { ToStencilOptions } from '../../../generators/stencil/types';
+import { ProcessBindingOptions } from '../../../helpers/class-components';
 import { MitosisComponent } from '../../../types/mitosis-component';
 export declare const getCodeProcessorPlugins: (json: MitosisComponent, options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").MitosisPlugin[];

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCodeProcessorPlugins = void 0;
-const helpers_1 = require("../../../generators/stencil/helpers");
+const class_components_1 = require("../../../helpers/class-components");
 const process_code_1 = require("../../../helpers/plugins/process-code");
 const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
     return [
@@ -12,11 +12,12 @@ const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
                 case 'properties':
                 case 'hooks':
                 case 'hooks-deps':
+                case 'hooks-deps-array':
                 case 'state':
                 case 'context-set':
                 case 'dynamic-jsx-elements':
                 case 'types':
-                    return (code) => (0, helpers_1.processBinding)(json, code, processBindingOptions);
+                    return (code) => (0, class_components_1.processClassComponentBinding)(json, code, processBindingOptions);
             }
         }),
     ];

package/dist/src/generators/svelte/svelte.js

@@ -153,6 +153,7 @@ const componentToSvelte = (userProvidedOptions) => ({ component }) => {
                     return babel_transform_1.convertTypeScriptToJS;
                 case 'hooks':
                 case 'hooks-deps':
+                case 'hooks-deps-array':
                 case 'state':
                 case 'context-set':
                 case 'dynamic-jsx-elements':
@@ -172,6 +173,7 @@ const componentToSvelte = (userProvidedOptions) => ({ component }) => {
                 case 'context-set':
                     return (0, function_1.flow)((0, helpers_2.stripStateAndProps)({ json, options }));
                 case 'dynamic-jsx-elements':
+                case 'hooks-deps-array':
                 case 'types':
                     return (x) => x;
             }

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

@@ -121,6 +121,7 @@ const componentToVue = (userOptions) => ({ component: _component, path }) => {
                     return (0, replace_identifiers_1.replaceStateIdentifier)(null);
                 case 'properties':
                 case 'dynamic-jsx-elements':
+                case 'hooks-deps-array':
                 case 'types':
                     return (c) => c;
             }
@@ -136,6 +137,7 @@ const componentToVue = (userOptions) => ({ component: _component, path }) => {
                 case 'properties':
                 case 'dynamic-jsx-elements':
                 case 'hooks-deps':
+                case 'hooks-deps-array':
                 case 'types':
                     return (c) => c;
                 case 'state':

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

@@ -57,7 +57,7 @@ const handleErrorOrExpression = ({ code, useCode, result, visitor, stripTypes, }
         return result;
     }
     catch (err) {
-        // console.error('Error parsing code:\n', { code, result, useCode });
+        console.error('Error parsing code:\n', { code, result, useCode });
         throw err;
     }
 };

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/get-state-object-string.d.ts

@@ -6,6 +6,10 @@ interface GetStateObjectStringOptions {
     functions?: boolean;
     getters?: boolean;
     valueMapper?: ValueMapper;
+    /**
+     * If you want the plain value mapper as output
+     */
+    onlyValueMapper?: boolean;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
     withType?: boolean;

package/dist/src/helpers/get-state-object-string.js

@@ -5,12 +5,13 @@ const DEFAULT_OPTIONS = {
     format: 'object',
     keyPrefix: '',
     valueMapper: (val) => val,
+    onlyValueMapper: false,
     data: true,
     functions: true,
     getters: true,
     withType: false,
 };
-const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper, withType }) => ([key, state]) => {
+const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper, withType, onlyValueMapper, }) => ([key, state]) => {
     const keyValueDelimiter = format === 'object' ? ':' : '=';
     if (!state) {
         return undefined;
@@ -22,25 +23,41 @@ const convertStateMemberToString = ({ data, format, functions, getters, keyPrefi
             if (!functions) {
                 return undefined;
             }
-            return `${keyPrefix} ${key} ${keyValueDelimiter} ${valueMapper(code, 'function', typeParameter, key)}`;
+            const mapper = valueMapper(code, 'function', typeParameter, key);
+            if (onlyValueMapper) {
+                return mapper;
+            }
+            return `${keyPrefix} ${key} ${keyValueDelimiter} ${mapper}`;
         }
         case 'method': {
             if (!functions) {
                 return undefined;
             }
-            return `${keyPrefix} ${valueMapper(code, 'function', typeParameter, key)}`;
+            const mapper = valueMapper(code, 'function', typeParameter, key);
+            if (onlyValueMapper) {
+                return mapper;
+            }
+            return `${keyPrefix} ${mapper}`;
         }
         case 'getter': {
             if (!getters) {
                 return undefined;
             }
-            return `${keyPrefix} ${valueMapper(code, 'getter', typeParameter, key)}`;
+            const mapper = valueMapper(code, 'getter', typeParameter, key);
+            if (onlyValueMapper) {
+                return mapper;
+            }
+            return `${keyPrefix} ${mapper}`;
         }
         case 'property': {
             if (!data) {
                 return undefined;
             }
-            return `${keyPrefix} ${key}${type}${keyValueDelimiter} ${valueMapper(code, 'data', typeParameter, key)}`;
+            const mapper = valueMapper(code, 'data', typeParameter, key);
+            if (onlyValueMapper) {
+                return mapper;
+            }
+            return `${keyPrefix} ${key}${type}${keyValueDelimiter} ${mapper}`;
         }
         default:
             break;