@builder.io/mitosis 0.4.6 → 0.5.0

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

@@ -26,3 +26,10 @@ export declare const addCodeToOnInit: (root: MitosisComponent, code: string) =>
  * @param code The code to be added to the onInit and onUpdate hooks.
  */
 export declare const makeReactiveState: (root: MitosisComponent, stateName: string, code: string) => void;
+export declare const getDefaultProps: ({ defaultProps }: MitosisComponent) => string;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+export declare const transformState: (json: MitosisComponent) => void;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+exports.transformState = exports.getDefaultProps = exports.makeReactiveState = exports.addCodeToOnInit = exports.addCodeToOnUpdate = exports.getAppropriateTemplateFunctionKeys = exports.HELPER_FUNCTIONS = void 0;
+const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const HELPER_FUNCTIONS = (isTs) => ({
     useObjectWrapper: `useObjectWrapper(...args${isTs ? ': any[]' : ''}) {
     let obj = {}
@@ -83,3 +84,39 @@ const makeReactiveState = (root, stateName, code) => {
     (0, exports.addCodeToOnUpdate)(root, code);
 };
 exports.makeReactiveState = makeReactiveState;
+const getDefaultProps = ({ defaultProps }) => {
+    if (!defaultProps)
+        return '';
+    const defalutPropsString = Object.keys(defaultProps)
+        .map((prop) => {
+        var _a;
+        const value = defaultProps.hasOwnProperty(prop) ? (_a = defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code : 'undefined';
+        return `${prop}: ${value}`;
+    })
+        .join(',');
+    return `const defaultProps = {${defalutPropsString}};\n`;
+};
+exports.getDefaultProps = getDefaultProps;
+/**
+ * if any state "property" is trying to access state.* or props.*
+ * then we need to move them to onInit where they can be accessed
+ * @param json The MitosisComponent.
+ */
+const transformState = (json) => {
+    Object.entries(json.state)
+        .reverse()
+        .forEach(([key, value]) => {
+        var _a;
+        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
+            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
+                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
+                json.state[key].code = 'null';
+                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
+                    json.hooks.onInit = { code: '' };
+                }
+                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
+            }
+        }
+    });
+};
+exports.transformState = transformState;

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

@@ -7,6 +7,7 @@ exports.componentToAngular = exports.blockToAngular = void 0;
 const html_tags_1 = require("../../constants/html_tags");
 const dedent_1 = require("../../helpers/dedent");
 const fast_clone_1 = require("../../helpers/fast-clone");
+const get_child_components_1 = require("../../helpers/get-child-components");
 const get_components_used_1 = require("../../helpers/get-components-used");
 const get_custom_imports_1 = require("../../helpers/get-custom-imports");
 const get_prop_functions_1 = require("../../helpers/get-prop-functions");
@@ -14,6 +15,7 @@ const get_props_1 = require("../../helpers/get-props");
 const get_props_ref_1 = require("../../helpers/get-props-ref");
 const get_refs_1 = require("../../helpers/get-refs");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const indent_1 = require("../../helpers/indent");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const is_upper_case_1 = require("../../helpers/is-upper-case");
@@ -173,7 +175,8 @@ const stringifyBinding = (node, options, blockOptions) => ([key, binding]) => {
     // TODO: proper babel transform to replace. Util for this
     if (keyToUse.startsWith('on')) {
         const { event, value } = processEventBinding(keyToUse, code, node.name, cusArgs[0]);
-        return ` (${event})="${value}"`;
+        // Angular events are all lowerCased
+        return ` (${event.toLowerCase()})="${value}"`;
     }
     else if (keyToUse === 'class') {
         return ` [class]="${code}" `;
@@ -568,25 +571,6 @@ const classPropertiesPlugin = () => ({
         },
     },
 });
-// if any state "property" is trying to access state.* or props.*
-// then we need to move them to onInit where they can be accessed
-const transformState = (json) => {
-    Object.entries(json.state)
-        .reverse()
-        .forEach(([key, value]) => {
-        var _a;
-        if ((value === null || value === void 0 ? void 0 : value.type) === 'property') {
-            if (value.code && (value.code.includes('state.') || value.code.includes('props.'))) {
-                const code = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value.code, { replaceWith: 'this' });
-                json.state[key].code = 'null';
-                if (!((_a = json.hooks.onInit) === null || _a === void 0 ? void 0 : _a.code)) {
-                    json.hooks.onInit = { code: '' };
-                }
-                json.hooks.onInit.code = `\nthis.${key} = ${code};\n${json.hooks.onInit.code}`;
-            }
-        }
-    });
-};
 const componentToAngular = (userOptions = {}) => ({ component: _component }) => {
     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
@@ -656,15 +640,8 @@ 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 = [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) => {
-            if (imports[key] === 'default') {
-                childComponents.push(key);
-            }
-        });
-    });
+    const childComponents = (0, get_child_components_1.getChildComponents)(json);
     const customImports = (0, get_custom_imports_1.getCustomImports)(json);
     const { exports: localExports = {} } = json;
     const localExportVars = Object.keys(localExports)
@@ -742,16 +719,23 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
         childComponents,
         nativeAttributes: (_d = (_c = useMetadata === null || useMetadata === void 0 ? void 0 : useMetadata.angular) === null || _c === void 0 ? void 0 : _c.nativeAttributes) !== null && _d !== void 0 ? _d : [],
     });
-    transformState(json);
+    (0, helpers_2.transformState)(json);
     const dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
         format: 'class',
-        valueMapper: processAngularCode({
-            replaceWith: 'this',
-            contextVars,
-            outputVars,
-            domRefs: Array.from(domRefs),
-            stateVars,
-        }),
+        withType: options.typescript,
+        valueMapper: (code, type, typeParameter) => {
+            let value = code;
+            if (type !== 'data') {
+                value = (0, get_typed_function_1.getTypedFunction)(code, options.typescript, typeParameter);
+            }
+            return processAngularCode({
+                replaceWith: 'this',
+                contextVars,
+                outputVars,
+                domRefs: Array.from(domRefs),
+                stateVars,
+            })(value);
+        },
     });
     const refsForObjSpread = (0, get_refs_1.getRefs)(json, 'spreadRef');
     const hostDisplayCss = options.visuallyIgnoreHostElement ? ':host { display: contents; }' : '';
@@ -782,20 +766,6 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     Object.entries(json.meta.angularConfig || {}).forEach(([key, value]) => {
         componentMetadata[key] = value;
     });
-    const getPropsDefinition = ({ json }) => {
-        if (!json.defaultProps)
-            return '';
-        const defalutPropsString = Object.keys(json.defaultProps)
-            .map((prop) => {
-            var _a;
-            const value = json.defaultProps.hasOwnProperty(prop)
-                ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
-                : 'undefined';
-            return `${prop}: ${value}`;
-        })
-            .join(',');
-        return `const defaultProps = {${defalutPropsString}};\n`;
-    };
     const hasConstructor = Boolean(injectables.length) || dynamicComponents.size || refsForObjSpread.size;
     const angularCoreImports = [
         ...(outputs.length ? ['Output', 'EventEmitter'] : []),
@@ -814,7 +784,7 @@ const componentToAngular = (userOptions = {}) => ({ component: _component }) =>
     ${options.standalone ? `import { CommonModule } from '@angular/common';` : ''}
 
     ${json.types ? json.types.join('\n') : ''}
-    ${getPropsDefinition({ json })}
+    ${(0, helpers_2.getDefaultProps)(json)}
     ${(0, render_imports_1.renderPreComponent)({
         explicitImportFileExtension: options.explicitImportFileExtension,
         component: json,

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

@@ -1,3 +1,4 @@
+import { MitosisComponent } from '../../types/mitosis-component';
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export declare const BUILT_IN_COMPONENTS: Set<string>;
 export interface ToAngularOptions extends BaseTranspilerOptions {
@@ -8,6 +9,11 @@ export interface ToAngularOptions extends BaseTranspilerOptions {
     importMapper?: Function;
     bootstrapMapper?: Function;
     visuallyIgnoreHostElement?: boolean;
+    experimental?: {
+        injectables?: (variableName: string, variableType: string) => string;
+        inject?: boolean;
+        outputs?: (json: MitosisComponent, variableName: string) => string;
+    };
 }
 export declare const DEFAULT_ANGULAR_OPTIONS: ToAngularOptions;
 export type AngularMetadata = {

package/dist/src/generators/helpers/functions.js

@@ -5,19 +5,21 @@ const patterns_1 = require("../../helpers/patterns");
 const FUNCTION_HACK_PLUGIN = () => ({
     json: {
         pre: (json) => {
-            var _a, _b;
             for (const key in json.state) {
-                const value = (_a = json.state[key]) === null || _a === void 0 ? void 0 : _a.code;
-                const type = (_b = json.state[key]) === null || _b === void 0 ? void 0 : _b.type;
+                const state = json.state[key];
+                const value = state === null || state === void 0 ? void 0 : state.code;
+                const type = state === null || state === void 0 ? void 0 : state.type;
                 if (typeof value === 'string' && type === 'method') {
                     const newValue = (0, patterns_1.prefixWithFunction)(value);
                     json.state[key] = {
+                        ...state,
                         code: newValue,
                         type: 'method',
                     };
                 }
                 else if (typeof value === 'string' && type === 'function') {
                     json.state[key] = {
+                        ...state,
                         code: value,
                         type: 'method',
                     };

package/dist/src/generators/react/state.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateStateSettersInCode = exports.updateStateSetters = exports.getUseStateCode = exports.processHookCode = void 0;
 const capitalize_1 = require("../../helpers/capitalize");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const patterns_1 = require("../../helpers/patterns");
 const transform_state_setters_1 = require("../../helpers/transform-state-setters");
@@ -34,24 +35,24 @@ const processStateValue = (options) => {
         if (!stateVal) {
             return '';
         }
-        const getDefaultCase = () => `const [${key}, ${getSetStateFnName(key)}] = useState(() => (${mapValue(value)}))`;
-        const value = stateVal.code || '';
+        let value = stateVal.code || '';
         const type = stateVal.type;
-        if (typeof value === 'string') {
-            switch (type) {
-                case 'getter':
-                    return (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
-                case 'function':
-                    return mapValue(value);
-                case 'method':
-                    return (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
-                default:
-                    return getDefaultCase();
-            }
+        const typeParameter = stateVal.typeParameter;
+        const stateType = options.typescript && stateVal.typeParameter ? `<${stateVal.typeParameter}>` : '';
+        let result = '';
+        if (type === 'getter') {
+            result = (0, function_1.pipe)(value, patterns_1.replaceGetterWithFunction, mapValue);
+        }
+        else if (type === 'function') {
+            result = mapValue(value);
+        }
+        else if (type === 'method') {
+            result = (0, function_1.pipe)(value, patterns_1.prefixWithFunction, mapValue);
         }
         else {
-            return getDefaultCase();
+            return `const [${key}, ${getSetStateFnName(key)}] = useState${stateType}(() => (${mapValue(value)}))`;
         }
+        return (0, get_typed_function_1.getTypedFunction)(result, options.typescript, typeParameter);
     };
 };
 const getUseStateCode = (json, options) => {

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

@@ -0,0 +1,3 @@
+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;

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

@@ -0,0 +1,108 @@
+"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 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) => {
+    var _a, _b, _c, _d, _e, _f;
+    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)(item, options, 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)(item, options, wrap, childComponents))
+            .join('\n')}
+      ${wrap ? '</Fragment>' : ''}
+    ) : ${!json.meta.else
+            ? 'null'
+            : `(${(0, exports.blockToStencil)(json.meta.else, options, false, 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];
+        str += ` ${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') {
+            // TODO: Add correct type here
+            str += ` ref={(el) => ${code.startsWith('this.') ? code : `this.${code}`} = el} `;
+        }
+        else if ((0, helpers_1.isEvent)(key)) {
+            const useKey = key === 'onChange' && blockName === 'input' ? 'onInput' : key;
+            str += ` ${useKey}={(${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)(item, options, true, childComponents))
+            .join('\n');
+    }
+    str += `</${blockName}>`;
+    return str;
+};
+exports.blockToStencil = blockToStencil;

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

@@ -0,0 +1,140 @@
+"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 dedent_1 = require("../../helpers/dedent");
+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 plugins_1 = require("../../modules/plugins");
+const standalone_1 = require("prettier/standalone");
+const componentToStencil = (_options = {
+    typescript: true, // Stencil is uses .tsx always
+}) => ({ component }) => {
+    var _a, _b, _c, _d, _e;
+    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);
+    const props = Array.from((0, get_props_1.getProps)(json));
+    const events = props.filter((prop) => (0, helpers_1.isEvent)(prop));
+    const defaultProps = json.defaultProps;
+    const childComponents = (0, get_child_components_1.getChildComponents)(json);
+    const processBindingOptions = { events };
+    options.plugins = (0, get_code_processor_plugins_1.getCodeProcessorPlugins)(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,
+    });
+    const 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);
+    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 coreImports = (0, helpers_1.getStencilCoreImportsAsString)(wrap, events, props, dataString);
+    let str = (0, dedent_1.dedent) `
+    ${(0, helpers_1.getImports)(json, options, childComponents)}
+    
+    import { ${coreImports} } from '@stencil/core';
+        
+    ${json.types ? json.types.join('\n') : ''}
+    
+    @Component({
+      tag: '${tagName}',
+      ${((_c = json.meta.useMetadata) === null || _c === void 0 ? void 0 : _c.isAttachedToShadowDom) ? 'shadow: true,' : ''}
+      ${css.length
+        ? `styles: \`
+        ${(0, indent_1.indent)(css, 8)}\`,`
+        : ''}
+    })
+    export class ${json.name} {
+        ${refs}
+        ${(0, helpers_1.getPropsAsCode)(props, defaultProps, json.propsTypeRef)}
+        ${dataString}
+        ${methodsString}
+
+        ${!json.hooks.onMount.length
+        ? ''
+        : `componentDidLoad() { ${(0, on_mount_1.stringifySingleScopeOnMount)(json)} }`}
+        ${!((_d = json.hooks.onUnMount) === null || _d === void 0 ? void 0 : _d.code)
+        ? ''
+        : `disconnectedCallback() { ${json.hooks.onUnMount.code} }`}
+        ${!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+        ? ''
+        : `componentDidUpdate() { ${json.hooks.onUpdate.map((hook) => hook.code).join('\n')} }`}
+
+      render() {
+        return (${wrap ? '<Host>' : ''}
+
+          ${json.children
+        .map((item) => (0, blocks_1.blockToStencil)(item, options, true, childComponents))
+        .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/{collect-class-string.js → helpers/collect-class-string.js}

@@ -1,9 +1,11 @@
 "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
-function collectClassString(json, bindingOpenChar = '{', bindingCloseChar = '}') {
+const collectClassString = (json) => {
     var _a, _b;
     const staticClasses = [];
     if (json.properties.class) {
@@ -37,5 +39,5 @@ function collectClassString(json, bindingOpenChar = '{', bindingCloseChar = '}')
         return `${bindingOpenChar}"${staticClassesString} " + ${dynamicClassesString}${bindingCloseChar}`;
     }
     return null;
-}
+};
 exports.collectClassString = collectClassString;

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

@@ -0,0 +1,24 @@
+import { ToStencilOptions } from '../../../generators/stencil/types';
+import { MitosisComponent, MitosisState } from '../../../types/mitosis-component';
+import { MitosisNode } from '../../../types/mitosis-node';
+export declare const isEvent: (key: string) => boolean;
+export type ProcessBindingOptions = {
+    events: string[];
+};
+export declare const processBinding: (code: string, { events }: ProcessBindingOptions) => string;
+export declare const getTagName: (name: string, { prefix }: ToStencilOptions) => string;
+export declare const getPropsAsCode: (props: string[], defaultProps?: MitosisState | undefined, propsTypeRef?: string) => 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
+ */
+export declare const getStencilCoreImportsAsString: (wrap: boolean, events: string[], props: string[], dataString: string) => string;
+export declare const getImports: (json: MitosisComponent, options: ToStencilOptions, childComponents: string[]) => string;

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImports = exports.getStencilCoreImportsAsString = exports.needsWrap = exports.getPropsAsCode = exports.getTagName = exports.processBinding = exports.isEvent = void 0;
+const dash_case_1 = require("../../../helpers/dash-case");
+const render_imports_1 = require("../../../helpers/render-imports");
+const strip_state_and_props_refs_1 = require("../../../helpers/strip-state-and-props-refs");
+const isEvent = (key) => key.startsWith('on');
+exports.isEvent = isEvent;
+/**
+ * We need to "emit" events those can be on multiple places, so we do it as post step
+ */
+const appendEmits = (str, events) => {
+    let code = str;
+    if (events.length) {
+        for (const event of events) {
+            code = code.replaceAll(`props.${event}(`, `props.${event}.emit(`);
+        }
+    }
+    return code;
+};
+const processBinding = (code, { events }) => {
+    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(appendEmits(code, events), { replaceWith: 'this.' });
+};
+exports.processBinding = processBinding;
+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, defaultProps, 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}` : '';
+        if ((0, exports.isEvent)(item)) {
+            return `@Event() ${item}: any${defaultPropString}`;
+        }
+        const type = propsTypeRef &&
+            propsTypeRef !== 'any' &&
+            propsTypeRef !== 'unknown' &&
+            propsTypeRef !== 'never'
+            ? `${propsTypeRef}["${item}"]`
+            : 'any';
+        return `@Prop() ${item}: ${type}${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
+ */
+const getStencilCoreImportsAsString = (wrap, events, props, dataString) => {
+    const stencilCoreImports = {
+        Component: true,
+        h: true,
+        Fragment: true,
+        Host: wrap,
+        Event: 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',
+        importMapper: (_, theImport, importedValues) => {
+            const childImport = importedValues.defaultImport;
+            if (childImport && childComponents.includes(childImport)) {
+                return `import {${childImport}} from '${theImport.path}';`;
+            }
+            return undefined;
+        },
+    });
+};
+exports.getImports = getImports;

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

@@ -1 +1 @@
-export * from './generate';
+export * from './component';

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

@@ -14,4 +14,4 @@ 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("./generate"), exports);
+__exportStar(require("./component"), exports);

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

@@ -0,0 +1,3 @@
+import { ProcessBindingOptions } from '../../../generators/stencil/helpers/index';
+import { ToStencilOptions } from '../../../generators/stencil/types';
+export declare const getCodeProcessorPlugins: (options: ToStencilOptions, processBindingOptions: ProcessBindingOptions) => import("../../..").Plugin[];

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCodeProcessorPlugins = void 0;
+const index_1 = require("../../../generators/stencil/helpers/index");
+const process_code_1 = require("../../../helpers/plugins/process-code");
+const getCodeProcessorPlugins = (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 'state':
+                case 'context-set':
+                case 'dynamic-jsx-elements':
+                case 'types':
+                    return (code) => (0, index_1.processBinding)(code, processBindingOptions);
+            }
+        }),
+    ];
+};
+exports.getCodeProcessorPlugins = getCodeProcessorPlugins;

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

@@ -1,4 +1,14 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToStencilOptions extends BaseTranspilerOptions {
+    /**
+     * 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 = {};

package/dist/src/generators/vue/compositionApi.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCompositionApiScript = void 0;
 const dedent_1 = require("../../helpers/dedent");
 const get_state_object_string_1 = require("../../helpers/get-state-object-string");
+const get_typed_function_1 = require("../../helpers/get-typed-function");
 const json5_1 = __importDefault(require("json5"));
 const lodash_1 = require("lodash");
 const helpers_1 = require("./helpers");
@@ -49,6 +50,12 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         getters: false,
         functions: true,
         format: 'variables',
+        valueMapper: (code, type, typeParameter) => {
+            if (type != 'data') {
+                return (0, get_typed_function_1.getTypedFunction)(code, isTs, typeParameter);
+            }
+            return code;
+        },
     });
     if (template.includes('_classStringToObject')) {
         methods += ` function _classStringToObject(str${isTs ? ': string' : ''}) {

package/dist/src/helpers/get-child-components.d.ts

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

package/dist/src/helpers/get-child-components.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildComponents = void 0;
+const is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const getChildComponents = (json) => {
+    const nodes = [];
+    const childComponents = [json.name]; // a component can be recursively used in itself
+    (0, legacy_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            nodes.push(item.name);
+        }
+    });
+    for (const { imports } of json.imports) {
+        for (const key of Object.keys(imports)) {
+            if (nodes.includes(key)) {
+                childComponents.push(key);
+            }
+        }
+    }
+    return childComponents;
+};
+exports.getChildComponents = getChildComponents;

package/dist/src/helpers/get-state-object-string.d.ts

@@ -8,6 +8,7 @@ interface GetStateObjectStringOptions {
     valueMapper?: ValueMapper;
     format?: 'object' | 'class' | 'variables';
     keyPrefix?: string;
+    withType?: boolean;
 }
 export declare const getMemberObjectString: (object: MitosisComponent['state'], userOptions?: GetStateObjectStringOptions) => string;
 export declare const stringifyContextValue: (object: MitosisContext['value'], userOptions?: GetStateObjectStringOptions) => string;

package/dist/src/helpers/get-state-object-string.js

@@ -8,37 +8,39 @@ const DEFAULT_OPTIONS = {
     data: true,
     functions: true,
     getters: true,
+    withType: false,
 };
-const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper }) => ([key, state]) => {
+const convertStateMemberToString = ({ data, format, functions, getters, keyPrefix, valueMapper, withType }) => ([key, state]) => {
     const keyValueDelimiter = format === 'object' ? ':' : '=';
     if (!state) {
         return undefined;
     }
     const { code, typeParameter } = state;
+    const type = withType && typeParameter ? `:${typeParameter}` : '';
     switch (state.type) {
         case 'function': {
-            if (functions === false || typeof code !== 'string') {
+            if (!functions) {
                 return undefined;
             }
             return `${keyPrefix} ${key} ${keyValueDelimiter} ${valueMapper(code, 'function', typeParameter, key)}`;
         }
         case 'method': {
-            if (functions === false || typeof code !== 'string') {
+            if (!functions) {
                 return undefined;
             }
             return `${keyPrefix} ${valueMapper(code, 'function', typeParameter, key)}`;
         }
         case 'getter': {
-            if (getters === false || typeof code !== 'string') {
+            if (!getters) {
                 return undefined;
             }
             return `${keyPrefix} ${valueMapper(code, 'getter', typeParameter, key)}`;
         }
         case 'property': {
-            if (data === false) {
+            if (!data) {
                 return undefined;
             }
-            return `${keyPrefix} ${key}${keyValueDelimiter} ${valueMapper(code, 'data', typeParameter, key)}`;
+            return `${keyPrefix} ${key}${type}${keyValueDelimiter} ${valueMapper(code, 'data', typeParameter, key)}`;
         }
         default:
             break;

package/dist/src/helpers/get-typed-function.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Get functions with typescript typing
+ */
+export declare const getTypedFunction: (code: string, typescript?: boolean, typeParameter?: string) => string;

package/dist/src/helpers/get-typed-function.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTypedFunction = void 0;
+/**
+ * Get functions with typescript typing
+ */
+const getTypedFunction = (code, typescript, typeParameter) => {
+    if (!typeParameter || !typescript) {
+        return code;
+    }
+    const firstParenthesisIndex = code.indexOf('{');
+    // The function should have at least one {
+    if (firstParenthesisIndex < 0) {
+        return code;
+    }
+    const preType = code.slice(0, firstParenthesisIndex - 1);
+    const postType = code.slice(firstParenthesisIndex, code.length);
+    return [preType, ': ', `ReturnType<${typeParameter}>`, postType].join('');
+};
+exports.getTypedFunction = getTypedFunction;

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

@@ -36,12 +36,13 @@ const mapRefs = (component, mapper) => {
                     const isGet = stateVal.type === 'getter';
                     const isSet = Boolean(value.match(patterns_1.SETTER));
                     component.state[key] = {
+                        ...stateVal,
                         code: replaceRefsInString(value.replace(/^(get |set )?/, 'function '), refs, mapper).replace(/^function /, isGet ? 'get ' : isSet ? 'set ' : ''),
-                        type: stateVal.type,
                     };
                     break;
                 case 'function':
                     component.state[key] = {
+                        ...stateVal,
                         code: replaceRefsInString(value, refs, mapper),
                         type: 'function',
                     };

package/dist/src/helpers/render-imports.js

@@ -105,7 +105,11 @@ const renderImport = ({ theImport, target, asyncComponentImports, preserveFileEx
         }
     }
     if (importMapper) {
-        return importMapper(component, theImport, importedValues, componentsUsed);
+        const importMapperResult = importMapper(component, theImport, importedValues, componentsUsed);
+        // If import mapper has no result we skip this
+        if (importMapperResult) {
+            return importMapperResult;
+        }
     }
     return importValue
         ? `import ${isTypeImport ? 'type' : ''} ${importValue} from '${path}';`

package/dist/src/helpers/strip-state-and-props-refs.js

@@ -71,14 +71,14 @@ const stripStateAndPropsRefs = (code, _options = {}) => {
         ...DEFAULT_OPTIONS,
         ..._options,
     };
-    if (includeProps !== false) {
+    if (includeProps) {
         newCode = (0, replace_identifiers_1.replacePropsIdentifier)(replaceWith)(newCode);
         // TODO: webcomponent edge-case
         if (/el\.this\.props/.test(newCode)) {
             newCode = newCode.replace(/el\.this\.props/g, 'el.props');
         }
     }
-    if (includeState !== false) {
+    if (includeState) {
         newCode = (0, replace_identifiers_1.replaceStateIdentifier)(replaceWith)(newCode);
     }
     return newCode;

package/dist/src/parsers/jsx/function-parser.js

@@ -258,6 +258,14 @@ const componentFunctionToJson = (node, context) => {
                     if (types.isObjectExpression(firstArg)) {
                         const useStoreState = (0, state_1.parseStateObjectToMitosisState)(firstArg);
                         Object.assign(state, useStoreState);
+                        const stateKeys = Object.keys(useStoreState);
+                        if (types.isTSTypeParameterInstantiation(init.typeParameters)) {
+                            const type = (0, generator_1.default)(init.typeParameters.params[0]);
+                            // Type for store has to be an object so we can use it like this
+                            for (const key of stateKeys) {
+                                state[key].typeParameter = `${type.code}["${key}"]`;
+                            }
+                        }
                     }
                 }
                 else if (init.callee.name === hooks_1.HOOKS.CONTEXT) {

package/package.json

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

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

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

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

@@ -1,214 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToStencil = void 0;
-const dash_case_1 = require("../../helpers/dash-case");
-const dedent_1 = require("../../helpers/dedent");
-const fast_clone_1 = require("../../helpers/fast-clone");
-const filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
-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 for_1 = require("../../helpers/nodes/for");
-const render_imports_1 = require("../../helpers/render-imports");
-const strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
-const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
-const collect_css_1 = require("../../helpers/styles/collect-css");
-const mitosis_node_1 = require("../../types/mitosis-node");
-const standalone_1 = require("prettier/standalone");
-const html_tags_1 = require("../../constants/html_tags");
-const plugins_1 = require("../../modules/plugins");
-const on_mount_1 = require("../helpers/on-mount");
-const collect_class_string_1 = require("./collect-class-string");
-const blockToStencil = (json, options = {}, insideJsx) => {
-    var _a, _b, _c, _d;
-    if (json.properties._text) {
-        return json.properties._text;
-    }
-    if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
-        if (insideJsx) {
-            return `{${processBinding(json.bindings._text.code)}}`;
-        }
-        return processBinding((_b = json.bindings) === null || _b === void 0 ? void 0 : _b._text.code);
-    }
-    if ((0, mitosis_node_1.checkIsForNode)(json)) {
-        const wrap = json.children.length !== 1;
-        const forArgs = (0, for_1.getForArguments)(json).join(', ');
-        const expression = `${processBinding((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code)}?.map((${forArgs}) => (
-      ${wrap ? '<>' : ''}${json.children
-            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((item) => blockToStencil(item, options, wrap))
-            .join('\n')}${wrap ? '</>' : ''}
-    ))`;
-        if (insideJsx) {
-            return `{${expression}}`;
-        }
-        else {
-            return expression;
-        }
-    }
-    else if (json.name === 'Show') {
-        const wrap = json.children.length !== 1;
-        const expression = `${processBinding((_d = json.bindings.when) === null || _d === void 0 ? void 0 : _d.code)} ? (
-      ${wrap ? '<>' : ''}${json.children
-            .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map((item) => blockToStencil(item, options, wrap))
-            .join('\n')}${wrap ? '</>' : ''}
-    ) : ${!json.meta.else ? 'null' : blockToStencil(json.meta.else, options, false)}`;
-        if (insideJsx) {
-            return `{${expression}}`;
-        }
-        else {
-            return expression;
-        }
-    }
-    let str = '';
-    str += `<${json.name} `;
-    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];
-        str += ` ${key}="${value}" `;
-    }
-    for (const key in json.bindings) {
-        const { code, arguments: cusArgs = ['event'], type } = json.bindings[key];
-        if (type === 'spread') {
-            str += ` {...(${code})} `;
-        }
-        else if (key === 'ref') {
-            str += ` ref={(el) => this.${code} = el} `;
-        }
-        else if (key.startsWith('on')) {
-            const useKey = key === 'onChange' && json.name === 'input' ? 'onInput' : key;
-            str += ` ${useKey}={${cusArgs.join(',')} => ${processBinding(code)}} `;
-        }
-        else {
-            str += ` ${key}={${processBinding(code)}} `;
-        }
-    }
-    if (html_tags_1.SELF_CLOSING_HTML_TAGS.has(json.name)) {
-        return str + ' />';
-    }
-    str += '>';
-    if (json.children) {
-        str += json.children.map((item) => blockToStencil(item, options, true)).join('\n');
-    }
-    str += `</${json.name}>`;
-    return str;
-};
-function processBinding(code) {
-    return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
-}
-const componentToStencil = (_options = {}) => ({ component }) => {
-    var _a, _b, _c;
-    const options = (0, merge_options_1.initializeOptions)({ target: 'stencil', component, defaults: _options });
-    let json = (0, fast_clone_1.fastClone)(component);
-    if (options.plugins) {
-        json = (0, plugins_1.runPreJsonPlugins)({ json, plugins: options.plugins });
-    }
-    const props = (0, get_props_1.getProps)(component);
-    let css = (0, collect_css_1.collectCss)(json);
-    (0, map_refs_1.mapRefs)(component, (refName) => `this.${refName}`);
-    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() ',
-        valueMapper: (code) => processBinding(code),
-    });
-    const methodsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
-        format: 'class',
-        data: false,
-        functions: true,
-        getters: true,
-        valueMapper: (code) => processBinding(code),
-    });
-    const wrap = json.children.length !== 1;
-    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 str = (0, dedent_1.dedent) `
-    ${(0, render_imports_1.renderPreComponent)({
-        explicitImportFileExtension: options.explicitImportFileExtension,
-        component: json,
-        target: 'stencil',
-    })}
-
-    import { Component, Prop, h, State, Fragment } from '@stencil/core';
-
-    @Component({
-      tag: '${
-    /**
-     * You can set the tagName in your Mitosis component as
-     *
-     *    useMetadata({
-     *      tagName: 'my-tag
-     *    })
-     *
-     *    export default function ...
-     */
-    ((_a = json.meta.useMetadata) === null || _a === void 0 ? void 0 : _a.tagName) || (0, dash_case_1.dashCase)(json.name)}',
-      ${css.length
-        ? `styles: \`
-        ${(0, indent_1.indent)(css, 8)}\`,`
-        : ''}
-    })
-    export default class ${json.name} {
-
-      ${Array.from(props)
-        .map((item) => `@Prop() ${item}: any`)
-        .join('\n')}
-
-        ${dataString}
-        ${methodsString}
-
-        ${!json.hooks.onMount.length
-        ? ''
-        : `componentDidLoad() { ${processBinding((0, on_mount_1.stringifySingleScopeOnMount)(json))} }`}
-        ${!((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code)
-        ? ''
-        : `disconnectedCallback() { ${processBinding(json.hooks.onUnMount.code)} }`}
-        ${!((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)
-        ? ''
-        : json.hooks.onUpdate.map((hook) => `componentDidUpdate() { ${processBinding(hook.code)} }`)}
-
-      render() {
-        return (${wrap ? '<>' : ''}
-
-          ${json.children.map((item) => blockToStencil(item, options, true)).join('\n')}
-
-        ${wrap ? '</>' : ''})
-      }
-    }
-  `;
-    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;