@builder.io/mitosis 0.8.0 → 0.9.0

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

@@ -10,700 +10,9 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToAngular = void 0;
-const html_tags_1 = require("../../constants/html_tags");
-const bindings_1 = require("../../helpers/bindings");
-const dedent_1 = require("../../helpers/dedent");
-const fast_clone_1 = require("../../helpers/fast-clone");
-const get_child_components_1 = require("../../helpers/get-child-components");
-const get_components_used_1 = require("../../helpers/get-components-used");
-const get_custom_imports_1 = require("../../helpers/get-custom-imports");
-const get_prop_functions_1 = require("../../helpers/get-prop-functions");
-const get_props_1 = require("../../helpers/get-props");
-const get_props_ref_1 = require("../../helpers/get-props-ref");
-const get_refs_1 = require("../../helpers/get-refs");
-const get_state_object_string_1 = require("../../helpers/get-state-object-string");
-const get_typed_function_1 = require("../../helpers/get-typed-function");
-const indent_1 = require("../../helpers/indent");
-const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
-const is_upper_case_1 = require("../../helpers/is-upper-case");
-const map_refs_1 = require("../../helpers/map-refs");
-const merge_options_1 = require("../../helpers/merge-options");
-const process_code_1 = require("../../helpers/plugins/process-code");
-const render_imports_1 = require("../../helpers/render-imports");
-const replace_identifiers_1 = require("../../helpers/replace-identifiers");
-const slots_1 = require("../../helpers/slots");
-const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-const collect_css_1 = require("../../helpers/styles/collect-css");
-const helpers_1 = require("../../helpers/styles/helpers");
-const traverse_nodes_1 = require("../../helpers/traverse-nodes");
-const plugins_1 = require("../../modules/plugins");
-const babel = __importStar(require("@babel/core"));
-const function_1 = require("fp-ts/lib/function");
-const lodash_1 = require("lodash");
-const legacy_1 = __importDefault(require("neotraverse/legacy"));
-const standalone_1 = require("prettier/standalone");
-const is_children_1 = __importDefault(require("../../helpers/is-children"));
-const on_mount_1 = require("../helpers/on-mount");
-const helpers_2 = require("./helpers");
-const types_1 = require("./types");
-const dash_case_1 = require("../../helpers/dash-case");
-const event_handlers_1 = require("../../helpers/event-handlers");
-const hooks_1 = require("../../generators/angular/helpers/hooks");
-const attribute_passing_1 = require("../../helpers/web-components/attribute-passing");
-const blocks_1 = require("./blocks");
-const { types } = babel;
-const preprocessCssAsJson = (json) => {
-    (0, legacy_1.default)(json).forEach((item) => {
-        var _a, _b;
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if ((0, helpers_1.nodeHasCss)(item)) {
-                if ((_b = (_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.includes('"')) {
-                    item.bindings.css.code = item.bindings.css.code.replace(/"/g, '"');
-                }
-            }
-        }
-    });
-};
-const generateNgModule = (content, name, componentsUsed, component, bootstrapMapper) => {
-    return `import { NgModule } from "@angular/core";
-import { CommonModule } from "@angular/common";
-
-${content}
-
-@NgModule({
-  declarations: [${name}],
-  imports: [CommonModule${componentsUsed.length ? ', ' + componentsUsed.map((comp) => `${comp}Module`).join(', ') : ''}],
-  exports: [${name}],
-  ${bootstrapMapper ? bootstrapMapper(name, componentsUsed, component) : ''}
-})
-export class ${name}Module {}`;
-};
-const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
-    const components = new Set();
-    let dynamicTemplate = '';
-    (0, legacy_1.default)(json).forEach((item) => {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.') && item.name.split('.').length === 2) {
-            const children = item.children
-                .map((child) => (0, blocks_1.blockToAngular)({ root: json, json: child, options, blockOptions }))
-                .join('\n');
-            dynamicTemplate = `<ng-template #${item.name.split('.')[1].toLowerCase() + 'Template'}>${children}</ng-template>`;
-            components.add(item.name);
-        }
-    });
-    return {
-        components,
-        dynamicTemplate,
-    };
-};
-const traverseAndCheckIfInnerHTMLIsUsed = (json) => {
-    let innerHTMLIsUsed = false;
-    (0, legacy_1.default)(json).forEach((item) => {
-        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            Object.keys(item.bindings).forEach((key) => {
-                if (key === 'innerHTML') {
-                    innerHTMLIsUsed = true;
-                    return;
-                }
-            });
-        }
-    });
-    return innerHTMLIsUsed;
-};
-/**
- * Prefixes state identifiers with this.
- * e.g. state.foo --> this.foo
- */
-const prefixState = (code) => {
-    return (0, replace_identifiers_1.replaceNodes)({
-        code,
-        nodeMaps: [
-            {
-                from: types.identifier('state'),
-                to: types.thisExpression(),
-            },
-        ],
-    }).trim();
-};
-const processAngularCode = ({ contextVars, outputVars, domRefs, replaceWith, }) => (code) => (0, function_1.pipe)((0, strip_state_and_props_refs_1.DO_NOT_USE_VARS_TRANSFORMS)(code, {
-    contextVars,
-    domRefs,
-    outputVars,
-}), 
-/**
- * Only prefix state that is in the Angular class component.
- * Do not prefix state referenced in the template
- */
-replaceWith === 'this' ? prefixState : (x) => x, (newCode) => (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(newCode, { replaceWith }));
-const isASimpleProperty = (code) => {
-    const expressions = ['==', '===', '!=', '!==', '<', '>', '<=', '>='];
-    const invalidChars = ['{', '}', '(', ')', 'typeof'];
-    return !invalidChars.some((char) => code.includes(char)) && !expressions.includes(code);
-};
-const generateNewBindingName = (index, name) => `node_${index}_${name.replaceAll('.', '_').replaceAll('-', '_')}`;
-const handleBindings = (json, item, index, forName, indexName) => {
-    var _a, _b, _c, _d, _e, _f;
-    for (const key in item.bindings) {
-        if (key.startsWith('"') ||
-            key.startsWith('$') ||
-            key === 'css' ||
-            key === 'ref' ||
-            isASimpleProperty(item.bindings[key].code)) {
-            continue;
-        }
-        const newBindingName = generateNewBindingName(index, item.name);
-        if (forName) {
-            if (item.name === 'For')
-                continue;
-            if (key === 'key')
-                continue;
-            if ((0, event_handlers_1.checkIsEvent)(key)) {
-                const { arguments: cusArgs = ['event'] } = item.bindings[key];
-                const eventBindingName = `${generateNewBindingName(index, item.name)}_event`;
-                if (((_a = item.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.trim().startsWith('{')) &&
-                    ((_b = item.bindings[key]) === null || _b === void 0 ? void 0 : _b.code.trim().endsWith('}'))) {
-                    const forAndIndex = `${forName ? `, ${forName}` : ''}${indexName ? `, ${indexName}` : ''}`;
-                    const eventArgs = `${cusArgs.join(', ')}${forAndIndex}`;
-                    json.state[eventBindingName] = {
-                        code: `(${eventArgs}) => ${item.bindings[key].code}`,
-                        type: 'function',
-                    };
-                    item.bindings[key].code = `state.${eventBindingName}(${eventArgs})`;
-                    json.state[newBindingName] = {
-                        code: `(${eventArgs}) => (${item.bindings[key].code})`,
-                        type: 'function',
-                    };
-                    item.bindings[key].code = `state.${newBindingName}($${eventArgs})`;
-                }
-            }
-            else {
-                json.state[newBindingName] = {
-                    code: `(${forName}${indexName ? `, ${indexName}` : ''}) => (${item.bindings[key].code})`,
-                    type: 'function',
-                };
-                item.bindings[key].code = `state.${newBindingName}(${forName}${indexName ? `, ${indexName}` : ''})`;
-            }
-        }
-        else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
-            if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !(0, event_handlers_1.checkIsEvent)(key)) {
-                json.state[newBindingName] = { code: 'null', type: 'property' };
-                (0, hooks_1.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
-                item.bindings[key].code = `state.${newBindingName}`;
-            }
-            else if ((0, event_handlers_1.checkIsEvent)(key)) {
-                const { arguments: cusArgs = ['event'] } = item.bindings[key];
-                if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
-                    ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
-                    json.state[newBindingName] = {
-                        code: `(${cusArgs.join(', ')}) => ${item.bindings[key].code}`,
-                        type: 'function',
-                    };
-                    item.bindings[key].code = `state.${newBindingName}(${cusArgs.join(', ')})`;
-                }
-            }
-            else {
-                (0, hooks_1.makeReactiveState)(json, newBindingName, `state.${newBindingName} = {...(${item.bindings[key].code})}`);
-                item.bindings[newBindingName] = item.bindings[key];
-                item.bindings[key].code = `state.${newBindingName}`;
-                delete item.bindings[key];
-            }
-        }
-        index++;
-    }
-    return index;
-};
-const handleProperties = (json, item, index) => {
-    for (const key in item.properties) {
-        if (key.startsWith('$') || isASimpleProperty(item.properties[key])) {
-            continue;
-        }
-        const newBindingName = generateNewBindingName(index, item.name);
-        json.state[newBindingName] = { code: '`' + `${item.properties[key]}` + '`', type: 'property' };
-        item.bindings[key] = (0, bindings_1.createSingleBinding)({ code: `state.${newBindingName}` });
-        delete item.properties[key];
-        index++;
-    }
-    return index;
-};
-const handleAngularBindings = (json, item, index, { forName, indexName } = {}) => {
-    if ((0, is_children_1.default)({ node: item }))
-        return index;
-    index = handleBindings(json, item, index, forName, indexName);
-    index = handleProperties(json, item, index);
-    return index;
-};
-const classPropertiesPlugin = () => ({
-    json: {
-        pre: (json) => {
-            let lastId = 0;
-            (0, traverse_nodes_1.traverseNodes)(json, (item) => {
-                if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-                    if (item.name === 'For') {
-                        const forName = item.scope.forName;
-                        const indexName = item.scope.indexName;
-                        (0, traverse_nodes_1.traverseNodes)(item, (child) => {
-                            if ((0, is_mitosis_node_1.isMitosisNode)(child)) {
-                                child._traversed = true;
-                                lastId = handleAngularBindings(json, child, lastId, {
-                                    forName,
-                                    indexName,
-                                });
-                            }
-                        });
-                    }
-                    else if (!item._traversed) {
-                        lastId = handleAngularBindings(json, item, lastId);
-                    }
-                }
-            });
-            return json;
-        },
-    },
-});
-const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-    // Make a copy we can safely mutate, similar to babel's toolchain
-    let json = (0, fast_clone_1.fastClone)(_component);
-    const useMetadata = (_a = json.meta) === null || _a === void 0 ? void 0 : _a.useMetadata;
-    const contextVars = Object.keys(((_b = json === null || json === void 0 ? void 0 : json.context) === null || _b === void 0 ? void 0 : _b.get) || {});
-    // TODO: Why is 'outputs' used here and shouldn't it be typed in packages/core/src/types/metadata.ts
-    const metaOutputVars = (useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.outputs) || [];
-    const outputVars = (0, lodash_1.uniq)([...metaOutputVars, ...(0, get_prop_functions_1.getPropFunctions)(json)]);
-    const options = (0, merge_options_1.initializeOptions)({
-        target: 'angular',
-        component: _component,
-        defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
-        userOptions: userOptions,
-    });
-    options.plugins = [
-        ...(options.plugins || []),
-        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType, _, node) => {
-            switch (codeType) {
-                case 'hooks':
-                    return (0, function_1.flow)(processAngularCode({
-                        replaceWith: 'this',
-                        contextVars,
-                        outputVars,
-                        domRefs: Array.from((0, get_refs_1.getRefs)(json)),
-                    }), (code) => {
-                        const allMethodNames = Object.entries(json.state)
-                            .filter(([_, value]) => (value === null || value === void 0 ? void 0 : value.type) === 'function' || (value === null || value === void 0 ? void 0 : value.type) === 'method')
-                            .map(([key]) => key);
-                        return (0, replace_identifiers_1.replaceIdentifiers)({
-                            code,
-                            from: allMethodNames,
-                            to: (name) => `this.${name}`,
-                        });
-                    });
-                case 'bindings':
-                    return (code, key) => {
-                        var _a;
-                        // we create a separate state property for spread binding and use ref to attach the attributes
-                        // so we need to use `this.` inside the class to access state and props
-                        const isSpreadAttributeBinding = ((_a = node === null || node === void 0 ? void 0 : node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread' &&
-                            html_tags_1.VALID_HTML_TAGS.includes(node.name.trim());
-                        // If we have a For loop with "key" it will be transformed to
-                        // trackOfXXX, we need to use "this" for state properties
-                        const isKey = key === 'key';
-                        const newLocal = processAngularCode({
-                            contextVars: [],
-                            outputVars,
-                            domRefs: [], // the template doesn't need the this keyword.
-                            replaceWith: isKey || isSpreadAttributeBinding ? 'this' : undefined,
-                        })(code);
-                        return newLocal.replace(/"/g, '&quot;');
-                    };
-                case 'hooks-deps':
-                case 'state':
-                case 'context-set':
-                case 'properties':
-                case 'dynamic-jsx-elements':
-                case 'types':
-                    return (x) => x;
-            }
-        }),
-    ];
-    if (options.state === 'class-properties') {
-        options.plugins.push(classPropertiesPlugin);
-    }
-    if (options.plugins) {
-        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
-    }
-    const [forwardProp, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json, true);
-    const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
-    const childComponents = (0, get_child_components_1.getChildComponents)(json);
-    const customImports = (0, get_custom_imports_1.getCustomImports)(json);
-    const { exports: localExports = {} } = json;
-    const localExportVars = Object.keys(localExports)
-        .filter((key) => localExports[key].usedInLocal)
-        .map((key) => `${key} = ${key};`);
-    const injectables = contextVars.map((variableName) => {
-        var _a, _b, _c, _d;
-        const variableType = (_a = json === null || json === void 0 ? void 0 : json.context) === null || _a === void 0 ? void 0 : _a.get[variableName].name;
-        if ((_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.injectables) {
-            return (_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.injectables(variableName, variableType);
-        }
-        if ((_d = options === null || options === void 0 ? void 0 : options.experimental) === null || _d === void 0 ? void 0 : _d.inject) {
-            return `@Inject(forwardRef(() => ${variableType})) public ${variableName}: ${variableType}`;
-        }
-        return `public ${variableName} : ${variableType}`;
-    });
-    const props = (0, get_props_1.getProps)(json);
-    // prevent jsx props from showing up as @Input
-    if (hasPropRef) {
-        props.delete(forwardProp);
-    }
-    props.delete('children');
-    // remove props for outputs
-    outputVars.forEach((variableName) => {
-        props.delete(variableName);
-    });
-    const outputs = outputVars.map((variableName) => {
-        var _a, _b;
-        if ((_a = options === null || options === void 0 ? void 0 : options.experimental) === null || _a === void 0 ? void 0 : _a.outputs) {
-            return (_b = options === null || options === void 0 ? void 0 : options.experimental) === null || _b === void 0 ? void 0 : _b.outputs(json, variableName);
-        }
-        return `@Output() ${variableName} = new EventEmitter()`;
-    });
-    const domRefs = (0, get_refs_1.getRefs)(json);
-    const jsRefs = Object.keys(json.refs).filter((ref) => !domRefs.has(ref));
-    const withAttributePassing = (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
-    const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
-    if (withAttributePassing) {
-        if (!domRefs.has(rootRef)) {
-            domRefs.add(rootRef);
-        }
-        (0, hooks_1.addCodeNgAfterViewInit)(json, `
-        const element: HTMLElement | null = this.${rootRef}?.nativeElement;
-        this.enableAttributePassing(element, "${(0, dash_case_1.dashCase)(json.name)}");
-        `);
-    }
-    const componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter((item) => {
-        return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !types_1.BUILT_IN_COMPONENTS.has(item);
-    });
-    (0, map_refs_1.mapRefs)(json, (refName) => {
-        const isDomRef = domRefs.has(refName);
-        return `this.${isDomRef ? '' : '_'}${refName}${isDomRef ? '.nativeElement' : ''}`;
-    });
-    if (options.plugins) {
-        json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
-    }
-    preprocessCssAsJson(json);
-    let css = (0, collect_css_1.collectCss)(json);
-    if (options.prettier !== false) {
-        css = tryFormat(css, 'css');
-    }
-    const helperFunctions = new Set();
-    const shouldUseSanitizer = !((_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.sanitizeInnerHTML) && traverseAndCheckIfInnerHTMLIsUsed(json);
-    const changeDetectionStrategy = (_d = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _d === void 0 ? void 0 : _d.changeDetection;
-    let template = json.children
-        .map((item) => {
-        var _a, _b, _c, _d;
-        const tmpl = (0, blocks_1.blockToAngular)({
-            root: json,
-            json: item,
-            options,
-            rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
-            blockOptions: {
-                childComponents,
-                nativeAttributes: (_b = (_a = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _a === void 0 ? void 0 : _a.nativeAttributes) !== null && _b !== void 0 ? _b : [],
-                nativeEvents: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeEvents) !== null && _d !== void 0 ? _d : [],
-                sanitizeInnerHTML: !shouldUseSanitizer,
-            },
-        });
-        if (options.state === 'inline-with-wrappers') {
-            (0, helpers_2.getAppropriateTemplateFunctionKeys)(tmpl).forEach((key) => helperFunctions.add((0, helpers_2.HELPER_FUNCTIONS)(options.typescript)[key]));
-        }
-        return tmpl;
-    })
-        .join('\n');
-    if (options.prettier !== false) {
-        template = tryFormat(template, 'html');
-    }
-    (0, strip_meta_properties_1.stripMetaProperties)(json);
-    const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(json, options, {
-        childComponents,
-        nativeAttributes: (_f = (_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.nativeAttributes) !== null && _f !== void 0 ? _f : [],
-        nativeEvents: (_h = (_g = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _g === void 0 ? void 0 : _g.nativeEvents) !== null && _h !== void 0 ? _h : [],
-    });
-    (0, helpers_2.transformState)(json);
-    const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-        format: 'class',
-        withType: options.typescript,
-        valueMapper: (code, type, typeParameter) => {
-            let value = code;
-            if (type !== 'data') {
-                value = (0, get_typed_function_1.getTypedFunction)(code, options.typescript, typeParameter);
-            }
-            return processAngularCode({
-                replaceWith: 'this',
-                contextVars,
-                outputVars,
-                domRefs: Array.from(domRefs),
-            })(value);
-        },
-    });
-    const refsForObjSpread = (0, get_refs_1.getRefs)(json, 'spreadRef');
-    const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
-    const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
-    // Preparing built in component metadata parameters
-    const componentMetadata = {
-        selector: ((_j = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _j === void 0 ? void 0 : _j.selector)
-            ? `'${(_k = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _k === void 0 ? void 0 : _k.selector}'`
-            : `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}'`,
-        template: `\`
-      ${(0, indent_1.indent)(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
-      ${(0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
-      \``,
-        ...(changeDetectionStrategy === 'OnPush'
-            ? {
-                changeDetection: 'ChangeDetectionStrategy.OnPush',
-            }
-            : {}),
-        ...(styles
-            ? {
-                styles: `[\`${(0, indent_1.indent)(styles, 8)}\`]`,
-            }
-            : {}),
-        ...(options.standalone
-            ? // TODO: also add child component imports here as well
-                {
-                    standalone: 'true',
-                    imports: `[${['CommonModule', ...componentsUsed].join(', ')}]`,
-                }
-            : {}),
-    };
-    // Taking into consideration what user has passed in options and allowing them to override the default generated metadata
-    Object.entries(json.meta.angularConfig || {}).forEach(([key, value]) => {
-        componentMetadata[key] = value;
-    });
-    const hasConstructor = Boolean(injectables.length) ||
-        dynamicComponents.size ||
-        refsForObjSpread.size ||
-        shouldUseSanitizer;
-    const angularCoreImports = [
-        ...(outputs.length ? ['Output', 'EventEmitter'] : []),
-        ...(((_l = options === null || options === void 0 ? void 0 : options.experimental) === null || _l === void 0 ? void 0 : _l.inject) ? ['Inject', 'forwardRef'] : []),
-        'Component',
-        ...(domRefs.size || dynamicComponents.size || refsForObjSpread.size
-            ? ['ViewChild', 'ElementRef']
-            : []),
-        ...(refsForObjSpread.size ? ['Renderer2'] : []),
-        ...(props.size ? ['Input'] : []),
-        ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
-        ...(((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.length) && options.typescript ? ['SimpleChanges'] : []),
-        ...(changeDetectionStrategy === 'OnPush' ? ['ChangeDetectionStrategy'] : []),
-    ].join(', ');
-    const constructorInjectables = [
-        ...injectables,
-        ...(dynamicComponents.size
-            ? [`private vcRef${options.typescript ? ': ViewContainerRef' : ''}`]
-            : []),
-        ...(refsForObjSpread.size
-            ? [`private renderer${options.typescript ? ': Renderer2' : ''}`]
-            : []),
-        ...(shouldUseSanitizer
-            ? [`protected sanitizer${options.typescript ? ': DomSanitizer' : ''}`]
-            : []),
-    ].join(',\n');
-    let str = (0, dedent_1.dedent) `
-    import { ${angularCoreImports} } from '@angular/core';
-    ${shouldUseSanitizer ? `import { DomSanitizer } from '@angular/platform-browser';` : ''}
-    ${options.standalone ? `import { CommonModule } from '@angular/common';` : ''}
-
-    ${json.types ? json.types.join('\n') : ''}
-    ${(0, helpers_2.getDefaultProps)(json)}
-    ${(0, render_imports_1.renderPreComponent)({
-        explicitImportFileExtension: options.explicitImportFileExtension,
-        component: json,
-        target: 'angular',
-        excludeMitosisComponents: !options.standalone && !options.preserveImports,
-        preserveFileExtensions: options.preserveFileExtensions,
-        componentsUsed,
-        importMapper: options === null || options === void 0 ? void 0 : options.importMapper,
-    })}
-
-    @Component({
-      ${Object.entries(componentMetadata)
-        .map(([k, v]) => `${k}: ${v}`)
-        .join(',')}
-    })
-    export default class ${json.name} {
-      ${localExportVars.join('\n')}
-      ${customImports.map((name) => `${name} = ${name}`).join('\n')}
-
-      ${Array.from(props)
-        .filter((item) => !(0, slots_1.isSlotProperty)(item) && item !== 'children')
-        .map((item) => {
-        const hasDefaultProp = json.defaultProps && json.defaultProps.hasOwnProperty(item);
-        const propType = propsTypeRef ? `${propsTypeRef}["${item}"]` : 'any';
-        let propDeclaration = `@Input() ${item}${options.typescript ? `${hasDefaultProp ? '' : '!'}: ${propType}` : ''}`;
-        if (hasDefaultProp) {
-            propDeclaration += ` = defaultProps["${item}"]`;
-        }
-        return propDeclaration;
-    })
-        .join('\n')}
-
-      ${outputs.join('\n')}
-
-      ${Array.from(domRefs)
-        .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
-        .join('\n')}
-
-      ${Array.from(refsForObjSpread)
-        .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
-        .join('\n')}
-
-      ${Array.from(dynamicComponents)
-        .map((component) => `@ViewChild('${component
-        .split('.')[1]
-        .toLowerCase()}Template', { static: true }) ${component
-        .split('.')[1]
-        .toLowerCase()}TemplateRef${options.typescript ? '!: TemplateRef<any>' : ''}`)
-        .join('\n')}
-
-      ${dynamicComponents.size ? `myContent${options.typescript ? '?: any[][];' : ''}` : ''}
-      ${refsForObjSpread.size
-        ? `_listenerFns = new Map${options.typescript ? '<string, () => void>' : ''}()`
-        : ''}
-
-      ${dataString}
-
-      ${helperFunctions.size ? Array.from(helperFunctions).join('\n') : ''}
-
-      ${jsRefs
-        .map((ref) => {
-        const argument = json.refs[ref].argument;
-        const typeParameter = json.refs[ref].typeParameter;
-        return `private _${ref}${typeParameter ? `: ${typeParameter}` : ''}${argument
-            ? ` = ${processAngularCode({
-                replaceWith: 'this.',
-                contextVars,
-                outputVars,
-                domRefs: Array.from(domRefs),
-            })(argument)}`
-            : ''};`;
-    })
-        .join('\n')}
-
-      ${!hasConstructor ? '' : `constructor(\n${constructorInjectables}) {}`}
-      
-      ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(options.typescript) : ''}
-      
-      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code)
-        ? ''
-        : `ngOnInit() {
-              ${!((_p = json.hooks) === null || _p === void 0 ? void 0 : _p.onInit)
-            ? ''
-            : `
-                    ${(_q = json.hooks.onInit) === null || _q === void 0 ? void 0 : _q.code}
-                    `}
-              ${json.hooks.onMount.length > 0
-            ? `
-                    if (typeof window !== 'undefined') {
-                      ${(0, on_mount_1.stringifySingleScopeOnMount)(json)}
-                    }
-                    `
-            : ''}
-              ${dynamicComponents.size
-            ? `
-              this.myContent = [${Array.from(dynamicComponents)
-                .map((component) => `this.vcRef.createEmbeddedView(this.${component
-                .split('.')[1]
-                .toLowerCase()}TemplateRef).rootNodes`)
-                .join(', ')}];
-              `
-            : ''}
-            }`}
-
-      ${
-    // hooks specific to Angular
-    ((_s = (_r = json.compileContext) === null || _r === void 0 ? void 0 : _r.angular) === null || _s === void 0 ? void 0 : _s.hooks)
-        ? Object.entries((_u = (_t = json.compileContext) === null || _t === void 0 ? void 0 : _t.angular) === null || _u === void 0 ? void 0 : _u.hooks)
-            .map(([key, value]) => {
-            return `${key}() {
-            ${value.code}
-          }`;
-        })
-            .join('\n')
-        : ''}
-
-      ${!((_v = json.hooks.onUpdate) === null || _v === void 0 ? void 0 : _v.length)
-        ? ''
-        : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
-              if (typeof window !== 'undefined') {
-                ${(_w = json.hooks.onUpdate) === null || _w === void 0 ? void 0 : _w.reduce((code, hook) => {
-            code += hook.code;
-            return code + '\n';
-        }, '')}
-              }
-            }
-                `}
-
-      ${!json.hooks.onUnMount && !refsForObjSpread.size
-        ? ''
-        : `ngOnDestroy() {
-              ${((_x = json.hooks.onUnMount) === null || _x === void 0 ? void 0 : _x.code) || ''}
-              ${refsForObjSpread.size
-            ? `for (const fn of this._listenerFns.values()) { fn(); }`
-            : ''}
-            }`}
-
-    }
-  `;
-    if (options.standalone !== true) {
-        str = generateNgModule(str, json.name, componentsUsed, json, options.bootstrapMapper);
-    }
-    if (options.plugins) {
-        str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
-    }
-    if (options.prettier !== false) {
-        str = tryFormat(str, 'typescript');
-    }
-    if (options.plugins) {
-        str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
-    }
-    return str;
-};
-exports.componentToAngular = componentToAngular;
-const tryFormat = (str, parser) => {
-    try {
-        return (0, standalone_1.format)(str, {
-            parser,
-            plugins: [
-                // To support running in browsers
-                require('prettier/parser-typescript'),
-                require('prettier/parser-postcss'),
-                require('prettier/parser-html'),
-                require('prettier/parser-babel'),
-            ],
-            htmlWhitespaceSensitivity: 'ignore',
-        });
-    }
-    catch (err) {
-        console.warn('Could not prettify', { string: str }, err);
-    }
-    return str;
-};
+__exportStar(require("./component"), exports);
 __exportStar(require("./types"), exports);