@builder.io/mitosis 0.5.26 → 0.5.28

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

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToAngular = exports.blockToAngular = void 0;
+exports.componentToAngular = void 0;
 const html_tags_1 = require("../../constants/html_tags");
 const bindings_1 = require("../../helpers/bindings");
 const dedent_1 = require("../../helpers/dedent");
@@ -46,7 +46,6 @@ const is_upper_case_1 = require("../../helpers/is-upper-case");
 const map_refs_1 = require("../../helpers/map-refs");
 const merge_options_1 = require("../../helpers/merge-options");
 const process_code_1 = require("../../helpers/plugins/process-code");
-const remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
 const render_imports_1 = require("../../helpers/render-imports");
 const replace_identifiers_1 = require("../../helpers/replace-identifiers");
 const slots_1 = require("../../helpers/slots");
@@ -56,8 +55,6 @@ const collect_css_1 = require("../../helpers/styles/collect-css");
 const helpers_1 = require("../../helpers/styles/helpers");
 const traverse_nodes_1 = require("../../helpers/traverse-nodes");
 const plugins_1 = require("../../modules/plugins");
-const symbol_processor_1 = require("../../symbols/symbol-processor");
-const mitosis_node_1 = require("../../types/mitosis-node");
 const babel = __importStar(require("@babel/core"));
 const function_1 = require("fp-ts/lib/function");
 const lodash_1 = require("lodash");
@@ -67,36 +64,12 @@ const is_children_1 = __importDefault(require("../../helpers/is-children"));
 const on_mount_1 = require("../helpers/on-mount");
 const helpers_2 = require("./helpers");
 const types_1 = require("./types");
+const dash_case_1 = require("../../helpers/dash-case");
 const event_handlers_1 = require("../../helpers/event-handlers");
-const parse_selector_1 = require("./parse-selector");
+const hooks_1 = require("../../generators/angular/helpers/hooks");
+const attribute_passing_1 = require("../../helpers/web-components/attribute-passing");
+const blocks_1 = require("./blocks");
 const { types } = babel;
-const mappers = {
-    Fragment: (root, json, options, blockOptions) => {
-        return `<ng-container>${json.children
-            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
-            .join('\n')}</ng-container>`;
-    },
-    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') {
-                const selector = (0, function_1.pipe)((0, lodash_1.isString)(value) ? value : value.code, slots_1.stripSlotPrefix, lodash_1.kebabCase);
-                return `select="[${selector}]"`;
-            }
-        })
-            .join('\n')}>${Object.entries(json.bindings)
-            .map(([binding, value]) => {
-            if (value && binding !== 'name') {
-                return value.code;
-            }
-        })
-            .join('\n')}${renderChildren()}</ng-content>`;
-    },
-};
 const preprocessCssAsJson = (json) => {
     (0, legacy_1.default)(json).forEach((item) => {
         var _a, _b;
@@ -123,375 +96,13 @@ ${content}
 })
 export class ${name}Module {}`;
 };
-// TODO: Maybe in the future allow defining `string | function` as values
-const BINDINGS_MAPPER = {
-    innerHTML: 'innerHTML',
-    style: 'ngStyle',
-};
-const handleObjectBindings = (code) => {
-    let objectCode = code.replace(/^{/, '').replace(/}$/, '');
-    objectCode = objectCode.replace(/\/\/.*\n/g, '');
-    let temp = objectCode;
-    //STEP 1. remove spread operator for expressions like '{ ...objectName }' and replace them with object name, example {...obj} => obj
-    temp = temp.replace(/\{\s*\.\.\.(\w+)\s*}/g, '$1');
-    //STEP 2. remove all remaining spread operators that could be nested somewhere deeper, example { ...obj, field1: value1 } => { obj, field1: value1 }
-    temp = temp.replace(/\.\.\./g, '');
-    //STEP 3. deal with consequences of STEP 2 - for all left field assignments we create new objects provided to useObjectWrapper,
-    //and we get rid of surrounding brackets of the initial input value, example {...obj1,test:true,...obj2} => obj1, {test: true}, obj2
-    temp = temp.replace(/(\s*\w+\s*:\s*((["'].+["'])|(\[.+])|([\w.]+)))(,|[\n\s]*)/g, `{ $1 },`);
-    // handle template strings
-    if (temp.includes('`')) {
-        // template str
-        let str = temp.match(/`[^`]*`/g);
-        let values = str && str[0].match(/\${[^}]*}/g);
-        let forValues = values === null || values === void 0 ? void 0 : values.map((val) => val.slice(2, -1)).join(' + ');
-        if (str && forValues) {
-            temp = temp.replace(str[0], forValues);
-        }
-    }
-    return temp;
-};
-const processCodeBlockInTemplate = (code) => {
-    // contains helper calls as Angular doesn't support JS expressions in templates
-    if (code.startsWith('{') && code.includes('...')) {
-        // Objects cannot be spread out directly in Angular so we need to use `useObjectWrapper`
-        return `useObjectWrapper(${handleObjectBindings(code)})`;
-    }
-    else if (code.startsWith('Object.values')) {
-        let stripped = code.replace('Object.values', '');
-        return `useObjectDotValues${stripped}`;
-    }
-    else if (code.includes('JSON.stringify')) {
-        let obj = code.match(/JSON.stringify\((.*)\)/);
-        return `useJsonStringify(${obj})`;
-    }
-    else if (code.includes(' as ')) {
-        const asIndex = code.indexOf('as');
-        const asCode = code.slice(0, asIndex - 1);
-        return `$any${asCode})`;
-    }
-    else {
-        return `${code}`;
-    }
-};
-const processEventBinding = (key, code, nodeName, customArg) => {
-    let event = key.replace('on', '');
-    event = event.charAt(0).toLowerCase() + event.slice(1);
-    // TODO: proper babel transform to replace. Util for this
-    const eventName = customArg;
-    const regexp = new RegExp('(^|\\n|\\r| |;|\\(|\\[|!)' + eventName + '(\\?\\.|\\.|\\(| |;|\\)|$)', 'g');
-    const replacer = '$1$event$2';
-    const finalValue = (0, remove_surrounding_block_1.removeSurroundingBlock)(code.replace(regexp, replacer));
-    return {
-        event,
-        value: finalValue,
-    };
-};
-const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
-    var _a, _b;
-    if (key.startsWith('$') || key.startsWith('"') || key === 'key') {
-        return;
-    }
-    if ((binding === null || binding === void 0 ? void 0 : binding.type) === 'spread') {
-        return;
-    }
-    const keyToUse = BINDINGS_MAPPER[key] || key;
-    const { code, arguments: cusArgs = ['event'] } = binding;
-    // TODO: proper babel transform to replace. Util for this
-    if ((0, event_handlers_1.checkIsEvent)(keyToUse)) {
-        const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-        // native events are all lowerCased
-        const lowerCaseEvent = event.toLowerCase();
-        const eventKey = (0, event_handlers_1.checkIsBindingNativeEvent)(event) ||
-            ((_a = blockOptions.nativeEvents) === null || _a === void 0 ? void 0 : _a.find((nativeEvent) => nativeEvent === keyToUse || nativeEvent === event || nativeEvent === lowerCaseEvent))
-            ? lowerCaseEvent
-            : event;
-        return ` (${eventKey})="${value}"`;
-    }
-    else if (keyToUse === 'class') {
-        return ` [class]="${code}" `;
-    }
-    else if (keyToUse === 'ref' || keyToUse === 'spreadRef') {
-        return ` #${code} `;
-    }
-    else if ((html_tags_1.VALID_HTML_TAGS.includes(node.name.trim()) || keyToUse.includes('-')) &&
-        !((_b = blockOptions.nativeAttributes) === null || _b === void 0 ? void 0 : _b.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}" `;
-    }
-    else {
-        const codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-        return `[${keyToUse}]="${codeToUse}"`;
-    }
-};
-const handleNgOutletBindings = (node, options) => {
-    var _a;
-    let allProps = '';
-    for (const key in node.properties) {
-        if (key.startsWith('$')) {
-            continue;
-        }
-        if (key === 'key') {
-            continue;
-        }
-        const value = node.properties[key];
-        allProps += `${key}: '${value}', `;
-    }
-    for (const key in node.bindings) {
-        if (key.startsWith('"')) {
-            continue;
-        }
-        if (key.startsWith('$')) {
-            continue;
-        }
-        let { code, arguments: cusArgs = ['event'] } = node.bindings[key];
-        if (options.state === 'class-properties') {
-            code = `this.${code}`;
-            if (((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.type) === 'spread') {
-                allProps += `...${code}, `;
-                continue;
-            }
-        }
-        let keyToUse = key.includes('-') ? `'${key}'` : key;
-        keyToUse = keyToUse.replace('state.', '').replace('props.', '');
-        if ((0, event_handlers_1.checkIsEvent)(key)) {
-            const { event, value } = processEventBinding(key, code, node.name, cusArgs[0]);
-            allProps += `on${event.charAt(0).toUpperCase() + event.slice(1)}: ${value.replace(/\(.*?\)/g, '')}.bind(this), `;
-        }
-        else {
-            const codeToUse = options.state === 'inline-with-wrappers' ? processCodeBlockInTemplate(code) : code;
-            allProps += `${keyToUse}: ${codeToUse}, `;
-        }
-    }
-    if (allProps.endsWith(', ')) {
-        allProps = allProps.slice(0, -2);
-    }
-    if (allProps.startsWith(', ')) {
-        allProps = allProps.slice(2);
-    }
-    return allProps;
-};
-const blockToAngular = ({ root, json, options = {}, blockOptions = {
-    nativeAttributes: [],
-    nativeEvents: [],
-}, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const childComponents = (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.childComponents) || [];
-    if (mappers[json.name]) {
-        return mappers[json.name](root, json, options, blockOptions);
-    }
-    if ((0, is_children_1.default)({ node: json })) {
-        return `<ng-content></ng-content>`;
-    }
-    if (json.properties._text) {
-        return json.properties._text;
-    }
-    const textCode = (_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
-    if (textCode) {
-        if ((0, slots_1.isSlotProperty)(textCode)) {
-            return `<ng-content select="[${(0, slots_1.toKebabSlot)(textCode)}]"></ng-content>`;
-        }
-        if (textCode.includes('JSON.stringify')) {
-            const obj = textCode.replace(/JSON.stringify\(\s*(\w+)\s*,?.*\)/, '$1');
-            return `{{${obj} | json}}`;
-        }
-        return `{{${textCode}}}`;
-    }
-    let str = '';
-    if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        const indexName = json.scope.indexName;
-        const forName = json.scope.forName;
-        // Check if "key" is present for the first child of the for loop
-        if ((0, helpers_2.hasFirstChildKeyAttribute)(json)) {
-            const fnIndex = ((_b = root.meta) === null || _b === void 0 ? void 0 : _b._trackByForIndex) || 0;
-            const trackByFnName = `trackBy${forName ? forName.charAt(0).toUpperCase() + forName.slice(1) : ''}${fnIndex}`;
-            root.meta._trackByForIndex = fnIndex + 1;
-            let code = (_c = json.children[0].bindings.key) === null || _c === void 0 ? void 0 : _c.code;
-            root.state[trackByFnName] = {
-                code: `${trackByFnName}(${indexName !== null && indexName !== void 0 ? indexName : '_'}, ${forName}) { return ${code}; }`,
-                type: 'method',
-            };
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}${indexName ? `; index as ${indexName}` : ''}; trackBy: ${trackByFnName}">`;
-        }
-        else {
-            str += `<ng-container *ngFor="let ${forName !== null && forName !== void 0 ? forName : '_'} of ${(_e = json.bindings.each) === null || _e === void 0 ? void 0 : _e.code}${indexName ? `; index as ${indexName}` : ''}">`;
-        }
-        str += json.children
-            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
-            .join('\n');
-        str += `</ng-container>`;
-    }
-    else if (json.name === 'Show') {
-        let condition = (_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code;
-        if (options.state === 'inline-with-wrappers' && (condition === null || condition === void 0 ? void 0 : condition.includes('typeof'))) {
-            let wordAfterTypeof = condition.split('typeof')[1].trim().split(' ')[0];
-            condition = condition.replace(`typeof ${wordAfterTypeof}`, `useTypeOf(${wordAfterTypeof})`);
-        }
-        str += `<ng-container *ngIf="${condition}">`;
-        str += json.children
-            .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
-            .join('\n');
-        str += `</ng-container>`;
-        // else condition
-        if ((0, is_mitosis_node_1.isMitosisNode)((_g = json.meta) === null || _g === void 0 ? void 0 : _g.else)) {
-            str += `<ng-container *ngIf="!(${condition})">`;
-            str += (0, exports.blockToAngular)({ root, json: json.meta.else, options, blockOptions });
-            str += `</ng-container>`;
-        }
-    }
-    else if (json.name.includes('.')) {
-        const elSelector = childComponents.find((impName) => impName === json.name)
-            ? (0, lodash_1.kebabCase)(json.name)
-            : json.name;
-        let allProps = handleNgOutletBindings(json, options);
-        if (options.state === 'class-properties') {
-            const inputsPropsStateName = `mergedInputs_${(0, symbol_processor_1.hashCodeAsString)(allProps)}`;
-            root.state[inputsPropsStateName] = {
-                code: '{}' + (options.typescript ? ' as any' : ''),
-                type: 'property',
-            };
-            if (!((_h = root.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code.includes(inputsPropsStateName))) {
-                (0, helpers_2.addCodeToOnInit)(root, `this.${inputsPropsStateName} = {${allProps}};`);
-            }
-            if (!((_j = root.hooks.onUpdate) === null || _j === void 0 ? void 0 : _j.map((hook) => hook.code).join('').includes(inputsPropsStateName))) {
-                (0, helpers_2.addCodeToOnUpdate)(root, `this.${inputsPropsStateName} = {${allProps}};`);
-            }
-            allProps = `${inputsPropsStateName}`;
-        }
-        else {
-            allProps = `{ ${allProps} }`;
-        }
-        str += `<ng-container *ngComponentOutlet="
-      ${elSelector.replace('state.', '').replace('props.', '')};
-      inputs: ${allProps};
-      content: myContent;
-      ">  `;
-        str += `</ng-container>`;
-    }
-    else {
-        let element, classNames = [], attributes;
-        const isComponent = childComponents.find((impName) => impName === json.name);
-        if (isComponent) {
-            const selector = json.meta.selector || (blockOptions === null || blockOptions === void 0 ? void 0 : blockOptions.selector);
-            if (selector) {
-                try {
-                    ({ element, classNames, attributes } = (0, parse_selector_1.parse)(`${selector}`));
-                }
-                catch (_r) {
-                    element = (0, lodash_1.kebabCase)(json.name);
-                }
-            }
-            else {
-                element = (0, lodash_1.kebabCase)(json.name);
-            }
-        }
-        else {
-            element = json.name;
-        }
-        str += `<${element} `;
-        // TODO: merge with existing classes/bindings
-        if (classNames.length) {
-            str += `class="${classNames.join(' ')}" `;
-        }
-        // TODO: Merge with existing properties
-        if (attributes) {
-            Object.entries(attributes).forEach(([key, value]) => {
-                if (value) {
-                    str += `${key}=${JSON.stringify(value)} `;
-                }
-                else {
-                    str += `${key} `;
-                }
-            });
-        }
-        for (const key in json.properties) {
-            if (key.startsWith('$')) {
-                continue;
-            }
-            const value = json.properties[key];
-            str += ` ${key}="${value}" `;
-        }
-        for (const key in json.bindings) {
-            if (((_k = json.bindings[key]) === null || _k === void 0 ? void 0 : _k.type) === 'spread' && html_tags_1.VALID_HTML_TAGS.includes(json.name.trim())) {
-                if (((_l = json.bindings[key]) === null || _l === void 0 ? void 0 : _l.code) === 'this') {
-                    // if its an arbitrary { ...props } spread then we skip because Angular needs a named prop to be defined
-                    continue;
-                }
-                let refName = '';
-                if ((_m = json.bindings['spreadRef']) === null || _m === void 0 ? void 0 : _m.code) {
-                    refName = json.bindings['spreadRef'].code;
-                }
-                else {
-                    const spreadRefIndex = root.meta._spreadRefIndex || 0;
-                    refName = `elRef${spreadRefIndex}`;
-                    root.meta._spreadRefIndex = spreadRefIndex + 1;
-                    json.bindings['spreadRef'] = (0, bindings_1.createSingleBinding)({ code: refName });
-                    root.refs[refName] = { argument: '' };
-                }
-                json.bindings['spreadRef'] = (0, bindings_1.createSingleBinding)({ code: refName });
-                root.refs[refName] = { argument: '' };
-                root.meta.onViewInit = (root.meta.onViewInit || { code: '' });
-                let spreadCode = '';
-                let changesCode = '';
-                if ((_o = json.bindings[key]) === null || _o === void 0 ? void 0 : _o.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} = ${(_p = json.bindings[key]) === null || _p === void 0 ? void 0 : _p.code};`);
-                    spreadCode = `this.${name}`;
-                    changesCode = `changes['${spreadCode.replace('this.', '')}']?.currentValue`;
-                }
-                else {
-                    spreadCode = `${(_q = json.bindings[key]) === null || _q === void 0 ? void 0 : _q.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('');
-        str += stringifiedBindings;
-        if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
-            return str + ' />';
-        }
-        str += '>';
-        if (json.children) {
-            str += json.children
-                .map((item) => (0, exports.blockToAngular)({ root, json: item, options, blockOptions }))
-                .join('\n');
-        }
-        str += `</${element}>`;
-    }
-    return str;
-};
-exports.blockToAngular = blockToAngular;
 const traverseToGetAllDynamicComponents = (json, options, blockOptions) => {
     const components = new Set();
     let dynamicTemplate = '';
     (0, legacy_1.default)(json).forEach((item) => {
         if ((0, is_mitosis_node_1.isMitosisNode)(item) && item.name.includes('.') && item.name.split('.').length === 2) {
             const children = item.children
-                .map((child) => (0, exports.blockToAngular)({ root: json, json: child, options, blockOptions }))
+                .map((child) => (0, blocks_1.blockToAngular)({ root: json, json: child, options, blockOptions }))
                 .join('\n');
             dynamicTemplate = `<ng-template #${item.name.split('.')[1].toLowerCase() + 'Template'}>${children}</ng-template>`;
             components.add(item.name);
@@ -579,7 +190,7 @@ 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' && !(0, event_handlers_1.checkIsEvent)(key)) {
                 json.state[newBindingName] = { code: 'null', type: 'property' };
-                (0, helpers_2.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
+                (0, hooks_1.makeReactiveState)(json, newBindingName, `this.${newBindingName} = ${item.bindings[key].code}`);
                 item.bindings[key].code = `state.${newBindingName}`;
             }
             else if ((0, event_handlers_1.checkIsEvent)(key)) {
@@ -594,7 +205,7 @@ const handleBindings = (json, item, index, forName, indexName) => {
                 }
             }
             else {
-                (0, helpers_2.makeReactiveState)(json, newBindingName, `state.${newBindingName} = {...(${item.bindings[key].code})}`);
+                (0, hooks_1.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];
@@ -759,6 +370,17 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     });
     const domRefs = (0, get_refs_1.getRefs)(json);
     const jsRefs = Object.keys(json.refs).filter((ref) => !domRefs.has(ref));
+    const withAttributePassing = (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
+    const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
+    if (withAttributePassing) {
+        if (!domRefs.has(rootRef)) {
+            domRefs.add(rootRef);
+        }
+        (0, hooks_1.addCodeNgAfterViewInit)(json, `
+        const element: HTMLElement | null = this.${rootRef}?.nativeElement;
+        this.enableAttributePassing(element, "${(0, dash_case_1.dashCase)(json.name)}");
+        `);
+    }
     const componentsUsed = Array.from((0, get_components_used_1.getComponentsUsed)(json)).filter((item) => {
         return item.length && (0, is_upper_case_1.isUpperCase)(item[0]) && !types_1.BUILT_IN_COMPONENTS.has(item);
     });
@@ -778,10 +400,11 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     let template = json.children
         .map((item) => {
         var _a, _b, _c, _d;
-        const tmpl = (0, exports.blockToAngular)({
+        const tmpl = (0, blocks_1.blockToAngular)({
             root: json,
             json: item,
             options,
+            rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
             blockOptions: {
                 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 : [],
@@ -950,6 +573,9 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
             ? `\nprivate renderer${options.typescript ? ': Renderer2' : ''},\n`
             : ''}) {}
           `}
+      
+      ${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)
         ? ''
         : `ngOnInit() {

package/dist/src/generators/stencil/blocks.d.ts

@@ -1,3 +1,9 @@
 import { ToStencilOptions } from '../../generators/stencil/types';
 import { MitosisNode } from '../../types/mitosis-node';
-export declare const blockToStencil: (json: MitosisNode, options: ToStencilOptions | undefined, insideJsx: boolean, childComponents: string[]) => string;
+export declare const blockToStencil: ({ json, options, insideJsx, rootRef, childComponents, }: {
+    json: MitosisNode;
+    options: ToStencilOptions;
+    insideJsx?: boolean | undefined;
+    rootRef?: string | undefined;
+    childComponents: string[];
+}) => string;

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

@@ -7,7 +7,7 @@ const collect_class_string_1 = require("../../generators/stencil/helpers/collect
 const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 const for_1 = require("../../helpers/nodes/for");
 const mitosis_node_1 = require("../../types/mitosis-node");
-const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
+const blockToStencil = ({ json, options = {}, insideJsx, rootRef, childComponents, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     let blockName = childComponents.find((impName) => impName === json.name)
         ? (0, helpers_1.getTagName)(json.name, options)
@@ -33,7 +33,7 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
       ${wrap ? '<Fragment>' : ''}
       ${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((item) => (0, exports.blockToStencil)(item, options, wrap, childComponents))
+            .map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
             .join('\n')}
       ${wrap ? '</Fragment>' : ''}
     ))`;
@@ -50,12 +50,16 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
       ${wrap ? '<Fragment>' : ''}
       ${json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((item) => (0, exports.blockToStencil)(item, options, wrap, childComponents))
+            .map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
             .join('\n')}
       ${wrap ? '</Fragment>' : ''}
     ) : ${!json.meta.else
             ? 'null'
-            : `(${(0, exports.blockToStencil)(json.meta.else, options, false, childComponents)})`}`;
+            : `(${(0, exports.blockToStencil)({
+                json: json.meta.else,
+                options,
+                childComponents,
+            })})`}`;
         if (insideJsx) {
             return `{${expression}}`;
         }
@@ -82,8 +86,10 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
             str += ` {...(${code})} `;
         }
         else if (key === 'ref') {
-            // TODO: Add correct type here
-            str += ` ref={(el) => ${code.startsWith('this.') ? code : `this.${code}`} = el} `;
+            str += ` ref={(el:any) => {
+        ${rootRef ? `this.${rootRef} = el` : ''}
+        ${code.startsWith('this.') ? code : `this.${code}`} = el}
+      } `;
         }
         else if ((0, helpers_1.isEvent)(key)) {
             const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
@@ -99,7 +105,12 @@ const blockToStencil = (json, options = {}, insideJsx, childComponents) => {
     str += '>';
     if (json.children) {
         str += json.children
-            .map((item) => (0, exports.blockToStencil)(item, options, true, childComponents))
+            .map((item) => (0, exports.blockToStencil)({
+            json: item,
+            options,
+            insideJsx: true,
+            childComponents,
+        }))
             .join('\n');
     }
     str += `</${blockName}>`;

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

@@ -5,6 +5,7 @@ const on_mount_1 = require("../../generators/helpers/on-mount");
 const blocks_1 = require("../../generators/stencil/blocks");
 const helpers_1 = require("../../generators/stencil/helpers");
 const get_code_processor_plugins_1 = require("../../generators/stencil/plugins/get-code-processor-plugins");
+const dash_case_1 = require("../../helpers/dash-case");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
 const get_child_components_1 = require("../../helpers/get-child-components");
@@ -15,6 +16,7 @@ const map_refs_1 = require("../../helpers/map-refs");
 const merge_options_1 = require("../../helpers/merge-options");
 const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
 const collect_css_1 = require("../../helpers/styles/collect-css");
+const attribute_passing_1 = require("../../helpers/web-components/attribute-passing");
 const plugins_1 = require("../../modules/plugins");
 const standalone_1 = require("prettier/standalone");
 const componentToStencil = (_options = {
@@ -55,15 +57,17 @@ const componentToStencil = (_options = {
         functions: true,
         getters: true,
     });
-    const refs = json.refs
+    let refs = json.refs
         ? Object.entries(json.refs)
-            .map(([key, value]) => {
-            var _a;
-            return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'}`;
-        })
+            .map(([key, value]) => { var _a; return `private ${key}!: ${(_a = value.typeParameter) !== null && _a !== void 0 ? _a : 'HTMLElement'};`; })
             .join('\n')
         : '';
     const wrap = (0, helpers_1.needsWrap)(json.children);
+    const withAttributePassing = !wrap && (0, attribute_passing_1.shouldAddAttributePassing)(json, options);
+    const rootRef = (0, attribute_passing_1.getAddAttributePassingRef)(json, options);
+    if (withAttributePassing && !refs.includes(rootRef)) {
+        refs += `\nprivate ${rootRef}!: HTMLElement;`;
+    }
     if (options.prettier !== false) {
         try {
             css = (0, standalone_1.format)(css, {
@@ -101,10 +105,15 @@ const componentToStencil = (_options = {
         ${(0, helpers_1.getPropsAsCode)(props, defaultProps, json.propsTypeRef)}
         ${dataString}
         ${methodsString}
+        
+        ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
 
-        ${!json.hooks.onMount.length
-        ? ''
-        : `componentDidLoad() { ${(0, on_mount_1.stringifySingleScopeOnMount)(json)} }`}
+        ${`componentDidLoad() { 
+            ${withAttributePassing
+        ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
+        : ''}
+            ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
+            }`}
         ${!((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
         ? ''
         : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
@@ -116,7 +125,13 @@ const componentToStencil = (_options = {
         return (${wrap ? '<Host>' : ''}
 
           ${json.children
-        .map((item) => (0, blocks_1.blockToStencil)(item, options, true, childComponents))
+        .map((item) => (0, blocks_1.blockToStencil)({
+        json: item,
+        options,
+        insideJsx: true,
+        childComponents,
+        rootRef: withAttributePassing && rootRef === attribute_passing_1.ROOT_REF ? rootRef : undefined, // only pass rootRef if it's not the default
+    }))
         .join('\n')}
 
         ${wrap ? '</Host>' : ''})

package/dist/src/helpers/web-components/attribute-passing.d.ts

@@ -0,0 +1,6 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export declare const ROOT_REF = "_root";
+export declare const getAttributePassingString: (typescript?: boolean) => string;
+export declare const shouldAddAttributePassing: (json: MitosisComponent, options: BaseTranspilerOptions) => boolean | undefined;
+export declare const getAddAttributePassingRef: (json: MitosisComponent, options: BaseTranspilerOptions) => string;