@builder.io/mitosis 0.5.38 → 0.6.1

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

@@ -189,6 +189,11 @@ const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
         // 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 {
         const codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
         return `[${keyToUse}]="${codeToUse}"`;

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

@@ -113,6 +113,20 @@ const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
         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
@@ -264,7 +278,7 @@ const classPropertiesPlugin = () => ({
     },
 });
 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;
+    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;
@@ -397,6 +411,8 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         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;
@@ -409,6 +425,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                 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') {
@@ -423,8 +440,8 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     (0, strip_meta_properties_1.stripMetaProperties)(json);
     const { components: dynamicComponents, dynamicTemplate } = traverseToGetAllDynamicComponents(json, options, {
         childComponents,
-        nativeAttributes: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeAttributes) !== null && _d !== void 0 ? _d : [],
-        nativeEvents: (_f = (_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.nativeEvents) !== null && _f !== void 0 ? _f : [],
+        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, {
@@ -448,13 +465,18 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
     // Preparing built in component metadata parameters
     const componentMetadata = {
-        selector: ((_g = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _g === void 0 ? void 0 : _g.selector)
-            ? `'${(_h = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _h === void 0 ? void 0 : _h.selector}'`
+        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)}\`]`,
@@ -472,10 +494,13 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     Object.entries(json.meta.angularConfig || {}).forEach(([key, value]) => {
         componentMetadata[key] = value;
     });
-    const hasConstructor = Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
+    const hasConstructor = Boolean(injectables.length) ||
+        dynamicComponents.size ||
+        refsForObjSpread.size ||
+        shouldUseSanitizer;
     const angularCoreImports = [
         ...(outputs.length ? ['Output', 'EventEmitter'] : []),
-        ...(((_j = options === null || options === void 0 ? void 0 : options.experimental) === null || _j === void 0 ? void 0 : _j.inject) ? ['Inject', 'forwardRef'] : []),
+        ...(((_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']
@@ -483,10 +508,24 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         ...(refsForObjSpread.size ? ['Renderer2'] : []),
         ...(props.size ? ['Input'] : []),
         ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
-        ...(((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length) && options.typescript ? ['SimpleChanges'] : []),
+        ...(((_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') : ''}
@@ -565,24 +604,17 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     })
         .join('\n')}
 
-      ${!hasConstructor
-        ? ''
-        : `constructor(\n${injectables.join(',\n')}${dynamicComponents.size
-            ? `\nprivate vcRef${options.typescript ? ': ViewContainerRef' : ''},\n`
-            : ''}${refsForObjSpread.size
-            ? `\nprivate renderer${options.typescript ? ': Renderer2' : ''},\n`
-            : ''}) {}
-          `}
+      ${!hasConstructor ? '' : `constructor(\n${constructorInjectables}) {}`}
       
       ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(options.typescript) : ''}
       
-      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_l = json.hooks.onInit) === null || _l === void 0 ? void 0 : _l.code)
+      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code)
         ? ''
         : `ngOnInit() {
-              ${!((_m = json.hooks) === null || _m === void 0 ? void 0 : _m.onInit)
+              ${!((_p = json.hooks) === null || _p === void 0 ? void 0 : _p.onInit)
             ? ''
             : `
-                    ${(_o = json.hooks.onInit) === null || _o === void 0 ? void 0 : _o.code}
+                    ${(_q = json.hooks.onInit) === null || _q === void 0 ? void 0 : _q.code}
                     `}
               ${json.hooks.onMount.length > 0
             ? `
@@ -604,19 +636,21 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
 
       ${
     // hooks specific to Angular
-    ((_q = (_p = json.compileContext) === null || _p === void 0 ? void 0 : _p.angular) === null || _q === void 0 ? void 0 : _q.hooks)
-        ? Object.entries((_s = (_r = json.compileContext) === null || _r === void 0 ? void 0 : _r.angular) === null || _s === void 0 ? void 0 : _s.hooks).map(([key, value]) => {
+    ((_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')
         : ''}
 
-      ${!((_t = json.hooks.onUpdate) === null || _t === void 0 ? void 0 : _t.length)
+      ${!((_v = json.hooks.onUpdate) === null || _v === void 0 ? void 0 : _v.length)
         ? ''
         : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
               if (typeof window !== 'undefined') {
-                ${(_u = json.hooks.onUpdate) === null || _u === void 0 ? void 0 : _u.reduce((code, hook) => {
+                ${(_w = json.hooks.onUpdate) === null || _w === void 0 ? void 0 : _w.reduce((code, hook) => {
             code += hook.code;
             return code + '\n';
         }, '')}
@@ -627,7 +661,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
       ${!json.hooks.onUnMount && !refsForObjSpread.size
         ? ''
         : `ngOnDestroy() {
-              ${((_v = json.hooks.onUnMount) === null || _v === void 0 ? void 0 : _v.code) || ''}
+              ${((_x = json.hooks.onUnMount) === null || _x === void 0 ? void 0 : _x.code) || ''}
               ${refsForObjSpread.size
             ? `for (const fn of this._listenerFns.values()) { fn(); }`
             : ''}

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

@@ -31,6 +31,15 @@ export type AngularMetadata = {
      * Overwrite default selector for component. Default will be kebab case (MyComponent -> my-component)
      */
     selector?: string;
+    /**
+     * Overwrite default change detection strategy.
+     * `OnPush` adds `changeDetection: ChangeDetectionStrategy.OnPush` to the component metadata.
+     */
+    changeDetection?: 'Default' | 'OnPush';
+    /**
+     * Overwrite default sanitizeInnerHTML. Default is `false`
+     */
+    sanitizeInnerHTML?: boolean;
 };
 export type AngularBlockOptions = {
     childComponents?: string[];

package/dist/src/helpers/styles/collect-css.js

@@ -25,13 +25,17 @@ const collectStyles = (json, options = {}) => {
     const componentIndexes = {};
     const componentHashes = {};
     (0, legacy_1.default)(json).forEach(function (item) {
-        var _a;
+        var _a, _b;
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
             if ((0, helpers_1.nodeHasCss)(item)) {
                 const value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
                 delete item.bindings.css;
-                const componentName = item.properties.$name
-                    ? (0, dash_case_1.dashCase)(item.properties.$name)
+                // Clean the name by keeping only alphanumeric characters, underscores, and dashes
+                const cleanedName = (_b = item.properties.$name) === null || _b === void 0 ? void 0 : _b.replace(/[^a-zA-Z0-9_-]/g, '');
+                // Remove leading numbers or dashes
+                const normalizedName = cleanedName === null || cleanedName === void 0 ? void 0 : cleanedName.replace(/^[0-9-]+/, '');
+                const componentName = normalizedName
+                    ? (0, dash_case_1.dashCase)(normalizedName)
                     : /^h\d$/.test(item.name || '') // don't dashcase h1 into h-1
                         ? item.name
                         : (0, dash_case_1.dashCase)(item.name || 'div');

package/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.5.38",
+  "version": "0.6.1",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {