@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,7 @@
+import { AngularApi } from '../../../generators/angular/types';
+import type { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getOutputs: ({ json, outputVars, api, }: {
+    json: MitosisComponent;
+    outputVars: string[];
+    api?: AngularApi | undefined;
+}) => string;

package/dist/src/generators/angular/helpers/get-outputs.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOutputs = void 0;
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const getOutputs = ({ json, outputVars, api, }) => {
+    const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
+    if (api === 'signals') {
+        return outputVars
+            .map((output) => {
+            const propType = propsTypeRef
+                ? `<Parameters<Required<${propsTypeRef}>["${output}"]>[number] | void> `
+                : '';
+            return `${(0, event_handlers_1.getEventNameWithoutOn)(output)} = output${propType}()`;
+        })
+            .join('\n');
+    }
+    return outputVars
+        .map((output) => {
+        return `@Output() ${output} = new EventEmitter<any>()`;
+    })
+        .join('\n');
+};
+exports.getOutputs = getOutputs;

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

@@ -0,0 +1,8 @@
+import { ToAngularOptions } from '../../../generators/angular/types';
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getDomRefs: ({ json, options, withAttributePassing, rootRef, }: {
+    json: MitosisComponent;
+    options: ToAngularOptions;
+    withAttributePassing?: boolean | undefined;
+    rootRef: string;
+}) => Set<string>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDomRefs = void 0;
+const hooks_1 = require("../../../generators/angular/helpers/hooks");
+const dash_case_1 = require("../../../helpers/dash-case");
+const get_refs_1 = require("../../../helpers/get-refs");
+const map_refs_1 = require("../../../helpers/map-refs");
+const types_1 = require("@babel/types");
+const getDomRefs = ({ json, options, withAttributePassing, rootRef, }) => {
+    const domRefs = (0, get_refs_1.getRefs)(json);
+    const nativeElement = options.api === 'signals' ? `()?.nativeElement` : '?.nativeElement';
+    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)}");
+            `);
+    }
+    (0, map_refs_1.mapRefs)(json, (refName, extra) => {
+        const isDomRef = domRefs.has(refName);
+        let additional = nativeElement;
+        if ((extra === null || extra === void 0 ? void 0 : extra.type) === 'bindings' && options.api === 'signals') {
+            // we don't need nativeElement and this. for bindings in signals
+            return refName;
+        }
+        else if ((extra === null || extra === void 0 ? void 0 : extra.type) === 'hooks-deps-array' && options.api === 'signals') {
+            // we don't need nativeElement for deps-array in hooks
+            additional = '()';
+        }
+        else if ((extra === null || extra === void 0 ? void 0 : extra.path.parentPath) && (0, types_1.isAssignmentExpression)(extra === null || extra === void 0 ? void 0 : extra.path.parentPath.container)) {
+            // we cannot use conditionals for assignments, it has to be checked before
+            additional = options.api === 'signals' ? `()!.nativeElement` : '!.nativeElement';
+        }
+        return `this.${isDomRef ? '' : '_'}${refName}${isDomRef ? additional : ''}`;
+    });
+    return domRefs;
+};
+exports.getDomRefs = getDomRefs;

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

@@ -0,0 +1,6 @@
+import { ToAngularOptions } from '../../../generators/angular/types';
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getAngularStyles: ({ json, options, }: {
+    json: MitosisComponent;
+    options: ToAngularOptions;
+}) => string;

package/dist/src/generators/angular/helpers/get-styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAngularStyles = void 0;
+const format_1 = require("../../../generators/angular/helpers/format");
+const index_1 = require("../../../generators/angular/helpers/index");
+const indent_1 = require("../../../helpers/indent");
+const collect_css_1 = require("../../../helpers/styles/collect-css");
+const getAngularStyles = ({ json, options, }) => {
+    (0, index_1.preprocessCssAsJson)(json);
+    let css = (0, collect_css_1.collectCss)(json);
+    if (options.prettier !== false) {
+        css = (0, format_1.tryFormat)(css, 'css');
+    }
+    const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
+    return (0, indent_1.indent)(css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss, 8);
+};
+exports.getAngularStyles = getAngularStyles;

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

@@ -0,0 +1,25 @@
+import type { MitosisComponent } from '../../../types/mitosis-component';
+export declare const addCodeNgAfterViewInit: (json: MitosisComponent, code: string) => void;
+/**
+ * Adds code to the `onUpdate` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onUpdate` hook.
+ */
+export declare const addCodeToOnUpdate: (root: MitosisComponent, code: string) => void;
+/**
+ * Adds code to the `onInit` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onInit` hook.
+ */
+export declare const addCodeToOnInit: (root: MitosisComponent, code: string) => void;
+/**
+ * Creates a reactive state in Angular.
+ * Initializes the state with `null` because we cannot access `state.` or `props.` properties before the component is initialized.
+ * Adds the code (init/re-init code) to the `onInit` and `onUpdate` hooks.
+ * @param root The root MitosisComponent.
+ * @param stateName The name of the reactive state.
+ * @param code The code to be added to the onInit and onUpdate hooks.
+ */
+export declare const makeReactiveState: (root: MitosisComponent, stateName: string, code: string) => void;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.addCodeNgAfterViewInit = void 0;
+const addCodeNgAfterViewInit = (json, code) => {
+    if (!json.compileContext) {
+        json.compileContext = {
+            angular: {
+                hooks: {
+                    ngAfterViewInit: {
+                        code: '',
+                    },
+                },
+            },
+        };
+    }
+    json.compileContext.angular.hooks.ngAfterViewInit.code += code;
+};
+exports.addCodeNgAfterViewInit = addCodeNgAfterViewInit;
+/**
+ * Adds code to the `onUpdate` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onUpdate` hook.
+ */
+const addCodeToOnUpdate = (root, code) => {
+    root.hooks.onUpdate = root.hooks.onUpdate || [];
+    root.hooks.onUpdate.push({
+        code,
+    });
+};
+exports.addCodeToOnUpdate = addCodeToOnUpdate;
+/**
+ * Adds code to the `onInit` hook of a MitosisComponent.
+ *
+ * @param {MitosisComponent} root - The root MitosisComponent.
+ * @param {string} code - The code to be added to the `onInit` hook.
+ */
+const addCodeToOnInit = (root, code) => {
+    var _a;
+    if (!((_a = root.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
+        root.hooks.onInit = { code: '' };
+    }
+    root.hooks.onInit.code += `\n${code};`;
+};
+exports.addCodeToOnInit = addCodeToOnInit;
+/**
+ * Creates a reactive state in Angular.
+ * Initializes the state with `null` because we cannot access `state.` or `props.` properties before the component is initialized.
+ * Adds the code (init/re-init code) to the `onInit` and `onUpdate` hooks.
+ * @param root The root MitosisComponent.
+ * @param stateName The name of the reactive state.
+ * @param code The code to be added to the onInit and onUpdate hooks.
+ */
+const makeReactiveState = (root, stateName, code) => {
+    root.state[stateName] = { code: 'null', type: 'property' };
+    (0, exports.addCodeToOnInit)(root, code);
+    (0, exports.addCodeToOnUpdate)(root, code);
+};
+exports.makeReactiveState = makeReactiveState;

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

@@ -0,0 +1,33 @@
+import { AngularBlockOptions, ToAngularOptions } from '../../../generators/angular/types';
+import { type MitosisComponent } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
+    [key: string]: string;
+};
+export declare const getAppropriateTemplateFunctionKeys: (code: string) => string[];
+export declare const getDefaultProps: ({ defaultProps }: MitosisComponent) => string;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+export declare const transformState: (json: MitosisComponent) => void;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+export declare const hasFirstChildKeyAttribute: (node: MitosisNode) => boolean;
+export declare const preprocessCssAsJson: (json: MitosisComponent) => void;
+export declare const generateNgModule: (content: string, name: string, componentsUsed: string[], component: MitosisComponent, bootstrapMapper: Function | null | undefined) => string;
+export declare const traverseToGetAllDynamicComponents: (json: MitosisComponent, options: ToAngularOptions, blockOptions: AngularBlockOptions, api?: 'signals' | 'classic') => {
+    components: Set<string>;
+    dynamicTemplate: string;
+};
+export declare const getTemplateFormat: (template: string) => string;
+export declare const traverseAndCheckIfInnerHTMLIsUsed: (json: MitosisComponent) => boolean;
+export declare const processAngularCode: ({ contextVars, outputVars, domRefs, replaceWith, }: {
+    contextVars: string[];
+    outputVars: string[];
+    domRefs: string[];
+    replaceWith?: string | undefined;
+}) => (code: string) => string;

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

@@ -0,0 +1,221 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processAngularCode = exports.traverseAndCheckIfInnerHTMLIsUsed = exports.getTemplateFormat = exports.traverseToGetAllDynamicComponents = exports.generateNgModule = exports.preprocessCssAsJson = exports.hasFirstChildKeyAttribute = exports.transformState = exports.getDefaultProps = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+const blocks_1 = require("../../../generators/angular/classic/blocks");
+const indent_1 = require("../../../helpers/indent");
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const replace_identifiers_1 = require("../../../helpers/replace-identifiers");
+const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+const helpers_1 = require("../../../helpers/styles/helpers");
+const babel = __importStar(require("@babel/core"));
+const function_1 = require("fp-ts/function");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const blocks_2 = require("../signals/blocks");
+const HELPER_FUNCTIONS = (isTs) => ({
+    useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
+    let obj = {}
+    args.forEach((arg) => {
+      obj = { ...obj, ...arg };
+    });
+    return obj;
+  }`,
+    useObjectDotValues: `useObjectDotValues(obj${isTs ? ': any' : ''})${isTs ? ': any[]' : ''}) {
+    return Object.values(obj);
+  }`,
+    useTypeOf: `useTypeOf(obj${isTs ? ': any' : ''})${isTs ? ': string' : ''}) {
+    return typeof obj;
+  }`,
+    useJsonStringify: `useJsonStringify(...args${isTs ? ': any' : ''})${isTs ? ': string' : ''}) {
+    return JSON.stringify(...args);
+  }`,
+    setAttributes: `setAttributes(el${isTs ? ': HTMLElement' : ''}, value${isTs ? ': any' : ''}, changes${isTs ? '?: any' : ''}) {
+    if (!el) {
+      return;
+    }
+    const target = typeof changes === 'undefined' ? value : changes;
+    Object.keys(target).forEach((key) => {
+      if (key.startsWith('on')) {
+        if (this._listenerFns.has(key)) {
+          this._listenerFns.get(key)${isTs ? '!' : ''}();
+        }
+        this._listenerFns.set(key, this.renderer.listen(
+          el,
+          key.replace('on', '').toLowerCase(),
+          target[key]
+        ));
+      } else {
+        this.renderer.setAttribute(el, key.toLowerCase(), target[key] ?? '');
+      }
+    });
+  }`,
+});
+exports.HELPER_FUNCTIONS = HELPER_FUNCTIONS;
+const getAppropriateTemplateFunctionKeys = (code) => Object.keys((0, exports.HELPER_FUNCTIONS)()).filter((key) => code.includes(key));
+exports.getAppropriateTemplateFunctionKeys = getAppropriateTemplateFunctionKeys;
+const getDefaultProps = ({ defaultProps }) => {
+    if (!defaultProps)
+        return '';
+    const defalutPropsString = Object.keys(defaultProps)
+        .map((prop) => {
+        var _a;
+        const value = defaultProps.hasOwnProperty(prop) ? (_a = defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code : 'undefined';
+        return `${prop}: ${value}`;
+    })
+        .join(',');
+    return `const defaultProps: any = {${defalutPropsString}};\n`;
+};
+exports.getDefaultProps = getDefaultProps;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+const transformState = (json) => {
+    Object.entries(json.state)
+        .reverse()
+        .forEach(([key, value]) => {
+        var _a;
+        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
+            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
+                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
+                json.state[key].code = 'null';
+                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
+                    json.hooks.onInit = { code: '' };
+                }
+                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
+            }
+        }
+    });
+};
+exports.transformState = transformState;
+/**
+ * Checks if the first child has a "key" attribute - used for "For" elements
+ * @param node The node which should be "For"
+ */
+const hasFirstChildKeyAttribute = (node) => {
+    var _a;
+    if (!node.children || node.children.length === 0) {
+        return false;
+    }
+    const firstChildBinding = node.children[0].bindings;
+    return Boolean(firstChildBinding && ((_a = firstChildBinding.key) === null || _a === void 0 ? void 0 : _a.code));
+};
+exports.hasFirstChildKeyAttribute = hasFirstChildKeyAttribute;
+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, '"');
+                }
+            }
+        }
+    });
+};
+exports.preprocessCssAsJson = preprocessCssAsJson;
+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 {}`;
+};
+exports.generateNgModule = generateNgModule;
+const traverseToGetAllDynamicComponents = (json, options, blockOptions, api = 'classic') => {
+    const components = new Set();
+    let dynamicTemplate = '';
+    (0, legacy_1.default)(json).forEach((item) => {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.')) {
+            const children = item.children
+                .map((child) => api === 'classic'
+                ? (0, blocks_1.blockToAngular)({ root: json, json: child, options, blockOptions })
+                : (0, blocks_2.blockToAngularSignals)({ root: json, json: child, options, blockOptions }))
+                .join('\n');
+            dynamicTemplate = `<ng-template #${item.name.split('.')[1].toLowerCase() + 'Template'}>${children}</ng-template>`;
+            components.add(item.name);
+        }
+    });
+    return {
+        components,
+        dynamicTemplate,
+    };
+};
+exports.traverseToGetAllDynamicComponents = traverseToGetAllDynamicComponents;
+const getTemplateFormat = (template) => (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+exports.getTemplateFormat = getTemplateFormat;
+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;
+};
+exports.traverseAndCheckIfInnerHTMLIsUsed = traverseAndCheckIfInnerHTMLIsUsed;
+const { types } = babel;
+/**
+ * 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 }));
+exports.processAngularCode = processAngularCode;

package/dist/src/generators/angular/helpers/parse-selector.d.ts

@@ -0,0 +1,5 @@
+export declare function parseSelector(selector: string): {
+    element: string | null;
+    classNames: string[];
+    attributes: Record<string, string>;
+};

package/dist/src/generators/angular/helpers/parse-selector.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSelector = void 0;
+const compiler_1 = require("@angular/compiler");
+function parseSelector(selector) {
+    const { element, classNames, attrs } = compiler_1.CssSelector.parse(selector)[0];
+    const attributes = attrs.reduce((acc, attr, i) => {
+        if (i % 2 === 0) {
+            acc[attr] = attrs[i + 1];
+        }
+        return acc;
+    }, {});
+    return {
+        element,
+        classNames,
+        attributes,
+    };
+}
+exports.parseSelector = parseSelector;

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

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./component"), exports);
+__exportStar(require("./types"), exports);

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;