@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,377 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToAngularSignals = void 0;
+const helpers_1 = require("../../../generators/angular/helpers");
+const format_1 = require("../../../generators/angular/helpers/format");
+const get_outputs_1 = require("../../../generators/angular/helpers/get-outputs");
+const get_refs_1 = require("../../../generators/angular/helpers/get-refs");
+const get_styles_1 = require("../../../generators/angular/helpers/get-styles");
+const hooks_1 = require("../../../generators/angular/helpers/hooks");
+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");
+const dedent_1 = require("../../../helpers/dedent");
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const fast_clone_1 = require("../../../helpers/fast-clone");
+const get_child_components_1 = require("../../../helpers/get-child-components");
+const get_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");
+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, _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
+        json.compileContext = {
+            angular: {
+                hooks: {
+                    ngAfterViewInit: {
+                        code: '',
+                    },
+                    ngAfterContentInit: {
+                        code: '',
+                    },
+                },
+                extra: {
+                    importCalls: [],
+                },
+            },
+        };
+        const options = (0, merge_options_1.initializeOptions)({
+            target: 'angular',
+            component,
+            defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
+            userOptions,
+        });
+        options.typescript = true; // Angular uses ts all the time
+        options.api = 'signals';
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+        }
+        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));
+        const events = props.filter((prop) => (0, event_handlers_1.checkIsEvent)(prop));
+        const childComponents = (0, get_child_components_1.getChildComponents)(json);
+        props = props.filter((prop) => {
+            // Best practise for Angular is to use Events without "on"
+            // Stencil doesn't need children as a prop
+            return prop !== 'children' && !(0, event_handlers_1.checkIsEvent)(prop);
+        });
+        const processBindingOptions = {
+            events,
+            props,
+            target: 'angular',
+            skipAppendEmit: true,
+        };
+        options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+        }
+        // CSS
+        const styles = (0, get_styles_1.getAngularStyles)({ json, options });
+        // Mitosis Metadata
+        const useMetadata = (_a = json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata;
+        const onPush = ((_b = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _b === void 0 ? void 0 : _b.changeDetection) == 'OnPush';
+        const writeableSignals = ((_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.signals) === null || _d === void 0 ? void 0 : _d.writeable) || [];
+        const requiredSignals = ((_f = (_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.signals) === null || _f === void 0 ? void 0 : _f.required) || [];
+        // Context & Injectables
+        const injectables = Object.entries(((_g = json === null || json === void 0 ? void 0 : json.context) === null || _g === void 0 ? void 0 : _g.get) || {}).map(([variableName, { name }]) => {
+            return `public ${variableName} : ${name}`;
+        });
+        const shouldUseSanitizer = !((_h = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _h === void 0 ? void 0 : _h.sanitizeInnerHTML) && (0, helpers_1.traverseAndCheckIfInnerHTMLIsUsed)(json);
+        if (shouldUseSanitizer) {
+            injectables.push('protected sanitizer: DomSanitizer');
+        }
+        // HTML
+        let template = json.children
+            .map((item) => {
+            var _a, _b, _c, _d;
+            return (0, blocks_1.blockToAngularSignals)({
+                root: json,
+                json: item,
+                options,
+                rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+                blockOptions: {
+                    childComponents,
+                    nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
+                    nativeEvents: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeEvents) !== null && _d !== void 0 ? _d : [],
+                    sanitizeInnerHTML: !shouldUseSanitizer,
+                },
+            });
+        })
+            .join('\n');
+        if (options.prettier !== false) {
+            // We need to use 'strict' mode for Angular otherwise it could add spaces around some content
+            template = (0, format_1.tryFormat)(template, 'html', 'strict');
+        }
+        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: ((_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: `\`${dynamicTemplate}${(0, helpers_1.getTemplateFormat)(template)}\``,
+        };
+        if (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, 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})`;
+            },
+        });
+        const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: 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 emptyOnMount = (0, is_hook_empty_1.isHookEmpty)(json.hooks.onMount);
+        const emptyOnUnMount = (0, is_hook_empty_1.isHookEmpty)(json.hooks.onUnMount);
+        const AfterViewInit = Boolean(!emptyOnMount || withAttributePassing);
+        const OnDestroy = !emptyOnUnMount;
+        const coreImports = (0, helpers_2.getAngularCoreImportsAsString)({
+            refs: domRefs.size !== 0,
+            input: props.length !== 0,
+            output: events.length !== 0,
+            model: writeableSignals.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,
+            AfterViewInit,
+            OnDestroy,
+            viewChild: importsViewChild,
+            viewContainerRef: hasDynamicComponents,
+            templateRef: hasDynamicComponents,
+            renderer: usesRenderer2,
+        });
+        // Hooks
+        if (!emptyOnMount) {
+            // `onMount` runs only in the browser, after view initialization. Guard it
+            // so it does not execute during SSR.
+            (0, hooks_1.addCodeNgAfterViewInit)(json, `if (typeof window !== 'undefined') {
+          ${json.hooks.onMount.map((onMount) => onMount.code).join('\n')}
+        }`);
+        }
+        // Angular interfaces
+        const angularInterfaces = [];
+        if (AfterViewInit) {
+            angularInterfaces.push('AfterViewInit');
+        }
+        if (OnDestroy) {
+            angularInterfaces.push('OnDestroy');
+        }
+        let str = (0, dedent_1.dedent) `
+        import { ${coreImports} } from '@angular/core';
+        import { CommonModule } from '@angular/common';
+        ${shouldUseSanitizer ? `import { DomSanitizer } from '@angular/platform-browser';` : ''}
+
+    
+        ${json.types ? json.types.join('\n') : ''}
+        ${(0, helpers_1.getDefaultProps)(json)}
+        
+        ${(0, render_imports_1.renderPreComponent)({
+            explicitImportFileExtension: options.explicitImportFileExtension,
+            component: json,
+            target: 'angular',
+            preserveFileExtensions: options.preserveFileExtensions,
+            importMapper: (_, theImport, importedValues) => {
+                if (options.defaultExportComponents)
+                    return undefined;
+                const { defaultImport } = importedValues;
+                const { path } = theImport;
+                if (defaultImport && componentsUsed.includes(defaultImport)) {
+                    return `import { ${defaultImport} } from '${path}';`;
+                }
+                return undefined;
+            },
+        })}
+    
+        @Component({
+          ${Object.entries(componentSettings)
+            .map(([k, v]) => `${k}: ${v}`)
+            .join(',')}
+        })
+        export ${options.defaultExportComponents ? 'default ' : ''}class ${json.name} ${angularInterfaces.length ? ` implements ${angularInterfaces.join(',')}` : ''} {   
+          ${(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,
+            requiredSignals,
+            props: Array.from(props),
+        })}    
+          ${(0, get_outputs_1.getOutputs)({ json, outputVars: events, api: options.api })}
+    
+          ${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')}) {
+          ${(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 }) => 
+            /**
+             * `allowSignalWrites` is required for Angular < 19 to permit signal writes
+             * inside effects. It was deprecated in Angular 19 (writes are always allowed)
+             * and logging it there produces console noise, so we gate it on the runtime
+             * Angular version to keep backwards compatibility with v17/v18.
+             */
+            `effect(() => {
+                      ${(depsArray === null || depsArray === void 0 ? void 0 : depsArray.length)
+                ? `
+                      // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                      ${depsArray.join('\n')}
+                      // ---
+                      `
+                : ''}
+                      ${code}
+                      }, Number(VERSION.major) < 19 ? ({ allowSignalWrites: true } as any) : undefined);`).join('\n')}
+                  }
+                  `}}
+          
+          ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(options.typescript) : ''}
+          
+          ${(0, is_hook_empty_1.isHookEmpty)(json.hooks.onInit)
+            ? ''
+            : `ngOnInit() {
+                  ${!((_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
+        ((_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}
+              }`;
+            })
+                .join('\n')
+            : ''}
+    
+          ${emptyOnUnMount
+            ? ''
+            : `ngOnDestroy() {
+                  ${((_10 = json.hooks.onUnMount) === null || _10 === void 0 ? void 0 : _10.code) || ''}
+                }`}
+    
+        }
+      `;
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        if (options.prettier !== false) {
+            str = (0, format_1.tryFormat)(str, 'typescript');
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        return str;
+    };
+};
+exports.componentToAngularSignals = componentToAngularSignals;

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.d.ts

@@ -0,0 +1,7 @@
+import type { MitosisComponent } from '../../../../types/mitosis-component';
+export declare const getSignalInputs: ({ props, json, writeableSignals, requiredSignals, }: {
+    props: string[];
+    json: MitosisComponent;
+    writeableSignals: string[];
+    requiredSignals: string[];
+}) => string;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSignalInputs = void 0;
+const getSignalInputs = ({ props, json, writeableSignals, requiredSignals, }) => {
+    const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
+    return props
+        .map((prop) => {
+        const hasDefaultProp = json.defaultProps && json.defaultProps.hasOwnProperty(prop);
+        const propType = propsTypeRef ? `${propsTypeRef}["${prop}"]` : 'any';
+        const defaultProp = hasDefaultProp ? `defaultProps["${prop}"]` : '';
+        return `${prop}: ${writeableSignals.includes(prop) ? 'ModelSignal' : 'InputSignal'}<${propType}> = ${writeableSignals.includes(prop) ? 'model' : 'input'}${requiredSignals.includes(prop) ? '.required' : ''}<${propType}>(${defaultProp})`;
+    })
+        .join('\n');
+};
+exports.getSignalInputs = getSignalInputs;

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

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

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAngularCoreImportsAsString = void 0;
+const getAngularCoreImportsAsString = ({ refs, output, input, model, onPush, effect, signal, AfterViewInit, OnDestroy, computed, viewChild, viewContainerRef, templateRef, renderer, }) => {
+    const angularCoreImports = {
+        Component: true,
+        viewChild: refs || viewChild,
+        ElementRef: refs || viewChild,
+        ViewContainerRef: viewContainerRef,
+        TemplateRef: templateRef,
+        Renderer2: renderer,
+        model,
+        output,
+        input,
+        effect,
+        VERSION: effect,
+        signal,
+        computed,
+        ChangeDetectionStrategy: onPush,
+        OnDestroy,
+        AfterViewInit,
+        InputSignal: input,
+        ModelSignal: model,
+    };
+    return Object.entries(angularCoreImports)
+        .map(([key, bool]) => (bool ? key : ''))
+        .filter((key) => !!key)
+        .join(', ');
+};
+exports.getAngularCoreImportsAsString = getAngularCoreImportsAsString;

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

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