@builder.io/mitosis 0.4.7 → 0.5.0

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/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.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;