@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectCss = exports.normalizeName = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const object_hash_1 = __importDefault(require("object-hash"));
+const dash_case_1 = require("../dash-case");
+const is_mitosis_node_1 = require("../is-mitosis-node");
+const helpers_1 = require("./helpers");
+const trimClassStr = (classStr) => classStr.trim().replace(/\s{2,}/g, ' ');
+const updateClassForNode = (item, className) => {
+    if (item.bindings.class) {
+        // combine className with existing binding. We use single quotes because in Vue, bindings are wrapped in double quotes
+        // e.g. <div :class="_classStringToObject(this.className + ' div-21azgz5avex')" />
+        item.bindings.class.code = trimClassStr(`${item.bindings.class.code} + ' ${className}'`);
+    }
+    else {
+        item.properties.class = trimClassStr(`${item.properties.class || ''} ${className}`);
+    }
+};
+function normalizeName(name) {
+    if (!name || name.trim() === '' || name.match(/^[^a-zA-Z0-9]*$/)) {
+        return '';
+    }
+    // Clean the name first
+    const cleaned = name.replace(/[^a-zA-Z0-9\-_]/g, '');
+    // If pure numeric or only contains numbers and dashes
+    if (cleaned.match(/^[0-9-]+$/)) {
+        // Extract just the numbers and format as css{number}
+        const numbers = cleaned.replace(/[^0-9]/g, '');
+        return `css${numbers}`;
+    }
+    // Remove leading numbers and dashes for other cases
+    const normalized = cleaned.replace(/^[0-9-]+(?=[a-zA-Z])/, '');
+    return normalized || '';
+}
+exports.normalizeName = normalizeName;
+const collectStyles = (json, options = {}) => {
+    const styleMap = {};
+    const componentIndexes = {};
+    const componentHashes = {};
+    (0, legacy_1.default)(json).forEach(function (item) {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, helpers_1.nodeHasCss)(item)) {
+                const value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
+                delete item.bindings.css;
+                const normalizedName = normalizeName(item.properties.$name);
+                const componentName = normalizedName
+                    ? (0, dash_case_1.dashCase)(normalizedName)
+                    : /^h\d$/.test(item.name || '') // don't dashcase h1 into h-1
+                        ? item.name
+                        : (0, dash_case_1.dashCase)(normalizeName(item.name) || 'div');
+                const classNameWPrefix = `${componentName}${options.prefix ? `-${options.prefix}` : ''}`;
+                const stylesHash = (0, object_hash_1.default)(value);
+                if (componentHashes[componentName] === stylesHash) {
+                    const className = classNameWPrefix;
+                    updateClassForNode(item, className);
+                    return;
+                }
+                if (!componentHashes[componentName]) {
+                    componentHashes[componentName] = stylesHash;
+                }
+                const index = (componentIndexes[componentName] =
+                    (componentIndexes[componentName] || 0) + 1);
+                const className = `${classNameWPrefix}${index === 1 ? '' : `-${index}`}`;
+                updateClassForNode(item, className);
+                styleMap[className] = value;
+            }
+            delete item.bindings.css;
+        }
+    });
+    return styleMap;
+};
+const collectCss = (json, options = {}) => {
+    var _a;
+    const styles = collectStyles(json, options);
+    // TODO create and use a root selector
+    let css = '';
+    css += !!((_a = json.style) === null || _a === void 0 ? void 0 : _a.length) ? `${json.style}\n` : '';
+    css += classStyleMapToCss(styles);
+    return css;
+};
+exports.collectCss = collectCss;
+const classStyleMapToCss = (map) => {
+    let str = '';
+    for (const key in map) {
+        const styles = (0, helpers_1.getStylesOnly)(map[key]);
+        str += `.${key} {\n${(0, helpers_1.styleMapToCss)(styles)}\n}`;
+        const nestedSelectors = (0, helpers_1.getNestedSelectors)(map[key]);
+        for (const nestedSelector in nestedSelectors) {
+            const value = nestedSelectors[nestedSelector];
+            if (nestedSelector.startsWith('@')) {
+                str += `${nestedSelector} { .${key} { ${(0, helpers_1.styleMapToCss)(value)} } }`;
+            }
+            else {
+                const getSelector = (nestedSelector) => {
+                    if (nestedSelector.startsWith(':')) {
+                        return `.${key}${nestedSelector}`;
+                    }
+                    if (nestedSelector.includes('&')) {
+                        return nestedSelector.replace(/&/g, `.${key}`);
+                    }
+                    return `.${key} ${nestedSelector}`;
+                };
+                str += `${getSelector(nestedSelector)} {\n${(0, helpers_1.styleMapToCss)(value)}\n}`;
+            }
+        }
+    }
+    return str;
+};

package/dist/src/helpers/styles/collect-styled-components.d.ts

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

package/dist/src/helpers/styles/collect-styled-components.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectStyledComponents = void 0;
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const object_hash_1 = __importDefault(require("object-hash"));
+const capitalize_1 = require("../capitalize");
+const is_mitosis_node_1 = require("../is-mitosis-node");
+const is_upper_case_1 = require("../is-upper-case");
+const collect_css_1 = require("./collect-css");
+const helpers_1 = require("./helpers");
+const collectStyledComponents = (json) => {
+    let styledComponentsCode = '';
+    const componentIndexes = {};
+    const componentHashes = {};
+    (0, legacy_1.default)(json).forEach(function (item) {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, helpers_1.nodeHasCss)(item)) {
+                const value = (0, helpers_1.parseCssObject)((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code);
+                delete item.bindings.css;
+                const normalizedNameProperty = item.properties.$name
+                    ? (0, capitalize_1.capitalize)((0, lodash_1.camelCase)((0, collect_css_1.normalizeName)(item.properties.$name)))
+                    : null;
+                const componentName = normalizedNameProperty
+                    ? normalizedNameProperty
+                    : /^h\d$/.test(item.name || '')
+                        ? item.name
+                        : (0, capitalize_1.capitalize)((0, lodash_1.camelCase)((0, collect_css_1.normalizeName)(item.name) || 'div'));
+                const index = (componentIndexes[componentName] =
+                    (componentIndexes[componentName] || 0) + 1);
+                const className = `${componentName}${componentName !== item.name && index === 1 ? '' : index}`;
+                let str = '';
+                const styles = (0, helpers_1.getStylesOnly)(value);
+                const stylesHash = (0, object_hash_1.default)(styles);
+                if (stylesHash === componentHashes[componentName]) {
+                    return;
+                }
+                if (!componentHashes[componentName]) {
+                    componentHashes[componentName] = stylesHash;
+                }
+                str += `${(0, helpers_1.styleMapToCss)(styles)}\n`;
+                const nestedSelectors = (0, helpers_1.getNestedSelectors)(value);
+                for (const nestedSelector in nestedSelectors) {
+                    const value = nestedSelectors[nestedSelector];
+                    str += `${nestedSelector} { ${(0, helpers_1.styleMapToCss)(value)} }`;
+                }
+                const prefix = (0, is_upper_case_1.isUpperCase)(item.name[0])
+                    ? `styled(${item.name})\``
+                    : `styled.${item.name}\``;
+                item.name = className;
+                styledComponentsCode += `
+          const ${className} = ${prefix}${str}\`;
+        `;
+            }
+            delete item.bindings.css;
+        }
+    });
+    return styledComponentsCode;
+};
+exports.collectStyledComponents = collectStyledComponents;

package/dist/src/helpers/styles/helpers.d.ts

@@ -0,0 +1,31 @@
+import * as CSS from 'csstype';
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
+export declare const nodeHasCss: (node: MitosisNode) => boolean;
+export declare const nodeHasStyle: (node: MitosisNode) => boolean;
+export declare const hasCss: (component: MitosisComponent) => boolean;
+export declare const hasStyle: (component: MitosisComponent) => boolean;
+/**
+ * e.g.:
+ * {
+ *  display: 'none',
+ *  '@media (max-width: 500px)': {
+ *    '& .sub-class': {
+ *      display: 'block'
+ *    }
+ *  }
+ * }
+ */
+export type StyleMap = {
+    [className: string]: CSS.Properties | StyleMap;
+};
+export declare const getNestedSelectors: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+export declare const getStylesOnly: (map: StyleMap) => import("lodash").Dictionary<CSS.Properties<0 | (string & {}), string & {}> | StyleMap>;
+/**
+ * { 'my-class': { display: 'block', '&.foo': { display: 'none' } }}
+ */
+export type ClassStyleMap = {
+    [key: string]: StyleMap;
+};
+export declare const parseCssObject: (css: string) => any;
+export declare const styleMapToCss: (map: StyleMap) => string;

package/dist/src/helpers/styles/helpers.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styleMapToCss = exports.parseCssObject = exports.getStylesOnly = exports.getNestedSelectors = exports.hasStyle = exports.hasCss = exports.nodeHasStyle = exports.nodeHasCss = void 0;
+const json5_1 = __importDefault(require("json5"));
+const lodash_1 = require("lodash");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const dash_case_1 = require("../dash-case");
+const is_mitosis_node_1 = require("../is-mitosis-node");
+const is_upper_case_1 = require("../is-upper-case");
+const nodeHasCss = (node) => {
+    var _a;
+    return Boolean(typeof ((_a = node.bindings.css) === null || _a === void 0 ? void 0 : _a.code) === 'string' && node.bindings.css.code.trim().length > 6);
+};
+exports.nodeHasCss = nodeHasCss;
+const nodeHasStyle = (node) => {
+    var _a;
+    return (Boolean(typeof ((_a = node.bindings.style) === null || _a === void 0 ? void 0 : _a.code) === 'string') ||
+        Boolean(typeof node.properties.style === 'string'));
+};
+exports.nodeHasStyle = nodeHasStyle;
+const hasCss = (component) => {
+    var _a;
+    let hasStyles = !!((_a = component.style) === null || _a === void 0 ? void 0 : _a.length);
+    if (hasStyles) {
+        return true;
+    }
+    (0, legacy_1.default)(component).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, exports.nodeHasCss)(item)) {
+                hasStyles = true;
+                this.stop();
+            }
+        }
+    });
+    return hasStyles;
+};
+exports.hasCss = hasCss;
+const hasStyle = (component) => {
+    let hasStyles = false;
+    (0, legacy_1.default)(component).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            if ((0, exports.nodeHasStyle)(item)) {
+                hasStyles = true;
+                this.stop();
+            }
+        }
+    });
+    return hasStyles;
+};
+exports.hasStyle = hasStyle;
+const getNestedSelectors = (map) => {
+    return (0, lodash_1.pickBy)(map, (value) => typeof value === 'object');
+};
+exports.getNestedSelectors = getNestedSelectors;
+const getStylesOnly = (map) => {
+    return (0, lodash_1.pickBy)(map, (value) => typeof value === 'string');
+};
+exports.getStylesOnly = getStylesOnly;
+const parseCssObject = (css) => {
+    try {
+        return json5_1.default.parse(css);
+    }
+    catch (e) {
+        console.warn('Could not parse CSS object', css);
+        throw e;
+    }
+};
+exports.parseCssObject = parseCssObject;
+const getCssPropertyName = (cssObjectKey) => {
+    // Allow custom CSS properties
+    if (cssObjectKey.startsWith('--')) {
+        return cssObjectKey;
+    }
+    let str = (0, dash_case_1.dashCase)(cssObjectKey);
+    // Convert vendor prefixes like 'WebkitFoo' to '-webkit-foo'
+    if ((0, is_upper_case_1.isUpperCase)(cssObjectKey[0])) {
+        str = `-${str}`;
+    }
+    return str;
+};
+const styleMapToCss = (map) => {
+    return Object.entries(map)
+        .filter(([key, value]) => typeof value === 'string')
+        .map(([key, value]) => `  ${getCssPropertyName(key)}: ${value};`)
+        .join('\n');
+};
+exports.styleMapToCss = styleMapToCss;

package/dist/src/helpers/trace-reference-to-module-path.d.ts

@@ -0,0 +1,2 @@
+import { MitosisImport } from '../types/mitosis-component';
+export declare function traceReferenceToModulePath(imports: MitosisImport[], name: string): string | null;

package/dist/src/helpers/trace-reference-to-module-path.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traceReferenceToModulePath = void 0;
+function traceReferenceToModulePath(imports, name) {
+    let response = null;
+    for (const importInfo of imports) {
+        if (name in importInfo.imports) {
+            return `${importInfo.path}:${importInfo.imports[name]}`;
+        }
+    }
+    return response;
+}
+exports.traceReferenceToModulePath = traceReferenceToModulePath;

package/dist/src/helpers/transform-state-setters.d.ts

@@ -0,0 +1,14 @@
+import { types } from '@babel/core';
+type StateSetterTransformer = ({ path, propertyName, }: {
+    path: babel.NodePath<types.AssignmentExpression>;
+    propertyName: string;
+}) => types.CallExpression;
+/**
+ * Finds instances of state being set in `value`, and transforms them using the
+ * provided `transformer`.
+ */
+export declare const transformStateSetters: ({ value, transformer, }: {
+    value: string;
+    transformer: StateSetterTransformer;
+}) => string;
+export {};

package/dist/src/helpers/transform-state-setters.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformStateSetters = void 0;
+const core_1 = require("@babel/core");
+const babel_transform_1 = require("./babel-transform");
+/**
+ * Finds instances of state being set in `value`, and transforms them using the
+ * provided `transformer`.
+ */
+const transformStateSetters = ({ value, transformer, }) => (0, babel_transform_1.babelTransformExpression)(value, {
+    AssignmentExpression(path) {
+        const { node } = path;
+        if (core_1.types.isMemberExpression(node.left) &&
+            core_1.types.isIdentifier(node.left.object) &&
+            // TODO: utillity to properly trace this reference to the beginning
+            node.left.object.name === 'state') {
+            // TODO: ultimately support other property access like strings
+            const propertyName = node.left.property.name;
+            const newExpression = transformer({ path, propertyName });
+            path.replaceWith(newExpression);
+        }
+    },
+});
+exports.transformStateSetters = transformStateSetters;

package/dist/src/helpers/transform-to-jsx.d.ts

@@ -0,0 +1,4 @@
+export declare const JSX_TO_HTML_ATTR: {
+    for: string;
+};
+export declare const transformAttributeToJSX: (key: string) => string;

package/dist/src/helpers/transform-to-jsx.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformAttributeToJSX = exports.JSX_TO_HTML_ATTR = void 0;
+const typescript_1 = require("../helpers/typescript");
+exports.JSX_TO_HTML_ATTR = {
+    for: 'htmlFor',
+};
+const transformAttributeToJSX = (key) => {
+    if ((0, typescript_1.objectHasKey)(exports.JSX_TO_HTML_ATTR, key))
+        return exports.JSX_TO_HTML_ATTR[key];
+    return key;
+};
+exports.transformAttributeToJSX = transformAttributeToJSX;

package/dist/src/helpers/traverse-nodes.d.ts

@@ -0,0 +1,4 @@
+import { MitosisComponent } from '../types/mitosis-component';
+import { MitosisNode } from '../types/mitosis-node';
+import { type TraverseContext } from 'neotraverse/legacy';
+export declare function traverseNodes(component: MitosisComponent | MitosisNode, cb: (node: MitosisNode, context: TraverseContext) => void): void;

package/dist/src/helpers/traverse-nodes.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverseNodes = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const is_mitosis_node_1 = require("./is-mitosis-node");
+function traverseNodes(component, cb) {
+    (0, legacy_1.default)(component).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            cb(item, this);
+        }
+    });
+}
+exports.traverseNodes = traverseNodes;

package/dist/src/helpers/try-prettier-format.d.ts

@@ -0,0 +1 @@
+export declare const tryPrettierFormat: (str: string, parser: string) => string;

package/dist/src/helpers/try-prettier-format.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tryPrettierFormat = void 0;
+const standalone_1 = require("prettier/standalone");
+const tryPrettierFormat = (str, parser) => {
+    try {
+        return (0, standalone_1.format)(str, {
+            parser,
+            plugins: [
+                // To support running in browsers
+                require('prettier/parser-typescript'),
+                require('prettier/parser-postcss'),
+                require('prettier/parser-html'),
+                require('prettier/parser-babel'),
+            ],
+            htmlWhitespaceSensitivity: 'ignore',
+        });
+    }
+    catch (err) {
+        console.warn('Could not prettify', { string: str }, err);
+    }
+    return str;
+};
+exports.tryPrettierFormat = tryPrettierFormat;

package/dist/src/helpers/typescript-project.d.ts

@@ -0,0 +1,7 @@
+import { Project, SourceFile, Symbol } from 'ts-morph';
+export declare const removeMitosisImport: (code: string) => string;
+export declare const getPropsSymbol: (ast: SourceFile) => Symbol | undefined;
+export declare const getContextSymbols: (ast: SourceFile) => Set<Symbol>;
+export declare const createTypescriptProject: (tsConfigFilePath: string) => {
+    project: Project;
+};

package/dist/src/helpers/typescript-project.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTypescriptProject = exports.getContextSymbols = exports.getPropsSymbol = exports.removeMitosisImport = void 0;
+const ts_morph_1 = require("ts-morph");
+const babel_transform_1 = require("./babel-transform");
+const removeMitosisImport = (code) => (0, babel_transform_1.babelTransformExpression)(code, {
+    ImportDeclaration(path) {
+        if (path.node.source.value === '@builder.io/mitosis') {
+            path.remove();
+        }
+    },
+});
+exports.removeMitosisImport = removeMitosisImport;
+const getPropsSymbol = (ast) => {
+    let propsSymbol = undefined;
+    return ast.forEachChild((node) => {
+        var _a;
+        if (propsSymbol !== undefined)
+            return undefined;
+        if (ts_morph_1.Node.isArrowFunction(node) || ts_morph_1.Node.isFunctionDeclaration(node)) {
+            if (node.hasModifier(ts_morph_1.SyntaxKind.ExportKeyword) &&
+                node.hasModifier(ts_morph_1.SyntaxKind.DefaultKeyword)) {
+                propsSymbol = (_a = node.getParameters()[0]) === null || _a === void 0 ? void 0 : _a.getSymbol();
+                return propsSymbol;
+            }
+        }
+        return undefined;
+    });
+};
+exports.getPropsSymbol = getPropsSymbol;
+const getContextSymbols = (ast) => {
+    const contextSymbols = new Set();
+    ast.forEachDescendant((node) => {
+        if (!ts_morph_1.Node.isVariableDeclaration(node))
+            return;
+        const initializer = node.getInitializer();
+        if (!ts_morph_1.Node.isCallExpression(initializer))
+            return;
+        if (initializer.getExpression().getText() !== 'useContext')
+            return;
+        const contextSymbol = node.getNameNode().getSymbol();
+        if (contextSymbol === undefined)
+            return;
+        contextSymbols.add(contextSymbol);
+    });
+    return contextSymbols;
+};
+exports.getContextSymbols = getContextSymbols;
+const getProject = (tsConfigFilePath) => {
+    try {
+        return new ts_morph_1.Project({ tsConfigFilePath });
+    }
+    catch (err) {
+        throw new Error(`Error creating Typescript Project. Make sure \`tsConfigFilePath\` points to a valid tsconfig.json file.
+      Path received: "${tsConfigFilePath}"
+      `);
+    }
+};
+const createTypescriptProject = (tsConfigFilePath) => {
+    const project = getProject(tsConfigFilePath);
+    return { project };
+};
+exports.createTypescriptProject = createTypescriptProject;

package/dist/src/helpers/typescript.d.ts

@@ -0,0 +1,9 @@
+export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type OmitObj<T, U> = T extends U ? Omit<T, keyof U> : never;
+export type Dictionary<T> = {
+    [key: string]: T;
+};
+export declare const objectHasKey: <T>(object: T, key: PropertyKey) => key is keyof T;

package/dist/src/helpers/typescript.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectHasKey = void 0;
+const objectHasKey = (object, key) => key in object;
+exports.objectHasKey = objectHasKey;

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;

package/dist/src/helpers/web-components/attribute-passing.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAddAttributePassingRef = exports.shouldAddAttributePassing = exports.getAttributePassingString = exports.ROOT_REF = void 0;
+exports.ROOT_REF = '_root';
+const getAttributePassingString = (typescript) => {
+    return ('/**\n' +
+        ' * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n' +
+        ' * @param element  the ref for the component\n' +
+        ' * @param customElementSelector  the custom element like `my-component`\n' +
+        ' */\n' +
+        `private enableAttributePassing(element${typescript ? ': HTMLElement | null' : ''}, customElementSelector${typescript ? ': string' : ''}) {
+` +
+        '  const parent = element?.closest(customElementSelector);\n' +
+        '  if (element && parent) {\n' +
+        '    const attributes = parent.attributes;\n' +
+        '    for (let i = 0; i < attributes.length; i++) {\n' +
+        '      const attr = attributes.item(i);\n' +
+        "      if (attr && (attr.name.startsWith('data-') || attr.name.startsWith('aria-'))) {\n" +
+        '        element.setAttribute(attr.name, attr.value);\n' +
+        '        parent.removeAttribute(attr.name);\n' +
+        '      }\n' +
+        "      if (attr && attr.name === 'class') {\n" +
+        "        const isWebComponent = attr.value.includes('hydrated');\n" +
+        "        const value = attr.value.replace('hydrated', '').trim();\n" +
+        "        const currentClass = element.getAttribute('class');\n" +
+        "        element.setAttribute(attr.name, `${currentClass ? `${currentClass} ` : ''}${value}`);\n" +
+        '        if (isWebComponent) {\n' +
+        '          // Stencil is using this class for lazy loading component\n' +
+        "          parent.setAttribute('class', 'hydrated');\n" +
+        '        } else {\n' +
+        '          parent.removeAttribute(attr.name);\n' +
+        '        }\n' +
+        '      }\n' +
+        '    }\n' +
+        '  }\n' +
+        '};');
+};
+exports.getAttributePassingString = getAttributePassingString;
+const shouldAddAttributePassing = (json, options) => { var _a, _b, _c; return ((_a = options.attributePassing) === null || _a === void 0 ? void 0 : _a.enabled) || ((_c = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.attributePassing) === null || _c === void 0 ? void 0 : _c.enabled); };
+exports.shouldAddAttributePassing = shouldAddAttributePassing;
+const getAddAttributePassingRef = (json, options) => {
+    var _a, _b, _c;
+    return (((_b = (_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.attributePassing) === null || _b === void 0 ? void 0 : _b.customRef) ||
+        ((_c = options.attributePassing) === null || _c === void 0 ? void 0 : _c.customRef) ||
+        exports.ROOT_REF);
+};
+exports.getAddAttributePassingRef = getAddAttributePassingRef;