@builder.io/mitosis 0.12.0 → 0.13.0

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/generators/builder/generator.js

@@ -565,6 +565,59 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
         const element = mapper(json, options);
         return processLocalizedValues(element, json);
     }
+    const symbolBinding = json.bindings.symbol;
+    if (symbolBinding === null || symbolBinding === void 0 ? void 0 : symbolBinding.code) {
+        const isExplicitUserSymbol = json.type === 'user-symbol';
+        let hasValidSymbolMetadata = false;
+        if (!isExplicitUserSymbol) {
+            const parsed = (0, lodash_1.attempt)(() => json5_1.default.parse(symbolBinding.code));
+            hasValidSymbolMetadata =
+                !(parsed instanceof Error) &&
+                    parsed &&
+                    typeof parsed === 'object' &&
+                    (parsed.entry || parsed.model === 'symbol');
+        }
+        if (isExplicitUserSymbol || hasValidSymbolMetadata) {
+            const symbolOptions = (0, lodash_1.attempt)(() => json5_1.default.parse(symbolBinding.code));
+            if (!(symbolOptions instanceof Error)) {
+                if (!symbolOptions.name) {
+                    const displayName = json.name
+                        .replace(/^Symbol/, '')
+                        .replace(/([A-Z])/g, ' $1')
+                        .trim();
+                    if (displayName) {
+                        symbolOptions.name = displayName;
+                    }
+                }
+                const inputData = {};
+                for (const key of Object.keys(json.bindings)) {
+                    if (key !== 'symbol' && key !== 'css' && key !== 'style') {
+                        const value = (0, lodash_1.attempt)(() => json5_1.default.parse(json.bindings[key].code));
+                        if (!(value instanceof Error)) {
+                            inputData[key] = value;
+                        }
+                    }
+                }
+                for (const key of Object.keys(json.properties)) {
+                    if (!key.startsWith('$') && !key.startsWith('_') && !key.startsWith('data-')) {
+                        inputData[key] = json.properties[key];
+                    }
+                }
+                if (Object.keys(inputData).length > 0) {
+                    symbolOptions.data = { ...symbolOptions.data, ...inputData };
+                }
+                const element = el({
+                    component: {
+                        name: 'Symbol',
+                        options: {
+                            symbol: symbolOptions,
+                        },
+                    },
+                }, options);
+                return processLocalizedValues(element, json);
+            }
+        }
+    }
     if (json.properties._text || ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code)) {
         const element = el({
             tagName: 'span',

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

@@ -233,6 +233,32 @@ const wrapBindingIfNeeded = (value, options) => {
     }
     return value;
 };
+/**
+ * Sanitizes a symbol name to be a valid JSX component name.
+ * - Converts to PascalCase
+ * - Removes invalid characters
+ * - Adds "Symbol" prefix to avoid collisions
+ * - Returns "Symbol" if no valid name can be generated
+ */
+const sanitizeSymbolName = (name) => {
+    if (!name || typeof name !== 'string') {
+        return 'Symbol';
+    }
+    // Remove special characters and split into words
+    const words = name
+        .replace(/[^a-zA-Z0-9\s]/g, ' ')
+        .split(/\s+/)
+        .filter(Boolean);
+    if (words.length === 0) {
+        return 'Symbol';
+    }
+    // Convert to PascalCase
+    const pascalCase = words
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+    // Add Symbol prefix to avoid collisions with other components
+    return `Symbol${pascalCase}`;
+};
 const getBlockActions = (block, options) => {
     var _a;
     const obj = {
@@ -308,16 +334,46 @@ const getBlockBindings = (block, options) => {
 exports.symbolBlocksAsChildren = false;
 const componentMappers = {
     Symbol(block, options) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         let css = getCssFromBlock(block);
         const styleString = (0, exports.getStyleStringFromBlock)(block, options);
         const actionBindings = getActionBindingsFromBlock(block, options);
+        const symbolOptions = (_b = (_a = block.component) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.symbol;
+        const symbolName = ((_c = symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.content) === null || _c === void 0 ? void 0 : _c.name) || (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.name);
+        const componentName = ((_d = block.component) === null || _d === void 0 ? void 0 : _d.name) !== 'Symbol'
+            ? (_e = block.component) === null || _e === void 0 ? void 0 : _e.name // Use name already set by extractSymbols
+            : sanitizeSymbolName(symbolName);
+        // Extract inputs from symbol.data to make them visible as top-level JSX props
+        //
+        // In Builder.io, Symbol components can receive inputs through symbol.options.data,
+        // which contains key-value pairs for props passed to the symbol instance.
+        //
+        // We extract these from the nested data structure and create individual bindings
+        // for each input so they become first-class props in the generated code
+        // (e.g., <MySymbol title="Hello" count={5} />) instead of being buried in metadata
+        // (e.g., <MySymbol symbol={{ data: { title: "Hello", count: 5 } }} />).
+        //
+        // This transformation enables proper prop passing and makes the component usage
+        // more idiomatic in the target framework.
+        const symbolData = (symbolOptions === null || symbolOptions === void 0 ? void 0 : symbolOptions.data) || {};
+        const inputBindings = {};
+        const hasInputs = Object.keys(symbolData).length > 0;
+        // Only extract inputs if there are any to avoid data loss
+        if (hasInputs) {
+            // Create individual bindings for each input
+            for (const key in symbolData) {
+                inputBindings[key] = (0, bindings_1.createSingleBinding)({
+                    code: json5_1.default.stringify(symbolData[key]),
+                });
+            }
+        }
+        // Keep symbol metadata - only omit data if we extracted inputs
+        const symbolMetadata = hasInputs ? (0, lodash_1.omit)(symbolOptions, 'data') : symbolOptions;
         const bindings = {
             symbol: (0, bindings_1.createSingleBinding)({
-                code: JSON.stringify({
-                    ...(_a = block.component) === null || _a === void 0 ? void 0 : _a.options.symbol,
-                }),
+                code: JSON.stringify(symbolMetadata),
             }),
+            ...inputBindings,
             ...actionBindings,
             ...(styleString && {
                 style: (0, bindings_1.createSingleBinding)({ code: styleString }),
@@ -327,7 +383,8 @@ const componentMappers = {
             }),
         };
         return (0, create_mitosis_node_1.createMitosisNode)({
-            name: 'Symbol',
+            name: componentName,
+            type: 'user-symbol',
             bindings: bindings,
             meta: (0, exports.getMetaFromBlock)(block, options),
         });
@@ -484,7 +541,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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const { includeSpecialBindings = true } = options;
     const localizedValues = {};
     if (((_a = block.component) === null || _a === void 0 ? void 0 : _a.name) === 'Core:Fragment') {
@@ -568,7 +625,14 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             });
         }
     }
-    const mapper = !_internalOptions.skipMapper && block.component && componentMappers[block.component.name];
+    const mapper = !_internalOptions.skipMapper &&
+        block.component &&
+        (componentMappers[block.component.name] ||
+            // Handle symbols that were renamed by extractSymbols (e.g., "SymbolButtonComponent")
+            // Check for symbol options or exact 'Symbol' name instead of name pattern
+            (((_p = (_o = block.component) === null || _o === void 0 ? void 0 : _o.options) === null || _p === void 0 ? void 0 : _p.symbol) || ((_q = block.component) === null || _q === void 0 ? void 0 : _q.name) === 'Symbol'
+                ? componentMappers['Symbol']
+                : undefined));
     if (mapper) {
         return mapper(block, options);
     }
@@ -641,7 +705,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
             properties.href = linkUrl;
         }
     }
-    if ((_o = block.component) === null || _o === void 0 ? void 0 : _o.options) {
+    if ((_r = block.component) === null || _r === void 0 ? void 0 : _r.options) {
         for (const key in block.component.options) {
             const value = block.component.options[key];
             const valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
@@ -677,7 +741,7 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
                 slots[key] = childrenElements;
             }
             else if (options.enableBlocksSlots &&
-                !componentMappers[(_p = block.component) === null || _p === void 0 ? void 0 : _p.name] &&
+                !componentMappers[(_s = block.component) === null || _s === void 0 ? void 0 : _s.name] &&
                 (Array.isArray(value) || (typeof value === 'object' && value !== null))) {
                 /**
                  * Builder Elements that have their own mappers should not use blocksSlots
@@ -728,13 +792,13 @@ const builderElementToMitosisNode = (block, options, _internalOptions = {}) => {
     if (block.groupLocked !== undefined) {
         dataAttributes['data-builder-groupLocked'] = String(block.groupLocked);
     }
-    if (((_q = block.component) === null || _q === void 0 ? void 0 : _q.name) &&
-        /:/.test((_r = block.component) === null || _r === void 0 ? void 0 : _r.name) &&
-        !generator_1.builderBlockPrefixes.includes((_s = block.component) === null || _s === void 0 ? void 0 : _s.name.split(':')[0])) {
-        dataAttributes['data-builder-originalName'] = (_t = block.component) === null || _t === void 0 ? void 0 : _t.name;
+    if (((_t = block.component) === null || _t === void 0 ? void 0 : _t.name) &&
+        /:/.test((_u = block.component) === null || _u === void 0 ? void 0 : _u.name) &&
+        !generator_1.builderBlockPrefixes.includes((_v = block.component) === null || _v === void 0 ? void 0 : _v.name.split(':')[0])) {
+        dataAttributes['data-builder-originalName'] = (_w = block.component) === null || _w === void 0 ? void 0 : _w.name;
     }
     const node = (0, create_mitosis_node_1.createMitosisNode)({
-        name: ((_v = (_u = block.component) === null || _u === void 0 ? void 0 : _u.name) === null || _v === void 0 ? void 0 : _v.replace(/[^a-z0-9]/gi, '')) ||
+        name: ((_y = (_x = block.component) === null || _x === void 0 ? void 0 : _x.name) === null || _y === void 0 ? void 0 : _y.replace(/[^a-z0-9]/gi, '')) ||
             block.tagName ||
             (block.linkUrl ? 'a' : 'div'),
         properties: {
@@ -954,7 +1018,8 @@ function extractSymbols(json) {
             }
             continue;
         }
-        const componentName = 'Symbol' + ++symbolsFound;
+        const symbolName = elContent.name || (symbolValue === null || symbolValue === void 0 ? void 0 : symbolValue.name);
+        const componentName = sanitizeSymbolName(symbolName);
         el.component.name = componentName;
         if ((_d = el.component) === null || _d === void 0 ? void 0 : _d.options.symbol.content) {
             delete el.component.options.symbol.content;

package/dist/src/parsers/svelte/html/text.d.ts

@@ -7,6 +7,7 @@ export declare function parseText(node: TemplateNode): {
     '@type': "@builder.io/mitosis/node";
     meta: import("../../../types/json").JSONObject;
     scope: {};
+    type?: "user-symbol" | undefined;
     bindings: {
         [key: string]: import("../../..").Binding | undefined;
     };
@@ -30,6 +31,7 @@ export declare function parseText(node: TemplateNode): {
         indexName: string | undefined;
         collectionName: string | undefined;
     };
+    type?: "user-symbol" | undefined;
     bindings: {
         [key: string]: import("../../..").Binding | undefined;
     };
@@ -49,6 +51,7 @@ export declare function parseText(node: TemplateNode): {
     '@type': "@builder.io/mitosis/node";
     meta: import("../../../types/json").JSONObject;
     scope: {};
+    type?: "user-symbol" | undefined;
     bindings: {
         [key: string]: import("../../..").Binding | undefined;
     };

package/dist/src/types/mitosis-node.d.ts

@@ -38,6 +38,11 @@ export type BaseNode = {
     meta: JSONObject;
     name: string;
     scope: {};
+    /**
+     * Optional type identifier for special node types (e.g., 'user-symbol' for Builder.io user symbols).
+     * Used to explicitly identify node types without relying on name patterns.
+     */
+    type?: 'user-symbol';
     /**
      * Key-value store of string values for DOM attributes.
      * ```js

package/package.json

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