@builder.io/mitosis 0.10.0 → 0.11.0

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

@@ -19,7 +19,7 @@ export declare const transformState: (json: MitosisComponent) => void;
 export declare const hasFirstChildKeyAttribute: (node: MitosisNode) => boolean;
 export declare const preprocessCssAsJson: (json: MitosisComponent) => void;
 export declare const generateNgModule: (content: string, name: string, componentsUsed: string[], component: MitosisComponent, bootstrapMapper: Function | null | undefined) => string;
-export declare const traverseToGetAllDynamicComponents: (json: MitosisComponent, options: ToAngularOptions, blockOptions: AngularBlockOptions) => {
+export declare const traverseToGetAllDynamicComponents: (json: MitosisComponent, options: ToAngularOptions, blockOptions: AngularBlockOptions, api?: 'signals' | 'classic') => {
     components: Set<string>;
     dynamicTemplate: string;
 };

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

@@ -36,6 +36,7 @@ const helpers_1 = require("../../../helpers/styles/helpers");
 const babel = __importStar(require("@babel/core"));
 const function_1 = require("fp-ts/function");
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const blocks_2 = require("../signals/blocks");
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
     let obj = {}
@@ -154,13 +155,15 @@ ${content}
 export class ${name}Module {}`;
 };
 exports.generateNgModule = generateNgModule;
-const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
+const traverseToGetAllDynamicComponents = (json, options, blockOptions, api = 'classic') => {
     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) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.')) {
             const children = item.children
-                .map((child) => (0, blocks_1.blockToAngular)({ root: json, json: child, options, blockOptions }))
+                .map((child) => api === 'classic'
+                ? (0, blocks_1.blockToAngular)({ root: json, json: child, options, blockOptions })
+                : (0, blocks_2.blockToAngularSignals)({ root: json, json: child, options, blockOptions }))
                 .join('\n');
             dynamicTemplate = `<ng-template #${item.name.split('.')[1].toLowerCase() + 'Template'}>${children}</ng-template>`;
             components.add(item.name);

package/dist/src/generators/angular/signals/blocks.js

@@ -8,13 +8,16 @@ const html_tags_1 = require("../../../constants/html_tags");
 const helpers_1 = require("../../../generators/angular/helpers");
 const parse_selector_1 = require("../../../generators/angular/helpers/parse-selector");
 const babel_transform_1 = require("../../../helpers/babel-transform");
+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 slots_1 = require("../../../helpers/slots");
+const symbol_processor_1 = require("../../../symbols/symbol-processor");
 const types_1 = require("@babel/types");
 const function_1 = require("fp-ts/function");
 const lodash_1 = require("lodash");
+const hooks_1 = require("../helpers/hooks");
 const getChildren = (root, json, options, blockOptions) => {
     var _a;
     return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToAngularSignals)({ root, json: item, options, blockOptions })).join('\n');
@@ -59,7 +62,11 @@ ${children}
         const children = getChildren(root, json, options, blockOptions);
         const item = forName !== null && forName !== void 0 ? forName : '_';
         const of = (_c = forNode.bindings.each) === null || _c === void 0 ? void 0 : _c.code;
-        const track = `track ${trackByFnName ? trackByFnName : indexName ? indexName : 'i'};`;
+        const track = `track ${trackByFnName
+            ? `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : 'i'}, ${forName})`
+            : indexName
+                ? indexName
+                : 'i'};`;
         const index = indexName ? `let ${indexName} = $index` : 'let i = $index';
         return `
     @for (${item} of ${of};${track}${index}) {
@@ -95,13 +102,115 @@ const BINDINGS_MAPPER = {
     innerHTML: 'innerHTML',
     style: 'ngStyle',
 };
-const stringifyBinding = (node, blockOptions) => ([key, binding]) => {
+const handleDynamicComponentBindings = (node) => {
+    var _a;
+    let allProps = '';
+    for (const key in node.properties) {
+        if (key.startsWith('$') || key === 'key') {
+            continue;
+        }
+        const value = node.properties[key];
+        allProps += `${key}: '${value}', `;
+    }
+    for (const key in node.bindings) {
+        if (key.startsWith('"') || key.startsWith('$') || key === 'key') {
+            continue;
+        }
+        const { code } = node.bindings[key];
+        if (key === 'ref') {
+            allProps += `${key}: this.${code}(), `;
+            continue;
+        }
+        if (((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread') {
+            allProps += `...${code}, `;
+            continue;
+        }
+        let keyToUse = key.includes('-') ? `'${key}'` : key;
+        keyToUse = keyToUse.replace('state.', '').replace('props.', '');
+        if ((0, event_handlers_1.checkIsEvent)(key)) {
+            const eventName = (0, event_handlers_1.getEventNameWithoutOn)(key);
+            allProps += `on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}: ${code.replace(/\(.*?\)/g, '')}.bind(this), `;
+        }
+        else {
+            allProps += `${keyToUse}: ${code}, `;
+        }
+    }
+    if (allProps.endsWith(', ')) {
+        allProps = allProps.slice(0, -2);
+    }
+    if (allProps.startsWith(', ')) {
+        allProps = allProps.slice(2);
+    }
+    return allProps;
+};
+const codeSetAttributes = (refName, code) => {
+    return `this.setAttributes(this.${refName}()?.nativeElement, ${code});`;
+};
+const saveSpreadRef = (root, refName) => {
+    root.compileContext = root.compileContext || {};
+    root.compileContext.angular = root.compileContext.angular || { extra: {} };
+    root.compileContext.angular.extra = root.compileContext.angular.extra || {};
+    root.compileContext.angular.extra.spreadRefs = root.compileContext.angular.extra.spreadRefs || [];
+    root.compileContext.angular.extra.spreadRefs.push(refName);
+};
+const handleSpreadBinding = (node, binding, root) => {
+    if (html_tags_1.VALID_HTML_TAGS.includes(node.name.trim())) {
+        if (binding.code === 'this') {
+            // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
+            return;
+        }
+        let refName = '';
+        if (node.meta._spreadRefName) {
+            refName = node.meta._spreadRefName;
+            const shouldAddRef = !node.meta._spreadRefAdded;
+            node.meta._spreadRefAdded = true;
+            (0, hooks_1.addCodeToOnUpdate)(root, codeSetAttributes(refName, binding.code));
+            (0, hooks_1.addCodeNgAfterViewInit)(root, codeSetAttributes(refName, binding.code));
+            return shouldAddRef ? `#${refName} ` : '';
+        }
+        const spreadRefIndex = root.meta._spreadRefIndex || 0;
+        refName = `elRef${spreadRefIndex}`;
+        root.meta._spreadRefIndex = spreadRefIndex + 1;
+        node.meta._spreadRefName = refName;
+        node.meta._spreadRefAdded = true;
+        node.bindings['spreadRef'] = (0, bindings_1.createSingleBinding)({ code: refName });
+        if (!root.refs[refName]) {
+            root.refs[refName] = { argument: '' };
+        }
+        if (!root.state['_listenerFns']) {
+            root.state['_listenerFns'] = {
+                code: 'new Map()',
+                type: 'property',
+            };
+        }
+        (0, hooks_1.addCodeToOnUpdate)(root, codeSetAttributes(refName, binding.code));
+        (0, hooks_1.addCodeNgAfterViewInit)(root, codeSetAttributes(refName, binding.code));
+        if (!root.state['setAttributes']) {
+            root.state['setAttributes'] = {
+                code: (0, helpers_1.HELPER_FUNCTIONS)(true).setAttributes,
+                type: 'method',
+            };
+        }
+        if (!root.hooks.onUnMount) {
+            root.hooks.onUnMount = {
+                code: `
+          for (const fn of this._listenerFns.values()) {
+            fn();
+          }
+        `,
+            };
+        }
+        saveSpreadRef(root, refName);
+        return `#${refName} `;
+    }
+};
+const stringifyBinding = (node, blockOptions, root) => ([key, binding]) => {
     var _a, _b;
-    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
+    if (key.startsWith('$') || key === 'key') {
         return;
     }
     if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
-        return;
+        return handleSpreadBinding(node, binding, root);
     }
     const keyToUse = BINDINGS_MAPPER[key] || key;
     if (!binding)
@@ -198,7 +307,7 @@ const blockToAngularSignals = ({ root, json, options = {}, blockOptions = {
     nativeAttributes: [],
     nativeEvents: [],
 }, rootRef, }) => {
-    var _a;
+    var _a, _b;
     if (MAPPERS[json.name]) {
         return MAPPERS[json.name](root, json, options, blockOptions);
     }
@@ -213,6 +322,32 @@ const blockToAngularSignals = ({ root, json, options = {}, blockOptions = {
         return `{{${textCode}}}`;
     }
     let str = '';
+    // Handle dynamic components, state.MyComponent / props.MyComponent
+    if (json.name.includes('.')) {
+        const elSelector = ((_b = blockOptions.childComponents) === null || _b === void 0 ? void 0 : _b.find((impName) => impName === json.name))
+            ? (0, lodash_1.kebabCase)(json.name)
+            : json.name;
+        const elSelectorProcessed = elSelector.replace('state.', '').replace('props.', '');
+        const dynamicComponentRef = elSelectorProcessed.replace(/^this\.([^.]+)/, '$1()');
+        let allProps = handleDynamicComponentBindings(json);
+        const computedName = `dynamicProps_${(0, symbol_processor_1.hashCodeAsString)(allProps)}`;
+        if (allProps) {
+            if (!root.state[computedName]) {
+                root.state[computedName] = {
+                    code: `get ${computedName}() { 
+          return { ${allProps} };
+        }`,
+                    type: 'getter',
+                };
+            }
+        }
+        str += `<ng-container *ngComponentOutlet="
+      ${dynamicComponentRef};${allProps ? `\ninputs: ${computedName}();` : ''}
+      content: myContent();
+      ">  `;
+        str += `</ng-container>`;
+        return str;
+    }
     const { element, additionalString } = getElementTag(json, blockOptions);
     str += `<${element} ${additionalString}`;
     for (const key in json.properties) {
@@ -220,7 +355,7 @@ const blockToAngularSignals = ({ root, json, options = {}, blockOptions = {
         str += ` ${key}="${value}" `;
     }
     const stringifiedBindings = Object.entries(json.bindings)
-        .map(stringifyBinding(json, blockOptions))
+        .map(stringifyBinding(json, blockOptions, root))
         .join('');
     str += stringifiedBindings;
     if (rootRef && !str.includes(`#${rootRef}`)) {

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

@@ -8,6 +8,7 @@ const get_refs_1 = require("../../../generators/angular/helpers/get-refs");
 const get_styles_1 = require("../../../generators/angular/helpers/get-styles");
 const blocks_1 = require("../../../generators/angular/signals/blocks");
 const helpers_2 = require("../../../generators/angular/signals/helpers");
+const get_computed_1 = require("../../../generators/angular/signals/helpers/get-computed");
 const get_inputs_1 = require("../../../generators/angular/signals/helpers/get-inputs");
 const get_code_processor_plugins_1 = require("../../../generators/angular/signals/plugins/get-code-processor-plugins");
 const types_1 = require("../../../generators/angular/types");
@@ -19,6 +20,7 @@ const get_child_components_1 = require("../../../helpers/get-child-components");
 const get_components_used_1 = require("../../../helpers/get-components-used");
 const get_props_1 = require("../../../helpers/get-props");
 const get_state_object_string_1 = require("../../../helpers/get-state-object-string");
+const is_hook_empty_1 = require("../../../helpers/is-hook-empty");
 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");
@@ -26,9 +28,10 @@ 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 get_dynamic_template_refs_1 = require("./helpers/get-dynamic-template-refs");
 const componentToAngularSignals = (userOptions = {}) => {
     return ({ component }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
         // Make a copy we can safely mutate, similar to babel's toolchain
         let json = (0, fast_clone_1.fastClone)(component);
         // Init compileContext
@@ -38,6 +41,9 @@ const componentToAngularSignals = (userOptions = {}) => {
                     ngAfterViewInit: {
                         code: '',
                     },
+                    ngAfterContentInit: {
+                        code: '',
+                    },
                 },
                 extra: {
                     importCalls: [],
@@ -55,7 +61,7 @@ const componentToAngularSignals = (userOptions = {}) => {
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
         }
-        const withAttributePassing = true; // We always want to pass attributes
+        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, rootRef, withAttributePassing });
         let props = Array.from((0, get_props_1.getProps)(json));
@@ -91,6 +97,15 @@ const componentToAngularSignals = (userOptions = {}) => {
         if (shouldUseSanitizer) {
             injectables.push('protected sanitizer: DomSanitizer');
         }
+        if (json.hooks.onMount.length > 0) {
+            json.compileContext.angular.hooks.ngAfterViewInit = {
+                code: `
+        if (typeof window !== 'undefined') {
+          ${(0, on_mount_1.stringifySingleScopeOnMount)(json)}
+        }
+        `,
+            };
+        }
         // HTML
         let template = json.children
             .map((item) => {
@@ -112,33 +127,70 @@ const componentToAngularSignals = (userOptions = {}) => {
         if (options.prettier !== false) {
             template = (0, format_1.tryFormat)(template, 'html');
         }
+        const { components: dynamicComponents, dynamicTemplate } = (0, helpers_1.traverseToGetAllDynamicComponents)(json, options, {
+            childComponents,
+            nativeAttributes: (_m = (_l = (_k = (_j = json.meta) === null || _j === void 0 ? void 0 : _j.useMetadata) === null || _k === void 0 ? void 0 : _k.angular) === null || _l === void 0 ? void 0 : _l.nativeAttributes) !== null && _m !== void 0 ? _m : [],
+            nativeEvents: (_r = (_q = (_p = (_o = json.meta) === null || _o === void 0 ? void 0 : _o.useMetadata) === null || _p === void 0 ? void 0 : _p.angular) === null || _q === void 0 ? void 0 : _q.nativeEvents) !== null && _r !== void 0 ? _r : [],
+        }, 'signals');
+        const hasDynamicComponents = dynamicComponents.size > 0;
+        if (hasDynamicComponents) {
+            injectables.push('private viewContainer: ViewContainerRef');
+            json.compileContext.angular.hooks.ngAfterContentInit.code =
+                `this._updateView();` + json.compileContext.angular.hooks.ngAfterContentInit.code;
+        }
         // Angular component settings
         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 componentSettings = {
-            selector: `'${(0, lodash_1.kebabCase)(json.name)}'`,
+            selector: ((_s = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _s === void 0 ? void 0 : _s.selector)
+                ? `'${(_t = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _t === void 0 ? void 0 : _t.selector}'`
+                : `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}'`,
             standalone: 'true',
             imports: `[${['CommonModule', ...componentsUsed].join(', ')}]`,
-            template: `\`${(0, helpers_1.getTemplateFormat)(template)}\``,
+            template: `\`${dynamicTemplate}${(0, helpers_1.getTemplateFormat)(template)}\``,
         };
         if (onPush) {
-            componentSettings.changeDetection = `'ChangeDetectionStrategy.OnPush'`;
+            componentSettings.changeDetection = 'ChangeDetectionStrategy.OnPush';
         }
         if (styles) {
             componentSettings.styles = `\`${styles}\``;
         }
+        if ((_u = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _u === void 0 ? void 0 : _u.skipHydration) {
+            componentSettings.host = `{ ngSkipHydration: 'true' }`;
+        }
         (0, strip_meta_properties_1.stripMetaProperties)(json);
         const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
             format: 'class',
             data: true,
             functions: false,
             getters: false,
-            valueMapper: (code, _, typeParameter) => {
+            valueMapper: (code, _, typeParameter, key) => {
+                var _a;
                 if (typeParameter && !code.length) {
                     console.error(`
 Component ${json.name} has state property without an initial value'. 
 This will cause an error in Angular.
 Please add a initial value for every state property even if it's \`undefined\`.`);
                 }
+                // Special case for _listenerFns - don't wrap in signal()
+                if (key === '_listenerFns') {
+                    return code;
+                }
+                if (key) {
+                    const propRefs = props.filter((prop) => code.includes(`this.${prop}()`));
+                    if (propRefs.length > 0) {
+                        if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
+                            json.hooks.onInit = {
+                                code: `
+          this.${key}.set(${code});
+        `,
+                            };
+                        }
+                        else {
+                            json.hooks.onInit.code = `this.${key}.set(${code});`.concat(json.hooks.onInit.code);
+                        }
+                        return `signal${typeParameter ? `<${typeParameter}>` : ''}(undefined)`;
+                    }
+                }
                 return `signal${typeParameter ? `<${typeParameter}>` : ''}(${code})`;
             },
         });
@@ -146,21 +198,36 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             format: 'class',
             data: false,
             functions: true,
-            getters: true,
+            getters: false,
             onlyValueMapper: true,
             valueMapper: (code, type, _, key) => {
                 return code.startsWith('function') ? code.replace('function', '').trim() : code;
             },
         });
+        // Handle getters as computed signals
+        const gettersString = (0, get_computed_1.getComputedGetters)({ json });
+        // Check if we need Renderer2 for spread attributes
+        const usesRenderer2 = !!json.state['_listenerFns'];
+        if (usesRenderer2) {
+            injectables.push('private renderer: Renderer2');
+        }
+        const importsViewChild = hasDynamicComponents ||
+            domRefs.size !== 0 ||
+            ((_y = (_x = (_w = (_v = json.compileContext) === null || _v === void 0 ? void 0 : _v.angular) === null || _w === void 0 ? void 0 : _w.extra) === null || _x === void 0 ? void 0 : _x.spreadRefs) === null || _y === void 0 ? void 0 : _y.length) > 0;
         // Imports
         const coreImports = (0, helpers_2.getAngularCoreImportsAsString)({
             refs: domRefs.size !== 0,
             input: props.length !== 0,
             output: events.length !== 0,
             model: writeableSignals.length !== 0,
-            effect: ((_j = json.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.length) !== 0,
-            signal: dataString.length !== 0,
+            effect: ((_z = json.hooks.onUpdate) === null || _z === void 0 ? void 0 : _z.length) !== 0,
+            signal: dataString.length !== 0 || hasDynamicComponents,
+            computed: gettersString.length !== 0,
             onPush,
+            viewChild: importsViewChild,
+            viewContainerRef: hasDynamicComponents,
+            templateRef: hasDynamicComponents,
+            renderer: usesRenderer2,
         });
         let str = (0, dedent_1.dedent) `
         import { ${coreImports} } from '@angular/core';
@@ -177,6 +244,8 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             target: 'angular',
             preserveFileExtensions: options.preserveFileExtensions,
             importMapper: (_, theImport, importedValues) => {
+                if (options.defaultExportComponents)
+                    return undefined;
                 const { defaultImport } = importedValues;
                 const { path } = theImport;
                 if (defaultImport && componentsUsed.includes(defaultImport)) {
@@ -191,11 +260,12 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             .map(([k, v]) => `${k}: ${v}`)
             .join(',')}
         })
-        export class ${json.name} implements AfterViewInit {   
+        export ${options.defaultExportComponents ? 'default ' : ''}class ${json.name} {   
           ${(0, lodash_1.uniq)(json.compileContext.angular.extra.importCalls)
             .map((importCall) => `protected readonly ${importCall} = ${importCall};`)
             .join('\n')}
-         
+
+          ${hasDynamicComponents ? (0, get_dynamic_template_refs_1.getDynamicTemplateRefs)(dynamicComponents) : ''}
           ${(0, get_inputs_1.getSignalInputs)({
             json,
             writeableSignals,
@@ -207,13 +277,22 @@ Please add a initial value for every state property even if it's \`undefined\`.`
           ${Array.from(domRefs)
             .map((refName) => `${refName} = viewChild<ElementRef>("${refName}")`)
             .join('\n')}
+          ${((_2 = (_1 = (_0 = json.compileContext) === null || _0 === void 0 ? void 0 : _0.angular) === null || _1 === void 0 ? void 0 : _1.extra) === null || _2 === void 0 ? void 0 : _2.spreadRefs)
+            ? Array.from(new Set(json.compileContext.angular.extra.spreadRefs))
+                .filter((refName) => !Array.from(domRefs).includes(refName))
+                .map((refName) => `${refName} = viewChild<ElementRef>("${refName}")`)
+                .join('\n')
+            : ''}
     
           ${dataString}
+          ${gettersString}
           ${methodsString}
     
-          constructor(${injectables.join(',\n')}) {          
-          ${((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length)
-            ? (_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.map(({ code, depsArray }) => 
+          constructor(${injectables.join(',\n')}) {
+          ${(0, is_hook_empty_1.isHookEmpty)(json.hooks.onUpdate)
+            ? ''
+            : `if (typeof window !== 'undefined') {
+                ${(_3 = json.hooks.onUpdate) === null || _3 === void 0 ? void 0 : _3.map(({ code, depsArray }) => 
             /**
              * We need allowSignalWrites only for Angular 17 https://angular.dev/api/core/CreateEffectOptions#allowSignalWrites
              * TODO: remove on 2025-05-15 https://angular.dev/reference/releases#actively-supported-versions
@@ -231,23 +310,30 @@ Please add a initial value for every state property even if it's \`undefined\`.`
                       {
                       allowSignalWrites: true, // Enable writing to signals inside effects
                       }
-                      );`).join('\n')
-            : ''}
-          }
+                      );`).join('\n')}
+                  }
+                  `}}
           
           ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(options.typescript) : ''}
           
-          ${!json.hooks.onMount.length && !((_m = json.hooks.onInit) === null || _m === void 0 ? void 0 : _m.code)
+          ${(0, is_hook_empty_1.isHookEmpty)(json.hooks.onInit)
             ? ''
             : `ngOnInit() {
-                  ${!((_o = json.hooks) === null || _o === void 0 ? void 0 : _o.onInit) ? '' : (_p = json.hooks.onInit) === null || _p === void 0 ? void 0 : _p.code}
-                  ${json.hooks.onMount.length > 0 ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''}
+                  ${!((_4 = json.hooks) === null || _4 === void 0 ? void 0 : _4.onInit) ? '' : (_5 = json.hooks.onInit) === null || _5 === void 0 ? void 0 : _5.code}
                 }`}
+
+          ${!hasDynamicComponents
+            ? ''
+            : `
+              _updateView() {
+                ${(0, get_dynamic_template_refs_1.getInitEmbedViewCode)(dynamicComponents)}
+              }`}
     
           ${
         // hooks specific to Angular
-        ((_r = (_q = json.compileContext) === null || _q === void 0 ? void 0 : _q.angular) === null || _r === void 0 ? void 0 : _r.hooks)
-            ? Object.entries((_t = (_s = json.compileContext) === null || _s === void 0 ? void 0 : _s.angular) === null || _t === void 0 ? void 0 : _t.hooks)
+        ((_7 = (_6 = json.compileContext) === null || _6 === void 0 ? void 0 : _6.angular) === null || _7 === void 0 ? void 0 : _7.hooks)
+            ? Object.entries((_9 = (_8 = json.compileContext) === null || _8 === void 0 ? void 0 : _8.angular) === null || _9 === void 0 ? void 0 : _9.hooks)
+                .filter(([_, value]) => !(0, is_hook_empty_1.isHookEmpty)(value))
                 .map(([key, value]) => {
                 return `${key}() {
                 ${value.code}
@@ -258,7 +344,7 @@ Please add a initial value for every state property even if it's \`undefined\`.`
     
           ${json.hooks.onUnMount
             ? `ngOnDestroy() {
-                  ${((_u = json.hooks.onUnMount) === null || _u === void 0 ? void 0 : _u.code) || ''}
+                  ${((_10 = json.hooks.onUnMount) === null || _10 === void 0 ? void 0 : _10.code) || ''}
                 }`
             : ''}
     

package/dist/src/generators/angular/signals/helpers/get-computed.d.ts

@@ -0,0 +1,6 @@
+import type { MitosisComponent } from '../../../../types/mitosis-component';
+import type { Binding } from '../../../../types/mitosis-node';
+export declare const getComputedGetters: ({ json }: {
+    json: MitosisComponent;
+}) => string;
+export declare const createObjectSpreadComputed: (json: MitosisComponent, binding: Binding, key: string, isForContext?: boolean, forName?: string, indexName?: string) => string;

package/dist/src/generators/angular/signals/helpers/get-computed.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createObjectSpreadComputed = exports.getComputedGetters = void 0;
+const babel_transform_1 = require("../../../../helpers/babel-transform");
+const symbol_processor_1 = require("../../../../symbols/symbol-processor");
+const types_1 = require("@babel/types");
+const lodash_1 = require("lodash");
+const getComputedGetters = ({ json }) => {
+    const getterKeys = Object.keys((0, lodash_1.pickBy)(json.state, (i) => (i === null || i === void 0 ? void 0 : i.type) === 'getter'));
+    if (!getterKeys.length) {
+        return '';
+    }
+    return getterKeys
+        .map((key) => {
+        var _a, _b;
+        const code = (_b = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
+        if (!code) {
+            return '';
+        }
+        // Transform `get foo() { return this.bar }` to `foo = computed(() => { return bar.value })`
+        const getterAsFunction = code
+            .replace('get', '')
+            .replace(key, '')
+            .trim()
+            .replace(/^\(\)/, '() =>');
+        return `${key} = computed(${getterAsFunction})`;
+    })
+        .filter(Boolean)
+        .join('\n');
+};
+exports.getComputedGetters = getComputedGetters;
+const createObjectSpreadComputed = (json, binding, key, isForContext = false, forName = '', indexName = '') => {
+    const computedName = `objSpread_${key}_${(0, symbol_processor_1.hashCodeAsString)(binding.code)}`;
+    const transformedCode = (0, babel_transform_1.babelTransformExpression)(binding.code, {
+        MemberExpression(path) {
+            var _a;
+            if ((0, types_1.isMemberExpression)(path.node) &&
+                (0, types_1.isIdentifier)(path.node.object) &&
+                (0, types_1.isIdentifier)(path.node.property) &&
+                (path.node.object.name === 'props' || path.node.object.name === 'state') &&
+                !((_a = path.node.extra) === null || _a === void 0 ? void 0 : _a.processed)) {
+                path.node.object.name = 'this';
+                path.node.extra = { ...path.node.extra, processed: true };
+                const code = path.toString();
+                path.replaceWithSourceString(`${code}()`);
+            }
+        },
+    });
+    const finalCode = transformedCode
+        // Replace props.x.y with this.x().y
+        .replace(/\bprops\.(\w+)(\.\w+|\?\.\w+|\[.*?\])/g, (match, prop, rest) => {
+        return `this.${prop}()${rest}`;
+    })
+        // Replace state.x.y with this.x().y
+        .replace(/\bstate\.(\w+)(\.\w+|\?\.\w+|\[.*?\])/g, (match, prop, rest) => {
+        return `this.${prop}()${rest}`;
+    });
+    if (isForContext && (forName || indexName)) {
+        // Create a method that accepts the for loop context variables
+        const params = [];
+        if (forName)
+            params.push(forName);
+        if (indexName)
+            params.push(indexName);
+        json.state[computedName] = {
+            code: `${computedName}(${params.join(', ')}) { return ${finalCode} }`,
+            type: 'method',
+        };
+    }
+    else {
+        // Creates a getter that gets converted to Angular's computed
+        json.state[computedName] = {
+            code: `get ${computedName}() { return ${finalCode} }`,
+            type: 'getter',
+        };
+    }
+    return computedName;
+};
+exports.createObjectSpreadComputed = createObjectSpreadComputed;

package/dist/src/generators/angular/signals/helpers/get-dynamic-template-refs.d.ts

@@ -0,0 +1,2 @@
+export declare const getDynamicTemplateRefs: (dynamicComponents: Set<string>) => string;
+export declare const getInitEmbedViewCode: (dynamicComponents: Set<string>) => string;

package/dist/src/generators/angular/signals/helpers/get-dynamic-template-refs.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInitEmbedViewCode = exports.getDynamicTemplateRefs = void 0;
+const getViewContainerRefName = (component) => {
+    return component.split('.')[1].toLowerCase() + 'TemplateRef';
+};
+const getNgTemplateRefName = (component) => {
+    return component.split('.')[1].toLowerCase() + 'Template';
+};
+const getDynamicTemplateRefs = (dynamicComponents) => {
+    return `
+  myContent = signal<any[]>([]);
+  ${Array.from(dynamicComponents)
+        .map((component) => `${getViewContainerRefName(component)} = viewChild<TemplateRef<any>>('${getNgTemplateRefName(component)}');`)
+        .join('\n')}
+  `;
+};
+exports.getDynamicTemplateRefs = getDynamicTemplateRefs;
+const getInitEmbedViewCode = (dynamicComponents) => {
+    return `
+  this.myContent.set([${Array.from(dynamicComponents)
+        .map((component) => `this.viewContainer.createEmbeddedView(this.${getViewContainerRefName(component)}()).rootNodes`)
+        .join(', ')}]);`;
+};
+exports.getInitEmbedViewCode = getInitEmbedViewCode;

package/dist/src/generators/angular/signals/helpers/get-inputs.js

@@ -8,7 +8,7 @@ const getSignalInputs = ({ props, json, writeableSignals, requiredSignals, }) =>
         const hasDefaultProp = json.defaultProps && json.defaultProps.hasOwnProperty(prop);
         const propType = propsTypeRef ? `${propsTypeRef}["${prop}"]` : 'any';
         const defaultProp = hasDefaultProp ? `defaultProps["${prop}"]` : '';
-        return `${prop} = ${writeableSignals.includes(prop) ? 'model' : 'input'}${requiredSignals.includes(prop) ? '.required' : ''}<${propType}>(${defaultProp})`;
+        return `${prop}: ${writeableSignals.includes(prop) ? 'ModelSignal' : 'InputSignal'}<${propType}> = ${writeableSignals.includes(prop) ? 'model' : 'input'}${requiredSignals.includes(prop) ? '.required' : ''}<${propType}>(${defaultProp})`;
     })
         .join('\n');
 };

package/dist/src/generators/angular/signals/helpers/index.d.ts

@@ -1,4 +1,4 @@
-export declare const getAngularCoreImportsAsString: ({ refs, output, input, model, onPush, effect, signal, }: {
+export declare const getAngularCoreImportsAsString: ({ refs, output, input, model, onPush, effect, signal, computed, viewChild, viewContainerRef, templateRef, renderer, }: {
     refs: boolean;
     output: boolean;
     input: boolean;
@@ -6,4 +6,9 @@ export declare const getAngularCoreImportsAsString: ({ refs, output, input, mode
     onPush: boolean;
     effect: boolean;
     signal: boolean;
+    computed: boolean;
+    viewChild: boolean;
+    viewContainerRef: boolean;
+    templateRef: boolean;
+    renderer?: boolean | undefined;
 }) => string;