@builder.io/mitosis 0.4.2 → 0.4.4

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

@@ -1,4 +1,28 @@
+import { type MitosisComponent } from '../../types/mitosis-component';
 export declare const HELPER_FUNCTIONS: (isTs?: boolean) => {
     [key: string]: string;
 };
 export declare const getAppropriateTemplateFunctionKeys: (code: string) => string[];
+/**
+ * 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.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
     let obj = {}
@@ -18,7 +18,68 @@ const HELPER_FUNCTIONS = (isTs) => ({
     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;
+/**
+ * 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/index.js

@@ -41,13 +41,16 @@ const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
 const mappers = {
-    Fragment: (root, json, options) => {
+    Fragment: (root, json, options, blockOptions) => {
         return `<ng-container>${json.children
-            .map((item) => (0, exports.blockToAngular)({ root, json: item, options }))
+            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
             .join('\n')}</ng-container>`;
     },
-    Slot: (root, json, options) => {
-        const renderChildren = () => { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToAngular)({ root, json: item, options })).join('\n'); };
+    Slot: (root, json, options, blockOptions) => {
+        const renderChildren = () => {
+            var _a;
+            return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions })).join('\n');
+        };
         return `<ng-content ${Object.entries({ ...json.bindings, ...json.properties })
             .map(([binding, value]) => {
             if (value && binding === 'name') {
@@ -158,10 +161,11 @@ const processEventBinding = (key, code, nodeName, customArg) => {
     };
 };
 const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
-    if (options.state === 'inline-with-wrappers' && (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
+    var _a;
+    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
         return;
     }
-    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
+    if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
         return;
     }
     const keyToUse = BINDINGS_MAPPER[key] || key;
@@ -174,11 +178,11 @@ const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
     else if (keyToUse === 'class') {
         return ` [class]="${code}" `;
     }
-    else if (keyToUse === 'ref') {
+    else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
         return ` #${code} `;
     }
     else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-        !blockOptions.nativeAttributes.includes(keyToUse) &&
+        !((_a = blockOptions.nativeAttributes) === null || _a === void 0 ? void 0 : _a.includes(keyToUse)) &&
         !Object.values(BINDINGS_MAPPER).includes(keyToUse)) {
         // standard html elements need the attr to satisfy the compiler in many cases: eg: svg elements and [fill]
         return ` [attr.${keyToUse}]="${code}" `;
@@ -238,10 +242,10 @@ const handleNgOutletBindings = (node, options) => {
 const blockToAngular = ({ root, json, options = {}, blockOptions = {
     nativeAttributes: [],
 }, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
     if (mappers[json.name]) {
-        return mappers[json.name](root, json, options);
+        return mappers[json.name](root, json, options, blockOptions);
     }
     if ((0, is_children_1.default)({ node: json })) {
         return `<ng-content></ng-content>`;
@@ -314,18 +318,10 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
                 type: 'property',
             };
             if (!((_j = root.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code.includes(inputsPropsStateName))) {
-                if (!root.hooks.onInit) {
-                    root.hooks.onInit = { code: '' };
-                }
-                root.hooks.onInit.code += `\nthis.${inputsPropsStateName} = {${allProps}};\n`;
+                (0, helpers_2.addCodeToOnInit)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
             if (!((_k = root.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
-                if (!root.hooks.onUpdate) {
-                    root.hooks.onUpdate = [];
-                }
-                root.hooks.onUpdate.push({
-                    code: `this.${inputsPropsStateName} = {${allProps}}`,
-                });
+                (0, helpers_2.addCodeToOnUpdate)(root, `this.${inputsPropsStateName} = {${allProps}};`);
             }
             allProps = `${inputsPropsStateName}`;
         }
@@ -344,12 +340,6 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             ? (0, lodash_1.kebabCase)(json.name)
             : json.name;
         str += `<${elSelector} `;
-        // TODO: spread support for angular
-        // if (json.bindings._spread) {
-        //   str += `v-bind="${stripStateAndPropsRefs(
-        //     json.bindings._spread as string,
-        //   )}"`;
-        // }
         for (const key in json.properties) {
             if (key.startsWith('$')) {
                 continue;
@@ -357,6 +347,61 @@ const blockToAngular = ({ root, json, options = {}, blockOptions = {
             const value = json.properties[key];
             str += ` ${key}="${value}" `;
         }
+        for (const key in json.bindings) {
+            if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
+                if (((_m = json.bindings[key]) === null || _m === void 0 ? void 0 : _m.code) === 'this') {
+                    // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
+                    continue;
+                }
+                let refName = '';
+                if ((_o = json.bindings['spreadRef']) === null || _o === void 0 ? void 0 : _o.code) {
+                    refName = json.bindings['spreadRef'].code;
+                }
+                else {
+                    const spreadRefIndex = root.meta._spreadRefIndex || 0;
+                    refName = `elRef${spreadRefIndex}`;
+                    root.meta._spreadRefIndex = spreadRefIndex + 1;
+                    json.bindings['spreadRef'] = { code: refName, type: 'single' };
+                    root.refs[refName] = { argument: '' };
+                }
+                json.bindings['spreadRef'] = { code: refName, type: 'single' };
+                root.refs[refName] = { argument: '' };
+                root.meta.onViewInit = (root.meta.onViewInit || { code: '' });
+                let spreadCode = '';
+                let changesCode = '';
+                if ((_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code.startsWith('{')) {
+                    json.meta._spreadStateRef = json.meta._spreadStateRef || 0;
+                    const name = `${refName}_state_${json.meta._spreadStateRef}`;
+                    json.meta._spreadStateRef = json.meta._spreadStateRef + 1;
+                    (0, helpers_2.makeReactiveState)(root, name, `this.${name} = ${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.code};`);
+                    spreadCode = `this.${name}`;
+                    changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
+                }
+                else {
+                    spreadCode = `${(_r = json.bindings[key]) === null || _r === void 0 ? void 0 : _r.code}`;
+                    changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
+                }
+                if (!root.compileContext) {
+                    root.compileContext = {
+                        angular: {
+                            hooks: {
+                                ngAfterViewInit: {
+                                    code: '',
+                                },
+                            },
+                        },
+                    };
+                }
+                root.compileContext.angular.hooks.ngAfterViewInit.code += `\nthis.setAttributes(this.${refName}?.nativeElement, ${spreadCode});`;
+                (0, helpers_2.addCodeToOnUpdate)(root, `this.setAttributes(this.${refName}?.nativeElement, ${spreadCode}${changesCode ? `, ${changesCode}` : ''});`);
+                if (!root.state['setAttributes']) {
+                    root.state['setAttributes'] = {
+                        code: (0, helpers_2.HELPER_FUNCTIONS)(options === null || options === void 0 ? void 0 : options.typescript).setAttributes,
+                        type: 'method',
+                    };
+                }
+            }
+        }
         const stringifiedBindings = Object.entries(json.bindings)
             .map(stringifyBinding(json, options, blockOptions))
             .join('');
@@ -405,7 +450,7 @@ const isASimpleProperty = (code) => {
 };
 const generateNewBindingName = (index, name) => `node_${index}_${name.replaceAll('.', '_').replaceAll('-', '_')}`;
 const handleBindings = (json, item, index, forName, indexName) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     for (const key in item.bindings) {
         if (key.startsWith('"') ||
             key.startsWith('$') ||
@@ -450,20 +495,13 @@ const handleBindings = (json, item, index, forName, indexName) => {
         else if ((_c = item.bindings[key]) === null || _c === void 0 ? void 0 : _c.code) {
             if (((_d = item.bindings[key]) === null || _d === void 0 ? void 0 : _d.type) !== 'spread' && !key.startsWith('on')) {
                 json.state[newBindingName] = { code: 'null', type: 'property' };
-                if (!((_e = json.hooks['onInit']) === null || _e === void 0 ? void 0 : _e.code)) {
-                    json.hooks['onInit'] = { code: '' };
-                }
-                json.hooks['onInit'].code += `\nstate.${newBindingName} = ${item.bindings[key].code};\n`;
-                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
-                json.hooks['onUpdate'].push({
-                    code: `state.${newBindingName} = ${item.bindings[key].code}`,
-                });
+                (0, helpers_2.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
                 item.bindings[key].code = `state.${newBindingName}`;
             }
             else if (key.startsWith('on')) {
                 const { arguments: cusArgs = ['event'] } = item.bindings[key];
-                if (((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().startsWith('{')) &&
-                    ((_g = item.bindings[key]) === null || _g === void 0 ? void 0 : _g.code.trim().endsWith('}'))) {
+                if (((_e = item.bindings[key]) === null || _e === void 0 ? void 0 : _e.code.trim().startsWith('{')) &&
+                    ((_f = item.bindings[key]) === null || _f === void 0 ? void 0 : _f.code.trim().endsWith('}'))) {
                     json.state[newBindingName] = {
                         code: `(${cusArgs.join(', ')}) => ${item.bindings[key].code}`,
                         type: 'function',
@@ -472,15 +510,7 @@ const handleBindings = (json, item, index, forName, indexName) => {
                 }
             }
             else {
-                json.state[newBindingName] = { code: `null`, type: 'property' };
-                if (!((_h = json.hooks['onInit']) === null || _h === void 0 ? void 0 : _h.code)) {
-                    json.hooks['onInit'] = { code: '' };
-                }
-                json.hooks['onInit'].code += `\nstate.${newBindingName} = {...(${item.bindings[key].code})};\n`;
-                json.hooks['onUpdate'] = json.hooks['onUpdate'] || [];
-                json.hooks['onUpdate'].push({
-                    code: `state.${newBindingName} = {...(${item.bindings[key].code})}`,
-                });
+                (0, helpers_2.makeReactiveState)(json, newBindingName, `state.${newBindingName} = {...(${item.bindings[key].code})}`);
                 item.bindings[newBindingName] = item.bindings[key];
                 item.bindings[key].code = `state.${newBindingName}`;
                 delete item.bindings[key];
@@ -558,7 +588,7 @@ const transformState = (json) => {
     });
 };
 const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     // 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;
@@ -575,7 +605,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     });
     options.plugins = [
         ...(options.plugins || []),
-        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType, _, node) => {
             switch (codeType) {
                 case 'hooks':
                     return (0, function_1.flow)(processAngularCode({
@@ -595,11 +625,17 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
                         });
                     });
                 case 'bindings':
-                    return (code) => {
+                    return (code, key) => {
+                        var _a;
+                        // we create a separate state property for spread binding and use ref to attach the attributes
+                        // so we need to use `this.` inside the class to access state and props
+                        const isSpreadAttributeBinding = ((_a = node === null || node === void 0 ? void 0 : node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread' &&
+                            html_tags_1.VALID_HTML_TAGS.includes(node.name.trim());
                         const newLocal = processAngularCode({
                             contextVars: [],
                             outputVars,
                             domRefs: [], // the template doesn't need the this keyword.
+                            replaceWith: isSpreadAttributeBinding ? 'this' : undefined,
                         })(code);
                         return newLocal.replace(/"/g, '&quot;');
                     };
@@ -620,7 +656,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
     }
     const [forwardProp, hasPropRef] = (0, get_props_ref_1.getPropsRef)(json, true);
-    const childComponents = [];
+    const childComponents = [json.name]; // a component can be recursively used in itself
     const propsTypeRef = json.propsTypeRef !== 'any' ? json.propsTypeRef : undefined;
     json.imports.forEach(({ imports }) => {
         Object.keys(imports).forEach((key) => {
@@ -645,7 +681,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         }
         return `public ${variableName} : ${variableType}`;
     });
-    const hasConstructor = Boolean(injectables.length);
     const props = (0, get_props_1.getProps)(json);
     // prevent jsx props from showing up as @Input
     if (hasPropRef) {
@@ -718,15 +753,18 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             stateVars,
         }),
     });
+    const refsForObjSpread = (0, get_refs_1.getRefs)(json, 'spreadRef');
     const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
     const styles = css.length ? [hostDisplayCss, css].join('\n') : hostDisplayCss;
     // Preparing built in component metadata parameters
     const componentMetadata = {
-        selector: `'${(0, lodash_1.kebabCase)(json.name || 'my-component')}, ${json.name}'`,
+        selector: ((_e = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _e === void 0 ? void 0 : _e.selector)
+            ? `'${(_f = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _f === void 0 ? void 0 : _f.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, '\\${')}
-        \``,
+      ${(0, indent_1.indent)(dynamicTemplate, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+      ${(0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${')}
+      \``,
         ...(styles
             ? {
                 styles: `[\`${(0, indent_1.indent)(styles, 8)}\`]`,
@@ -758,14 +796,18 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             .join(',');
         return `const defaultProps = {${defalutPropsString}};\n`;
     };
+    const hasConstructor = Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
     const angularCoreImports = [
         ...(outputs.length ? ['Output', 'EventEmitter'] : []),
-        ...(((_e = options === null || options === void 0 ? void 0 : options.experimental) === null || _e === void 0 ? void 0 : _e.inject) ? ['Inject', 'forwardRef'] : []),
+        ...(((_g = options === null || options === void 0 ? void 0 : options.experimental) === null || _g === void 0 ? void 0 : _g.inject) ? ['Inject', 'forwardRef'] : []),
         'Component',
-        ...(domRefs.size || dynamicComponents.size ? ['ViewChild', 'ElementRef'] : []),
+        ...(domRefs.size || dynamicComponents.size || refsForObjSpread.size
+            ? ['ViewChild', 'ElementRef']
+            : []),
+        ...(refsForObjSpread.size ? ['Renderer2'] : []),
         ...(props.size ? ['Input'] : []),
         ...(dynamicComponents.size ? ['ViewContainerRef', 'TemplateRef'] : []),
-        ...(((_f = json.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.length) && options.typescript ? ['SimpleChanges'] : []),
+        ...(((_h = json.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.length) && options.typescript ? ['SimpleChanges'] : []),
     ].join(', ');
     let str = (0, dedent_1.dedent) `
     import { ${angularCoreImports} } from '@angular/core';
@@ -809,6 +851,10 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
       ${Array.from(domRefs)
         .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
         .join('\n')}
+
+      ${Array.from(refsForObjSpread)
+        .map((refName) => `@ViewChild('${refName}') ${refName}${options.typescript ? '!: ElementRef' : ''}`)
+        .join('\n')}
       
       ${Array.from(dynamicComponents)
         .map((component) => `@ViewChild('${component
@@ -819,6 +865,9 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         .join('\n')}
 
       ${dynamicComponents.size ? `myContent${options.typescript ? '?: any[][];' : ''}` : ''}
+      ${refsForObjSpread.size
+        ? `_listenerFns = new Map${options.typescript ? '<string, () => void>' : ''}()`
+        : ''}
 
       ${dataString}
 
@@ -840,19 +889,21 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     })
         .join('\n')}
 
-      ${!hasConstructor && !dynamicComponents.size
+      ${!hasConstructor
         ? ''
         : `constructor(\n${injectables.join(',\n')}${dynamicComponents.size
             ? `\nprivate vcRef${options.typescript ? ': ViewContainerRef' : ''},\n`
+            : ''}${refsForObjSpread.size
+            ? `\nprivate renderer${options.typescript ? ': Renderer2' : ''},\n`
             : ''}) {}
           `}
-      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
+      ${!json.hooks.onMount.length && !dynamicComponents.size && !((_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code)
         ? ''
         : `ngOnInit() {
-              ${!((_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit)
+              ${!((_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onInit)
             ? ''
             : `
-                    ${(_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code}
+                    ${(_l = json.hooks.onInit) === null || _l === void 0 ? void 0 : _l.code}
                     `}
               ${json.hooks.onMount.length > 0
             ? `
@@ -872,11 +923,21 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             : ''}
             }`}
 
-      ${!((_k = json.hooks.onUpdate) === null || _k === void 0 ? void 0 : _k.length)
+      ${
+    // hooks specific to Angular
+    ((_o = (_m = json.compileContext) === null || _m === void 0 ? void 0 : _m.angular) === null || _o === void 0 ? void 0 : _o.hooks)
+        ? Object.entries((_q = (_p = json.compileContext) === null || _p === void 0 ? void 0 : _p.angular) === null || _q === void 0 ? void 0 : _q.hooks).map(([key, value]) => {
+            return `${key}() {
+            ${value.code}
+          }`;
+        })
+        : ''}
+
+      ${!((_r = json.hooks.onUpdate) === null || _r === void 0 ? void 0 : _r.length)
         ? ''
         : `ngOnChanges(changes${options.typescript ? ': SimpleChanges' : ''}) {
               if (typeof window !== 'undefined') {
-                ${(_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.reduce((code, hook) => {
+                ${(_s = json.hooks.onUpdate) === null || _s === void 0 ? void 0 : _s.reduce((code, hook) => {
             code += hook.code;
             return code + '\n';
         }, '')}
@@ -884,10 +945,13 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             }
                 `}
 
-      ${!json.hooks.onUnMount
+      ${!json.hooks.onUnMount && !refsForObjSpread.size
         ? ''
         : `ngOnDestroy() {
-              ${json.hooks.onUnMount.code}
+              ${((_t = json.hooks.onUnMount) === null || _t === void 0 ? void 0 : _t.code) || ''}
+              ${refsForObjSpread.size
+            ? `for (const fn of this._listenerFns.values()) { fn(); }`
+            : ''}
             }`}
 
     }

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

@@ -12,5 +12,6 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
 export declare const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions;
 export interface AngularBlockOptions {
     childComponents?: string[];
-    nativeAttributes: string[];
+    nativeAttributes?: string[];
+    selector?: string;
 }

package/dist/src/generators/builder.js

@@ -33,7 +33,8 @@ const mapComponentName = (name) => {
     for (const prefix of builderBlockPrefixes) {
         if (name.startsWith(prefix)) {
             const suffix = name.replace(prefix, '');
-            if ((0, is_upper_case_1.isUpperCase)(suffix[0])) {
+            const restOfName = suffix[0];
+            if (restOfName && (0, is_upper_case_1.isUpperCase)(restOfName)) {
                 return `${prefix}:${name.replace(prefix, '')}`;
             }
         }
@@ -148,7 +149,7 @@ function tryFormat(code) {
     return str;
 }
 const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const mapper = !_internalOptions.skipMapper && componentMappers[json.name];
     if (mapper) {
         return mapper(json, options);
@@ -167,7 +168,8 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
             component: {
                 name: 'Text',
                 options: {
-                    text: json.properties._text,
+                    // Mitosis uses {} for bindings, but Builder expects {{}} so we need to convert
+                    text: (_c = json.properties._text) === null || _c === void 0 ? void 0 : _c.replace(/\{(.*?)\}/g, '{{$1}}'),
                 },
             },
         }, options);
@@ -177,10 +179,10 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
     const actions = {};
     for (const key in bindings) {
         const eventBindingKeyRegex = /^on([A-Z])/;
-        const firstCharMatchForEventBindingKey = (_c = key.match(eventBindingKeyRegex)) === null || _c === void 0 ? void 0 : _c[1];
+        const firstCharMatchForEventBindingKey = (_d = key.match(eventBindingKeyRegex)) === null || _d === void 0 ? void 0 : _d[1];
         if (firstCharMatchForEventBindingKey) {
             actions[key.replace(eventBindingKeyRegex, firstCharMatchForEventBindingKey.toLowerCase())] =
-                (0, remove_surrounding_block_1.removeSurroundingBlock)((_d = bindings[key]) === null || _d === void 0 ? void 0 : _d.code);
+                (0, remove_surrounding_block_1.removeSurroundingBlock)((_e = bindings[key]) === null || _e === void 0 ? void 0 : _e.code);
             delete bindings[key];
         }
     }
@@ -201,12 +203,12 @@ const blockToBuilder = (json, options = {}, _internalOptions = {}) => {
             }
         }
     }
-    const hasCss = !!((_e = bindings.css) === null || _e === void 0 ? void 0 : _e.code);
+    const hasCss = !!((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
     let responsiveStyles = {
         large: {},
     };
     if (hasCss) {
-        const cssRules = json5_1.default.parse((_f = bindings.css) === null || _f === void 0 ? void 0 : _f.code);
+        const cssRules = json5_1.default.parse((_g = bindings.css) === null || _g === void 0 ? void 0 : _g.code);
         const cssRuleKeys = Object.keys(cssRules);
         for (const ruleKey of cssRuleKeys) {
             const mediaQueryMatch = ruleKey.match(media_sizes_1.mediaQueryRegex);
@@ -284,6 +286,7 @@ const componentToBuilder = (options = {}) => ({ component }) => {
                 ${(0, on_mount_1.stringifySingleScopeOnMount)(component)}
               })`}
       `),
+            cssCode: component === null || component === void 0 ? void 0 : component.style,
             blocks: component.children
                 .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
                 .map((child) => (0, exports.blockToBuilder)(child, options)),

package/dist/src/generators/mitosis.js

@@ -171,6 +171,8 @@ const componentToMitosis = (toMitosisOptions = {}) => ({ component }) => {
 
       ${!((_a = json.hooks.onUnMount) === null || _a === void 0 ? void 0 : _a.code) ? '' : `onUnMount(() => { ${json.hooks.onUnMount.code} })`}
 
+      ${json.style ? `useStyle(\`${json.style}\`)` : ''}
+
       return (${addWrapper ? '<>' : ''}
         ${json.children.map((item) => (0, exports.blockToMitosis)(item, options, component)).join('\n')}
         ${addWrapper ? '</>' : ''})

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

@@ -1,2 +1,2 @@
 import { MitosisComponent } from '../types/mitosis-component';
-export declare const getRefs: (json: MitosisComponent) => Set<string>;
+export declare const getRefs: (json: MitosisComponent, refKey?: string) => Set<string>;

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getRefs = void 0;
 const legacy_1 = __importDefault(require("neotraverse/legacy"));
 const is_mitosis_node_1 = require("./is-mitosis-node");
-const getRefs = (json) => {
+const getRefs = (json, refKey = 'ref') => {
     const refs = new Set();
     (0, legacy_1.default)(json).forEach(function (item) {
-        var _a;
         if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
-            if (typeof ((_a = item.bindings.ref) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
-                refs.add(item.bindings.ref.code);
+            const binding = item.bindings[refKey];
+            if (binding && typeof binding.code === 'string') {
+                refs.add(binding.code);
             }
         }
     });

package/dist/src/helpers/is-upper-case.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isUpperCase = void 0;
-const isUpperCase = (str) => str.toUpperCase() === str;
+const isUpperCase = (str) => typeof str === 'string' && str.toUpperCase() === str;
 exports.isUpperCase = isUpperCase;

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

@@ -393,10 +393,11 @@ const componentMappers = {
             });
         }
         const text = block.component.options.text;
+        // Builder uses {{}} for bindings, but Mitosis expects {} so we need to convert
         const innerProperties = innerBindings._text
             ? {}
             : {
-                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text,
+                [options.preserveTextBlocks ? 'innerHTML' : '_text']: text.replace(/\{\{(.*?)\}\}/g, '{$1}'),
             };
         if (options.preserveTextBlocks) {
             return (0, create_mitosis_node_1.createMitosisNode)({
@@ -867,7 +868,7 @@ exports.createBuilderElement = createBuilderElement;
 const isBuilderElement = (el) => (el === null || el === void 0 ? void 0 : el['@type']) === '@builder.io/sdk:Element';
 exports.isBuilderElement = isBuilderElement;
 const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     builderContent = (0, fast_clone_1.fastClone)(builderContent);
     (0, legacy_1.default)(builderContent).forEach(function (elem) {
         var _a, _b;
@@ -910,9 +911,11 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
             useMetadata: {
                 httpRequests: (_d = builderContent.data) === null || _d === void 0 ? void 0 : _d.httpRequests,
             },
+            // cmp.meta.cssCode exists for backwards compatibility, prefer cmp.style
             ...(((_e = builderContent.data) === null || _e === void 0 ? void 0 : _e.cssCode) && { cssCode: builderContent.data.cssCode }),
         },
-        inputs: (_g = (_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.inputs) === null || _g === void 0 ? void 0 : _g.map((input) => ({
+        ...(((_f = builderContent.data) === null || _f === void 0 ? void 0 : _f.cssCode) && { style: (_g = builderContent.data) === null || _g === void 0 ? void 0 : _g.cssCode }),
+        inputs: (_j = (_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.inputs) === null || _j === void 0 ? void 0 : _j.map((input) => ({
             name: input.name,
             defaultValue: input.defaultValue,
         })),
@@ -926,7 +929,7 @@ const builderContentPartToMitosisComponent = (builderContent, options = {}) => {
                         : []),
             ],
         },
-        children: (((_h = builderContent.data) === null || _h === void 0 ? void 0 : _h.blocks) || [])
+        children: (((_k = builderContent.data) === null || _k === void 0 ? void 0 : _k.blocks) || [])
             .filter((item) => {
             var _a, _b;
             if ((_b = (_a = item.properties) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.includes('/api/v1/pixel')) {

package/dist/src/types/metadata.d.ts

@@ -10,7 +10,8 @@ export type ComponentMetadata = {
     httpRequests?: Record<string, string>;
     options?: TargetOptions;
     angular?: {
-        nativeAttributes: string[];
+        nativeAttributes?: string[];
+        selector?: string;
     };
     qwik?: {
         component?: {

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

@@ -136,4 +136,16 @@ export type MitosisComponent = {
     propsTypeRef?: string;
     defaultProps?: MitosisState;
     style?: string;
+    /**
+     * Used to store context of a component for a specific framework
+     * that we need access only during compilation (for internal use only) and gets removed after compilation.
+     */
+    compileContext?: {
+        [K in Target]?: {
+            state?: MitosisState;
+            hooks?: {
+                [hookName: string]: BaseHook;
+            };
+        };
+    };
 };

package/package.json

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