@builder.io/mitosis 0.4.7 → 0.5.1

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");
@@ -174,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}" `;
@@ -638,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)

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

@@ -342,7 +342,7 @@ const _componentToReact = (json, options, isSubComponent = false) => {
     // NOTE: `collectReactNativeStyles` must run before style generation in the component generation body, as it has
     // side effects that delete styles bindings from the JSON.
     const reactNativeStyles = options.stylesType === 'react-native' && componentHasStyles
-        ? (0, react_native_1.collectReactNativeStyles)(json)
+        ? (0, react_native_1.collectReactNativeStyles)(json, options)
         : undefined;
     const propType = json.propsTypeRef || 'any';
     const componentArgs = [`props${options.typescript ? `:${propType}` : ''}`, options.forwardRef]

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

@@ -5,6 +5,7 @@ export interface ToReactOptions extends BaseTranspilerOptions {
     format?: 'lite' | 'safe';
     type: 'dom' | 'native' | 'taro';
     preact?: boolean;
+    sanitizeReactNative?: boolean;
     rsc?: boolean;
     forwardRef?: string;
     experimental?: any;

package/dist/src/generators/react-native/extract-css-var-default-value.d.ts

@@ -0,0 +1 @@
+export declare function extractCssVarDefaultValue(value: string): string;

package/dist/src/generators/react-native/extract-css-var-default-value.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractCssVarDefaultValue = void 0;
+function extractCssVarDefaultValue(value) {
+    // Regular expression to find var() expressions
+    const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+    // Function to replace var() with its fallback
+    let newValue = value;
+    let match;
+    while ((match = newValue.match(varRegex))) {
+        newValue = newValue.replace(match[0], match[1].trim());
+    }
+    return newValue;
+}
+exports.extractCssVarDefaultValue = extractCssVarDefaultValue;

package/dist/src/generators/react-native/helpers.d.ts

@@ -0,0 +1,3 @@
+type Styles = Record<string, string | number>;
+export declare function cleanReactNativeBlockStyles(styles: Styles): Styles;
+export {};

package/dist/src/generators/react-native/helpers.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cleanReactNativeBlockStyles = void 0;
+const extract_css_var_default_value_1 = require("./extract-css-var-default-value");
+const lengthPattern = /^-?\d*\.?\d+(px|%)?$/;
+const pixelPattern = /^-?\d*\.?\d+(px)?$/;
+const numberPattern = /^-?\d*\.?\d+$/;
+const colorPattern = /^(#[0-9A-Fa-f]{3,8}|(rgb|hsl)a?\(.*\)|[a-zA-Z]+)$/;
+// List of unsupported properties in React Native
+const unsupportedProps = [
+    'textShadow',
+    'boxShadow',
+    'transition',
+    'cursor',
+    'filter',
+    'overflowX',
+    'overflowY',
+    'animation',
+    'backgroundImage',
+    'backgroundPosition',
+    'backgroundSize',
+    'backgroundRepeat',
+    'whiteSpace',
+];
+// Ensure CSS property value is valid for React Native
+function validateReactNativeCssProperty(key, value) {
+    const cssProperties = {
+        width: (value) => lengthPattern.test(value),
+        height: (value) => lengthPattern.test(value),
+        backgroundColor: (value) => pixelPattern.test(value) || /^#[0-9A-Fa-f]{6}/.test(value),
+        minWidth: (value) => lengthPattern.test(value) || value === 'auto',
+        maxWidth: (value) => lengthPattern.test(value) || value === 'auto',
+        minHeight: (value) => lengthPattern.test(value) || value === 'auto',
+        maxHeight: (value) => lengthPattern.test(value) || value === 'auto',
+        aspectRatio: (value) => numberPattern.test(value) || /^\d+\/\d+$/.test(value),
+        // Flexbox Properties
+        flex: (value) => numberPattern.test(value),
+        flexBasis: (value) => lengthPattern.test(value) || value === 'auto',
+        flexDirection: (value) => ['row', 'row-reverse', 'column', 'column-reverse'].includes(value),
+        flexGrow: (value) => numberPattern.test(value),
+        flexShrink: (value) => numberPattern.test(value),
+        flexWrap: (value) => ['wrap', 'nowrap', 'wrap-reverse'].includes(value),
+        // Alignment Properties
+        alignContent: (value) => ['flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around'].includes(value),
+        alignItems: (value) => ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'].includes(value),
+        alignSelf: (value) => ['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'].includes(value),
+        justifyContent: (value) => [
+            'flex-start',
+            'flex-end',
+            'center',
+            'space-between',
+            'space-around',
+            'space-evenly',
+        ].includes(value),
+        // Text Properties
+        color: (value) => colorPattern.test(value),
+        fontFamily: () => true, // Any string is valid
+        fontSize: (value) => pixelPattern.test(value),
+        fontStyle: (value) => ['normal', 'italic'].includes(value),
+        fontWeight: (value) => ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'].includes(value),
+        display: (value) => ['none', 'flex'].includes(value),
+    };
+    // If the property is not explicitly defined, consider it valid
+    if (!cssProperties[key])
+        return true;
+    // Convert number to string for validation
+    const stringValue = typeof value === 'number' ? value.toString() : value;
+    return cssProperties[key](stringValue);
+}
+// Clean up shorthand and unsupported styles for React Native
+function cleanReactNativeBlockStyles(styles) {
+    return Object.entries(styles).reduce((acc, [key, value]) => {
+        var _a;
+        // Remove unsupported properties
+        if (unsupportedProps.includes(key))
+            return acc;
+        // Handle CSS variables
+        if (typeof value === 'string' && value.includes('var(')) {
+            value = (_a = (0, extract_css_var_default_value_1.extractCssVarDefaultValue)(value)) !== null && _a !== void 0 ? _a : value;
+        }
+        // Parse pixel units
+        if (typeof value === 'string') {
+            const pixelMatch = value.match(/^(-?\d+(\.\d+)?)px$/);
+            if (pixelMatch)
+                value = parseFloat(pixelMatch[1]);
+        }
+        // Handle shorthand properties
+        if (key === 'margin' || key === 'padding') {
+            return { ...acc, ...expandShorthand(key, value) };
+        }
+        // Convert 'background' to 'backgroundColor'
+        if (key === 'background' && typeof value === 'string') {
+            acc.backgroundColor = value;
+            return { ...acc, backgroundColor: value };
+        }
+        // Handle borderRadius
+        if (key === 'borderRadius' && typeof value === 'string') {
+            return { ...acc, ...expandBorderRadius(value) };
+        }
+        // Handle invalid display values
+        if (key === 'display' && value !== 'flex' && value !== 'none') {
+            return acc;
+        }
+        // Validate and add the property
+        if (validateReactNativeCssProperty(key, value)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+exports.cleanReactNativeBlockStyles = cleanReactNativeBlockStyles;
+function expandShorthand(property, value) {
+    if (typeof value !== 'string')
+        return { [property]: value };
+    const values = value.split(' ').map((v) => parseFloat(v) || 0);
+    const [top, right = top, bottom = top, left = right] = values;
+    return {
+        [`${property}Top`]: top,
+        [`${property}Right`]: right,
+        [`${property}Bottom`]: bottom,
+        [`${property}Left`]: left,
+    };
+}
+function expandBorderRadius(value) {
+    const values = value.split(' ').map((v) => parseInt(v, 10));
+    const [topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight] = values;
+    return {
+        borderTopLeftRadius: topLeft,
+        borderTopRightRadius: topRight,
+        borderBottomRightRadius: bottomRight,
+        borderBottomLeftRadius: bottomLeft,
+    };
+}

package/dist/src/generators/react-native/index.d.ts

@@ -2,5 +2,6 @@ import { ToReactNativeOptions } from '../../generators/react-native/types';
 import { ClassStyleMap } from '../../helpers/styles/helpers';
 import { MitosisComponent } from '../../types/mitosis-component';
 import { TranspilerGenerator } from '../../types/transpiler';
-export declare const collectReactNativeStyles: (json: MitosisComponent) => ClassStyleMap;
+import { ToReactOptions } from '../react';
+export declare const collectReactNativeStyles: (json: MitosisComponent, options: ToReactOptions) => ClassStyleMap;
 export declare const componentToReactNative: TranspilerGenerator<Partial<ToReactNativeOptions>>;

package/dist/src/generators/react-native/index.js

@@ -25,7 +25,7 @@ const sanitizeStyle = (obj) => (key, value) => {
         return;
     }
 };
-const collectReactNativeStyles = (json) => {
+const collectReactNativeStyles = (json, options) => {
     const styleMap = {};
     const componentIndexes = {};
     const getStyleSheetName = (item) => {
@@ -45,7 +45,7 @@ const collectReactNativeStyles = (json) => {
             // Style properties like `"20px"` need to be numbers like `20` for react native
             for (const key in cssValue) {
                 sanitizeStyle(cssValue)(key, cssValue[key]);
-                cssValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(cssValue);
+                cssValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(cssValue, options);
             }
         }
         try {
@@ -54,7 +54,7 @@ const collectReactNativeStyles = (json) => {
                 // Style properties like `"20px"` need to be numbers like `20` for react native
                 for (const key in styleValue) {
                     sanitizeStyle(styleValue)(key, styleValue[key]);
-                    styleValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(styleValue);
+                    styleValue = (0, sanitize_react_native_block_styles_1.sanitizeReactNativeBlockStyles)(styleValue, options);
                 }
                 item.bindings.style.code = json5_1.default.stringify(styleValue);
             }

package/dist/src/generators/react-native/sanitize-react-native-block-styles.d.ts

@@ -1,3 +1,4 @@
+import { ToReactOptions } from '../react/types';
 type Styles = Record<string, string | number>;
-export declare const sanitizeReactNativeBlockStyles: (styles: Styles) => Styles;
+export declare const sanitizeReactNativeBlockStyles: (styles: Styles, options: ToReactOptions) => Styles;
 export {};

package/dist/src/generators/react-native/sanitize-react-native-block-styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sanitizeReactNativeBlockStyles = void 0;
+const helpers_1 = require("./helpers");
 const propertiesThatMustBeNumber = new Set(['lineHeight']);
 const displayValues = new Set(['flex', 'none']);
 const normalizeNumber = (value) => {
@@ -15,10 +16,15 @@ const normalizeNumber = (value) => {
         return value;
     }
 };
-const sanitizeReactNativeBlockStyles = (styles) => {
+const sanitizeReactNativeBlockStyles = (styles, options) => {
+    if (options.sanitizeReactNative) {
+        return (0, helpers_1.cleanReactNativeBlockStyles)(styles);
+    }
     return Object.keys(styles).reduce((acc, key) => {
         const propertyValue = styles[key];
-        if (key === 'display' && !displayValues.has(propertyValue)) {
+        if (typeof propertyValue === 'string' &&
+            key === 'display' &&
+            !displayValues.has(propertyValue)) {
             console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
             return acc;
         }

package/dist/src/generators/react-native/types.d.ts

@@ -1,5 +1,6 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactNativeOptions extends BaseTranspilerOptions {
+    sanitizeReactNative?: boolean;
     stylesType: 'emotion' | 'react-native' | 'twrnc' | 'native-wind';
     stateType: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
 }

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/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-typed-function.js

@@ -15,6 +15,6 @@ const getTypedFunction = (code, typescript, typeParameter) => {
     }
     const preType = code.slice(0, firstParenthesisIndex - 1);
     const postType = code.slice(firstParenthesisIndex, code.length);
-    return [preType, ': ', typeParameter, postType].join('');
+    return [preType, ': ', `ReturnType<${typeParameter}>`, postType].join('');
 };
 exports.getTypedFunction = getTypedFunction;

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/package.json

@@ -22,7 +22,7 @@
     "name": "Builder.io",
     "url": "https://www.builder.io"
   },
-  "version": "0.4.7",
+  "version": "0.5.1",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
@@ -96,8 +96,6 @@
     "@types/rollup__plugin-virtual": "^2.0.1",
     "concurrently": "^8.2.2",
     "fs-extra-promise": "^1.0.1",
-    "nx": "^19.0.8",
-    "nx-cloud": "^19.0.0",
     "rimraf": "^5.0.5",
     "rollup": "^2.70.1",
     "strip-ansi": "^6.0.1",

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;