@builder.io/mitosis 0.7.6 → 0.9.0

package/dist/src/generators/angular/{blocks.d.ts → classic/blocks.d.ts}

@@ -1,6 +1,6 @@
-import { AngularBlockOptions, ToAngularOptions } from '../../generators/angular/types';
-import { MitosisComponent } from '../../types/mitosis-component';
-import { MitosisNode } from '../../types/mitosis-node';
+import { AngularBlockOptions, ToAngularOptions } from '../../../generators/angular/types';
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
 export declare const blockToAngular: ({ root, json, options, blockOptions, rootRef, }: {
     root: MitosisComponent;
     json: MitosisNode;

package/dist/src/generators/angular/{blocks.js → classic/blocks.js}

@@ -4,19 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToAngular = void 0;
-const html_tags_1 = require("../../constants/html_tags");
-const helpers_1 = require("../../generators/angular/helpers");
-const hooks_1 = require("../../generators/angular/helpers/hooks");
-const parse_selector_1 = require("../../generators/angular/parse-selector");
-const bindings_1 = require("../../helpers/bindings");
-const event_handlers_1 = require("../../helpers/event-handlers");
-const get_tag_name_1 = require("../../helpers/get-tag-name");
-const is_children_1 = __importDefault(require("../../helpers/is-children"));
-const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
-const slots_1 = require("../../helpers/slots");
-const symbol_processor_1 = require("../../symbols/symbol-processor");
-const mitosis_node_1 = require("../../types/mitosis-node");
+const html_tags_1 = require("../../../constants/html_tags");
+const helpers_1 = require("../../../generators/angular/helpers");
+const hooks_1 = require("../../../generators/angular/helpers/hooks");
+const parse_selector_1 = require("../../../generators/angular/helpers/parse-selector");
+const bindings_1 = require("../../../helpers/bindings");
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const get_tag_name_1 = require("../../../helpers/get-tag-name");
+const is_children_1 = __importDefault(require("../../../helpers/is-children"));
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const remove_surrounding_block_1 = require("../../../helpers/remove-surrounding-block");
+const slots_1 = require("../../../helpers/slots");
+const symbol_processor_1 = require("../../../symbols/symbol-processor");
+const mitosis_node_1 = require("../../../types/mitosis-node");
 const function_1 = require("fp-ts/function");
 const lodash_1 = require("lodash");
 const mappers = {
@@ -304,7 +304,7 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
         const selector = json.meta.selector || (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.selector);
         if (selector) {
             try {
-                ({ element, classNames, attributes } = (0, parse_selector_1.parse)(`${selector}`));
+                ({ element, classNames, attributes } = (0, parse_selector_1.parseSelector)(`${selector}`));
             }
             catch (_r) {
                 element = tagName !== null && tagName !== void 0 ? tagName : (0, lodash_1.kebabCase)(json.name);

package/dist/src/generators/angular/classic/component.d.ts

@@ -0,0 +1,3 @@
+import { ToAngularOptions } from '../../../generators/angular/types';
+import { TranspilerGenerator } from '../../../types/transpiler';
+export declare const componentToAngularClassic: TranspilerGenerator<ToAngularOptions>;

package/dist/src/generators/angular/classic/component.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToAngularClassic = void 0;
+const blocks_1 = require("../../../generators/angular/classic/blocks");
+const get_class_properties_plugin_1 = require("../../../generators/angular/classic/plugins/get-class-properties-plugin");
+const get_code_processor_plugins_1 = require("../../../generators/angular/classic/plugins/get-code-processor-plugins");
+const helpers_1 = require("../../../generators/angular/helpers");
+const get_inputs_1 = require("../../../generators/angular/helpers/get-inputs");
+const get_outputs_1 = require("../../../generators/angular/helpers/get-outputs");
+const get_refs_1 = require("../../../generators/angular/helpers/get-refs");
+const get_styles_1 = require("../../../generators/angular/helpers/get-styles");
+const types_1 = require("../../../generators/angular/types");
+const on_mount_1 = require("../../../generators/helpers/on-mount");
+const dedent_1 = require("../../../helpers/dedent");
+const fast_clone_1 = require("../../../helpers/fast-clone");
+const get_child_components_1 = require("../../../helpers/get-child-components");
+const get_components_used_1 = require("../../../helpers/get-components-used");
+const get_custom_imports_1 = require("../../../helpers/get-custom-imports");
+const get_prop_functions_1 = require("../../../helpers/get-prop-functions");
+const get_props_1 = require("../../../helpers/get-props");
+const get_props_ref_1 = require("../../../helpers/get-props-ref");
+const get_refs_2 = require("../../../helpers/get-refs");
+const get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../../helpers/get-typed-function");
+const is_upper_case_1 = require("../../../helpers/is-upper-case");
+const merge_options_1 = require("../../../helpers/merge-options");
+const render_imports_1 = require("../../../helpers/render-imports");
+const strip_meta_properties_1 = require("../../../helpers/strip-meta-properties");
+const attribute_passing_1 = require("../../../helpers/web-components/attribute-passing");
+const plugins_1 = require("../../../modules/plugins");
+const lodash_1 = require("lodash");
+const format_1 = require("../helpers/format");
+const componentToAngularClassic = (userOptions = {}) => {
+    return ({ component: _component }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        // Make a copy we can safely mutate, similar to babel's toolchain
+        let json = (0, fast_clone_1.fastClone)(_component);
+        const useMetadata = (_a = json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata;
+        const contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
+        const metaOutputVars = (useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.outputs) || [];
+        const outputVars = (0, lodash_1.uniq)([...metaOutputVars, ...(0, get_prop_functions_1.getPropFunctions)(json)]);
+        const options = (0, merge_options_1.initializeOptions)({
+            target: 'angular',
+            component: _component,
+            defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
+            userOptions,
+        });
+        options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)({ json, options, outputVars, contextVars });
+        if (options.state === 'class-properties') {
+            options.plugins.push((0, get_class_properties_plugin_1.getClassPropertiesPlugin)());
+        }
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+        }
+        // Prepare Props
+        const [forwardProp, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json, true);
+        const props = (0, get_props_1.getProps)(json);
+        // prevent jsx props from showing up as @Input
+        if (hasPropRef) {
+            props.delete(forwardProp);
+        }
+        props.delete('children');
+        // remove props for outputs
+        for (const variableName of outputVars) {
+            props.delete(variableName);
+        }
+        const childComponents = (0, get_child_components_1.getChildComponents)(json);
+        const customImports = (0, get_custom_imports_1.getCustomImports)(json);
+        const { exports: localExports = {} } = json;
+        const localExportVars = Object.keys(localExports)
+            .filter((key) => localExports[key].usedInLocal)
+            .map((key) => `${key} = ${key};`);
+        // Context handling
+        const injectables = contextVars.map((variableName) => {
+            var _a, _b, _c, _d;
+            const variableType = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
+            if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.injectables) {
+                return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.injectables(variableName, variableType);
+            }
+            if ((_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.inject) {
+                return `@Inject(forwardRef(() => ${variableType})) public ${variableName}: ${variableType}`;
+            }
+            return `public ${variableName} : ${variableType}`;
+        });
+        // Handle refs
+        const withAttributePassing = (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
+        const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
+        const domRefs = (0, get_refs_1.getDomRefs)({ json, options, withAttributePassing, rootRef });
+        const jsRefs = Object.keys(json.refs).filter((ref) => !domRefs.has(ref));
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+        }
+        // CSS
+        const styles = (0, get_styles_1.getAngularStyles)({ json, options });
+        const helperFunctions = new Set();
+        const shouldUseSanitizer = !((_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.sanitizeInnerHTML) && (0, helpers_1.traverseAndCheckIfInnerHTMLIsUsed)(json);
+        const changeDetectionStrategy = (_d = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _d === void 0 ? void 0 : _d.changeDetection;
+        let template = json.children
+            .map((item) => {
+            var _a, _b, _c, _d;
+            const tmpl = (0, blocks_1.blockToAngular)({
+                root: json,
+                json: item,
+                options,
+                rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+                blockOptions: {
+                    childComponents,
+                    nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
+                    nativeEvents: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeEvents) !== null && _d !== void 0 ? _d : [],
+                    sanitizeInnerHTML: !shouldUseSanitizer,
+                },
+            });
+            if (options.state === 'inline-with-wrappers') {
+                (0, helpers_1.getAppropriateTemplateFunctionKeys)(tmpl).forEach((key) => helperFunctions.add((0, helpers_1.HELPER_FUNCTIONS)(options.typescript)[key]));
+            }
+            return tmpl;
+        })
+            .join('\n');
+        if (options.prettier !== false) {
+            template = (0, format_1.tryFormat)(template, 'html');
+        }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        const { components: dynamicComponents, dynamicTemplate } = (0, helpers_1.traverseToGetAllDynamicComponents)(json, options, {
+            childComponents,
+            nativeAttributes: (_f = (_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.nativeAttributes) !== null && _f !== void 0 ? _f : [],
+            nativeEvents: (_h = (_g = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _g === void 0 ? void 0 : _g.nativeEvents) !== null && _h !== void 0 ? _h : [],
+        });
+        (0, helpers_1.transformState)(json);
+        const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            withType: options.typescript,
+            valueMapper: (code, type, typeParameter) => {
+                let value = code;
+                if (type !== 'data') {
+                    value = (0, get_typed_function_1.getTypedFunction)(code, options.typescript, typeParameter);
+                }
+                return (0, helpers_1.processAngularCode)({
+                    replaceWith: 'this',
+                    contextVars,
+                    outputVars,
+                    domRefs: Array.from(domRefs),
+                })(value);
+            },
+        });
+        const refsForObjSpread = (0, get_refs_2.getRefs)(json, 'spreadRef');
+        // Preparing built in component metadata parameters
+        const componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter((item) => item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !types_1.BUILT_IN_COMPONENTS.has(item));
+        const componentMetadata = {
+            selector: ((_j = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _j === void 0 ? void 0 : _j.selector)
+                ? `'${(_k = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _k === void 0 ? void 0 : _k.selector}'`
+                : `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}'`,
+            template: `\`
+          ${(0, helpers_1.getTemplateFormat)(dynamicTemplate)}
+          ${(0, helpers_1.getTemplateFormat)(template)}
+          \``,
+            ...(changeDetectionStrategy === 'OnPush'
+                ? {
+                    changeDetection: 'ChangeDetectionStrategy.OnPush',
+                }
+                : {}),
+            ...(styles
+                ? {
+                    styles: `[\`${styles}\`]`,
+                }
+                : {}),
+            ...(options.standalone
+                ? // TODO: also add child component imports here as well
+                    {
+                        standalone: 'true',
+                        imports: `[${['CommonModule', ...componentsUsed].join(', ')}]`,
+                    }
+                : {}),
+        };
+        // Taking into consideration what user has passed in options and allowing them to override the default generated metadata
+        Object.entries(json.meta.angularConfig || {}).forEach(([key, value]) => {
+            componentMetadata[key] = value;
+        });
+        const hasConstructor = Boolean(injectables.length) ||
+            dynamicComponents.size ||
+            refsForObjSpread.size ||
+            shouldUseSanitizer;
+        const angularCoreImports = [
+            ...(outputVars.length ? ['Output', 'EventEmitter'] : []),
+            ...(((_l = options === null || options === void 0 ? void 0 : options.experimental) === null || _l === void 0 ? void 0 : _l.inject) ? ['Inject', 'forwardRef'] : []),
+            'Component',
+            ...(domRefs.size || dynamicComponents.size || refsForObjSpread.size
+                ? ['ViewChild', 'ElementRef']
+                : []),
+            ...(refsForObjSpread.size ? ['Renderer2'] : []),
+            ...(props.size ? ['Input'] : []),
+            ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
+            ...(((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length) && options.typescript ? ['SimpleChanges'] : []),
+            ...(changeDetectionStrategy === 'OnPush' ? ['ChangeDetectionStrategy'] : []),
+        ].join(', ');
+        const constructorInjectables = [
+            ...injectables,
+            ...(dynamicComponents.size
+                ? [`private vcRef${options.typescript ? ': ViewContainerRef' : ''}`]
+                : []),
+            ...(refsForObjSpread.size
+                ? [`private renderer${options.typescript ? ': Renderer2' : ''}`]
+                : []),
+            ...(shouldUseSanitizer
+                ? [`protected sanitizer${options.typescript ? ': DomSanitizer' : ''}`]
+                : []),
+        ].join(',\n');
+        let str = (0, dedent_1.dedent) `
+        import { ${angularCoreImports} } from '@angular/core';
+        ${shouldUseSanitizer ? `import { DomSanitizer } from '@angular/platform-browser';` : ''}
+        ${options.standalone ? `import { CommonModule } from '@angular/common';` : ''}
+    
+        ${json.types ? json.types.join('\n') : ''}
+        ${(0, helpers_1.getDefaultProps)(json)}
+        ${(0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'angular',
+            excludeMitosisComponents: !options.standalone && !options.preserveImports,
+            preserveFileExtensions: options.preserveFileExtensions,
+            componentsUsed,
+            importMapper: options === null || options === void 0 ? void 0 : options.importMapper,
+        })}
+    
+        @Component({
+          ${Object.entries(componentMetadata)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(',')}
+        })
+        export default class ${json.name} {
+          ${localExportVars.join('\n')}
+          ${customImports.map((name) => `${name} = ${name}`).join('\n')}
+    
+          ${(0, get_inputs_1.getInputs)({
+            json,
+            options,
+            props: Array.from(props),
+        })}    
+          ${(0, get_outputs_1.getOutputs)({ json, outputVars })}
+    
+          ${[...Array.from(domRefs), ...Array.from(refsForObjSpread)]
+            .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
+            .join('\n')}
+    
+          ${Array.from(dynamicComponents)
+            .map((component) => `@ViewChild('${component
+            .split('.')[1]
+            .toLowerCase()}Template', { static: true }) ${component
+            .split('.')[1]
+            .toLowerCase()}TemplateRef${options.typescript ? '!: TemplateRef<any>' : ''}`)
+            .join('\n')}
+    
+          ${dynamicComponents.size ? `myContent${options.typescript ? '?: any[][];' : ''}` : ''}
+          ${refsForObjSpread.size
+            ? `_listenerFns = new Map${options.typescript ? '<string, () => void>' : ''}()`
+            : ''}
+    
+          ${dataString}
+    
+          ${helperFunctions.size ? Array.from(helperFunctions).join('\n') : ''}
+    
+          ${jsRefs
+            .map((ref) => {
+            const argument = json.refs[ref].argument;
+            const typeParameter = json.refs[ref].typeParameter;
+            return `private _${ref}${typeParameter ? `: ${typeParameter}` : ''}${argument
+                ? ` = ${(0, helpers_1.processAngularCode)({
+                    replaceWith: 'this.',
+                    contextVars,
+                    outputVars,
+                    domRefs: Array.from(domRefs),
+                })(argument)}`
+                : ''};`;
+        })
+            .join('\n')}
+    
+          ${!hasConstructor ? '' : `constructor(\n${constructorInjectables}) {}`}
+          
+          ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(options.typescript) : ''}
+          
+          ${!json.hooks.onMount.length && !dynamicComponents.size && !((_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code)
+            ? ''
+            : `ngOnInit() {
+                  ${!((_p = json.hooks) === null || _p === void 0 ? void 0 : _p.onInit)
+                ? ''
+                : `
+                        ${(_q = json.hooks.onInit) === null || _q === void 0 ? void 0 : _q.code}
+                        `}
+                  ${json.hooks.onMount.length > 0
+                ? `
+                        if (typeof window !== 'undefined') {
+                          ${(0, on_mount_1.stringifySingleScopeOnMount)(json)}
+                        }
+                        `
+                : ''}
+                  ${dynamicComponents.size
+                ? `
+                  this.myContent = [${Array.from(dynamicComponents)
+                    .map((component) => `this.vcRef.createEmbeddedView(this.${component
+                    .split('.')[1]
+                    .toLowerCase()}TemplateRef).rootNodes`)
+                    .join(', ')}];
+                  `
+                : ''}
+                }`}
+    
+          ${
+        // hooks specific to Angular
+        ((_s = (_r = json.compileContext) === null || _r === void 0 ? void 0 : _r.angular) === null || _s === void 0 ? void 0 : _s.hooks)
+            ? Object.entries((_u = (_t = json.compileContext) === null || _t === void 0 ? void 0 : _t.angular) === null || _u === void 0 ? void 0 : _u.hooks)
+                .map(([key, value]) => {
+                return `${key}() {
+                ${value.code}
+              }`;
+            })
+                .join('\n')
+            : ''}
+    
+          ${!((_v = json.hooks.onUpdate) === null || _v === void 0 ? void 0 : _v.length)
+            ? ''
+            : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
+                  if (typeof window !== 'undefined') {
+                    ${(_w = json.hooks.onUpdate) === null || _w === void 0 ? void 0 : _w.reduce((code, hook) => {
+                code += hook.code;
+                return code + '\n';
+            }, '')}
+                  }
+                }
+                    `}
+    
+          ${!json.hooks.onUnMount && !refsForObjSpread.size
+            ? ''
+            : `ngOnDestroy() {
+                  ${((_x = json.hooks.onUnMount) === null || _x === void 0 ? void 0 : _x.code) || ''}
+                  ${refsForObjSpread.size
+                ? `for (const fn of this._listenerFns.values()) { fn(); }`
+                : ''}
+                }`}
+    
+        }
+      `;
+        if (options.standalone !== true) {
+            str = (0, helpers_1.generateNgModule)(str, json.name, componentsUsed, json, options.bootstrapMapper);
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        if (options.prettier !== false) {
+            str = (0, format_1.tryFormat)(str, 'typescript');
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        return str;
+    };
+};
+exports.componentToAngularClassic = componentToAngularClassic;

package/dist/src/generators/angular/classic/plugins/get-class-properties-plugin.d.ts

@@ -0,0 +1,2 @@
+import { MitosisPlugin } from '../../../../types/plugins';
+export declare const getClassPropertiesPlugin: () => MitosisPlugin;

package/dist/src/generators/angular/classic/plugins/get-class-properties-plugin.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassPropertiesPlugin = void 0;
+const hooks_1 = require("../../../../generators/angular/helpers/hooks");
+const bindings_1 = require("../../../../helpers/bindings");
+const event_handlers_1 = require("../../../../helpers/event-handlers");
+const is_children_1 = __importDefault(require("../../../../helpers/is-children"));
+const is_mitosis_node_1 = require("../../../../helpers/is-mitosis-node");
+const traverse_nodes_1 = require("../../../../helpers/traverse-nodes");
+const isASimpleProperty = (code) => {
+    const expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
+    const invalidChars = ['{', '}', '(', ')', 'typeof'];
+    return !invalidChars.some((char) => code.includes(char)) && !expressions.includes(code);
+};
+const generateNewBindingName = (index, name) => `node_${index}_${name.replaceAll('.', '_').replaceAll('-', '_')}`;
+const handleBindings = (json, item, index, forName, indexName) => {
+    var _a, _b, _c, _d, _e, _f;
+    for (const key in item.bindings) {
+        if (key.startsWith('"') ||
+            key.startsWith('$') ||
+            key === 'css' ||
+            key === 'ref' ||
+            isASimpleProperty(item.bindings[key].code)) {
+            continue;
+        }
+        const newBindingName = generateNewBindingName(index, item.name);
+        if (forName) {
+            if (item.name === 'For')
+                continue;
+            if (key === 'key')
+                continue;
+            if ((0, event_handlers_1.checkIsEvent)(key)) {
+                const { arguments: cusArgs = ['event'] } = item.bindings[key];
+                const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
+                if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
+                    ((_b = item.bindings[key]) === null || _b === void 0 ? void 0 : _b.code.trim().endsWith('}'))) {
+                    const forAndIndex = `${forName ? `, ${forName}` : ''}${indexName ? `, ${indexName}` : ''}`;
+                    const eventArgs = `${cusArgs.join(', ')}${forAndIndex}`;
+                    json.state[eventBindingName] = {
+                        code: `(${eventArgs}) => ${item.bindings[key].code}`,
+                        type: 'function',
+                    };
+                    item.bindings[key].code = `state.${eventBindingName}(${eventArgs})`;
+                    json.state[newBindingName] = {
+                        code: `(${eventArgs}) => (${item.bindings[key].code})`,
+                        type: 'function',
+                    };
+                    item.bindings[key].code = `state.${newBindingName}($${eventArgs})`;
+                }
+            }
+            else {
+                json.state[newBindingName] = {
+                    code: `(${forName}${indexName ? `, ${indexName}` : ''}) => (${item.bindings[key].code})`,
+                    type: 'function',
+                };
+                item.bindings[key].code = `state.${newBindingName}(${forName}${indexName ? `, ${indexName}` : ''})`;
+            }
+        }
+        else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
+            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !(0, event_handlers_1.checkIsEvent)(key)) {
+                json.state[newBindingName] = { code: 'null', type: 'property' };
+                (0, hooks_1.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
+                item.bindings[key].code = `state.${newBindingName}`;
+            }
+            else if ((0, event_handlers_1.checkIsEvent)(key)) {
+                const { arguments: cusArgs = ['event'] } = item.bindings[key];
+                if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
+                    ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
+                    json.state[newBindingName] = {
+                        code: `(${cusArgs.join(', ')}) => ${item.bindings[key].code}`,
+                        type: 'function',
+                    };
+                    item.bindings[key].code = `state.${newBindingName}(${cusArgs.join(', ')})`;
+                }
+            }
+            else {
+                (0, hooks_1.makeReactiveState)(json, newBindingName, `state.${newBindingName} = {...(${item.bindings[key].code})}`);
+                item.bindings[newBindingName] = item.bindings[key];
+                item.bindings[key].code = `state.${newBindingName}`;
+                delete item.bindings[key];
+            }
+        }
+        index++;
+    }
+    return index;
+};
+const handleProperties = (json, item, index) => {
+    for (const key in item.properties) {
+        if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
+            continue;
+        }
+        const newBindingName = generateNewBindingName(index, item.name);
+        json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
+        item.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `state.${newBindingName}` });
+        delete item.properties[key];
+        index++;
+    }
+    return index;
+};
+const handleAngularBindings = (json, item, index, { forName, indexName } = {}) => {
+    if ((0, is_children_1.default)({ node: item }))
+        return index;
+    index = handleBindings(json, item, index, forName, indexName);
+    index = handleProperties(json, item, index);
+    return index;
+};
+const getClassPropertiesPlugin = () => () => ({
+    json: {
+        pre: (json) => {
+            let lastId = 0;
+            (0, traverse_nodes_1.traverseNodes)(json, (item) => {
+                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+                    if (item.name === 'For') {
+                        const forName = item.scope.forName;
+                        const indexName = item.scope.indexName;
+                        (0, traverse_nodes_1.traverseNodes)(item, (child) => {
+                            if ((0, is_mitosis_node_1.isMitosisNode)(child)) {
+                                child._traversed = true;
+                                lastId = handleAngularBindings(json, child, lastId, {
+                                    forName,
+                                    indexName,
+                                });
+                            }
+                        });
+                    }
+                    else if (!item._traversed) {
+                        lastId = handleAngularBindings(json, item, lastId);
+                    }
+                }
+            });
+            return json;
+        },
+    },
+});
+exports.getClassPropertiesPlugin = getClassPropertiesPlugin;

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

@@ -0,0 +1,8 @@
+import { ToAngularOptions } from '../../../../generators/angular/types';
+import { MitosisComponent } from '../../../../types/mitosis-component';
+export declare const getCodeProcessorPlugins: ({ json, contextVars, options, outputVars, }: {
+    json: MitosisComponent;
+    options: ToAngularOptions;
+    contextVars: string[];
+    outputVars: string[];
+}) => import("../../../..").MitosisPlugin[];

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCodeProcessorPlugins = void 0;
+const html_tags_1 = require("../../../../constants/html_tags");
+const helpers_1 = require("../../../../generators/angular/helpers");
+const get_refs_1 = require("../../../../helpers/get-refs");
+const process_code_1 = require("../../../../helpers/plugins/process-code");
+const replace_identifiers_1 = require("../../../../helpers/replace-identifiers");
+const function_1 = require("fp-ts/function");
+const getCodeProcessorPlugins = ({ json, contextVars, options, outputVars, }) => {
+    return [
+        ...(options.plugins || []),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType, _, node) => {
+            switch (codeType) {
+                case 'hooks':
+                    return (0, function_1.flow)((0, helpers_1.processAngularCode)({
+                        replaceWith: 'this',
+                        contextVars,
+                        outputVars,
+                        domRefs: Array.from((0, get_refs_1.getRefs)(json)),
+                    }), (code) => {
+                        const allMethodNames = Object.entries(json.state)
+                            .filter(([_, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'function' || (value === null || value === void 0 ? void 0 : value.type) === 'method')
+                            .map(([key]) => key);
+                        return (0, replace_identifiers_1.replaceIdentifiers)({
+                            code,
+                            from: allMethodNames,
+                            to: (name) => `this.${name}`,
+                        });
+                    });
+                case 'bindings':
+                    return (code, key) => {
+                        var _a;
+                        // we create a separate state property for spread binding and use ref to attach the attributes
+                        // so we need to use `this.` inside the class to access state and props
+                        const isSpreadAttributeBinding = ((_a = node === null || node === void 0 ? void 0 : node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(node.name.trim());
+                        // If we have a For loop with "key" it will be transformed to
+                        // trackOfXXX, we need to use "this" for state properties
+                        const isKey = key === 'key';
+                        const newLocal = (0, helpers_1.processAngularCode)({
+                            contextVars: [],
+                            outputVars,
+                            domRefs: [], // the template doesn't need the this keyword.
+                            replaceWith: isKey || isSpreadAttributeBinding ? 'this' : undefined,
+                        })(code);
+                        return newLocal.replace(/"/g, '"');
+                    };
+                case 'hooks-deps':
+                case 'hooks-deps-array':
+                case 'state':
+                case 'context-set':
+                case 'properties':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (code) => code;
+            }
+        }),
+    ];
+};
+exports.getCodeProcessorPlugins = getCodeProcessorPlugins;

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

@@ -0,0 +1,3 @@
+import { ToAngularOptions } from '../../generators/angular/types';
+import { TranspilerGenerator } from '../../types/transpiler';
+export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;