@builder.io/mitosis 0.4.0 → 0.4.2

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

@@ -1,97 +1,71 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToAngular = exports.blockToAngular = void 0;
-var html_tags_1 = require("../../constants/html_tags");
-var dedent_1 = require("../../helpers/dedent");
-var fast_clone_1 = require("../../helpers/fast-clone");
-var get_components_used_1 = require("../../helpers/get-components-used");
-var get_custom_imports_1 = require("../../helpers/get-custom-imports");
-var get_prop_functions_1 = require("../../helpers/get-prop-functions");
-var get_props_1 = require("../../helpers/get-props");
-var get_props_ref_1 = require("../../helpers/get-props-ref");
-var get_refs_1 = require("../../helpers/get-refs");
-var get_state_object_string_1 = require("../../helpers/get-state-object-string");
-var indent_1 = require("../../helpers/indent");
-var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-var is_upper_case_1 = require("../../helpers/is-upper-case");
-var map_refs_1 = require("../../helpers/map-refs");
-var merge_options_1 = require("../../helpers/merge-options");
-var process_code_1 = require("../../helpers/plugins/process-code");
-var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
-var render_imports_1 = require("../../helpers/render-imports");
-var replace_identifiers_1 = require("../../helpers/replace-identifiers");
-var slots_1 = require("../../helpers/slots");
-var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-var collect_css_1 = require("../../helpers/styles/collect-css");
-var helpers_1 = require("../../helpers/styles/helpers");
-var traverse_nodes_1 = require("../../helpers/traverse-nodes");
-var plugins_1 = require("../../modules/plugins");
-var symbol_processor_1 = require("../../symbols/symbol-processor");
-var mitosis_node_1 = require("../../types/mitosis-node");
-var function_1 = require("fp-ts/lib/function");
-var lodash_1 = require("lodash");
-var legacy_1 = __importDefault(require("neotraverse/legacy"));
-var standalone_1 = require("prettier/standalone");
-var is_children_1 = __importDefault(require("../../helpers/is-children"));
-var on_mount_1 = require("../helpers/on-mount");
-var helpers_2 = require("./helpers");
-var types_1 = require("./types");
-var mappers = {
-    Fragment: function (root, json, options) {
-        return "<ng-container>".concat(json.children
-            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); })
-            .join('\n'), "</ng-container>");
+const html_tags_1 = require("../../constants/html_tags");
+const dedent_1 = require("../../helpers/dedent");
+const fast_clone_1 = require("../../helpers/fast-clone");
+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_1 = require("../../helpers/get-refs");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const indent_1 = require("../../helpers/indent");
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const is_upper_case_1 = require("../../helpers/is-upper-case");
+const map_refs_1 = require("../../helpers/map-refs");
+const merge_options_1 = require("../../helpers/merge-options");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+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 strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const helpers_1 = require("../../helpers/styles/helpers");
+const traverse_nodes_1 = require("../../helpers/traverse-nodes");
+const plugins_1 = require("../../modules/plugins");
+const symbol_processor_1 = require("../../symbols/symbol-processor");
+const mitosis_node_1 = require("../../types/mitosis-node");
+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 is_children_1 = __importDefault(require("../../helpers/is-children"));
+const on_mount_1 = require("../helpers/on-mount");
+const helpers_2 = require("./helpers");
+const types_1 = require("./types");
+const mappers = {
+    Fragment: (root, json, options) => {
+        return `<ng-container>${json.children
+            .map((item) => (0, exports.blockToAngular)({ root, json: item, options }))
+            .join('\n')}</ng-container>`;
     },
-    Slot: function (root, json, options) {
-        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options }); }).join('\n'); };
-        return "<ng-content ".concat(Object.entries(__assign(__assign({}, json.bindings), json.properties))
-            .map(function (_a) {
-            var binding = _a[0], value = _a[1];
+    Slot: (root, json, options) => {
+        const renderChildren = () => { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToAngular)({ root, json: item, options })).join('\n'); };
+        return `<ng-content ${Object.entries({ ...json.bindings, ...json.properties })
+            .map(([binding, value]) => {
             if (value && binding === 'name') {
-                var selector = (0, function_1.pipe)((0, lodash_1.isString)(value) ? value : value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
-                return "select=\"[".concat(selector, "]\"");
+                const selector = (0, function_1.pipe)((0, lodash_1.isString)(value) ? value : value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
+                return `select="[${selector}]"`;
             }
         })
-            .join('\n'), ">").concat(Object.entries(json.bindings)
-            .map(function (_a) {
-            var binding = _a[0], value = _a[1];
+            .join('\n')}>${Object.entries(json.bindings)
+            .map(([binding, value]) => {
             if (value && binding !== 'name') {
                 return value.code;
             }
         })
-            .join('\n')).concat(renderChildren(), "</ng-content>");
+            .join('\n')}${renderChildren()}</ng-content>`;
     },
 };
-var preprocessCssAsJson = function (json) {
-    (0, legacy_1.default)(json).forEach(function (item) {
+const preprocessCssAsJson = (json) => {
+    (0, legacy_1.default)(json).forEach((item) => {
         var _a, _b;
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if ((0, helpers_1.nodeHasCss)(item)) {
@@ -102,157 +76,155 @@ var preprocessCssAsJson = function (json) {
         }
     });
 };
-var generateNgModule = function (content, name, componentsUsed, component, bootstrapMapper) {
-    return "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\n".concat(content, "\n\n@NgModule({\n  declarations: [").concat(name, "],\n  imports: [CommonModule").concat(componentsUsed.length ? ', ' + componentsUsed.map(function (comp) { return "".concat(comp, "Module"); }).join(', ') : '', "],\n  exports: [").concat(name, "],\n  ").concat(bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : '', "\n})\nexport class ").concat(name, "Module {}");
+const generateNgModule = (content, name, componentsUsed, component, bootstrapMapper) => {
+    return `import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+${content}
+
+@NgModule({
+  declarations: [${name}],
+  imports: [CommonModule${componentsUsed.length ? ', ' + componentsUsed.map((comp) => `${comp}Module`).join(', ') : ''}],
+  exports: [${name}],
+  ${bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : ''}
+})
+export class ${name}Module {}`;
 };
 // TODO: Maybe in the future allow defining `string | function` as values
-var BINDINGS_MAPPER = {
+const BINDINGS_MAPPER = {
     innerHTML: 'innerHTML',
     style: 'ngStyle',
 };
-var handleObjectBindings = function (code) {
-    var objectCode = code.replace(/^{/, '').replace(/}$/, '');
+const handleObjectBindings = (code) => {
+    let objectCode = code.replace(/^{/, '').replace(/}$/, '');
     objectCode = objectCode.replace(/\/\/.*\n/g, '');
-    var spreadOutObjects = objectCode
-        .split(',')
-        .filter(function (item) { return item.includes('...'); })
-        .map(function (item) { return item.replace('...', '').trim(); });
-    var objectKeys = objectCode
-        .split(',')
-        .filter(function (item) { return !item.includes('...'); })
-        .map(function (item) { return item.trim(); });
-    var otherObjs = objectKeys.map(function (item) {
-        return "{ ".concat(item, " }");
-    });
-    var temp = "".concat(spreadOutObjects.join(', '), ", ").concat(otherObjs.join(', '));
-    if (temp.endsWith(', ')) {
-        temp = temp.slice(0, -2);
-    }
-    if (temp.startsWith(', ')) {
-        temp = temp.slice(2);
-    }
+    let temp = objectCode;
+    //STEP 1. remove spread operator for expressions like '{ ...objectName }' and replace them with object name, example {...obj} => obj
+    temp = temp.replace(/\{\s*\.\.\.(\w+)\s*}/g, '$1');
+    //STEP 2. remove all remaining spread operators that could be nested somewhere deeper, example { ...obj, field1: value1 } => { obj, field1: value1 }
+    temp = temp.replace(/\.\.\./g, '');
+    //STEP 3. deal with consequences of STEP 2 - for all left field assignments we create new objects provided to useObjectWrapper,
+    //and we get rid of surrounding brackets of the initial input value, example {...obj1,test:true,...obj2} => obj1, {test: true}, obj2
+    temp = temp.replace(/(\s*\w+\s*:\s*((["'].+["'])|(\[.+])|([\w.]+)))(,|[\n\s]*)/g, `{ $1 },`);
     // handle template strings
     if (temp.includes('`')) {
         // template str
-        var str = temp.match(/`[^`]*`/g);
-        var values = str && str[0].match(/\${[^}]*}/g);
-        var forValues = values === null || values === void 0 ? void 0 : values.map(function (val) { return val.slice(2, -1); }).join(' + ');
+        let str = temp.match(/`[^`]*`/g);
+        let values = str && str[0].match(/\${[^}]*}/g);
+        let forValues = values === null || values === void 0 ? void 0 : values.map((val) => val.slice(2, -1)).join(' + ');
         if (str && forValues) {
             temp = temp.replace(str[0], forValues);
         }
     }
     return temp;
 };
-var processCodeBlockInTemplate = function (code) {
+const processCodeBlockInTemplate = (code) => {
     // contains helper calls as Angular doesn't support JS expressions in templates
-    if (code.startsWith('{')) {
+    if (code.startsWith('{') && code.includes('...')) {
         // Objects cannot be spread out directly in Angular so we need to use `useObjectWrapper`
-        return "useObjectWrapper(".concat(handleObjectBindings(code), ")");
+        return `useObjectWrapper(${handleObjectBindings(code)})`;
     }
     else if (code.startsWith('Object.values')) {
-        var stripped = code.replace('Object.values', '');
-        return "useObjectDotValues".concat(stripped);
+        let stripped = code.replace('Object.values', '');
+        return `useObjectDotValues${stripped}`;
     }
     else if (code.includes('JSON.stringify')) {
-        var obj = code.match(/JSON.stringify\((.*)\)/);
-        return "useJsonStringify(".concat(obj, ")");
+        let obj = code.match(/JSON.stringify\((.*)\)/);
+        return `useJsonStringify(${obj})`;
     }
     else if (code.includes(' as ')) {
-        var asIndex = code.indexOf('as');
-        var asCode = code.slice(0, asIndex - 1);
-        return "$any".concat(asCode, ")");
+        const asIndex = code.indexOf('as');
+        const asCode = code.slice(0, asIndex - 1);
+        return `$any${asCode})`;
     }
     else {
-        return "".concat(code);
+        return `${code}`;
     }
 };
-var processEventBinding = function (key, code, nodeName, customArg) {
-    var event = key.replace('on', '');
+const processEventBinding = (key, code, nodeName, customArg) => {
+    let event = key.replace('on', '');
     event = event.charAt(0).toLowerCase() + event.slice(1);
     if (event === 'change' && nodeName === 'input' /* todo: other tags */) {
         event = 'input';
     }
     // TODO: proper babel transform to replace. Util for this
-    var eventName = customArg;
-    var regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
-    var replacer = '$1$event$2';
-    var finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
+    const eventName = customArg;
+    const regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
+    const replacer = '$1$event$2';
+    const finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
     return {
-        event: event,
+        event,
         value: finalValue,
     };
 };
-var stringifyBinding = function (node, options, blockOptions) {
-    return function (_a) {
-        var key = _a[0], binding = _a[1];
-        if (options.state === 'inline-with-wrappers' && (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
-            return;
-        }
-        if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
-            return;
-        }
-        var keyToUse = BINDINGS_MAPPER[key] || key;
-        var _b = binding, code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
-        // TODO: proper babel transform to replace. Util for this
-        if (keyToUse.startsWith('on')) {
-            var _d = processEventBinding(keyToUse, code, node.name, cusArgs[0]), event_1 = _d.event, value = _d.value;
-            return " (".concat(event_1, ")=\"").concat(value, "\"");
-        }
-        else if (keyToUse === 'class') {
-            return " [class]=\"".concat(code, "\" ");
-        }
-        else if (keyToUse === 'ref') {
-            return " #".concat(code, " ");
-        }
-        else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-            !blockOptions.nativeAttributes.includes(keyToUse) &&
-            !Object.values(BINDINGS_MAPPER).includes(keyToUse)) {
-            // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
-            return " [attr.".concat(keyToUse, "]=\"").concat(code, "\" ");
-        }
-        else {
-            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-            return "[".concat(keyToUse, "]=\"").concat(codeToUse, "\"");
-        }
-    };
+const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
+    if (options.state === 'inline-with-wrappers' && (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
+        return;
+    }
+    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
+        return;
+    }
+    const keyToUse = BINDINGS_MAPPER[key] || key;
+    const { code, arguments: cusArgs = ['event'] } = binding;
+    // TODO: proper babel transform to replace. Util for this
+    if (keyToUse.startsWith('on')) {
+        const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
+        return ` (${event})="${value}"`;
+    }
+    else if (keyToUse === 'class') {
+        return ` [class]="${code}" `;
+    }
+    else if (keyToUse === 'ref') {
+        return ` #${code} `;
+    }
+    else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
+        !blockOptions.nativeAttributes.includes(keyToUse) &&
+        !Object.values(BINDINGS_MAPPER).includes(keyToUse)) {
+        // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
+        return ` [attr.${keyToUse}]="${code}" `;
+    }
+    else {
+        const codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+        return `[${keyToUse}]="${codeToUse}"`;
+    }
 };
-var handleNgOutletBindings = function (node, options) {
+const handleNgOutletBindings = (node, options) => {
     var _a;
-    var allProps = '';
-    for (var key in node.properties) {
+    let allProps = '';
+    for (const key in node.properties) {
         if (key.startsWith('$')) {
             continue;
         }
         if (key === 'key') {
             continue;
         }
-        var value = node.properties[key];
-        allProps += "".concat(key, ": '").concat(value, "', ");
+        const value = node.properties[key];
+        allProps += `${key}: '${value}', `;
     }
-    for (var key in node.bindings) {
+    for (const key in node.bindings) {
         if (key.startsWith('"')) {
             continue;
         }
         if (key.startsWith('$')) {
             continue;
         }
-        var _b = node.bindings[key], code = _b.code, _c = _b.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
+        let { code, arguments: cusArgs = ['event'] } = node.bindings[key];
         if (options.state === 'class-properties') {
-            code = "this.".concat(code);
+            code = `this.${code}`;
             if (((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread') {
-                allProps += "...".concat(code, ", ");
+                allProps += `...${code}, `;
                 continue;
             }
         }
-        var keyToUse = key.includes('-') ? "'".concat(key, "'") : key;
+        let keyToUse = key.includes('-') ? `'${key}'` : key;
         keyToUse = keyToUse.replace('state.', '').replace('props.', '');
         if (key.startsWith('on')) {
-            var _d = processEventBinding(key, code, node.name, cusArgs[0]), event_2 = _d.event, value = _d.value;
-            allProps += "on".concat(event_2.charAt(0).toUpperCase() + event_2.slice(1), ": ").concat(value.replace(/\(.*?\)/g, ''), ".bind(this), ");
+            const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
+            allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(/\(.*?\)/g, '')}.bind(this), `;
         }
         else {
-            var codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-            allProps += "".concat(keyToUse, ": ").concat(codeToUse, ", ");
+            const codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
+            allProps += `${keyToUse}: ${codeToUse}, `;
         }
     }
     if (allProps.endsWith(', ')) {
@@ -263,126 +235,129 @@ var handleNgOutletBindings = function (node, options) {
     }
     return allProps;
 };
-var blockToAngular = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var root = _a.root, json = _a.json, _m = _a.options, options = _m === void 0 ? {} : _m, _o = _a.blockOptions, blockOptions = _o === void 0 ? {
-        nativeAttributes: [],
-    } : _o;
-    var childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
+const blockToAngular = ({ root, json, options = {}, blockOptions = {
+    nativeAttributes: [],
+}, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
         return mappers[json.name](root, json, options);
     }
     if ((0, is_children_1.default)({ node: json })) {
-        return "<ng-content></ng-content>";
+        return `<ng-content></ng-content>`;
     }
     if (json.properties._text) {
         return json.properties._text;
     }
-    var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
+    const textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
     if (textCode) {
         if ((0, slots_1.isSlotProperty)(textCode)) {
-            return "<ng-content select=\"[".concat((0, slots_1.toKebabSlot)(textCode), "]\"></ng-content>");
+            return `<ng-content select="[${(0, slots_1.toKebabSlot)(textCode)}]"></ng-content>`;
         }
         if (textCode.includes('JSON.stringify')) {
-            var obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
-            return "{{".concat(obj, " | json}}");
+            const obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
+            return `{{${obj} | json}}`;
         }
-        return "{{".concat(textCode, "}}");
+        return `{{${textCode}}}`;
     }
-    var str = '';
+    let str = '';
     if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        var indexName = json.scope.indexName;
-        var forName = json.scope.forName;
+        const indexName = json.scope.indexName;
+        const forName = json.scope.forName;
         // Check if "key" is present for the first child of the for loop
-        if (json.children[0].bindings && ((_c = json.children[0].bindings.key) === null || _c === void 0 ? void 0 : _c.code)) {
-            var fnIndex = ((_d = root.meta) === null || _d === void 0 ? void 0 : _d._trackByForIndex) || 0;
-            var trackByFnName = "trackBy".concat(forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : '').concat(fnIndex);
+        if (json.children[0].bindings && ((_b = json.children[0].bindings.key) === null || _b === void 0 ? void 0 : _b.code)) {
+            const fnIndex = ((_c = root.meta) === null || _c === void 0 ? void 0 : _c._trackByForIndex) || 0;
+            const trackByFnName = `trackBy${forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''}${fnIndex}`;
             root.meta._trackByForIndex = fnIndex + 1;
-            var code = (_e = json.children[0].bindings.key) === null || _e === void 0 ? void 0 : _e.code;
+            let code = (_d = json.children[0].bindings.key) === null || _d === void 0 ? void 0 : _d.code;
             root.state[trackByFnName] = {
-                code: "".concat(trackByFnName, "(").concat(indexName !== null && indexName !== void 0 ? indexName : '_', ", ").concat(forName, ") { return ").concat(code, "; }"),
+                code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}, ${forName}) { return ${code}; }`,
                 type: 'method',
             };
-            str += "<ng-container *ngFor=\"let ".concat(forName, " of ").concat((_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "; trackBy: ").concat(trackByFnName, "\">");
+            str += `<ng-container *ngFor="let ${forName} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; let ${indexName} = index` : ''}; trackBy: ${trackByFnName}">`;
         }
         else {
-            str += "<ng-container *ngFor=\"let ".concat(forName, " of ").concat((_g = json.bindings.each) === null || _g === void 0 ? void 0 : _g.code).concat(indexName ? "; let ".concat(indexName, " = index") : '', "\">");
+            str += `<ng-container *ngFor="let ${forName} of ${(_f = json.bindings.each) === null || _f === void 0 ? void 0 : _f.code}${indexName ? `; let ${indexName} = index` : ''}">`;
         }
         str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
             .join('\n');
-        str += "</ng-container>";
+        str += `</ng-container>`;
     }
     else if (json.name === 'Show') {
-        var condition = (_h = json.bindings.when) === null || _h === void 0 ? void 0 : _h.code;
+        let condition = (_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code;
         if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
-            var wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
-            condition = condition.replace("typeof ".concat(wordAfterTypeof), "useTypeOf(".concat(wordAfterTypeof, ")"));
+            let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
+            condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
         }
-        str += "<ng-container *ngIf=\"".concat(condition, "\">");
+        str += `<ng-container *ngIf="${condition}">`;
         str += json.children
-            .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
             .join('\n');
-        str += "</ng-container>";
+        str += `</ng-container>`;
         // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_j = json.meta) === null || _j === void 0 ? void 0 : _j.else)) {
-            str += "<ng-container *ngIf=\"!(".concat(condition, ")\">");
-            str += (0, exports.blockToAngular)({ root: root, json: json.meta.else, options: options, blockOptions: blockOptions });
-            str += "</ng-container>";
+        if ((0, is_mitosis_node_1.isMitosisNode)((_h = json.meta) === null || _h === void 0 ? void 0 : _h.else)) {
+            str += `<ng-container *ngIf="!(${condition})">`;
+            str += (0, exports.blockToAngular)({ root, json: json.meta.else, options, blockOptions });
+            str += `</ng-container>`;
         }
     }
     else if (json.name.includes('.')) {
-        var elSelector = childComponents.find(function (impName) { return impName === json.name; })
+        const elSelector = childComponents.find((impName) => impName === json.name)
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
-        var allProps = handleNgOutletBindings(json, options);
+        let allProps = handleNgOutletBindings(json, options);
         if (options.state === 'class-properties') {
-            var inputsPropsStateName = "mergedInputs_".concat((0, symbol_processor_1.hashCodeAsString)(allProps));
+            const inputsPropsStateName = `mergedInputs_${(0, symbol_processor_1.hashCodeAsString)(allProps)}`;
             root.state[inputsPropsStateName] = {
                 code: '{}' + (options.typescript ? ' as any' : ''),
                 type: 'property',
             };
-            if (!((_k = root.hooks.onInit) === null || _k === void 0 ? void 0 : _k.code.includes(inputsPropsStateName))) {
+            if (!((_j = root.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code.includes(inputsPropsStateName))) {
                 if (!root.hooks.onInit) {
                     root.hooks.onInit = { code: '' };
                 }
-                root.hooks.onInit.code += "\nthis.".concat(inputsPropsStateName, " = {").concat(allProps, "};\n");
+                root.hooks.onInit.code += `\nthis.${inputsPropsStateName} = {${allProps}};\n`;
             }
-            if (!((_l = root.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.map(function (hook) { return hook.code; }).join('').includes(inputsPropsStateName))) {
+            if (!((_k = root.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
                 if (!root.hooks.onUpdate) {
                     root.hooks.onUpdate = [];
                 }
                 root.hooks.onUpdate.push({
-                    code: "this.".concat(inputsPropsStateName, " = {").concat(allProps, "}"),
+                    code: `this.${inputsPropsStateName} = {${allProps}}`,
                 });
             }
-            allProps = "".concat(inputsPropsStateName);
+            allProps = `${inputsPropsStateName}`;
         }
         else {
-            allProps = "{ ".concat(allProps, " }");
-        }
-        str += "<ng-container *ngComponentOutlet=\"\n      ".concat(elSelector.replace('state.', '').replace('props.', ''), ";\n      inputs: ").concat(allProps, ";\n      content: myContent;\n      \">  ");
-        str += "</ng-container>";
+            allProps = `{ ${allProps} }`;
+        }
+        str += `<ng-container *ngComponentOutlet="
+      ${elSelector.replace('state.', '').replace('props.', '')};
+      inputs: ${allProps};
+      content: myContent;
+      ">  `;
+        str += `</ng-container>`;
     }
     else {
-        var elSelector = childComponents.find(function (impName) { return impName === json.name; })
+        const elSelector = childComponents.find((impName) => impName === json.name)
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
-        str += "<".concat(elSelector, " ");
+        str += `<${elSelector} `;
         // TODO: spread support for angular
         // if (json.bindings._spread) {
         //   str += `v-bind="${stripStateAndPropsRefs(
         //     json.bindings._spread as string,
         //   )}"`;
         // }
-        for (var key in json.properties) {
+        for (const key in json.properties) {
             if (key.startsWith('$')) {
                 continue;
             }
-            var value = json.properties[key];
-            str += " ".concat(key, "=\"").concat(value, "\" ");
+            const value = json.properties[key];
+            str += ` ${key}="${value}" `;
         }
-        var stringifiedBindings = Object.entries(json.bindings)
+        const stringifiedBindings = Object.entries(json.bindings)
             .map(stringifyBinding(json, options, blockOptions))
             .join('');
         str += stringifiedBindings;
@@ -392,53 +367,46 @@ var blockToAngular = function (_a) {
         str += '>';
         if (json.children) {
             str += json.children
-                .map(function (item) { return (0, exports.blockToAngular)({ root: root, json: item, options: options, blockOptions: blockOptions }); })
+                .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
                 .join('\n');
         }
-        str += "</".concat(elSelector, ">");
+        str += `</${elSelector}>`;
     }
     return str;
 };
 exports.blockToAngular = blockToAngular;
-var traverseToGetAllDynamicComponents = function (json, options, blockOptions) {
-    var components = new Set();
-    var dynamicTemplate = '';
-    (0, legacy_1.default)(json).forEach(function (item) {
+const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
+    const components = new Set();
+    let dynamicTemplate = '';
+    (0, legacy_1.default)(json).forEach((item) => {
         if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.') && item.name.split('.').length === 2) {
-            var children = item.children
-                .map(function (child) { return (0, exports.blockToAngular)({ root: json, json: child, options: options, blockOptions: blockOptions }); })
+            const children = item.children
+                .map((child) => (0, exports.blockToAngular)({ root: json, json: child, options, blockOptions }))
                 .join('\n');
-            dynamicTemplate = "<ng-template #".concat(item.name.split('.')[1].toLowerCase() + 'Template', ">").concat(children, "</ng-template>");
+            dynamicTemplate = `<ng-template #${item.name.split('.')[1].toLowerCase() + 'Template'}>${children}</ng-template>`;
             components.add(item.name);
         }
     });
     return {
-        components: components,
-        dynamicTemplate: dynamicTemplate,
+        components,
+        dynamicTemplate,
     };
 };
-var processAngularCode = function (_a) {
-    var contextVars = _a.contextVars, outputVars = _a.outputVars, domRefs = _a.domRefs, stateVars = _a.stateVars, replaceWith = _a.replaceWith;
-    return function (code) {
-        return (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
-            contextVars: contextVars,
-            domRefs: domRefs,
-            outputVars: outputVars,
-            stateVars: stateVars,
-        }), function (newCode) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith: replaceWith }); });
-    };
+const processAngularCode = ({ contextVars, outputVars, domRefs, stateVars, replaceWith, }) => (code) => (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
+    contextVars,
+    domRefs,
+    outputVars,
+    stateVars,
+}), (newCode) => (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith }));
+const isASimpleProperty = (code) => {
+    const expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
+    const invalidChars = ['{', '}', '(', ')', 'typeof'];
+    return !invalidChars.some((char) => code.includes(char)) && !expressions.includes(code);
 };
-var isASimpleProperty = function (code) {
-    var expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
-    var invalidChars = ['{', '}', '(', ')', 'typeof'];
-    return !invalidChars.some(function (char) { return code.includes(char); }) && !expressions.includes(code);
-};
-var generateNewBindingName = function (index, name) {
-    return "node_".concat(index, "_").concat(name.replaceAll('.', '_').replaceAll('-', '_'));
-};
-var handleBindings = function (json, item, index, forName, indexName) {
+const generateNewBindingName = (index, name) => `node_${index}_${name.replaceAll('.', '_').replaceAll('-', '_')}`;
+const handleBindings = (json, item, index, forName, indexName) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    for (var key in item.bindings) {
+    for (const key in item.bindings) {
         if (key.startsWith('"') ||
             key.startsWith('$') ||
             key === 'css' ||
@@ -446,37 +414,37 @@ var handleBindings = function (json, item, index, forName, indexName) {
             isASimpleProperty(item.bindings[key].code)) {
             continue;
         }
-        var newBindingName = generateNewBindingName(index, item.name);
+        const newBindingName = generateNewBindingName(index, item.name);
         if (forName) {
             if (item.name === 'For')
                 continue;
             if (key === 'key')
                 continue;
             if (key.startsWith('on')) {
-                var _j = item.bindings[key].arguments, cusArgs = _j === void 0 ? ['event'] : _j;
-                var eventBindingName = "".concat(generateNewBindingName(index, item.name), "_event");
+                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('}'))) {
-                    var forAndIndex = "".concat(forName ? ", ".concat(forName) : '').concat(indexName ? ", ".concat(indexName) : '');
-                    var eventArgs = "".concat(cusArgs.join(', ')).concat(forAndIndex);
+                    const forAndIndex = `${forName ? `, ${forName}` : ''}${indexName ? `, ${indexName}` : ''}`;
+                    const eventArgs = `${cusArgs.join(', ')}${forAndIndex}`;
                     json.state[eventBindingName] = {
-                        code: "(".concat(eventArgs, ") => ").concat(item.bindings[key].code),
+                        code: `(${eventArgs}) => ${item.bindings[key].code}`,
                         type: 'function',
                     };
-                    item.bindings[key].code = "state.".concat(eventBindingName, "(").concat(eventArgs, ")");
+                    item.bindings[key].code = `state.${eventBindingName}(${eventArgs})`;
                     json.state[newBindingName] = {
-                        code: "(".concat(eventArgs, ") => (").concat(item.bindings[key].code, ")"),
+                        code: `(${eventArgs}) => (${item.bindings[key].code})`,
                         type: 'function',
                     };
-                    item.bindings[key].code = "state.".concat(newBindingName, "($").concat(eventArgs, ")");
+                    item.bindings[key].code = `state.${newBindingName}($${eventArgs})`;
                 }
             }
             else {
                 json.state[newBindingName] = {
-                    code: "(".concat(forName).concat(indexName ? ", ".concat(indexName) : '', ") => (").concat(item.bindings[key].code, ")"),
+                    code: `(${forName}${indexName ? `, ${indexName}` : ''}) => (${item.bindings[key].code})`,
                     type: 'function',
                 };
-                item.bindings[key].code = "state.".concat(newBindingName, "(").concat(forName).concat(indexName ? ", ".concat(indexName) : '', ")");
+                item.bindings[key].code = `state.${newBindingName}(${forName}${indexName ? `, ${indexName}` : ''})`;
             }
         }
         else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
@@ -485,36 +453,36 @@ var handleBindings = function (json, item, index, forName, indexName) {
                 if (!((_e = json.hooks['onInit']) === null || _e === void 0 ? void 0 : _e.code)) {
                     json.hooks['onInit'] = { code: '' };
                 }
-                json.hooks['onInit'].code += "\nstate.".concat(newBindingName, " = ").concat(item.bindings[key].code, ";\n");
+                json.hooks['onInit'].code += `\nstate.${newBindingName} = ${item.bindings[key].code};\n`;
                 json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
                 json.hooks['onUpdate'].push({
-                    code: "state.".concat(newBindingName, " = ").concat(item.bindings[key].code),
+                    code: `state.${newBindingName} = ${item.bindings[key].code}`,
                 });
-                item.bindings[key].code = "state.".concat(newBindingName);
+                item.bindings[key].code = `state.${newBindingName}`;
             }
             else if (key.startsWith('on')) {
-                var _k = item.bindings[key].arguments, cusArgs = _k === void 0 ? ['event'] : _k;
+                const { arguments: cusArgs = ['event'] } = item.bindings[key];
                 if (((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().startsWith('{')) &&
                     ((_g = item.bindings[key]) === null || _g === void 0 ? void 0 : _g.code.trim().endsWith('}'))) {
                     json.state[newBindingName] = {
-                        code: "(".concat(cusArgs.join(', '), ") => ").concat(item.bindings[key].code),
+                        code: `(${cusArgs.join(', ')}) => ${item.bindings[key].code}`,
                         type: 'function',
                     };
-                    item.bindings[key].code = "state.".concat(newBindingName, "(").concat(cusArgs.join(', '), ")");
+                    item.bindings[key].code = `state.${newBindingName}(${cusArgs.join(', ')})`;
                 }
             }
             else {
-                json.state[newBindingName] = { code: "null", type: 'property' };
+                json.state[newBindingName] = { code: `null`, type: 'property' };
                 if (!((_h = json.hooks['onInit']) === null || _h === void 0 ? void 0 : _h.code)) {
                     json.hooks['onInit'] = { code: '' };
                 }
-                json.hooks['onInit'].code += "\nstate.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")};\n");
+                json.hooks['onInit'].code += `\nstate.${newBindingName} = {...(${item.bindings[key].code})};\n`;
                 json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
                 json.hooks['onUpdate'].push({
-                    code: "state.".concat(newBindingName, " = {...(").concat(item.bindings[key].code, ")}"),
+                    code: `state.${newBindingName} = {...(${item.bindings[key].code})}`,
                 });
                 item.bindings[newBindingName] = item.bindings[key];
-                item.bindings[key].code = "state.".concat(newBindingName);
+                item.bindings[key].code = `state.${newBindingName}`;
                 delete item.bindings[key];
             }
         }
@@ -522,42 +490,41 @@ var handleBindings = function (json, item, index, forName, indexName) {
     }
     return index;
 };
-var handleProperties = function (json, item, index) {
-    for (var key in item.properties) {
+const handleProperties = (json, item, index) => {
+    for (const key in item.properties) {
         if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
             continue;
         }
-        var newBindingName = generateNewBindingName(index, item.name);
-        json.state[newBindingName] = { code: '`' + "".concat(item.properties[key]) + '`', type: 'property' };
-        item.bindings[key] = { code: "state.".concat(newBindingName), type: 'single' };
+        const newBindingName = generateNewBindingName(index, item.name);
+        json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
+        item.bindings[key] = { code: `state.${newBindingName}`, type: 'single' };
         delete item.properties[key];
         index++;
     }
     return index;
 };
-var handleAngularBindings = function (json, item, index, _a) {
-    var _b = _a === void 0 ? {} : _a, forName = _b.forName, indexName = _b.indexName;
+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;
 };
-var classPropertiesPlugin = function () { return ({
+const classPropertiesPlugin = () => ({
     json: {
-        pre: function (json) {
-            var lastId = 0;
-            (0, traverse_nodes_1.traverseNodes)(json, function (item) {
+        pre: (json) => {
+            let lastId = 0;
+            (0, traverse_nodes_1.traverseNodes)(json, (item) => {
                 if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
                     if (item.name === 'For') {
-                        var forName_1 = item.scope.forName;
-                        var indexName_1 = item.scope.indexName;
-                        (0, traverse_nodes_1.traverseNodes)(item, function (child) {
+                        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: forName_1,
-                                    indexName: indexName_1,
+                                    forName,
+                                    indexName,
                                 });
                             }
                         });
@@ -570,331 +537,380 @@ var classPropertiesPlugin = function () { return ({
             return json;
         },
     },
-}); };
+});
 // if any state "property" is trying to access state.* or props.*
 // then we need to move them to onInit where they can be accessed
-var transformState = function (json) {
+const transformState = (json) => {
     Object.entries(json.state)
         .reverse()
-        .forEach(function (_a) {
-        var _b;
-        var key = _a[0], value = _a[1];
+        .forEach(([key, value]) => {
+        var _a;
         if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
             if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
-                var code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
+                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
                 json.state[key].code = 'null';
-                if (!((_b = json.hooks.onInit) === null || _b === void 0 ? void 0 : _b.code)) {
+                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
                     json.hooks.onInit = { code: '' };
                 }
-                json.hooks.onInit.code = "\nthis.".concat(key, " = ").concat(code, ";\n").concat(json.hooks.onInit.code);
+                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
             }
         }
     });
 };
-var componentToAngular = function (userOptions) {
-    if (userOptions === void 0) { userOptions = {}; }
-    return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var _component = _a.component;
-        // Make a copy we can safely mutate, similar to babel's toolchain
-        var json = (0, fast_clone_1.fastClone)(_component);
-        var useMetadata = (_b = json.meta) === null || _b === void 0 ? void 0 : _b.useMetadata;
-        var contextVars = Object.keys(((_c = json === null || json === void 0 ? void 0 : json.context) === null || _c === void 0 ? void 0 : _c.get) || {});
-        // TODO: Why is 'outputs' used here and shouldn't it be typed in packages/core/src/types/metadata.ts
-        var metaOutputVars = (useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.outputs) || [];
-        var outputVars = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], metaOutputVars, true), (0, get_prop_functions_1.getPropFunctions)(json), true));
-        var stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
-        var options = (0, merge_options_1.initializeOptions)({
-            target: 'angular',
-            component: _component,
-            defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
-            userOptions: userOptions,
-        });
-        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
-            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
-                switch (codeType) {
-                    case 'hooks':
-                        return (0, function_1.flow)(processAngularCode({
-                            replaceWith: 'this',
-                            contextVars: contextVars,
-                            outputVars: outputVars,
-                            domRefs: Array.from((0, get_refs_1.getRefs)(json)),
-                            stateVars: stateVars,
-                        }), function (code) {
-                            var allMethodNames = Object.entries(json.state)
-                                .filter(function (_a) {
-                                var _ = _a[0], value = _a[1];
-                                return (value === null || value === void 0 ? void 0 : value.type) === 'function' || (value === null || value === void 0 ? void 0 : value.type) === 'method';
-                            })
-                                .map(function (_a) {
-                                var key = _a[0];
-                                return key;
-                            });
-                            return (0, replace_identifiers_1.replaceIdentifiers)({
-                                code: code,
-                                from: allMethodNames,
-                                to: function (name) { return "this.".concat(name); },
-                            });
+const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // 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) || {});
+    // TODO: Why is 'outputs' used here and shouldn't it be typed in packages/core/src/types/metadata.ts
+    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 stateVars = Object.keys((json === null || json === void 0 ? void 0 : json.state) || {});
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'angular',
+        component: _component,
+        defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
+        userOptions: userOptions,
+    });
+    options.plugins = [
+        ...(options.plugins || []),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'hooks':
+                    return (0, function_1.flow)(processAngularCode({
+                        replaceWith: 'this',
+                        contextVars,
+                        outputVars,
+                        domRefs: Array.from((0, get_refs_1.getRefs)(json)),
+                        stateVars,
+                    }), (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 function (code) {
-                            var newLocal = processAngularCode({
-                                contextVars: [],
-                                outputVars: outputVars,
-                                domRefs: [], // the template doesn't need the this keyword.
-                            })(code);
-                            return newLocal.replace(/"/g, '&quot;');
-                        };
-                    case 'hooks-deps':
-                    case 'state':
-                    case 'context-set':
-                    case 'properties':
-                    case 'dynamic-jsx-elements':
-                    case 'types':
-                        return function (x) { return x; };
-                }
-            }),
-        ], false);
-        if (options.state === 'class-properties') {
-            options.plugins.push(classPropertiesPlugin);
-        }
-        if (options.plugins) {
-            json = (0, plugins_1.runPreJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        var _o = (0, get_props_ref_1.getPropsRef)(json, true), forwardProp = _o[0], hasPropRef = _o[1];
-        var childComponents = [];
-        var propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
-        json.imports.forEach(function (_a) {
-            var imports = _a.imports;
-            Object.keys(imports).forEach(function (key) {
-                if (imports[key] === 'default') {
-                    childComponents.push(key);
-                }
-            });
-        });
-        var customImports = (0, get_custom_imports_1.getCustomImports)(json);
-        var _p = json.exports, localExports = _p === void 0 ? {} : _p;
-        var localExportVars = Object.keys(localExports)
-            .filter(function (key) { return localExports[key].usedInLocal; })
-            .map(function (key) { return "".concat(key, " = ").concat(key, ";"); });
-        var injectables = contextVars.map(function (variableName) {
-            var _a, _b, _c, _d;
-            var 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(() => ".concat(variableType, ")) public ").concat(variableName, ": ").concat(variableType);
+                    });
+                case 'bindings':
+                    return (code) => {
+                        const newLocal = processAngularCode({
+                            contextVars: [],
+                            outputVars,
+                            domRefs: [], // the template doesn't need the this keyword.
+                        })(code);
+                        return newLocal.replace(/"/g, '&quot;');
+                    };
+                case 'hooks-deps':
+                case 'state':
+                case 'context-set':
+                case 'properties':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (x) => x;
             }
-            return "public ".concat(variableName, " : ").concat(variableType);
-        });
-        var hasConstructor = Boolean(injectables.length);
-        var 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
-        outputVars.forEach(function (variableName) {
-            props.delete(variableName);
-        });
-        var outputs = outputVars.map(function (variableName) {
-            var _a, _b;
-            if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.outputs) {
-                return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.outputs(json, variableName);
+        }),
+    ];
+    if (options.state === 'class-properties') {
+        options.plugins.push(classPropertiesPlugin);
+    }
+    if (options.plugins) {
+        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+    }
+    const [forwardProp, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json, true);
+    const childComponents = [];
+    const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
+    json.imports.forEach(({ imports }) => {
+        Object.keys(imports).forEach((key) => {
+            if (imports[key] === 'default') {
+                childComponents.push(key);
             }
-            return "@Output() ".concat(variableName, " = new EventEmitter()");
         });
-        var domRefs = (0, get_refs_1.getRefs)(json);
-        var jsRefs = Object.keys(json.refs).filter(function (ref) { return !domRefs.has(ref); });
-        var componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter(function (item) {
-            return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !types_1.BUILT_IN_COMPONENTS.has(item);
-        });
-        (0, map_refs_1.mapRefs)(json, function (refName) {
-            var isDomRef = domRefs.has(refName);
-            return "this.".concat(isDomRef ? '' : '_').concat(refName).concat(isDomRef ? '.nativeElement' : '');
-        });
-        if (options.plugins) {
-            json = (0, plugins_1.runPostJsonPlugins)({ json: json, plugins: options.plugins });
-        }
-        preprocessCssAsJson(json);
-        var css = (0, collect_css_1.collectCss)(json);
-        if (options.prettier !== false) {
-            css = tryFormat(css, 'css');
-        }
-        var helperFunctions = new Set();
-        var template = json.children
-            .map(function (item) {
-            var _a, _b;
-            var tmpl = (0, exports.blockToAngular)({
-                root: json,
-                json: item,
-                options: options,
-                blockOptions: {
-                    childComponents: 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 : [],
-                },
-            });
-            if (options.state === 'inline-with-wrappers') {
-                (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach(function (key) {
-                    return helperFunctions.add((0, helpers_2.HELPER_FUNCTIONS)(options.typescript)[key]);
-                });
-            }
-            return tmpl;
-        })
-            .join('\n');
-        if (options.prettier !== false) {
-            template = tryFormat(template, 'html');
+    });
+    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};`);
+    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}`;
+    });
+    const hasConstructor = Boolean(injectables.length);
+    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
+    outputVars.forEach((variableName) => {
+        props.delete(variableName);
+    });
+    const outputs = outputVars.map((variableName) => {
+        var _a, _b;
+        if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.outputs) {
+            return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.outputs(json, variableName);
         }
-        (0, strip_meta_properties_1.stripMetaProperties)(json);
-        var _q = traverseToGetAllDynamicComponents(json, options, {
-            childComponents: childComponents,
-            nativeAttributes: (_e = (_d = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _d === void 0 ? void 0 : _d.nativeAttributes) !== null && _e !== void 0 ? _e : [],
-        }), dynamicComponents = _q.components, dynamicTemplate = _q.dynamicTemplate;
-        transformState(json);
-        var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-            format: 'class',
-            valueMapper: processAngularCode({
-                replaceWith: 'this',
-                contextVars: contextVars,
-                outputVars: outputVars,
-                domRefs: Array.from(domRefs),
-                stateVars: stateVars,
-            }),
+        return `@Output() ${variableName} = new EventEmitter()`;
+    });
+    const domRefs = (0, get_refs_1.getRefs)(json);
+    const jsRefs = Object.keys(json.refs).filter((ref) => !domRefs.has(ref));
+    const componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter((item) => {
+        return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !types_1.BUILT_IN_COMPONENTS.has(item);
+    });
+    (0, map_refs_1.mapRefs)(json, (refName) => {
+        const isDomRef = domRefs.has(refName);
+        return `this.${isDomRef ? '' : '_'}${refName}${isDomRef ? '.nativeElement' : ''}`;
+    });
+    if (options.plugins) {
+        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+    }
+    preprocessCssAsJson(json);
+    let css = (0, collect_css_1.collectCss)(json);
+    if (options.prettier !== false) {
+        css = tryFormat(css, 'css');
+    }
+    const helperFunctions = new Set();
+    let template = json.children
+        .map((item) => {
+        var _a, _b;
+        const tmpl = (0, exports.blockToAngular)({
+            root: json,
+            json: item,
+            options,
+            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 : [],
+            },
         });
-        var hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
-        var styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
-        // Preparing built in component metadata parameters
-        var componentMetadata = __assign(__assign({ selector: "'".concat((0, lodash_1.kebabCase)(json.name || 'my-component'), ", ").concat(json.name, "'"), template: "`\n        ".concat((0, indent_1.indent)(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        ").concat((0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        `") }, (styles
+        if (options.state === 'inline-with-wrappers') {
+            (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach((key) => helperFunctions.add((0, helpers_2.HELPER_FUNCTIONS)(options.typescript)[key]));
+        }
+        return tmpl;
+    })
+        .join('\n');
+    if (options.prettier !== false) {
+        template = tryFormat(template, 'html');
+    }
+    (0, strip_meta_properties_1.stripMetaProperties)(json);
+    const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(json, options, {
+        childComponents,
+        nativeAttributes: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeAttributes) !== null && _d !== void 0 ? _d : [],
+    });
+    transformState(json);
+    const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+        format: 'class',
+        valueMapper: processAngularCode({
+            replaceWith: 'this',
+            contextVars,
+            outputVars,
+            domRefs: Array.from(domRefs),
+            stateVars,
+        }),
+    });
+    const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
+    const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
+    // Preparing built in component metadata parameters
+    const componentMetadata = {
+        selector: `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}, ${json.name}'`,
+        template: `\`
+        ${(0, indent_1.indent)(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+        ${(0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+        \``,
+        ...(styles
             ? {
-                styles: "[`".concat((0, indent_1.indent)(styles, 8), "`]"),
+                styles: `[\`${(0, indent_1.indent)(styles, 8)}\`]`,
             }
-            : {})), (options.standalone
+            : {}),
+        ...(options.standalone
             ? // TODO: also add child component imports here as well
                 {
                     standalone: 'true',
-                    imports: "[".concat(__spreadArray(['CommonModule'], componentsUsed, true).join(', '), "]"),
+                    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(function (_a) {
-            var key = _a[0], value = _a[1];
-            componentMetadata[key] = value;
-        });
-        var getPropsDefinition = function (_a) {
-            var json = _a.json;
-            if (!json.defaultProps)
-                return '';
-            var defalutPropsString = Object.keys(json.defaultProps)
-                .map(function (prop) {
-                var _a;
-                var value = json.defaultProps.hasOwnProperty(prop)
-                    ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                    : 'undefined';
-                return "".concat(prop, ": ").concat(value);
-            })
-                .join(',');
-            return "const defaultProps = {".concat(defalutPropsString, "};\n");
-        };
-        var angularCoreImports = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], (outputs.length ? ['Output', 'EventEmitter'] : []), true), (((_f = options === null || options === void 0 ? void 0 : options.experimental) === null || _f === void 0 ? void 0 : _f.inject) ? ['Inject', 'forwardRef'] : []), true), [
-            'Component'
-        ], false), (domRefs.size || dynamicComponents.size ? ['ViewChild', 'ElementRef'] : []), true), (props.size ? ['Input'] : []), true), (dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []), true), (((_g = json.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.length) && options.typescript ? ['SimpleChanges'] : []), true).join(', ');
-        var str = (0, dedent_1.dedent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { ", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "], ["\n    import { ", " } from '@angular/core';\n    ", "\n\n    ", "\n    ", "\n    ", "\n\n    @Component({\n      ", "\n    })\n    export default class ", " {\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n    }\n  "])), angularCoreImports, options.standalone ? "import { CommonModule } from '@angular/common';" : '', json.types ? json.types.join('\n') : '', getPropsDefinition({ json: json }), (0, render_imports_1.renderPreComponent)({
-            explicitImportFileExtension: options.explicitImportFileExtension,
-            component: json,
-            target: 'angular',
-            excludeMitosisComponents: !options.standalone && !options.preserveImports,
-            preserveFileExtensions: options.preserveFileExtensions,
-            componentsUsed: componentsUsed,
-            importMapper: options === null || options === void 0 ? void 0 : options.importMapper,
-        }), Object.entries(componentMetadata)
-            .map(function (_a) {
-            var k = _a[0], v = _a[1];
-            return "".concat(k, ": ").concat(v);
-        })
-            .join(','), json.name, localExportVars.join('\n'), customImports.map(function (name) { return "".concat(name, " = ").concat(name); }).join('\n'), Array.from(props)
-            .filter(function (item) { return !(0, slots_1.isSlotProperty)(item) && item !== 'children'; })
-            .map(function (item) {
-            var propType = propsTypeRef ? "".concat(propsTypeRef, "[\"").concat(item, "\"]") : 'any';
-            var propDeclaration = "@Input() ".concat(item).concat(options.typescript ? "!: ".concat(propType) : '');
-            if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
-                propDeclaration += " = defaultProps[\"".concat(item, "\"]");
-            }
-            return propDeclaration;
-        })
-            .join('\n'), outputs.join('\n'), Array.from(domRefs)
-            .map(function (refName) {
-            return "@ViewChild('".concat(refName, "') ").concat(refName).concat(options.typescript ? '!: ElementRef' : '');
-        })
-            .join('\n'), Array.from(dynamicComponents)
-            .map(function (component) {
-            return "@ViewChild('".concat(component
-                .split('.')[1]
-                .toLowerCase(), "Template', { static: true }) ").concat(component
-                .split('.')[1]
-                .toLowerCase(), "TemplateRef").concat(options.typescript ? '!: TemplateRef<any>' : '');
-        })
-            .join('\n'), dynamicComponents.size ? "myContent".concat(options.typescript ? '?: any[][];' : '') : '', dataString, helperFunctions.size ? Array.from(helperFunctions).join('\n') : '', jsRefs
-            .map(function (ref) {
-            var argument = json.refs[ref].argument;
-            var typeParameter = json.refs[ref].typeParameter;
-            return "private _".concat(ref).concat(typeParameter ? ": ".concat(typeParameter) : '').concat(argument
-                ? " = ".concat(processAngularCode({
-                    replaceWith: 'this.',
-                    contextVars: contextVars,
-                    outputVars: outputVars,
-                    domRefs: Array.from(domRefs),
-                    stateVars: stateVars,
-                })(argument))
-                : '', ";");
+            : {}),
+    };
+    // 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 getPropsDefinition = ({ json }) => {
+        if (!json.defaultProps)
+            return '';
+        const defalutPropsString = Object.keys(json.defaultProps)
+            .map((prop) => {
+            var _a;
+            const value = json.defaultProps.hasOwnProperty(prop)
+                ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                : 'undefined';
+            return `${prop}: ${value}`;
         })
-            .join('\n'), !hasConstructor && !dynamicComponents.size
-            ? ''
-            : "constructor(\n".concat(injectables.join(',\n')).concat(dynamicComponents.size
-                ? "\nprivate vcRef".concat(options.typescript ? ': ViewContainerRef' : '', ",\n")
-                : '', ") {}\n          "), !json.hooks.onMount.length && !dynamicComponents.size && !((_h = json.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code)
-            ? ''
-            : "ngOnInit() {\n              ".concat(!((_j = json.hooks) === null || _j === void 0 ? void 0 : _j.onInit)
-                ? ''
-                : "\n                    ".concat((_k = json.hooks.onInit) === null || _k === void 0 ? void 0 : _k.code, "\n                    "), "\n              ").concat(json.hooks.onMount.length > 0
-                ? "\n                    if (typeof window !== 'undefined') {\n                      ".concat((0, on_mount_1.stringifySingleScopeOnMount)(json), "\n                    }\n                    ")
-                : '', "\n              ").concat(dynamicComponents.size
-                ? "\n              this.myContent = [".concat(Array.from(dynamicComponents)
-                    .map(function (component) {
-                    return "this.vcRef.createEmbeddedView(this.".concat(component
-                        .split('.')[1]
-                        .toLowerCase(), "TemplateRef).rootNodes");
-                })
-                    .join(', '), "];\n              ")
-                : '', "\n            }"), !((_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.length)
-            ? ''
-            : "ngOnChanges(changes".concat(options.typescript ? ': SimpleChanges' : '', ") {\n              if (typeof window !== 'undefined') {\n                ").concat((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.reduce(function (code, hook) {
-                code += hook.code;
-                return code + '\n';
-            }, ''), "\n              }\n            }\n                "), !json.hooks.onUnMount
-            ? ''
-            : "ngOnDestroy() {\n              ".concat(json.hooks.onUnMount.code, "\n            }"));
-        if (options.standalone !== true) {
-            str = generateNgModule(str, json.name, componentsUsed, json, options.bootstrapMapper);
-        }
-        if (options.plugins) {
-            str = (0, plugins_1.runPreCodePlugins)({ json: json, code: str, plugins: options.plugins });
-        }
-        if (options.prettier !== false) {
-            str = tryFormat(str, 'typescript');
-        }
-        if (options.plugins) {
-            str = (0, plugins_1.runPostCodePlugins)({ json: json, code: str, plugins: options.plugins });
-        }
-        return str;
+            .join(',');
+        return `const defaultProps = {${defalutPropsString}};\n`;
     };
+    const angularCoreImports = [
+        ...(outputs.length ? ['Output', 'EventEmitter'] : []),
+        ...(((_e = options === null || options === void 0 ? void 0 : options.experimental) === null || _e === void 0 ? void 0 : _e.inject) ? ['Inject', 'forwardRef'] : []),
+        'Component',
+        ...(domRefs.size || dynamicComponents.size ? ['ViewChild', 'ElementRef'] : []),
+        ...(props.size ? ['Input'] : []),
+        ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
+        ...(((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.length) && options.typescript ? ['SimpleChanges'] : []),
+    ].join(', ');
+    let str = (0, dedent_1.dedent) `
+    import { ${angularCoreImports} } from '@angular/core';
+    ${options.standalone ? `import { CommonModule } from '@angular/common';` : ''}
+
+    ${json.types ? json.types.join('\n') : ''}
+    ${getPropsDefinition({ 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')}
+
+      ${Array.from(props)
+        .filter((item) => !(0, slots_1.isSlotProperty)(item) && item !== 'children')
+        .map((item) => {
+        const propType = propsTypeRef ? `${propsTypeRef}["${item}"]` : 'any';
+        let propDeclaration = `@Input() ${item}${options.typescript ? `!: ${propType}` : ''}`;
+        if (json.defaultProps && json.defaultProps.hasOwnProperty(item)) {
+            propDeclaration += ` = defaultProps["${item}"]`;
+        }
+        return propDeclaration;
+    })
+        .join('\n')}
+
+      ${outputs.join('\n')}
+
+      ${Array.from(domRefs)
+        .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[][];' : ''}` : ''}
+
+      ${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
+            ? ` = ${processAngularCode({
+                replaceWith: 'this.',
+                contextVars,
+                outputVars,
+                domRefs: Array.from(domRefs),
+                stateVars,
+            })(argument)}`
+            : ''};`;
+    })
+        .join('\n')}
+
+      ${!hasConstructor && !dynamicComponents.size
+        ? ''
+        : `constructor(\n${injectables.join(',\n')}${dynamicComponents.size
+            ? `\nprivate vcRef${options.typescript ? ': ViewContainerRef' : ''},\n`
+            : ''}) {}
+          `}
+      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
+        ? ''
+        : `ngOnInit() {
+              ${!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+            ? ''
+            : `
+                    ${(_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.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(', ')}];
+              `
+            : ''}
+            }`}
+
+      ${!((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length)
+        ? ''
+        : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
+              if (typeof window !== 'undefined') {
+                ${(_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.reduce((code, hook) => {
+            code += hook.code;
+            return code + '\n';
+        }, '')}
+              }
+            }
+                `}
+
+      ${!json.hooks.onUnMount
+        ? ''
+        : `ngOnDestroy() {
+              ${json.hooks.onUnMount.code}
+            }`}
+
+    }
+  `;
+    if (options.standalone !== true) {
+        str = 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 = tryFormat(str, 'typescript');
+    }
+    if (options.plugins) {
+        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+    }
+    return str;
 };
 exports.componentToAngular = componentToAngular;
-var tryFormat = function (str, parser) {
+const tryFormat = (str, parser) => {
     try {
         return (0, standalone_1.format)(str, {
-            parser: parser,
+            parser,
             plugins: [
                 // To support running in browsers
                 require('prettier/parser-typescript'),
@@ -910,4 +926,3 @@ var tryFormat = function (str, parser) {
     }
     return str;
 };
-var templateObject_1;