@builder.io/mitosis 0.0.147 → 0.1.1

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

@@ -198,7 +198,12 @@ var blockToReact = function (json, options, component, parentSlots) {
                 str += " ".concat(newKey, "={").concat(newValue, "} ");
             }
             else {
-                str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
+                if (useBindingValue === 'true') {
+                    str += " ".concat(BINDING_MAPPERS[key], " ");
+                }
+                else {
+                    str += " ".concat(BINDING_MAPPERS[key], "={").concat(useBindingValue, "} ");
+                }
             }
         }
         else if (key === 'style' && options.type === 'native' && json.name === 'ScrollView') {

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -47,145 +36,24 @@ var BINDING_MAPPERS = {
 var NODE_MAPPERS = {
     Fragment: function (json, options, scope) {
         var children = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
-        var shouldAddDivFallback = options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode) && children.length > 1;
         var childrenStr = children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
-        if (shouldAddDivFallback) {
-            console.warn('WARNING: Vue 2 forbids multiple root elements. You provided a root Fragment with multiple elements. Wrapping elements in div as a workaround.');
-            return "<div>".concat(childrenStr, "</div>");
-        }
-        else {
-            return childrenStr;
-        }
+        return childrenStr;
     },
     For: function (_json, options) {
-        var _a, _b;
-        var _c;
+        var _a;
         var json = _json;
         var keyValue = json.bindings.key || { code: 'index', type: 'single' };
-        var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_c = json.bindings.each) === null || _c === void 0 ? void 0 : _c.code);
-        if (options.vueVersion >= 3) {
-            // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
-            return "<template :key=\"".concat((0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat((0, helpers_1.encodeQuotes)(forValue), "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>");
-        }
-        // Vue 2 can only handle one root element
-        var firstChild = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
-        // Edge-case for when the parent is a `Show`, we need to pass down the `v-if` prop.
-        var jsonIf = json.properties[SPECIAL_PROPERTIES.V_IF];
-        return firstChild
-            ? (0, function_1.pipe)(firstChild, (0, helpers_1.addBindingsToJson)({ key: keyValue }), (0, helpers_1.addPropertiesToJson)(__assign((_a = {}, _a[SPECIAL_PROPERTIES.V_FOR] = forValue, _a), (jsonIf ? (_b = {}, _b[SPECIAL_PROPERTIES.V_IF] = jsonIf, _b) : {}))), function (block) { return (0, exports.blockToVue)(block, options); })
-            : '';
+        var forValue = "(".concat(json.scope.forName, ", index) in ").concat((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code);
+        // TODO: tmk key goes on different element (parent vs child) based on Vue 2 vs Vue 3
+        return "<template :key=\"".concat((0, helpers_1.encodeQuotes)((keyValue === null || keyValue === void 0 ? void 0 : keyValue.code) || 'index'), "\" v-for=\"").concat((0, helpers_1.encodeQuotes)(forValue), "\">\n        ").concat(json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "\n      </template>");
     },
     Show: function (json, options, scope) {
-        var _a, _b, _c, _d, _e, _f;
-        var _g, _h;
-        var ifValue = ((_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code) || '';
+        var _a;
+        var ifValue = ((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.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    ");
-        switch (options.vueVersion) {
-            case 3:
-                return defaultShowTemplate;
-            case 2:
-                // if it is not the root node, the default show template can be used
-                // as Vue 2 only has this limitation at root level
-                if (!(scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
-                    return defaultShowTemplate;
-                }
-                var children_1 = json.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
-                // Vue 2 can only handle one root element, so we just take the first one.
-                // TO-DO: warn user of multi-children Show.
-                var firstChild = children_1[0];
-                var elseBlock = json.meta.else;
-                var hasShowChild = (firstChild === null || firstChild === void 0 ? void 0 : firstChild.name) === 'Show';
-                var childElseBlock = firstChild === null || firstChild === void 0 ? void 0 : firstChild.meta.else;
-                var allShowChildrenWithoutElse = children_1.every(function (x) { return x.name === 'Show' && !x.meta.else; });
-                if (allShowChildrenWithoutElse && (0, is_mitosis_node_1.isMitosisNode)(elseBlock)) {
-                    /**
-                     * This is when we mimic an if-else chain by only providing `Show` elements as children, none of which have an `else` block
-                     *
-                     * <show when={foo} else={else-1}>
-                     *  <show when={bar}> <bar-code> </show>
-                     *  <show when={x}> <x-code> </show>
-                     *  <show when={y}> <y-code> </show>
-                     * </show>
-                     *
-                     * What we want in this case is:
-                     *
-                     * <else-1 if={!foo} />
-                     * <bar-code v-else-if={bar} />
-                     * <x-code v-else-if={x} />
-                     * <y-code v-else />
-                     */
-                    var ifString = (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_a = {}, _a[SPECIAL_PROPERTIES.V_IF] = (0, helpers_1.invertBooleanExpression)(ifValue), _a)), function (block) { return (0, exports.blockToVue)(block, options); });
-                    var childrenStrings = children_1.map(function (child, idx) {
-                        var _a, _b;
-                        var _c;
-                        var isLast = idx === children_1.length - 1;
-                        var innerBlock = child.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
-                        if (!isLast) {
-                            var childIfValue = (_c = child.bindings.when) === null || _c === void 0 ? void 0 : _c.code;
-                            var elseIfString = (0, function_1.pipe)(innerBlock, (0, helpers_1.addPropertiesToJson)((_a = {}, _a[SPECIAL_PROPERTIES.V_ELSE_IF] = childIfValue, _a)), function (block) { return (0, exports.blockToVue)(block, options); });
-                            return elseIfString;
-                        }
-                        else {
-                            var elseString = (0, function_1.pipe)(innerBlock, (0, helpers_1.addPropertiesToJson)((_b = {}, _b[SPECIAL_PROPERTIES.V_ELSE] = '', _b)), function (block) { return (0, exports.blockToVue)(block, options); });
-                            return elseString;
-                        }
-                    });
-                    return "\n            ".concat(ifString, "\n            ").concat(childrenStrings.join('\n'), "\n          ");
-                }
-                else if (firstChild &&
-                    (0, is_mitosis_node_1.isMitosisNode)(elseBlock) &&
-                    hasShowChild &&
-                    (0, is_mitosis_node_1.isMitosisNode)(childElseBlock)) {
-                    /**
-                     * This is special edge logic to handle 2 nested Show elements in Vue 2.
-                     * We need to invert the logic to make it work, due to no-template-root-element limitations in Vue 2.
-                     *
-                     * <show when={foo} else={else-1}>
-                     *  <show when={bar}> <bar-code> </show>
-                     *
-                     *  <show when={x}> <x-code> </show>
-                     *
-                     *  <show when={y}> <y-code> </show>
-                     * </show>
-                     *
-                     *
-                     *
-                     *
-                     * foo: true && bar: true => if-code
-                     * foo: true && bar: false => else-2
-                     * foo: false && bar: true?? => else-1
-                     *
-                     *
-                     * map to:
-                     *
-                     * <else-1 if={!foo} />
-                     * <else-2 v-else-if={!bar} />
-                     * <if-code v-else />
-                     *
-                     */
-                    var ifString = (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_b = {}, _b[SPECIAL_PROPERTIES.V_IF] = (0, helpers_1.invertBooleanExpression)(ifValue), _b)), function (block) { return (0, exports.blockToVue)(block, options); });
-                    var childIfValue = (0, function_1.pipe)(((_h = firstChild.bindings.when) === null || _h === void 0 ? void 0 : _h.code) || '', helpers_1.invertBooleanExpression);
-                    var elseIfString = (0, function_1.pipe)(childElseBlock, (0, helpers_1.addPropertiesToJson)((_c = {}, _c[SPECIAL_PROPERTIES.V_ELSE_IF] = childIfValue, _c)), function (block) { return (0, exports.blockToVue)(block, options); });
-                    var firstChildOfFirstChild = firstChild.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes)[0];
-                    var elseString = firstChildOfFirstChild
-                        ? (0, function_1.pipe)(firstChildOfFirstChild, (0, helpers_1.addPropertiesToJson)((_d = {}, _d[SPECIAL_PROPERTIES.V_ELSE] = '', _d)), function (block) { return (0, exports.blockToVue)(block, options); })
-                        : '';
-                    return "\n\n            ".concat(ifString, "\n\n            ").concat(elseIfString, "\n\n            ").concat(elseString, "\n\n          ");
-                }
-                else {
-                    var ifString = firstChild
-                        ? (0, function_1.pipe)(firstChild, (0, helpers_1.addPropertiesToJson)((_e = {}, _e[SPECIAL_PROPERTIES.V_IF] = ifValue, _e)), function (block) { return (0, exports.blockToVue)(block, options); })
-                        : '';
-                    var elseString = (0, is_mitosis_node_1.isMitosisNode)(elseBlock)
-                        ? (0, function_1.pipe)(elseBlock, (0, helpers_1.addPropertiesToJson)((_f = {}, _f[SPECIAL_PROPERTIES.V_ELSE] = '', _f)), function (block) {
-                            return (0, exports.blockToVue)(block, options);
-                        })
-                        : '';
-                    return "\n                    ".concat(ifString, "\n                    ").concat(elseString, "\n                  ");
-                }
-        }
+        return defaultShowTemplate;
     },
     Slot: function (json, options) {
         var _a, _b, _c;

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

@@ -42,12 +42,9 @@ function getContextInjectString(component, options) {
 }
 var generateComponentImport = function (options) {
     return function (componentName) {
-        if (options.vueVersion >= 3 && options.asyncComponentImports) {
+        if (options.asyncComponentImports) {
             return "'".concat(componentName, "': defineAsyncComponent(").concat(componentName, ")");
         }
-        else if (options.vueVersion === 2) {
-            return "'".concat((0, helpers_1.mapMitosisComponentToKebabCase)(componentName), "': ").concat(componentName);
-        }
         else {
             return "'".concat(componentName, "': ").concat(componentName);
         }

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

@@ -1,11 +1,6 @@
-import { OmitObj } from '../../helpers/typescript';
 import { BaseTranspilerOptions } from '../../types/transpiler';
-export type VueVersion = 2 | 3;
 export type Api = 'options' | 'composition';
-interface VueVersionOpt {
-    vueVersion: VueVersion;
-}
-export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
+export interface ToVueOptions extends BaseTranspilerOptions {
     cssNamespace?: () => string;
     namePrefix?: (path: string) => string;
     asyncComponentImports?: boolean;
@@ -13,5 +8,3 @@ export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
     api: Api;
     convertClassStringToObject?: boolean;
 }
-export type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
-export {};

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

@@ -1,3 +1,3 @@
-import { VueOptsWithoutVersion } from './types';
-export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
-export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToVueOptions } from './types';
+export declare const componentToVue: TranspilerGenerator<Partial<ToVueOptions>>;

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

@@ -3,17 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -27,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentToVue3 = exports.componentToVue2 = void 0;
+exports.componentToVue = void 0;
 var babel_transform_1 = require("../../helpers/babel-transform");
 var bindings_1 = require("../../helpers/bindings");
 var dedent_1 = require("../../helpers/dedent");
@@ -106,7 +95,6 @@ var onUpdatePlugin = function (options) { return ({
     },
 }); };
 var BASE_OPTIONS = {
-    vueVersion: 2,
     api: 'options',
     defineComponent: true,
 };
@@ -118,7 +106,7 @@ var componentToVue = function (userOptions) {
         // Make a copy we can safely mutate, similar to babel's toolchain can be used
         var component = (0, fast_clone_1.fastClone)(_component);
         var options = (0, merge_options_1.initializeOptions)({
-            target: (userOptions === null || userOptions === void 0 ? void 0 : userOptions.vueVersion) === 2 ? 'vue2' : 'vue3',
+            target: 'vue',
             component: component,
             defaults: BASE_OPTIONS,
             userOptions: userOptions,
@@ -199,7 +187,7 @@ var componentToVue = function (userOptions) {
         var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
         // import from vue
         var vueImports = [];
-        if (options.vueVersion >= 3 && options.asyncComponentImports) {
+        if (options.asyncComponentImports) {
             vueImports.push('defineAsyncComponent');
         }
         if (options.api === 'options' && options.defineComponent) {
@@ -261,14 +249,7 @@ var componentToVue = function (userOptions) {
         return str;
     };
 };
-var componentToVue2 = function (vueOptions) {
-    return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 2 }));
-};
-exports.componentToVue2 = componentToVue2;
-var componentToVue3 = function (vueOptions) {
-    return componentToVue(__assign(__assign({}, vueOptions), { vueVersion: 3 }));
-};
-exports.componentToVue3 = componentToVue3;
+exports.componentToVue = componentToVue;
 // Remove unused artifacts like empty script or style tags
 var removePatterns = [
     "<script>\nexport default {};\n</script>",

package/dist/src/helpers/component-file-extensions.js

@@ -64,8 +64,6 @@ var getComponentFileExtensionForTarget = function (args) {
         case 'swift':
             return '.swift';
         case 'vue':
-        case 'vue2':
-        case 'vue3':
             return '.vue';
         case 'webcomponent':
             return '.ts';

package/dist/src/helpers/plugins/process-target-blocks.js

@@ -6,9 +6,6 @@ var process_code_1 = require("./process-code");
 var getBlockForTarget = function (_a) {
     var target = _a.target, targetBlock = _a.targetBlock;
     switch (target) {
-        case 'vue3':
-        case 'vue':
-            return targetBlock['vue3'] || targetBlock['vue'] || targetBlock['default'];
         default:
             return targetBlock[target] || targetBlock['default'];
     }

package/dist/src/helpers/render-imports.d.ts

@@ -28,7 +28,7 @@ type ImportArgs = {
 export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, component, componentsUsed, importMapper, explicitImportFileExtension, }: ImportArgs & {
     theImport: MitosisImport;
 }) => string;
-export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension"> & Partial<Pick<ImportArgs, "asyncComponentImports" | "explicitImportFileExtension">> & {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, componentsUsed, importMapper, explicitImportFileExtension, }: Omit<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports"> & Partial<Pick<ImportArgs, "explicitImportFileExtension" | "asyncComponentImports">> & {
     component: MitosisComponent;
     target: Target;
     excludeMitosisComponents?: boolean | undefined;

package/dist/src/parsers/builder/builder.js

@@ -527,7 +527,17 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
         for (var key in block.component.options) {
             var value = block.component.options[key];
             var valueIsArrayOfBuilderElements = Array.isArray(value) && value.every(exports.isBuilderElement);
-            if (typeof value === 'string') {
+            var transformBldrElementToBinding = function (item) {
+                var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
+                // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
+                // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
+                // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
+                return (0, __1.blockToMitosis)(node, {}, null);
+            };
+            if ((0, exports.isBuilderElement)(value)) {
+                bindings[key] = (0, bindings_1.createSingleBinding)({ code: transformBldrElementToBinding(value) });
+            }
+            else if (typeof value === 'string') {
                 properties[key] = value;
             }
             else if (valueIsArrayOfBuilderElements) {
@@ -539,13 +549,7 @@ var builderElementToMitosisNode = function (block, options, _internalOptions) {
                     }
                     return true;
                 })
-                    .map(function (item) {
-                    var node = (0, exports.builderElementToMitosisNode)(item, __assign(__assign({}, options), { includeSpecialBindings: false }));
-                    // For now, stringify to Mitosis nodes even though that only really works in React, due to syntax overlap.
-                    // the correct long term solution is to hold on to the Mitosis Node, and have a plugin for each framework
-                    // which processes any Mitosis nodes set into the attribute and moves them as slots when relevant (Svelte/Vue)
-                    return (0, __1.blockToMitosis)(node, {}, null);
-                });
+                    .map(transformBldrElementToBinding);
                 var strVal = childrenElements.length === 1 ? childrenElements[0] : "<>".concat(childrenElements.join(''), "</>");
                 bindings[key] = (0, bindings_1.createSingleBinding)({ code: strVal });
             }

package/dist/src/targets.d.ts

@@ -13,9 +13,7 @@ export declare const targets: {
     readonly swift: import(".").TranspilerGenerator<import(".").BaseTranspilerOptions>;
     readonly template: import(".").TranspilerGenerator<import("./generators/template").ToTemplateOptions>;
     readonly webcomponent: import(".").TranspilerGenerator<import("./generators/html").ToHtmlOptions>;
-    readonly vue: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
-    readonly vue2: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
-    readonly vue3: (vueOptions?: Omit<import("./generators/vue").ToVueOptions, "vueVersion"> | undefined) => import(".").Transpiler<string>;
+    readonly vue: import(".").TranspilerGenerator<Partial<import("./generators/vue").ToVueOptions>>;
     readonly stencil: import(".").TranspilerGenerator<import("./generators/stencil").ToStencilOptions>;
     readonly qwik: import(".").TranspilerGenerator<import("./generators/qwik/component-generator").ToQwikOptions>;
     readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions>;

package/dist/src/targets.js

@@ -35,9 +35,7 @@ exports.targets = {
     swift: swift_ui_1.componentToSwift,
     template: template_1.componentToTemplate,
     webcomponent: html_1.componentToCustomElement,
-    vue: vue_1.componentToVue3,
-    vue2: vue_1.componentToVue2,
-    vue3: vue_1.componentToVue3,
+    vue: vue_1.componentToVue,
     stencil: stencil_1.componentToStencil,
     qwik: qwik_1.componentToQwik,
     marko: marko_1.componentToMarko,

package/package.json

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