@builder.io/mitosis 0.11.6 → 0.12.1

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

@@ -1 +1 @@
-export declare const tryFormat: (str: string, parser: string) => string;
+export declare const tryFormat: (str: string, parser: string, htmlWhitespaceSensitivity?: 'css' | 'strict' | 'ignore') => string;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tryFormat = void 0;
 const standalone_1 = require("prettier/standalone");
-const tryFormat = (str, parser) => {
+const tryFormat = (str, parser, htmlWhitespaceSensitivity = 'css') => {
     try {
         return (0, standalone_1.format)(str, {
             parser,
@@ -13,7 +13,7 @@ const tryFormat = (str, parser) => {
                 require('prettier/parser-html'),
                 require('prettier/parser-babel'),
             ],
-            htmlWhitespaceSensitivity: 'ignore',
+            htmlWhitespaceSensitivity,
         });
     }
     catch (err) {

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

@@ -6,13 +6,13 @@ 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 hooks_1 = require("../../../generators/angular/helpers/hooks");
 const blocks_1 = require("../../../generators/angular/signals/blocks");
 const helpers_2 = require("../../../generators/angular/signals/helpers");
 const get_computed_1 = require("../../../generators/angular/signals/helpers/get-computed");
 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");
@@ -97,15 +97,6 @@ const componentToAngularSignals = (userOptions = {}) => {
         if (shouldUseSanitizer) {
             injectables.push('protected sanitizer: DomSanitizer');
         }
-        if (json.hooks.onMount.length > 0) {
-            json.compileContext.angular.hooks.ngAfterViewInit = {
-                code: `
-        if (typeof window !== 'undefined') {
-          ${(0, on_mount_1.stringifySingleScopeOnMount)(json)}
-        }
-        `,
-            };
-        }
         // HTML
         let template = json.children
             .map((item) => {
@@ -125,7 +116,8 @@ const componentToAngularSignals = (userOptions = {}) => {
         })
             .join('\n');
         if (options.prettier !== false) {
-            template = (0, format_1.tryFormat)(template, 'html');
+            // We need to use 'strict' mode for Angular otherwise it could add spaces around some content
+            template = (0, format_1.tryFormat)(template, 'html', 'strict');
         }
         const { components: dynamicComponents, dynamicTemplate } = (0, helpers_1.traverseToGetAllDynamicComponents)(json, options, {
             childComponents,
@@ -215,6 +207,10 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             domRefs.size !== 0 ||
             ((_y = (_x = (_w = (_v = json.compileContext) === null || _v === void 0 ? void 0 : _v.angular) === null || _w === void 0 ? void 0 : _w.extra) === null || _x === void 0 ? void 0 : _x.spreadRefs) === null || _y === void 0 ? void 0 : _y.length) > 0;
         // Imports
+        const emptyOnMount = (0, is_hook_empty_1.isHookEmpty)(json.hooks.onMount);
+        const emptyOnUnMount = (0, is_hook_empty_1.isHookEmpty)(json.hooks.onUnMount);
+        const AfterViewInit = Boolean(!emptyOnMount || withAttributePassing);
+        const OnDestroy = !emptyOnUnMount;
         const coreImports = (0, helpers_2.getAngularCoreImportsAsString)({
             refs: domRefs.size !== 0,
             input: props.length !== 0,
@@ -224,11 +220,25 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             signal: dataString.length !== 0 || hasDynamicComponents,
             computed: gettersString.length !== 0,
             onPush,
+            AfterViewInit,
+            OnDestroy,
             viewChild: importsViewChild,
             viewContainerRef: hasDynamicComponents,
             templateRef: hasDynamicComponents,
             renderer: usesRenderer2,
         });
+        // Hooks
+        if (!emptyOnMount) {
+            (0, hooks_1.addCodeNgAfterViewInit)(json, json.hooks.onMount.map((onMount) => onMount.code).join('\n'));
+        }
+        // Angular interfaces
+        const angularInterfaces = [];
+        if (AfterViewInit) {
+            angularInterfaces.push('AfterViewInit');
+        }
+        if (OnDestroy) {
+            angularInterfaces.push('OnDestroy');
+        }
         let str = (0, dedent_1.dedent) `
         import { ${coreImports} } from '@angular/core';
         import { CommonModule } from '@angular/common';
@@ -260,7 +270,7 @@ Please add a initial value for every state property even if it's \`undefined\`.`
             .map(([k, v]) => `${k}: ${v}`)
             .join(',')}
         })
-        export ${options.defaultExportComponents ? 'default ' : ''}class ${json.name} {   
+        export ${options.defaultExportComponents ? 'default ' : ''}class ${json.name} ${angularInterfaces.length ? ` implements ${angularInterfaces.join(',')}` : ''} {   
           ${(0, lodash_1.uniq)(json.compileContext.angular.extra.importCalls)
             .map((importCall) => `protected readonly ${importCall} = ${importCall};`)
             .join('\n')}
@@ -336,17 +346,19 @@ Please add a initial value for every state property even if it's \`undefined\`.`
                 .filter(([_, value]) => !(0, is_hook_empty_1.isHookEmpty)(value))
                 .map(([key, value]) => {
                 return `${key}() {
+                    if (typeof window !== 'undefined') {
                 ${value.code}
+                }
               }`;
             })
                 .join('\n')
             : ''}
     
-          ${json.hooks.onUnMount
-            ? `ngOnDestroy() {
+          ${emptyOnUnMount
+            ? ''
+            : `ngOnDestroy() {
                   ${((_10 = json.hooks.onUnMount) === null || _10 === void 0 ? void 0 : _10.code) || ''}
-                }`
-            : ''}
+                }`}
     
         }
       `;

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

@@ -1,9 +1,11 @@
-export declare const getAngularCoreImportsAsString: ({ refs, output, input, model, onPush, effect, signal, computed, viewChild, viewContainerRef, templateRef, renderer, }: {
+export declare const getAngularCoreImportsAsString: ({ refs, output, input, model, onPush, effect, signal, AfterViewInit, OnDestroy, computed, viewChild, viewContainerRef, templateRef, renderer, }: {
     refs: boolean;
     output: boolean;
     input: boolean;
     model: boolean;
     onPush: boolean;
+    AfterViewInit: boolean;
+    OnDestroy: boolean;
     effect: boolean;
     signal: boolean;
     computed: boolean;

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAngularCoreImportsAsString = void 0;
-const getAngularCoreImportsAsString = ({ refs, output, input, model, onPush, effect, signal, computed, viewChild, viewContainerRef, templateRef, renderer, }) => {
+const getAngularCoreImportsAsString = ({ refs, output, input, model, onPush, effect, signal, AfterViewInit, OnDestroy, computed, viewChild, viewContainerRef, templateRef, renderer, }) => {
     const angularCoreImports = {
         Component: true,
         viewChild: refs || viewChild,
         ElementRef: refs || viewChild,
         ViewContainerRef: viewContainerRef,
         TemplateRef: templateRef,
-        Renderer2: !!renderer,
+        Renderer2: renderer,
         model,
         output,
         input,
@@ -16,6 +16,8 @@ const getAngularCoreImportsAsString = ({ refs, output, input, model, onPush, eff
         signal,
         computed,
         ChangeDetectionStrategy: onPush,
+        OnDestroy,
+        AfterViewInit,
         InputSignal: input,
         ModelSignal: model,
     };

package/dist/src/parsers/builder/builder.js

@@ -462,147 +462,6 @@ const componentMappers = {
             children: (block.children || []).map((child) => (0, exports.builderElementToMitosisNode)(updateBindings(child, 'state.$index', 'index'), options)),
         });
     },
-    Text: (block, options) => {
-        var _a, _b, _c;
-        let css = getCssFromBlock(block);
-        const styleString = (0, exports.getStyleStringFromBlock)(block, options);
-        const actionBindings = getActionBindingsFromBlock(block, options);
-        const localizedValues = {};
-        const blockBindings = {
-            ...mapBuilderBindingsToMitosisBindingWithCode(block.bindings, options),
-            ...mapBuilderBindingsToMitosisBindingWithCode((_a = block.code) === null || _a === void 0 ? void 0 : _a.bindings, options),
-        };
-        const bindings = {
-            ...(0, lodash_1.omitBy)(blockBindings, (value, key) => {
-                if (key === 'component.options.text') {
-                    return true;
-                }
-                if (key && key.includes('style')) {
-                    return true;
-                }
-                return false;
-            }),
-            ...actionBindings,
-            ...(styleString && {
-                style: { code: styleString },
-            }),
-            ...(Object.keys(css).length && {
-                css: { code: JSON.stringify(css) },
-            }),
-        };
-        const properties = { ...block.properties };
-        for (const key in properties) {
-            if (typeof properties[key] === 'object' &&
-                properties[key] !== null &&
-                properties[key]['@type'] === '@builder.io/core:LocalizedValue') {
-                const localizedValue = properties[key];
-                localizedValues[`properties.${key}`] = localizedValue;
-                properties[key] = localizedValue.Default;
-            }
-        }
-        if (options.includeBuilderExtras && block.id)
-            properties['builder-id'] = block.id;
-        if (block.class)
-            properties['class'] = block.class;
-        if (block.layerName) {
-            properties.$name = block.layerName;
-        }
-        // Add data attributes for Builder layer properties
-        const dataAttributes = {};
-        if (block.layerLocked !== undefined) {
-            dataAttributes['data-builder-layerLocked'] = String(block.layerLocked);
-        }
-        if (block.groupLocked !== undefined) {
-            dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
-        }
-        const innerBindings = {};
-        const componentOptionsText = blockBindings['component.options.text'];
-        if (componentOptionsText) {
-            innerBindings[options.preserveTextBlocks ? 'innerHTML' : '_text'] = (0, bindings_1.createSingleBinding)({
-                code: wrapBindingIfNeeded(componentOptionsText.code, options),
-            });
-        }
-        let text = ((_b = block.component.options) === null || _b === void 0 ? void 0 : _b.text) || '';
-        if (typeof text === 'object' &&
-            text !== null &&
-            text['@type'] === '@builder.io/core:LocalizedValue') {
-            localizedValues['component.options.text'] = (_c = block.component.options) === null || _c === void 0 ? void 0 : _c.text;
-            text = text.Default;
-        }
-        // Builder uses {{}} for bindings, but Mitosis expects {} so we need to convert
-        const innerProperties = innerBindings._text
-            ? {}
-            : {
-                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text.replace(/\{\{(.*?)\}\}/g, '{$1}'),
-            };
-        if (options.preserveTextBlocks) {
-            return (0, create_mitosis_node_1.createMitosisNode)({
-                name: block.tagName || 'div',
-                bindings,
-                properties: {
-                    ...properties,
-                    ...dataAttributes,
-                },
-                meta: (0, exports.getMetaFromBlock)(block, options),
-                ...(Object.keys(localizedValues).length && { localizedValues }),
-                children: [
-                    (0, create_mitosis_node_1.createMitosisNode)({
-                        bindings: innerBindings,
-                        properties: {
-                            ...innerProperties,
-                            class: 'builder-text',
-                        },
-                        ...(Object.keys(localizedValues).length && { localizedValues }),
-                    }),
-                ],
-            });
-        }
-        // Disabling for now
-        const assumeLink = false;
-        const finalProperties = {
-            ...(assumeLink
-                ? {
-                    href: '...',
-                }
-                : {}),
-            ...properties,
-            ...dataAttributes,
-        };
-        const finalTagname = block.tagName || (assumeLink ? 'a' : 'div');
-        if ((block.tagName && block.tagName !== 'div') ||
-            hasStyles(block) ||
-            hasComponent(block) ||
-            hasBindings(block) ||
-            hasProperties(block)) {
-            return (0, create_mitosis_node_1.createMitosisNode)({
-                name: finalTagname,
-                bindings,
-                properties: finalProperties,
-                meta: (0, exports.getMetaFromBlock)(block, options),
-                children: [
-                    (0, create_mitosis_node_1.createMitosisNode)({
-                        bindings: innerBindings,
-                        properties: innerProperties,
-                        ...(Object.keys(localizedValues).length && { localizedValues }),
-                    }),
-                ],
-            });
-        }
-        return (0, create_mitosis_node_1.createMitosisNode)({
-            name: finalTagname,
-            properties: {
-                ...finalProperties,
-                ...properties,
-                ...innerProperties,
-            },
-            bindings: {
-                ...bindings,
-                ...innerBindings,
-            },
-            meta: (0, exports.getMetaFromBlock)(block, options),
-            ...(Object.keys(localizedValues).length && { localizedValues }),
-        });
-    },
 };
 const processBoundLogic = (code) => {
     const ast = babel.parse(code);
@@ -625,7 +484,7 @@ const processBoundLogic = (code) => {
     return code;
 };
 const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     const { includeSpecialBindings = true } = options;
     const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
@@ -904,33 +763,6 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
         },
         ...(Object.keys(localizedValues).length && { localizedValues }),
     });
-    // Has single text node child
-    const firstChild = (_w = block.children) === null || _w === void 0 ? void 0 : _w[0];
-    if (((_x = block.children) === null || _x === void 0 ? void 0 : _x.length) === 1 &&
-        ((_y = firstChild === null || firstChild === void 0 ? void 0 : firstChild.component) === null || _y === void 0 ? void 0 : _y.name) === 'Text' &&
-        !options.preserveTextBlocks) {
-        const textProperties = (0, exports.builderElementToMitosisNode)(firstChild, options);
-        const parsedNodeCss = json5_1.default.parse(((_z = node.bindings.css) === null || _z === void 0 ? void 0 : _z.code) || '{}');
-        const parsedTextCss = json5_1.default.parse(((_0 = textProperties.bindings.css) === null || _0 === void 0 ? void 0 : _0.code) || '{}');
-        const mergedCss = combineStyles(parsedNodeCss, parsedTextCss);
-        // Don't merge if text has styling that matters
-        const doNotMerge = 
-        // Text has flex alignment
-        ['end', 'right', 'center'].includes(parsedTextCss.alignSelf) ||
-            // Text has specific styling
-            parsedTextCss.backgroundColor ||
-            parsedTextCss.opacity ||
-            parsedTextCss.background;
-        if (!doNotMerge) {
-            return (0, lodash_1.merge)({}, textProperties, node, {
-                bindings: {
-                    ...(Object.keys(mergedCss).length && {
-                        css: { code: json5_1.default.stringify(mergedCss) },
-                    }),
-                },
-            });
-        }
-    }
     node.children = children.concat((block.children || []).map((item) => (0, exports.builderElementToMitosisNode)(item, options)));
     return node;
 };

package/dist/src/plugins/compile-away-builder-components.js

@@ -492,6 +492,52 @@ exports.components = {
         });
         return wrapOutput(node, videoContainer, components);
     },
+    Text: (node) => {
+        if (node.properties.text) {
+            node.properties._text = node.properties.text;
+            delete node.properties.text;
+        }
+        if (node.bindings.text) {
+            node.bindings._text = node.bindings.text;
+            delete node.bindings.text;
+        }
+        const { _text: propText, $tagName: nodeTagName, ...outerProps } = node.properties;
+        const { _text: bindingText, ...outerBindings } = node.bindings;
+        const hasBindings = Object.keys(outerProps).length > 0;
+        const hasProperties = Object.keys(outerBindings).length > 0;
+        /**
+         * If there are things we need to reflect on the text then we must
+         * render a wrapper div so we can put it on that element.
+         */
+        if (hasBindings || hasProperties) {
+            /**
+             * Text binding needs to be on the inner text node. Some generators
+             * will skip rendering other bindings if they see a _text binding,
+             * so the _text binding needs to go on the inner text node, and all
+             * other bindings need to go on the wrapper div so they get generated.
+             */
+            return (0, create_mitosis_node_1.createMitosisNode)({
+                name: 'div',
+                bindings: outerBindings,
+                properties: outerProps,
+                children: [
+                    (0, create_mitosis_node_1.createMitosisNode)({
+                        ...node,
+                        properties: {
+                            $tagName: nodeTagName,
+                            ...(propText ? { _text: propText } : {}),
+                        },
+                        bindings: bindingText ? { _text: bindingText } : {},
+                        name: nodeTagName !== null && nodeTagName !== void 0 ? nodeTagName : 'div',
+                    }),
+                ],
+            });
+        }
+        return (0, create_mitosis_node_1.createMitosisNode)({
+            ...node,
+            name: nodeTagName !== null && nodeTagName !== void 0 ? nodeTagName : 'div',
+        });
+    },
 };
 const compileAwayBuilderComponentsFromTree = (tree, components) => {
     (0, legacy_1.default)(tree).forEach(function (item) {

package/package.json

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