@builder.io/mitosis 0.8.0 → 0.9.1

package/dist/src/generators/angular/signals/blocks.d.ts

@@ -0,0 +1,10 @@
+import { AngularBlockOptions, ToAngularOptions } from '../../../generators/angular/types';
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare const blockToAngularSignals: ({ root, json, options, blockOptions, rootRef, }: {
+    root: MitosisComponent;
+    json: MitosisNode;
+    options?: ToAngularOptions | undefined;
+    rootRef?: string | undefined;
+    blockOptions?: AngularBlockOptions | undefined;
+}) => string;

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

@@ -0,0 +1,242 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToAngularSignals = void 0;
+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 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 types_1 = require("@babel/types");
+const function_1 = require("fp-ts/function");
+const lodash_1 = require("lodash");
+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');
+};
+const MAPPERS = {
+    Fragment: (root, json, options, blockOptions) => {
+        const children = getChildren(root, json, options, blockOptions);
+        // TODO: Handle `key`?
+        return `<ng-container>${children}</ng-container>`;
+    },
+    Slot: (root, json, options, blockOptions) => {
+        const children = getChildren(root, json, options, blockOptions);
+        const namedSlotTransform = Object.entries({ ...json.bindings, ...json.properties })
+            .map(([binding, value]) => {
+            if (value && binding === 'name') {
+                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');
+        return `<ng-content ${namedSlotTransform}>
+${children}
+</ng-content>`;
+    },
+    For: (root, json, options, blockOptions) => {
+        var _a, _b, _c;
+        const forNode = json;
+        const indexName = forNode.scope.indexName;
+        const forName = forNode.scope.forName;
+        let trackByFnName;
+        // Check if "key" is present for the first child of the for loop
+        if ((0, helpers_1.hasFirstChildKeyAttribute)(forNode)) {
+            const fnIndex = ((_a = root.meta) === null || _a === void 0 ? void 0 : _a._trackByForIndex) || 0;
+            trackByFnName = `trackBy${forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''}${fnIndex}`;
+            root.meta._trackByForIndex = fnIndex + 1;
+            let code = (_b = forNode.children[0].bindings.key) === null || _b === void 0 ? void 0 : _b.code;
+            root.state[trackByFnName] = {
+                code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}: number, ${forName}: any) { return ${code}; }`,
+                type: 'method',
+            };
+        }
+        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 index = indexName ? `let ${indexName} = $index` : 'let i = $index';
+        return `
+    @for (${item} of ${of};${track}${index}) {
+      ${children}
+     }
+    `;
+    },
+    Show: (root, json, options, blockOptions) => {
+        var _a, _b;
+        let condition = (_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
+        const children = getChildren(root, json, options, blockOptions);
+        let elseBlock = '';
+        // else condition
+        if ((0, is_mitosis_node_1.isMitosisNode)((_b = json.meta) === null || _b === void 0 ? void 0 : _b.else)) {
+            elseBlock = `@else{
+      ${(0, exports.blockToAngularSignals)({ root, json: json.meta.else, options, blockOptions })}
+      }`;
+        }
+        if (condition === null || condition === void 0 ? void 0 : condition.includes('children()')) {
+            console.error(`
+${json.name}: You can't use children() in a Show block for \`when\` targeting angular.
+Try to invert it like this: 
+"<Show when={props.label} else={props.children}>{props.label}</Show>"
+`);
+        }
+        return `@if(${condition}){
+    ${children}
+    }${elseBlock}`;
+    },
+};
+// TODO: Maybe in the future allow defining `string | function` as values
+const BINDINGS_MAPPER = {
+    innerHTML: 'innerHTML',
+    style: 'ngStyle',
+};
+const stringifyBinding = (node, blockOptions) => ([key, binding]) => {
+    var _a, _b;
+    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
+        return;
+    }
+    if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
+        return;
+    }
+    const keyToUse = BINDINGS_MAPPER[key] || key;
+    if (!binding)
+        return '';
+    const { code } = binding;
+    if ((0, event_handlers_1.checkIsEvent)(keyToUse)) {
+        const args = binding.arguments || [];
+        const event = (0, event_handlers_1.getEventNameWithoutOn)(keyToUse);
+        if (code.includes('event.target.')) {
+            console.error(`
+Component ${node.name} has an event ${event} that uses 'event.target.xxx'. 
+This will cause an error in Angular.
+Please create a new function with the EventTarget and use e.g:
+'(event.target as HTMLInputElement).value'`);
+        }
+        const value = (0, babel_transform_1.babelTransformExpression)(code, {
+            Identifier(path) {
+                // Only change arguments inside a call expression or event
+                if (((0, types_1.isCallExpression)(path.parent) && args.includes(path.node.name)) ||
+                    path.node.name === 'event') {
+                    path.node.name = '$event';
+                }
+            },
+        });
+        // native events are all lowerCased
+        const lowerCaseEvent = event.toLowerCase();
+        const eventKey = (0, event_handlers_1.checkIsBindingNativeEvent)(event) ||
+            ((_a = blockOptions.nativeEvents) === null || _a === void 0 ? void 0 : _a.find((nativeEvent) => nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent))
+            ? lowerCaseEvent
+            : event;
+        return ` (${eventKey})="${value}"`;
+    }
+    else if (keyToUse === 'class') {
+        return ` [class]="${code}" `;
+    }
+    else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
+        return ` #${code} `;
+    }
+    else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
+        !((_b = blockOptions.nativeAttributes) === null || _b === void 0 ? void 0 : _b.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 if (keyToUse === 'innerHTML') {
+        return blockOptions.sanitizeInnerHTML
+            ? ` [innerHTML]="${code}" `
+            : ` [innerHTML]="sanitizer.bypassSecurityTrustHtml(${code})" `;
+    }
+    else {
+        return `[${keyToUse}]="${code}"`;
+    }
+};
+const getElementTag = (json, blockOptions) => {
+    const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
+    let element, classNames = [], attributes;
+    const isComponent = childComponents.find((impName) => impName === json.name);
+    if (isComponent) {
+        const selector = json.meta.selector;
+        if (selector) {
+            try {
+                ({ element, classNames, attributes } = (0, parse_selector_1.parseSelector)(`${selector}`));
+            }
+            catch (_a) {
+                element = (0, lodash_1.kebabCase)(json.name);
+            }
+        }
+        else {
+            element = (0, lodash_1.kebabCase)(json.name);
+        }
+    }
+    else {
+        element = json.name;
+    }
+    let additionalString = '';
+    // TODO: merge with existing classes/bindings
+    if (classNames.length) {
+        additionalString += `class="${classNames.join(' ')}" `;
+    }
+    // TODO: Merge with existing properties
+    if (attributes) {
+        Object.entries(attributes).forEach(([key, value]) => {
+            if (value) {
+                additionalString += `${key}=${JSON.stringify(value)} `;
+            }
+            else {
+                additionalString += `${key} `;
+            }
+        });
+    }
+    return { element, additionalString };
+};
+const blockToAngularSignals = ({ root, json, options = {}, blockOptions = {
+    nativeAttributes: [],
+    nativeEvents: [],
+}, rootRef, }) => {
+    var _a;
+    if (MAPPERS[json.name]) {
+        return MAPPERS[json.name](root, json, options, blockOptions);
+    }
+    if ((0, is_children_1.default)({ node: json })) {
+        return `<ng-content></ng-content>`;
+    }
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    const textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        return `{{${textCode}}}`;
+    }
+    let str = '';
+    const { element, additionalString } = getElementTag(json, blockOptions);
+    str += `<${element} ${additionalString}`;
+    for (const key in json.properties) {
+        const value = json.properties[key];
+        str += ` ${key}="${value}" `;
+    }
+    const stringifiedBindings = Object.entries(json.bindings)
+        .map(stringifyBinding(json, blockOptions))
+        .join('');
+    str += stringifiedBindings;
+    if (rootRef && !str.includes(`#${rootRef}`)) {
+        // Add ref for passing attributes
+        str += `#${rootRef}`;
+    }
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .map((item) => (0, exports.blockToAngularSignals)({ root, json: item, options, blockOptions }))
+            .join('\n');
+    }
+    str += `</${element}>`;
+    return str;
+};
+exports.blockToAngularSignals = blockToAngularSignals;

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

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

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

@@ -0,0 +1,279 @@
+"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 blocks_1 = require("../../../generators/angular/signals/blocks");
+const helpers_2 = require("../../../generators/angular/signals/helpers");
+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 on_mount_1 = require("../../../generators/helpers/on-mount");
+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_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 componentToAngularSignals = (userOptions = {}) => {
+    return ({ component }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+        // 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: '',
+                    },
+                },
+                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 = true; // We always want to pass attributes
+        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) {
+            template = (0, format_1.tryFormat)(template, 'html');
+        }
+        // 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)}'`,
+            standalone: 'true',
+            imports: `[${['CommonModule', ...componentsUsed].join(', ')}]`,
+            template: `\`${(0, helpers_1.getTemplateFormat)(template)}\``,
+        };
+        if (onPush) {
+            componentSettings.changeDetection = `'ChangeDetectionStrategy.OnPush'`;
+        }
+        if (styles) {
+            componentSettings.styles = `\`${styles}\``;
+        }
+        (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) => {
+                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\`.`);
+                }
+                return `signal${typeParameter ? `<${typeParameter}>` : ''}(${code})`;
+            },
+        });
+        const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: true,
+            getters: true,
+            onlyValueMapper: true,
+            valueMapper: (code, type, _, key) => {
+                return code.startsWith('function') ? code.replace('function', '').trim() : code;
+            },
+        });
+        // 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,
+            onPush,
+        });
+        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) => {
+                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 class ${json.name} implements AfterViewInit {   
+          ${(0, lodash_1.uniq)(json.compileContext.angular.extra.importCalls)
+            .map((importCall) => `protected readonly ${importCall} = ${importCall};`)
+            .join('\n')}
+         
+          ${(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')}
+    
+          ${dataString}
+          ${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 }) => 
+            /**
+             * 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
+             */
+            `effect(() => {
+                      ${(depsArray === null || depsArray === void 0 ? void 0 : depsArray.length)
+                ? `
+                      // --- Mitosis: Workaround to make sure the effect() is triggered ---
+                      ${depsArray.join('\n')}
+                      // --- 
+                      `
+                : ''}
+                      ${code}
+                      },
+                      {
+                      allowSignalWrites: true, // Enable writing to signals inside effects
+                      }
+                      );`).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)
+            ? ''
+            : `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) : ''}
+                }`}
+    
+          ${
+        // 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)
+                .map(([key, value]) => {
+                return `${key}() {
+                ${value.code}
+              }`;
+            })
+                .join('\n')
+            : ''}
+    
+          ${json.hooks.onUnMount
+            ? `ngOnDestroy() {
+                  ${((_u = json.hooks.onUnMount) === null || _u === void 0 ? void 0 : _u.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-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) ? '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,9 @@
+export declare const getAngularCoreImportsAsString: ({ refs, output, input, model, onPush, effect, signal, }: {
+    refs: boolean;
+    output: boolean;
+    input: boolean;
+    model: boolean;
+    onPush: boolean;
+    effect: boolean;
+    signal: boolean;
+}) => string;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAngularCoreImportsAsString = void 0;
+const getAngularCoreImportsAsString = ({ refs, output, input, model, onPush, effect, signal, }) => {
+    const angularCoreImports = {
+        Component: true,
+        AfterViewInit: true,
+        viewChild: refs,
+        ElementRef: refs,
+        model,
+        output,
+        input,
+        effect,
+        signal,
+        ChangeDetectionStrategy: onPush,
+    };
+    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[];