@builder.io/mitosis 0.8.0 → 0.9.0

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToAngular = void 0;
+const component_1 = require("../../generators/angular/classic/component");
+const component_2 = require("../../generators/angular/signals/component");
+const types_1 = require("../../generators/angular/types");
+const merge_options_1 = require("../../helpers/merge-options");
+const componentToAngular = (userOptions = {}) => {
+    return (args) => {
+        const options = (0, merge_options_1.initializeOptions)({
+            target: 'angular',
+            component: args.component,
+            defaults: types_1.DEFAULT_ANGULAR_OPTIONS,
+            userOptions,
+        });
+        if (options.api === 'signals') {
+            /*
+             * Some features aren't available to reduce complexity for now:
+             * - Spread props
+             * - Dynamic components
+             */
+            return (0, component_2.componentToAngularSignals)(userOptions)(args);
+        }
+        return (0, component_1.componentToAngularClassic)(userOptions)(args);
+    };
+};
+exports.componentToAngular = componentToAngular;

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

@@ -0,0 +1 @@
+export declare const tryFormat: (str: string, parser: string) => string;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tryFormat = void 0;
+const standalone_1 = require("prettier/standalone");
+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;
+};
+exports.tryFormat = tryFormat;

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInputs = void 0;
+const getInputs = ({ props, json, options, }) => {
+    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';
+        let propDeclaration = `@Input() ${prop}${options.typescript ? `${hasDefaultProp ? '' : '!'}: ${propType}` : ''}`;
+        if (hasDefaultProp) {
+            propDeclaration += ` = defaultProps["${prop}"]`;
+        }
+        return propDeclaration;
+    })
+        .join('\n');
+};
+exports.getInputs = getInputs;

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

@@ -1,3 +1,4 @@
+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) => {
@@ -16,3 +17,17 @@ export declare const transformState: (json: MitosisComponent) => void;
  * @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) => {
+    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

@@ -1,7 +1,41 @@
 "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.hasFirstChildKeyAttribute = exports.transformState = exports.getDefaultProps = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+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 HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
     let obj = {}
@@ -53,7 +87,7 @@ const getDefaultProps = ({ defaultProps }) => {
         return `${prop}: ${value}`;
     })
         .join(',');
-    return `const defaultProps = {${defalutPropsString}};\n`;
+    return `const defaultProps: any = {${defalutPropsString}};\n`;
 };
 exports.getDefaultProps = getDefaultProps;
 /**
@@ -92,3 +126,93 @@ const hasFirstChildKeyAttribute = (node) => {
     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) => {
+    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,
+    };
+};
+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/{parse-selector.d.ts → helpers/parse-selector.d.ts}

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

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

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

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

@@ -1,4 +1,2 @@
-import { TranspilerGenerator } from '../../types/transpiler';
-import { ToAngularOptions } from './types';
-export declare const componentToAngular: TranspilerGenerator<ToAngularOptions>;
+export * from './component';
 export * from './types';