@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,9 @@
+import { ToStencilOptions } from '../../generators/stencil/types';
+import { MitosisNode } from '../../types/mitosis-node';
+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

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToStencil = void 0;
+const html_tags_1 = require("../../constants/html_tags");
+const helpers_1 = require("../../generators/stencil/helpers");
+const collect_class_string_1 = require("../../generators/stencil/helpers/collect-class-string");
+const event_handlers_1 = require("../../helpers/event-handlers");
+const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+const for_1 = require("../../helpers/nodes/for");
+const transform_to_jsx_1 = require("../../helpers/transform-to-jsx");
+const mitosis_node_1 = require("../../types/mitosis-node");
+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)
+        : json.name;
+    if (json.properties._text) {
+        return json.properties._text;
+    }
+    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
+        if (((_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === 'this.children') {
+            // Replace this.children with default <slot>
+            return '<slot></slot>';
+        }
+        let code = json.bindings._text.code;
+        if (insideJsx) {
+            return `{${code}}`;
+        }
+        return code;
+    }
+    if ((0, mitosis_node_1.checkIsForNode)(json) && ((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)) {
+        const wrap = json.children.length !== 1;
+        const forArgs = (0, for_1.getForArguments)(json).join(', ');
+        const expression = `${(_d = json.bindings.each) === null || _d === void 0 ? void 0 : _d.code}?.map((${forArgs}) => (
+      ${wrap ? '<Fragment>' : ''}
+      ${json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
+            .join('\n')}
+      ${wrap ? '</Fragment>' : ''}
+    ))`;
+        if (insideJsx) {
+            return `{${expression}}`;
+        }
+        else {
+            return expression;
+        }
+    }
+    else if (blockName === 'Show' && ((_e = json.bindings.when) === null || _e === void 0 ? void 0 : _e.code)) {
+        const wrap = json.children.length !== 1;
+        const expression = `${(_f = json.bindings.when) === null || _f === void 0 ? void 0 : _f.code} ? (
+      ${wrap ? '<Fragment>' : ''}
+      ${json.children
+            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
+            .map((item) => (0, exports.blockToStencil)({ json: item, options, insideJsx: wrap, childComponents }))
+            .join('\n')}
+      ${wrap ? '</Fragment>' : ''}
+    ) : ${!json.meta.else
+            ? 'null'
+            : `(${(0, exports.blockToStencil)({
+                json: json.meta.else,
+                options,
+                childComponents,
+            })})`}`;
+        if (insideJsx) {
+            return `{${expression}}`;
+        }
+        else {
+            return expression;
+        }
+    }
+    else if (blockName === 'Slot') {
+        blockName = 'slot';
+    }
+    let str = '';
+    str += `<${blockName} `;
+    const classString = (0, collect_class_string_1.collectClassString)(json);
+    if (classString) {
+        str += ` class=${classString} `;
+    }
+    for (const key in json.properties) {
+        const value = json.properties[key];
+        // Stencil uses ´htmlFor´ (JSX) instead of ´for´ (HTML)
+        str += ` ${(0, transform_to_jsx_1.transformAttributeToJSX)(key)}="${value}" `;
+    }
+    for (const key in json.bindings) {
+        const { code, arguments: cusArgs = [], type } = json.bindings[key];
+        if (type === 'spread') {
+            str += ` {...(${code})} `;
+        }
+        else if (key === 'ref') {
+            str += ` ref={(el:any) => {
+        ${rootRef ? `this.${rootRef} = el` : ''}
+        ${code.startsWith('this.') ? code : `this.${code}`} = el}
+      } `;
+        }
+        else if ((0, event_handlers_1.checkIsEvent)(key)) {
+            const asyncKeyword = ((_g = json.bindings[key]) === null || _g === void 0 ? void 0 : _g.async) ? 'async ' : '';
+            str += ` ${key}={${asyncKeyword}(${cusArgs.join(',')}) => ${code}} `;
+        }
+        else {
+            str += ` ${key}={${code}} `;
+        }
+    }
+    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(blockName)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (json.children) {
+        str += json.children
+            .map((item) => (0, exports.blockToStencil)({
+            json: item,
+            options,
+            insideJsx: true,
+            childComponents,
+        }))
+            .join('\n');
+    }
+    str += `</${blockName}>`;
+    return str;
+};
+exports.blockToStencil = blockToStencil;

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

@@ -0,0 +1,3 @@
+import { ToStencilOptions } from '../../generators/stencil/types';
+import { TranspilerGenerator } from '../../types/transpiler';
+export declare const componentToStencil: TranspilerGenerator<ToStencilOptions>;

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

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToStencil = void 0;
+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 event_handlers_1 = require("../../helpers/event-handlers");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const get_child_components_1 = require("../../helpers/get-child-components");
+const get_props_1 = require("../../helpers/get-props");
+const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const indent_1 = require("../../helpers/indent");
+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 = {
+    typescript: true, // Stencil is uses .tsx always
+}) => {
+    return ({ component }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let json = (0, fast_clone_1.fastClone)(component);
+        const options = (0, merge_options_1.initializeOptions)({
+            target: 'stencil',
+            component,
+            defaults: _options,
+        });
+        if (options.plugins) {
+            json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
+        }
+        (0, map_refs_1.mapRefs)(json, (refName) => `this.${refName}`);
+        let css = (0, collect_css_1.collectCss)(json);
+        let props = Array.from((0, get_props_1.getProps)(json));
+        const events = props.filter((prop) => (0, event_handlers_1.checkIsEvent)(prop));
+        const defaultProps = json.defaultProps;
+        const childComponents = (0, get_child_components_1.getChildComponents)(json);
+        props = props.filter((prop) => {
+            // Stencil doesn't need children as a prop
+            return prop !== 'children';
+        });
+        const processBindingOptions = { events, props, target: 'stencil' };
+        options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(json, options, processBindingOptions);
+        if (options.plugins) {
+            json = (0, plugins_1.runPostJsonPlugins)({ json, plugins: options.plugins });
+        }
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: true,
+            functions: false,
+            getters: false,
+            keyPrefix: '@State() ',
+        });
+        const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            format: 'class',
+            data: false,
+            functions: true,
+            getters: true,
+        });
+        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'};`; })
+                .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, {
+                    parser: 'css',
+                    plugins: [require('prettier/parser-postcss')],
+                });
+            }
+            catch (err) {
+                console.warn('Could not format css', err);
+            }
+        }
+        let tagName = (0, helpers_1.getTagName)(json.name, options);
+        if ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.tagName) {
+            // Deprecated option, we shouldn't use this, instead change the name of your Mitosis component
+            tagName = (_b = json.meta.useMetadata) === null || _b === void 0 ? void 0 : _b.tagName;
+        }
+        const noDependencyOnUpdateHooks = (_d = (_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.filter((hook) => !hook.deps)) !== null && _d !== void 0 ? _d : [];
+        /*
+         * We want to create a function for every onUpdate hook that has dependencies.
+         * We call the function once in "componentDidLoad"
+         * And we create "Watch" decorators for every dependency
+         */
+        const dependencyOnUpdateHooks = (_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter((hook) => hook.deps)) !== null && _f !== void 0 ? _f : [];
+        const coreImports = (0, helpers_1.getStencilCoreImportsAsString)({
+            wrap,
+            events,
+            props,
+            dataString,
+            watch: Boolean(dependencyOnUpdateHooks === null || dependencyOnUpdateHooks === void 0 ? void 0 : dependencyOnUpdateHooks.length),
+        });
+        const propOptions = {
+            ...options.propOptions,
+            ...(_h = (_g = json.meta.useMetadata) === null || _g === void 0 ? void 0 : _g.stencil) === null || _h === void 0 ? void 0 : _h.propOptions,
+        };
+        let str = (0, dedent_1.dedent) `
+      ${(0, helpers_1.getImports)(json, options, childComponents)}
+      
+      import { ${coreImports} } from '@stencil/core';
+      
+      @Component({
+        tag: '${tagName}',
+        ${((_j = json.meta.useMetadata) === null || _j === void 0 ? void 0 : _j.isAttachedToShadowDom) ? 'shadow: true,' : ''}
+        ${css.length
+            ? `styles: \`
+          ${(0, indent_1.indent)(css, 8)}\`,`
+            : ''}
+      })
+      export class ${json.name} {
+          ${refs}
+          ${(0, helpers_1.getPropsAsCode)({ props, json, defaultProps, propOptions })}
+          ${dataString}
+          ${methodsString}
+          ${(0, helpers_1.getExportsAndLocal)(json)}
+          ${withAttributePassing ? (0, attribute_passing_1.getAttributePassingString)(true) : ''}
+          
+          ${dependencyOnUpdateHooks
+            .map((hook, index) => {
+            return `
+            watch${index}Fn() { 
+              ${hook.code} 
+            }
+            
+            ${(0, helpers_1.getDepsAsArray)(hook.deps)
+                .map((dep) => `@Watch("${dep}")`)
+                .join('\n')}
+              watch${index}(){
+                this.watch${index}Fn();
+              }            
+            `;
+        })
+            .join('\n')}
+  
+          ${`componentDidLoad() { 
+              ${withAttributePassing
+            ? `this.enableAttributePassing(this.${rootRef}, "${(0, dash_case_1.dashCase)(json.name)}");`
+            : ''}
+              ${json.hooks.onMount.length ? (0, on_mount_1.stringifySingleScopeOnMount)(json) : ''} 
+              ${dependencyOnUpdateHooks
+            .map((_, index) => `this.watch${index}Fn();`)
+            .join('\n')}
+              }`}
+          ${!((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code)
+            ? ''
+            : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
+          ${noDependencyOnUpdateHooks.length
+            ? `componentDidUpdate() { ${noDependencyOnUpdateHooks
+                .map((hook) => hook.code)
+                .join('\n')} }`
+            : ''}
+  
+        render() {
+          return (${wrap ? '<Host>' : ''}
+  
+            ${json.children
+            .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>' : ''})
+        }
+      }
+    `;
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        if (options.prettier !== false) {
+            str = (0, standalone_1.format)(str, {
+                parser: 'typescript',
+                plugins: [require('prettier/parser-typescript')],
+            });
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)({ json, code: str, plugins: options.plugins });
+        }
+        return str;
+    };
+};
+exports.componentToStencil = componentToStencil;

package/dist/src/generators/stencil/helpers/collect-class-string.d.ts

@@ -0,0 +1,2 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare const collectClassString: (json: MitosisNode) => string | null;

package/dist/src/generators/stencil/helpers/collect-class-string.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectClassString = void 0;
+const bindingOpenChar = '{';
+const bindingCloseChar = '}';
+// This should really be a preprocessor mapping the `class` attribute binding based on what other values have
+// to make this more pluggable
+const collectClassString = (json) => {
+    var _a, _b;
+    const staticClasses = [];
+    if (json.properties.class) {
+        staticClasses.push(json.properties.class);
+        delete json.properties.class;
+    }
+    if (json.properties.className) {
+        staticClasses.push(json.properties.className);
+        delete json.properties.className;
+    }
+    const dynamicClasses = [];
+    if (typeof ((_a = json.bindings.class) === null || _a === void 0 ? void 0 : _a.code) === 'string') {
+        dynamicClasses.push(json.bindings.class.code);
+        delete json.bindings.class;
+    }
+    if (typeof ((_b = json.bindings.className) === null || _b === void 0 ? void 0 : _b.code) === 'string') {
+        dynamicClasses.push(json.bindings.className.code);
+        delete json.bindings.className;
+    }
+    const staticClassesString = staticClasses.join(' ');
+    const dynamicClassesString = dynamicClasses.join(" + ' ' + ");
+    const hasStaticClasses = Boolean(staticClasses.length);
+    const hasDynamicClasses = Boolean(dynamicClasses.length);
+    if (hasStaticClasses && !hasDynamicClasses) {
+        return `"${staticClassesString}"`;
+    }
+    if (hasDynamicClasses && !hasStaticClasses) {
+        return `${bindingOpenChar}${dynamicClassesString}${bindingCloseChar}`;
+    }
+    if (hasDynamicClasses && hasStaticClasses) {
+        return `${bindingOpenChar}"${staticClassesString} " + ${dynamicClassesString}${bindingCloseChar}`;
+    }
+    return null;
+};
+exports.collectClassString = collectClassString;

package/dist/src/generators/stencil/helpers/index.d.ts

@@ -0,0 +1,37 @@
+import { StencilPropOption, ToStencilOptions } from '../../../generators/stencil/types';
+import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare const getTagName: (name: string, { prefix }: ToStencilOptions) => string;
+export declare const getPropsAsCode: ({ props, propOptions, defaultProps, json, }: {
+    props: string[];
+    json: MitosisComponent;
+    defaultProps?: MitosisState | undefined;
+    propOptions: Record<string, StencilPropOption>;
+}) => string;
+/**
+ * Check for root element if it needs a wrapping <Host>
+ * @param children
+ */
+export declare const needsWrap: (children: MitosisNode[]) => boolean;
+/**
+ * Dynamically creates all imports from `@stencil/core`
+ * @param wrap
+ * @param events
+ * @param props
+ * @param dataString
+ * @param watch
+ */
+export declare const getStencilCoreImportsAsString: ({ wrap, events, props, dataString, watch, }: {
+    wrap: boolean;
+    events: string[];
+    props: string[];
+    dataString: string;
+    watch: boolean;
+}) => string;
+export declare const getImports: (json: MitosisComponent, options: ToStencilOptions, childComponents: string[]) => string;
+/**
+ * Converts the deps string into an array of strings
+ * @param deps The hook dependencies as string e.g.: "[this.a,this.b]"
+ */
+export declare const getDepsAsArray: (deps: string) => string[];
+export declare const getExportsAndLocal: (json: MitosisComponent) => string;

package/dist/src/generators/stencil/helpers/index.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExportsAndLocal = exports.getDepsAsArray = exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = void 0;
+const dash_case_1 = require("../../../helpers/dash-case");
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const render_imports_1 = require("../../../helpers/render-imports");
+const getTagName = (name, { prefix }) => {
+    const dashName = (0, dash_case_1.dashCase)(name);
+    if (prefix) {
+        const dashPrefix = prefix.endsWith('-') ? prefix : `${prefix}-`;
+        if (!dashName.startsWith(dashPrefix)) {
+            return `${dashPrefix}${dashName}`;
+        }
+    }
+    return dashName;
+};
+exports.getTagName = getTagName;
+const getPropsAsCode = ({ props, propOptions, defaultProps, json, }) => {
+    const propsTypeRef = json.propsTypeRef;
+    const internalTypes = json.types;
+    const isInternalType = propsTypeRef && internalTypes && internalTypes.find((iType) => iType.includes(propsTypeRef));
+    return props
+        .map((item) => {
+        var _a;
+        const defaultProp = defaultProps ? (_a = defaultProps[item]) === null || _a === void 0 ? void 0 : _a.code : undefined;
+        const defaultPropString = defaultProp ? ` = ${defaultProp}` : '';
+        const propOption = propOptions[item];
+        const hasTyping = propsTypeRef &&
+            propsTypeRef !== 'any' &&
+            propsTypeRef !== 'unknown' &&
+            propsTypeRef !== 'never' &&
+            !isInternalType;
+        if ((0, event_handlers_1.checkIsEvent)(item)) {
+            // Stencil adds "on" to every `@Event` so we need to remove "on" from event props
+            // https://stenciljs.com/docs/events#using-events-in-jsx
+            const eventType = hasTyping
+                ? `EventEmitter<Parameters<Required<${propsTypeRef}>["${item}"]>[number]> | void`
+                : 'any';
+            return `@Event() ${(0, event_handlers_1.getEventNameWithoutOn)(item)}: ${eventType}${defaultPropString}`;
+        }
+        const propType = hasTyping ? `${propsTypeRef}["${item}"]` : 'any';
+        return `@Prop(${propOption ? JSON.stringify(propOption) : ''}) ${item}: ${propType}${defaultPropString}`;
+    })
+        .join(';\n');
+};
+exports.getPropsAsCode = getPropsAsCode;
+/**
+ * Check for root element if it needs a wrapping <Host>
+ * @param children
+ */
+const needsWrap = (children) => {
+    if (children.length !== 1) {
+        return true;
+    }
+    else if (children.length === 1) {
+        const firstChild = children.at(0);
+        if ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'Show' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'For') {
+            return true;
+        }
+    }
+    return false;
+};
+exports.needsWrap = needsWrap;
+/**
+ * Dynamically creates all imports from `@stencil/core`
+ * @param wrap
+ * @param events
+ * @param props
+ * @param dataString
+ * @param watch
+ */
+const getStencilCoreImportsAsString = ({ wrap, events, props, dataString, watch, }) => {
+    const stencilCoreImports = {
+        Component: true,
+        h: true,
+        Fragment: true,
+        Host: wrap,
+        Watch: watch,
+        Event: events.length > 0,
+        EventEmitter: events.length > 0,
+        Prop: props.length > 0,
+        State: dataString.length > 0,
+    };
+    return Object.entries(stencilCoreImports)
+        .map(([key, bool]) => (bool ? key : ''))
+        .filter((key) => !!key)
+        .join(', ');
+};
+exports.getStencilCoreImportsAsString = getStencilCoreImportsAsString;
+const getImports = (json, options, childComponents) => {
+    return (0, render_imports_1.renderPreComponent)({
+        explicitImportFileExtension: options.explicitImportFileExtension,
+        component: json,
+        target: 'stencil',
+        excludeExportAndLocal: true,
+        importMapper: (_, theImport, importedValues) => {
+            const childImport = importedValues.defaultImport;
+            if (childImport && childComponents.includes(childImport)) {
+                return `import {${childImport}} from '${theImport.path}';`;
+            }
+            return undefined;
+        },
+    });
+};
+exports.getImports = getImports;
+/**
+ * Converts the deps string into an array of strings
+ * @param deps The hook dependencies as string e.g.: "[this.a,this.b]"
+ */
+const getDepsAsArray = (deps) => {
+    return deps
+        .replace('[', '')
+        .replace(']', '')
+        .replaceAll('this.', '')
+        .split(',')
+        .map((dep) => dep.trim());
+};
+exports.getDepsAsArray = getDepsAsArray;
+const getExportsAndLocal = (json) => {
+    return Object.entries(json.exports || {})
+        .map(([key, { usedInLocal, code }]) => {
+        if (usedInLocal) {
+            return `${key} = ${code.substring(code.indexOf('=') + 1)}`;
+        }
+        return '';
+    })
+        .join('\n');
+};
+exports.getExportsAndLocal = getExportsAndLocal;

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

@@ -0,0 +1,2 @@
+export * from './component';
+export * from './types';

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./component"), exports);
+__exportStar(require("./types"), exports);

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.d.ts

@@ -0,0 +1,4 @@
+import { ToStencilOptions } from '../../../generators/stencil/types';
+import { ProcessBindingOptions } from '../../../helpers/class-components';
+import { MitosisComponent } from '../../../types/mitosis-component';
+export declare const getCodeProcessorPlugins: (json: MitosisComponent, options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").MitosisPlugin[];

package/dist/src/generators/stencil/plugins/get-code-processor-plugins.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCodeProcessorPlugins = void 0;
+const class_components_1 = require("../../../helpers/class-components");
+const process_code_1 = require("../../../helpers/plugins/process-code");
+const getCodeProcessorPlugins = (json, options, processBindingOptions) => {
+    return [
+        ...(options.plugins || []),
+        (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType) => {
+            switch (codeType) {
+                case 'bindings':
+                case 'properties':
+                case 'hooks':
+                case 'hooks-deps':
+                case 'hooks-deps-array':
+                case 'state':
+                case 'context-set':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (code) => (0, class_components_1.processClassComponentBinding)(json, code, processBindingOptions);
+            }
+        }),
+    ];
+};
+exports.getCodeProcessorPlugins = getCodeProcessorPlugins;

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

@@ -0,0 +1,37 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export interface StencilPropOption {
+    attribute?: string;
+    mutable?: boolean;
+    reflect?: boolean;
+}
+export interface StencilPropOptions {
+    /**
+     * Add additional options for Stencil properties: https://stenciljs.com/docs/properties#prop-options.
+     * You need to map your properties you provide to the component.
+     *
+     * Example:
+     * ```tsx
+     *  propOptions: {
+     *             className: {
+     *                 attribute: 'classname',
+     *                 mutable: false,
+     *                 reflect: false,
+     *             },
+     *         }
+     * ```
+     */
+    propOptions?: Record<string, StencilPropOption>;
+}
+export interface ToStencilOptions extends BaseTranspilerOptions, StencilPropOptions {
+    /**
+     * Add a prefix for every component like `my`.
+     * A Stencil component needs a prefix with a dash.
+     * You don't need this option if your Mitosis component includes the prefix already:
+     *
+     * Error: `export default function Button ...` ->  tag: 'button'
+     * Success: `export default function MyButton ...` ->  tag: 'my-button'
+     * Success: prefix="my" + `export default function Button ...` ->  tag: 'my-button'
+     */
+    prefix?: string;
+}
+export type StencilMetadata = {} & StencilPropOptions;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,10 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { BaseNode, MitosisNode } from '../../types/mitosis-node';
+import { ToSvelteOptions } from './types';
+type BlockToSvelte<T extends BaseNode = MitosisNode> = (props: {
+    json: T;
+    options: ToSvelteOptions;
+    parentComponent: MitosisComponent;
+}) => string;
+export declare const blockToSvelte: BlockToSvelte;
+export {};