@builder.io/mitosis 0.0.91 → 0.0.93

package/dist/src/generators/qwik/component-generator.js

@@ -13,6 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentToQwik = void 0;
+var standalone_1 = require("prettier/standalone");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var fast_clone_1 = require("../../helpers/fast-clone");
 var collect_css_1 = require("../../helpers/styles/collect-css");
@@ -84,7 +85,7 @@ var componentToQwik = function (userOptions) {
             file.exportDefault(component.name);
             emitStyles(file, css_1);
             DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
-            var sourceFile = '// GENERATED BY MITOSIS\n\n' + file.toString();
+            var sourceFile = file.toString();
             if (userOptions.plugins) {
                 sourceFile = (0, plugins_1.runPreCodePlugins)(sourceFile, userOptions.plugins);
                 sourceFile = (0, plugins_1.runPostCodePlugins)(sourceFile, userOptions.plugins);
@@ -99,11 +100,11 @@ var componentToQwik = function (userOptions) {
 };
 exports.componentToQwik = componentToQwik;
 function emitExports(file, component) {
-    component.exports &&
-        Object.keys(component.exports).forEach(function (key) {
-            var exportObj = component.exports[key];
-            file.src.emit(exportObj.code);
-        });
+    Object.keys(component.exports || {}).forEach(function (key) {
+        var exportObj = component.exports[key];
+        var code = exportObj.code.startsWith('export ') ? exportObj.code : "export ".concat(exportObj.code);
+        file.src.emit(code);
+    });
 }
 function emitTagNameHack(file, component, metadataValue) {
     if (typeof metadataValue === 'string' && metadataValue) {
@@ -154,6 +155,9 @@ function emitJSX(file, component, mutable) {
     var handlers = new Map();
     var styles = new Map();
     var parentSymbolBindings = {};
+    if (file.options.isPretty) {
+        file.src.emit('\n\n');
+    }
     file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, parentSymbolBindings));
 }
 function emitUseContextProvider(file, component) {
@@ -194,11 +198,33 @@ function emitUseStyles(file, component) {
     var css = (0, collect_css_1.collectCss)(component, { prefix: component.name });
     if (css) {
         file.src.emit(file.import(file.qwikModule, 'useStylesScoped$').localName, '(STYLES);');
+        if (file.options.isPretty) {
+            file.src.emit('\n\n');
+        }
     }
     return css;
 }
 function emitStyles(file, css) {
     if (css) {
+        if (file.options.isPretty) {
+            file.src.emit('\n\n');
+            try {
+                css = (0, standalone_1.format)(css, {
+                    parser: 'css',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-postcss'),
+                    ],
+                });
+            }
+            catch (e) {
+                throw new Error(e +
+                    '\n' +
+                    '========================================================================\n' +
+                    css +
+                    '\n\n========================================================================');
+            }
+        }
         file.exportConst('STYLES', '`\n' + css.replace(/`/g, '\\`') + '`\n');
     }
 }

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

@@ -109,9 +109,15 @@ function addComponent(fileSet, component, opts) {
 exports.addComponent = addComponent;
 function generateStyles(fromFile, dstFile, symbol, scoped) {
     return function () {
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
         this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'useStylesScopedQrl' : 'useStylesQrl'), [
             generateQrl(fromFile, dstFile, symbol),
         ]), ';');
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
     };
 }
 function addBuilderBlockClass(children) {

package/dist/src/generators/qwik/src-generator.d.ts

@@ -47,6 +47,7 @@ export declare class SrcBuilder {
     typeParameters(typeParameters: string[] | undefined): void;
     jsxExpression(expression: EmitFn): void;
     jsxBegin(symbol: Symbol | string, props: Record<string, any>, bindings: Record<string, any>): void;
+    isSelfClosingTag(symbol: Symbol | string): boolean;
     jsxEnd(symbol: Symbol | string): void;
     jsxBeginFragment(symbol: Symbol): void;
     jsxEndFragment(): void;

package/dist/src/generators/qwik/src-generator.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
 var standalone_1 = require("prettier/standalone");
+var jsx_1 = require("../../parsers/jsx");
 var builder_1 = require("../../parsers/builder");
 var stable_serialize_1 = require("./stable-serialize");
 var File = /** @class */ (function () {
@@ -49,6 +50,9 @@ var File = /** @class */ (function () {
         this.src.const(name, value, true, locallyVisible);
     };
     File.prototype.exportDefault = function (symbolName) {
+        if (this.options.isPretty) {
+            this.src.emit('\n\n');
+        }
         if (this.options.isModule) {
             this.src.emit('export default ', symbolName, ';');
         }
@@ -82,6 +86,7 @@ var File = /** @class */ (function () {
                         require('prettier/parser-postcss'),
                         require('prettier/parser-html'),
                         require('prettier/parser-babel'),
+                        require('prettier-plugin-organize-imports'),
                     ],
                     htmlWhitespaceSensitivity: 'ignore',
                 });
@@ -155,6 +160,9 @@ var SrcBuilder = /** @class */ (function () {
                 });
             });
         }
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
         return this;
     };
     SrcBuilder.prototype.emit = function () {
@@ -320,7 +328,12 @@ var SrcBuilder = /** @class */ (function () {
                 var key = lastProperty(rawKey);
                 if (isEvent(key)) {
                     key = key + '$';
-                    binding_1 = "(event)=>".concat(binding_1);
+                    if (this_1.file.options.isJSX) {
+                        binding_1 = "(event)=>".concat(binding_1);
+                    }
+                    else {
+                        binding_1 = "".concat(this_1.file.import(this_1.file.qwikModule, '$').localName, "((event)=>").concat(binding_1, ")");
+                    }
                 }
                 else if (!binding_1 && rawKey in props) {
                     binding_1 = quote(props[rawKey]);
@@ -349,7 +362,9 @@ var SrcBuilder = /** @class */ (function () {
             _loop_1(rawKey);
         }
         if (this.isJSX) {
-            this.emit('>');
+            if (!this.isSelfClosingTag(symbol)) {
+                this.emit('>');
+            }
         }
         else {
             this.emit('},');
@@ -377,9 +392,17 @@ var SrcBuilder = /** @class */ (function () {
             }
         }
     };
+    SrcBuilder.prototype.isSelfClosingTag = function (symbol) {
+        return jsx_1.selfClosingTags.has(String(symbol));
+    };
     SrcBuilder.prototype.jsxEnd = function (symbol) {
         if (this.isJSX) {
-            this.emit('</', symbol, '>');
+            if (this.isSelfClosingTag(symbol)) {
+                this.emit(' />');
+            }
+            else {
+                this.emit('</', symbol, '>');
+            }
         }
         else {
             this.emit('),');

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

@@ -10,9 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.blockToReact = void 0;
 var lodash_1 = require("lodash");
+var is_children_1 = __importDefault(require("../../helpers/is-children"));
+var slots_1 = require("../../helpers/slots");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var is_valid_attribute_name_1 = require("../../helpers/is-valid-attribute-name");
 var for_1 = require("../../helpers/nodes/for");
@@ -133,7 +138,9 @@ var blockToReact = function (json, options, component, parentSlots) {
     }
     if ((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.code) {
         var processed = (0, helpers_1.processBinding)(json.bindings._text.code, options);
-        if (options.type === 'native') {
+        if (options.type === 'native' &&
+            !(0, is_children_1.default)({ node: json }) &&
+            !(0, slots_1.isSlotProperty)(json.bindings._text.code.split('.')[1] || '')) {
             return "<Text>{".concat(processed, "}</Text>");
         }
         return "{".concat(processed, "}");

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

@@ -142,7 +142,7 @@ exports.componentToPreact = componentToPreact;
 var componentToReact = function (reactOptions) {
     if (reactOptions === void 0) { reactOptions = {}; }
     return function (_a) {
-        var component = _a.component;
+        var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
         var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, reactOptions);
         if (options.plugins) {
@@ -168,7 +168,7 @@ var componentToReact = function (reactOptions) {
                     .replace(/;\n\nimport\s/g, ';\nimport ');
             }
             catch (err) {
-                console.error('Format error for file:', str, JSON.stringify(json, null, 2));
+                console.error('Format error for file:');
                 throw err;
             }
         }

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

@@ -23,13 +23,14 @@ var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
 var react_1 = require("./react");
 var bindings_1 = require("../helpers/bindings");
 var merge_options_1 = require("../helpers/merge-options");
+var is_children_1 = __importDefault(require("../helpers/is-children"));
 var stylePropertiesThatMustBeNumber = new Set(['lineHeight']);
 var MEDIA_QUERY_KEY_REGEX = /^@media.*/;
 var collectReactNativeStyles = function (json) {
     var styleMap = {};
     var componentIndexes = {};
     (0, traverse_1.default)(json).forEach(function (item) {
-        var _a;
+        var _a, _b;
         if (!(0, is_mitosis_node_1.isMitosisNode)(item) || typeof ((_a = item.bindings.css) === null || _a === void 0 ? void 0 : _a.code) !== 'string') {
             return;
         }
@@ -62,7 +63,10 @@ var collectReactNativeStyles = function (json) {
         var componentName = (0, lodash_1.camelCase)(item.name || 'view');
         var index = (componentIndexes[componentName] = (componentIndexes[componentName] || 0) + 1);
         var className = "".concat(componentName).concat(index);
-        item.bindings.style = (0, bindings_1.createSingleBinding)({ code: "styles.".concat(className) });
+        var styleSheetName = "styles.".concat(className);
+        item.bindings.style = (0, bindings_1.createSingleBinding)({
+            code: ((_b = item.bindings.style) === null || _b === void 0 ? void 0 : _b.code.replace(/}$/, ", ...".concat(styleSheetName, " }"))) || styleSheetName,
+        });
         styleMap[className] = value;
     });
     return styleMap;
@@ -80,10 +84,14 @@ var PROCESS_REACT_NATIVE_PLUGIN = function () { return ({
                 var _a, _b, _c, _d;
                 if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
                     // TODO: handle TextInput, Image, etc
-                    if (node.name.toLowerCase() === node.name) {
+                    if ((0, is_children_1.default)({ node: node })) {
+                        node.name = '';
+                    }
+                    else if (node.name.toLowerCase() === node.name) {
                         node.name = 'View';
                     }
-                    if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) || ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
+                    else if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
+                        ((_d = (_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.trim()) === null || _d === void 0 ? void 0 : _d.length)) {
                         node.name = 'Text';
                     }
                     if (node.properties.class) {

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

@@ -13,6 +13,12 @@ var is_upper_case_1 = require("../../helpers/is-upper-case");
 var for_1 = require("../../helpers/nodes/for");
 var helpers_1 = require("./helpers");
 var bindings_1 = require("../../helpers/bindings");
+/**
+ * blockToSvelte executed after stripStateAndProps,
+ * when stripStateAndProps is executed,
+ * SLOT_PREFIX from `slot` change to `$$slots.`
+ */
+var SLOT_PREFIX = '$$slots.';
 var mappers = {
     Fragment: function (_a) {
         var _b;
@@ -71,7 +77,7 @@ var mappers = {
             }
             return "\n        <span #".concat(key, ">\n        ").concat((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code, "\n        </span>\n      ");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName, SLOT_PREFIX).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var BINDINGS_MAPPER = {
@@ -153,8 +159,8 @@ var blockToSvelte = function (_a) {
     }
     var textCode = (_b = json.bindings._text) === null || _b === void 0 ? void 0 : _b.code;
     if (textCode) {
-        if ((0, slots_1.isSlotProperty)(textCode)) {
-            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode).toLowerCase(), "\"/>");
+        if ((0, slots_1.isSlotProperty)(textCode, SLOT_PREFIX)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase(), "\"/>");
         }
         return "{".concat(textCode, "}");
     }

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

@@ -2,12 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stripStateAndProps = void 0;
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var slots_1 = require("../../helpers/slots");
 var stripStateAndProps = function (_a) {
     var options = _a.options, json = _a.json;
     return function (code) {
         return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
             includeState: options.stateType === 'variables',
-            replaceWith: function (name) { return (name === 'children' ? '$$slots.default' : name); },
+            replaceWith: function (name) {
+                return name === 'children'
+                    ? '$$slots.default'
+                    : (0, slots_1.isSlotProperty)(name)
+                        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$$slots.".concat(x); })
+                        : name;
+            },
         });
     };
 };

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

@@ -34,6 +34,12 @@ var SPECIAL_PROPERTIES = {
     V_ON_AT: '@',
     V_BIND: 'v-bind',
 };
+/**
+ * blockToVue executed after processBinding,
+ * when processBinding is executed,
+ * SLOT_PREFIX from `slot` change to `$slots.`
+ */
+var SLOT_PREFIX = '$slots.';
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDING_MAPPERS = {
     innerHTML: 'v-html',
@@ -67,7 +73,7 @@ var NODE_MAPPERS = {
     Show: function (json, options, scope) {
         var _a, _b, _c, _d, _e, _f;
         var _g, _h;
-        var ifValue = (0, slots_1.replaceSlotsInString)(((_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code) || '', function (slotName) { return "$slots.".concat(slotName); });
+        var ifValue = ((_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code) || '';
         var defaultShowTemplate = "\n    <template ".concat(SPECIAL_PROPERTIES.V_IF, "=\"").concat((0, helpers_1.encodeQuotes)(ifValue), "\">\n      ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n    </template>\n    ").concat((0, is_mitosis_node_1.isMitosisNode)(json.meta.else)
             ? "\n        <template ".concat(SPECIAL_PROPERTIES.V_ELSE, ">\n          ").concat((0, exports.blockToVue)(json.meta.else, options), "\n        </template>")
             : '', "\n    ");
@@ -190,7 +196,7 @@ var NODE_MAPPERS = {
             }
             return "\n        <template #".concat(key, ">\n          ").concat((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code, "\n        </template>\n      ");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName, SLOT_PREFIX).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var stringifyBinding = function (node) {
@@ -292,8 +298,8 @@ var blockToVue = function (node, options, scope) {
     }
     var textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
     if (textCode) {
-        if ((0, slots_1.isSlotProperty)(textCode)) {
-            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode).toLowerCase(), "\"/>");
+        if ((0, slots_1.isSlotProperty)(textCode, SLOT_PREFIX)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode, SLOT_PREFIX).toLowerCase(), "\"/>");
         }
         return "{{".concat(textCode, "}}");
     }

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

@@ -15,8 +15,9 @@ declare type ProcessBinding = {
     json: MitosisComponent;
     preserveGetter?: boolean;
     thisPrefix?: 'this' | '_this';
+    codeType?: 'state' | 'hooks' | 'bindings' | 'hooks-deps' | 'properties';
 };
-export declare const processBinding: ({ code, options, json, preserveGetter, thisPrefix, }: ProcessBinding) => string;
+export declare const processBinding: ({ code, options, json, preserveGetter, thisPrefix, codeType, }: ProcessBinding) => string;
 export declare const getContextValue: (args: Pick<ProcessBinding, 'options' | 'json' | 'thisPrefix'>) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
 export declare const checkIfContextHasStrName: (context: ContextGetInfo | ContextSetInfo) => boolean;
 export declare const getContextKey: (context: ContextGetInfo | ContextSetInfo) => string;

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

@@ -29,6 +29,7 @@ var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
 var patterns_1 = require("../../helpers/patterns");
 var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var slots_1 = require("../../helpers/slots");
 var html_tags_1 = require("../../constants/html_tags");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
@@ -131,29 +132,67 @@ function prefixMethodsWithThis(input, component, options) {
         return input;
     }
 }
+function optionsApiStateAndPropsReplace(name, thisPrefix, codeType) {
+    if (codeType === 'bindings') {
+        return (0, slots_1.isSlotProperty)(name) ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$slots.".concat(x); }) : name;
+    }
+    if (name === 'children' || name.startsWith('children.')) {
+        return "".concat(thisPrefix, ".$slots.default");
+    }
+    return (0, slots_1.isSlotProperty)(name)
+        ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "".concat(thisPrefix, ".$slots.").concat(x); })
+        : "".concat(thisPrefix, ".").concat(name);
+}
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 var processBinding = function (_a) {
-    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b, _c = _a.thisPrefix, thisPrefix = _c === void 0 ? 'this' : _c;
+    var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b, _c = _a.thisPrefix, thisPrefix = _c === void 0 ? 'this' : _c, codeType = _a.codeType;
     try {
-        return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-            includeState: true,
-            // we don't want to process `props` in the Composition API because it has a `props` ref,
-            // therefore we can keep pointing to `props.${value}`
-            includeProps: options.api === 'options',
+        return (0, function_1.pipe)(
+        // processed twice, once for props and once for state
+        (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+            includeState: false,
+            includeProps: true,
             replaceWith: function (name) {
                 switch (options.api) {
+                    // keep pointing to `props.${value}`
                     case 'composition':
-                        return name;
-                    case 'options':
+                        if (codeType === 'bindings') {
+                            return (0, slots_1.isSlotProperty)(name)
+                                ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "$slots.".concat(x); })
+                                : name;
+                        }
                         if (name === 'children' || name.startsWith('children.')) {
-                            return '${thisPrefix}.$slots.default';
+                            return "useSlots().default";
                         }
-                        return "".concat(thisPrefix, ".").concat(name);
+                        return (0, slots_1.isSlotProperty)(name)
+                            ? (0, slots_1.replaceSlotsInString)(name, function (x) { return "useSlots().".concat(x); })
+                            : "props.".concat(name);
+                    case 'options':
+                        return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
                 }
             },
-        }), function (x) {
-            return (0, function_1.pipe)(x, function (code) { return processRefs({ input: code, component: json, options: options, thisPrefix: thisPrefix }); }, function (code) { return prefixMethodsWithThis(code, json, options); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
+        }), function (code) {
+            return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+                includeState: true,
+                includeProps: false,
+                replaceWith: function (name) {
+                    switch (options.api) {
+                        case 'composition':
+                            return name;
+                        case 'options':
+                            return optionsApiStateAndPropsReplace(name, thisPrefix, codeType);
+                    }
+                },
+            });
+        }, function (x) {
+            return (0, function_1.pipe)(x, 
+            // bindings does not need process refs and prefix this
+            function (code) {
+                return codeType === 'bindings'
+                    ? code
+                    : processRefs({ input: code, component: json, options: options, thisPrefix: thisPrefix });
+            }, function (code) { return (codeType === 'bindings' ? code : prefixMethodsWithThis(code, json, options)); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
         });
     }
     catch (e) {

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

@@ -112,7 +112,7 @@ var componentToVue = function (userOptions) {
                     case 'state':
                         return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'bindings':
-                        return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c); };
+                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); };
                     case 'hooks-deps':
                         return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c, { includeProps: false }); };
                     case 'properties':
@@ -124,7 +124,7 @@ var componentToVue = function (userOptions) {
                     case 'hooks':
                         return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); };
                     case 'bindings':
-                        return function (c) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(c); };
+                        return function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component, codeType: codeType }); };
                     case 'properties':
                     case 'hooks-deps':
                         return function (c) { return c; };
@@ -150,7 +150,9 @@ var componentToVue = function (userOptions) {
             (0, map_refs_1.mapRefs)(component, function (refName) { return "this.$refs.".concat(refName); });
         }
         // need to run this before we process the component's code
-        var elementProps = Array.from((0, get_props_1.getProps)(component)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        var props = Array.from((0, get_props_1.getProps)(component));
+        var elementProps = props.filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        var slotsProps = props.filter(function (prop) { return (0, slots_1.isSlotProperty)(prop); });
         component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
         var css = (0, collect_css_1.collectCss)(component, {
             prefix: (_c = (_b = options.cssNamespace) === null || _b === void 0 ? void 0 : _b.call(options)) !== null && _c !== void 0 ? _c : undefined,
@@ -174,6 +176,7 @@ var componentToVue = function (userOptions) {
             (0, lodash_1.size)(component.context.set) && vueImports.push('provide');
             (0, lodash_1.size)(component.context.get) && vueImports.push('inject');
             (0, lodash_1.size)(Object.keys(component.state).filter(function (key) { var _a; return ((_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.type) === 'property'; })) && vueImports.push('ref');
+            (0, lodash_1.size)(slotsProps) && vueImports.push('useSlots');
         }
         var tsLangAttribute = options.typescript ? "lang='ts'" : '';
         var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    ", "\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template.trim().length > 0

package/dist/src/helpers/is-children.d.ts

@@ -1,4 +1,5 @@
 import { MitosisNode } from '../types/mitosis-node';
+export declare const getTextValue: (node: MitosisNode) => string;
 export default function isChildren({ node, extraMatches, }: {
     node: MitosisNode;
     extraMatches?: string[];

package/dist/src/helpers/is-children.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextValue = void 0;
+var getTextValue = function (node) {
+    var _a;
+    var textValue = ((_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code) || node.properties.__text || '';
+    return textValue.replace(/\s+/g, '');
+};
+exports.getTextValue = getTextValue;
 function isChildren(_a) {
-    var _b;
-    var node = _a.node, _c = _a.extraMatches, extraMatches = _c === void 0 ? [] : _c;
-    var textValue = ((_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.code) || node.properties.__text || '';
-    var trimmedTextValue = textValue.replace(/\s+/g, '');
-    return ['props.children', 'children'].concat(extraMatches).includes(trimmedTextValue);
+    var node = _a.node, _b = _a.extraMatches, extraMatches = _b === void 0 ? [] : _b;
+    var textValue = (0, exports.getTextValue)(node);
+    return ['props.children', 'children'].concat(extraMatches).includes(textValue);
 }
 exports.default = isChildren;

package/dist/src/helpers/replace-identifiers.js

@@ -85,14 +85,14 @@ var _replaceIdentifiers = function (path, _a) {
                     path.replaceWith(newMemberExpression);
                 }
                 catch (err) {
-                    console.debug('Could not replace', path.node, 'with', to.toString());
+                    console.debug('Could not replace node.');
                     // throw err;
                 }
             }
         }
         else {
             if (core_1.types.isIdentifier(path.node)) {
-                console.debug("Could not replace Identifier '".concat(from.toString(), "' with nothing."));
+                console.debug("Could not replace Identifier with nothing.");
             }
             else {
                 // if we're looking at a member expression, e.g. `props.foo` and no `to` was provided, then we want to strip out

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

@@ -1,4 +1,4 @@
 export declare type SlotMapper = (slotName: string) => string;
-export declare const isSlotProperty: (key: string) => boolean;
-export declare const stripSlotPrefix: (key: string) => string;
+export declare const isSlotProperty: (key: string, slotPrefix?: string) => boolean;
+export declare const stripSlotPrefix: (key: string, slotPrefix?: string) => string;
 export declare function replaceSlotsInString(code: string, mapper: SlotMapper): string;

package/dist/src/helpers/slots.js

@@ -4,10 +4,14 @@ exports.replaceSlotsInString = exports.stripSlotPrefix = exports.isSlotProperty
 var core_1 = require("@babel/core");
 var babel_transform_1 = require("./babel-transform");
 var SLOT_PREFIX = 'slot';
-var isSlotProperty = function (key) { return key.startsWith(SLOT_PREFIX); };
+var isSlotProperty = function (key, slotPrefix) {
+    if (slotPrefix === void 0) { slotPrefix = SLOT_PREFIX; }
+    return key.startsWith(slotPrefix);
+};
 exports.isSlotProperty = isSlotProperty;
-var stripSlotPrefix = function (key) {
-    return (0, exports.isSlotProperty)(key) ? key.substring(SLOT_PREFIX.length) : key;
+var stripSlotPrefix = function (key, slotPrefix) {
+    if (slotPrefix === void 0) { slotPrefix = SLOT_PREFIX; }
+    return (0, exports.isSlotProperty)(key, slotPrefix) ? key.substring(slotPrefix.length) : key;
 };
 exports.stripSlotPrefix = stripSlotPrefix;
 function replaceSlotsInString(code, mapper) {

package/dist/src/plugins/compile-away-builder-components.js

@@ -53,7 +53,7 @@ var traverse_1 = __importDefault(require("traverse"));
 var create_mitosis_node_1 = require("../helpers/create-mitosis-node");
 var filter_empty_text_nodes_1 = require("../helpers/filter-empty-text-nodes");
 var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
-var JSON5 = __importStar(require("json5"));
+var json5_1 = __importStar(require("json5")), JSON5 = json5_1;
 var builder_1 = require("../parsers/builder");
 var bindings_1 = require("../helpers/bindings");
 function getComponentInputNames(componentName) {
@@ -72,6 +72,12 @@ exports.components = {
     CoreButton: function (node, context, components) {
         var properties = {};
         var bindings = {};
+        if (!node.properties.href && node.bindings.css) {
+            var css = json5_1.default.parse(node.bindings.css.code);
+            // When using button tag ensure we have all: unset and
+            // be sure that is the first style in the list
+            node.bindings.css.code = json5_1.default.stringify(__assign({ all: 'unset' }, css));
+        }
         if ('link' in node.properties) {
             properties.href = node.properties.link;
         }
@@ -79,10 +85,22 @@ exports.components = {
             bindings.href = node.properties.link;
         }
         if ('text' in node.properties) {
-            properties.innerHTML = node.properties.text;
+            node.children = [
+                (0, create_mitosis_node_1.createMitosisNode)({
+                    properties: {
+                        _text: node.properties.text,
+                    },
+                }),
+            ];
         }
         if ('text' in node.bindings) {
-            bindings.innerHTML = node.properties.text;
+            node.children = [
+                (0, create_mitosis_node_1.createMitosisNode)({
+                    bindings: {
+                        _text: node.bindings.text,
+                    },
+                }),
+            ];
         }
         if ('openInNewTab' in node.bindings) {
             bindings.target = "".concat(node.bindings.openInNewTab, " ? '_blank' : '_self'");
@@ -91,7 +109,7 @@ exports.components = {
         var hasLink = node.properties.link || node.bindings.link;
         return (0, create_mitosis_node_1.createMitosisNode)(__assign(__assign({}, node), { 
             // TODO: use 'button' tag for no link, and add `all: unset` to CSS string only then
-            name: hasLink ? 'a' : node.properties.$tagName || 'span', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
+            name: hasLink ? 'a' : 'button', properties: __assign(__assign({}, (0, lodash_1.omit)(node.properties, omitFields)), properties), bindings: __assign(__assign({}, (0, lodash_1.omit)(node.bindings, omitFields)), bindings) }));
     },
     Embed: function (node, context, components) {
         return wrapOutput(node, (0, create_mitosis_node_1.createMitosisNode)({