@builder.io/mitosis 0.0.71 → 0.0.72-0

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./vue"), exports);
+__exportStar(require("./types"), exports);

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

@@ -0,0 +1,3 @@
+import { MitosisComponent, extendedHook } from '../../types/mitosis-component';
+import { ToVueOptions } from './types';
+export declare function generateOptionsApiScript(component: MitosisComponent, options: ToVueOptions, path: string | undefined, template: string, props: string[], onUpdateWithDeps: extendedHook[], onUpdateWithoutDeps: extendedHook[]): string;

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

@@ -0,0 +1,186 @@
+"use strict";
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateOptionsApiScript = void 0;
+var json5_1 = __importDefault(require("json5"));
+var lodash_1 = require("lodash");
+var get_components_used_1 = require("../../helpers/get-components-used");
+var get_custom_imports_1 = require("../../helpers/get-custom-imports");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var nullable_1 = require("../../helpers/nullable");
+var patterns_1 = require("../../helpers/patterns");
+var render_imports_1 = require("../../helpers/render-imports");
+var helpers_1 = require("./helpers");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+function getContextInjectString(component, options) {
+    var str = '{';
+    for (var key in component.context.get) {
+        str += "\n      ".concat(key, ": \"").concat((0, helpers_1.encodeQuotes)(component.context.get[key].name), "\",\n    ");
+    }
+    str += '}';
+    return str;
+}
+function getContextProvideString(component, options) {
+    var str = '{';
+    for (var key in component.context.set) {
+        var _a = component.context.set[key], ref = _a.ref, value = _a.value, name_1 = _a.name;
+        str += "\n      ".concat(name_1, ": ").concat(value
+            ? (0, get_state_object_string_1.stringifyContextValue)(value, {
+                valueMapper: function (code) { return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: '_this.' }); },
+            })
+            : ref
+                ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref, { replaceWith: '_this.' })
+                : null, ",\n    ");
+    }
+    str += '}';
+    return str;
+}
+var generateComponentImport = function (options) {
+    return function (componentName) {
+        if (options.vueVersion >= 3 && options.asyncComponentImports) {
+            return "'".concat(componentName, "': defineAsyncComponent(").concat(componentName, ")");
+        }
+        else {
+            return "'".concat(componentName, "': ").concat(componentName);
+        }
+    };
+};
+var generateComponents = function (componentsUsed, options) {
+    if (componentsUsed.length === 0) {
+        return '';
+    }
+    else {
+        return "components: { ".concat(componentsUsed.map(generateComponentImport(options)).join(','), " },");
+    }
+};
+var appendToDataString = function (_a) {
+    var dataString = _a.dataString, newContent = _a.newContent;
+    return dataString.replace(/}$/, "".concat(newContent, "}"));
+};
+function generateOptionsApiScript(component, options, path, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
+    var _a, _b, _c, _d;
+    var localExports = component.exports;
+    var localVarAsData = [];
+    var localVarAsFunc = [];
+    if (localExports) {
+        Object.keys(localExports).forEach(function (key) {
+            if (localExports[key].usedInLocal) {
+                if (localExports[key].isFunction) {
+                    localVarAsFunc.push(key);
+                }
+                else {
+                    localVarAsData.push(key);
+                }
+            }
+        });
+    }
+    var dataString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: true,
+        functions: false,
+        getters: false,
+    });
+    // Append refs to data as { foo, bar, etc }
+    dataString = appendToDataString({
+        dataString: dataString,
+        newContent: (0, get_custom_imports_1.getCustomImports)(component).join(','),
+    });
+    if (localVarAsData.length) {
+        dataString = appendToDataString({ dataString: dataString, newContent: localVarAsData.join(',') });
+    }
+    var getterString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: false,
+        getters: true,
+        functions: false,
+        valueMapper: function (code) {
+            return (0, helpers_1.processBinding)({ code: code.replace(patterns_1.GETTER, ''), options: options, json: component });
+        },
+    });
+    var functionsString = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: false,
+        getters: false,
+        functions: true,
+        valueMapper: function (code) { return (0, helpers_1.processBinding)({ code: code, options: options, json: component }); },
+    });
+    var includeClassMapHelper = template.includes('_classStringToObject');
+    if (includeClassMapHelper) {
+        functionsString = functionsString.replace(/}\s*$/, "_classStringToObject(str) {\n        const obj = {};\n        if (typeof str !== 'string') { return obj }\n        const classNames = str.trim().split(/\\s+/);\n        for (const name of classNames) {\n          obj[name] = true;\n        }\n        return obj;\n      }  }");
+    }
+    if (localVarAsFunc.length) {
+        functionsString = functionsString.replace(/}\s*$/, "".concat(localVarAsFunc.join(','), "}"));
+    }
+    // Component references to include in `component: { YourComponent, ... }
+    var componentsUsedInTemplate = Array.from((0, get_components_used_1.getComponentsUsed)(component))
+        .filter(function (name) { return name.length && !name.includes('.') && name[0].toUpperCase() === name[0]; })
+        // Strip out components that compile away
+        .filter(function (name) { return !['For', 'Show', 'Fragment', 'Slot', component.name].includes(name); });
+    // get default imports from component files
+    var importedComponents = component.imports
+        .filter(render_imports_1.checkIsComponentImport)
+        .map(function (imp) { var _a; return (_a = Object.entries(imp.imports).find(function (_a) {
+        var _ = _a[0], value = _a[1];
+        return value === 'default';
+    })) === null || _a === void 0 ? void 0 : _a[0]; })
+        .filter(nullable_1.checkIsDefined);
+    var componentsUsed = (0, lodash_1.uniq)(__spreadArray(__spreadArray([], componentsUsedInTemplate, true), importedComponents, true));
+    var propsDefinition = Array.from(props).filter(function (prop) { return prop !== 'children' && prop !== 'class'; });
+    // add default props (if set)
+    if (component.defaultProps) {
+        propsDefinition = propsDefinition.reduce(function (propsDefinition, curr) {
+            var _a;
+            return ((propsDefinition[curr] = ((_a = component.defaultProps) === null || _a === void 0 ? void 0 : _a.hasOwnProperty(curr))
+                ? { default: component.defaultProps[curr] }
+                : {}),
+                propsDefinition);
+        }, {});
+    }
+    return "\n        export default {\n        ".concat(!component.name
+        ? ''
+        : "name: '".concat(path && ((_a = options.namePrefix) === null || _a === void 0 ? void 0 : _a.call(options, path)) ? ((_b = options.namePrefix) === null || _b === void 0 ? void 0 : _b.call(options, path)) + '-' : '').concat((0, lodash_1.kebabCase)(component.name), "',"), "\n        ").concat(generateComponents(componentsUsed, options), "\n        ").concat(props.length ? "props: ".concat(json5_1.default.stringify(propsDefinition), ",") : '', "\n        ").concat(dataString.length < 4
+        ? ''
+        : "\n        data: () => (".concat(dataString, "),\n        "), "\n\n        ").concat((0, lodash_1.size)(component.context.set)
+        ? "provide() {\n                const _this = this;\n                return ".concat(getContextProvideString(component, options), "\n              },")
+        : '', "\n        ").concat((0, lodash_1.size)(component.context.get)
+        ? "inject: ".concat(getContextInjectString(component, options), ",")
+        : '', "\n        ").concat(((_c = component.hooks.onInit) === null || _c === void 0 ? void 0 : _c.code)
+        ? "created() {\n                ".concat((0, helpers_1.processBinding)({ code: component.hooks.onInit.code, options: options, json: component }), "\n              },")
+        : '', "\n        ").concat(((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
+        ? "mounted() {\n                ".concat((0, helpers_1.processBinding)({ code: component.hooks.onMount.code, options: options, json: component }), "\n              },")
+        : '', "\n        ").concat(onUpdateWithoutDeps.length
+        ? "updated() {\n            ".concat(onUpdateWithoutDeps
+            .map(function (hook) { return (0, helpers_1.processBinding)({ code: hook.code, options: options, json: component }); })
+            .join('\n'), "\n          },")
+        : '', "\n        ").concat(onUpdateWithDeps.length
+        ? "watch: {\n            ".concat(onUpdateWithDeps
+            .map(function (hook, index) {
+            return "".concat((0, helpers_1.getOnUpdateHookName)(index), "() {\n                  ").concat((0, helpers_1.processBinding)({ code: hook.code, options: options, json: component }), "\n                  }\n                ");
+        })
+            .join(','), "\n          },")
+        : '', "\n        ").concat(component.hooks.onUnMount
+        ? "unmounted() {\n                ".concat((0, helpers_1.processBinding)({
+            code: component.hooks.onUnMount.code,
+            options: options,
+            json: component,
+        }), "\n              },")
+        : '', "\n\n        ").concat(getterString.length < 4
+        ? ''
+        : " \n          computed: ".concat(getterString, ",\n        "), "\n        ").concat(functionsString.length < 4
+        ? ''
+        : "\n          methods: ".concat(functionsString, ",\n        "), "\n        ").concat(Object.entries(component.meta.vueConfig || {})
+        .map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return "".concat(k, ": ").concat(v);
+    })
+        .join(','), "\n      }");
+}
+exports.generateOptionsApiScript = generateOptionsApiScript;

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

@@ -0,0 +1,12 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export declare type VueVersion = 2 | 3;
+export declare type Api = 'options' | 'composition';
+export interface VueVersionOpt {
+    vueVersion: VueVersion;
+}
+export interface ToVueOptions extends BaseTranspilerOptions, VueVersionOpt {
+    cssNamespace?: () => string;
+    namePrefix?: (path: string) => string;
+    asyncComponentImports?: boolean;
+    api?: Api;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,6 @@
+import { OmitObj } from '../../helpers/typescript';
+import { ToVueOptions, VueVersionOpt } from './types';
+declare type VueOptsWithoutVersion = OmitObj<ToVueOptions, VueVersionOpt>;
+export declare const componentToVue2: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
+export declare const componentToVue3: (vueOptions?: VueOptsWithoutVersion) => import("../../types/transpiler").Transpiler<string>;
+export {};

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

@@ -0,0 +1,227 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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;
+var dedent_1 = __importDefault(require("dedent"));
+var standalone_1 = require("prettier/standalone");
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var map_refs_1 = require("../../helpers/map-refs");
+var render_imports_1 = require("../../helpers/render-imports");
+var get_props_1 = require("../../helpers/get-props");
+var plugins_1 = require("../../modules/plugins");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var traverse_1 = __importDefault(require("traverse"));
+var lodash_1 = require("lodash");
+var process_http_requests_1 = require("../../helpers/process-http-requests");
+var function_1 = require("fp-ts/lib/function");
+var slots_1 = require("../../helpers/slots");
+var functions_1 = require("../helpers/functions");
+var helpers_1 = require("./helpers");
+var optionsApi_1 = require("./optionsApi");
+var compositionApi_1 = require("./compositionApi");
+var blocks_1 = require("./blocks");
+// Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
+function processDynamicComponents(json, _options) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name.includes('.')) {
+                node.bindings.is = { code: node.name };
+                node.name = 'component';
+            }
+        }
+    });
+}
+function processForKeys(json, _options) {
+    (0, traverse_1.default)(json).forEach(function (node) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.name === 'For') {
+                var firstChild = node.children[0];
+                if (firstChild && firstChild.bindings.key) {
+                    node.bindings.key = firstChild.bindings.key;
+                    delete firstChild.bindings.key;
+                }
+            }
+        }
+    });
+}
+/**
+ * This plugin handle `onUpdate` code that watches dependencies.
+ * We need to apply this workaround to be able to watch specific dependencies in Vue 2: https://stackoverflow.com/a/45853349
+ *
+ * We add a `computed` property for the dependencies, and a matching `watch` function for the `onUpdate` code
+ */
+var onUpdatePlugin = function (options) { return ({
+    json: {
+        post: function (component) {
+            if (component.hooks.onUpdate) {
+                component.hooks.onUpdate
+                    .filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })
+                    .forEach(function (hook, index) {
+                    var _a;
+                    var code = "get ".concat((0, helpers_1.getOnUpdateHookName)(index), " () {\n            return {\n              ").concat((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.slice(1, -1).split(',').map(function (dep, k) {
+                        var val = dep.trim();
+                        return "".concat(k, ": ").concat(val);
+                    }).join(','), "\n            }\n          }");
+                    component.state[(0, helpers_1.getOnUpdateHookName)(index)] = {
+                        code: code,
+                        type: 'getter',
+                    };
+                });
+            }
+        },
+    },
+}); };
+var BASE_OPTIONS = {
+    plugins: [],
+    vueVersion: 2,
+    api: 'options',
+};
+var mergeOptions = function (_a, _b) {
+    var _c = _a.plugins, pluginsA = _c === void 0 ? [] : _c, a = __rest(_a, ["plugins"]);
+    var _d = _b.plugins, pluginsB = _d === void 0 ? [] : _d, b = __rest(_b, ["plugins"]);
+    return (__assign(__assign(__assign({}, a), b), { plugins: __spreadArray(__spreadArray([], pluginsA, true), pluginsB, true) }));
+};
+var componentToVue = function (userOptions) {
+    if (userOptions === void 0) { userOptions = BASE_OPTIONS; }
+    return function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var component = _a.component, path = _a.path;
+        var options = mergeOptions(BASE_OPTIONS, userOptions);
+        if (options.api === 'options') {
+            (_b = options.plugins) === null || _b === void 0 ? void 0 : _b.unshift(onUpdatePlugin);
+        }
+        else if (options.api === 'composition') {
+            (_c = options.plugins) === null || _c === void 0 ? void 0 : _c.unshift(functions_1.FUNCTION_HACK_PLUGIN);
+            options.asyncComponentImports = false;
+        }
+        // Make a copy we can safely mutate, similar to babel's toolchain can be used
+        component = (0, fast_clone_1.fastClone)(component);
+        (0, process_http_requests_1.processHttpRequests)(component);
+        processDynamicComponents(component, options);
+        processForKeys(component, options);
+        if (options.plugins) {
+            component = (0, plugins_1.runPreJsonPlugins)(component, options.plugins);
+        }
+        if (options.api === 'options') {
+            (0, map_refs_1.mapRefs)(component, function (refName) { return "this.$refs.".concat(refName); });
+        }
+        if (options.plugins) {
+            component = (0, plugins_1.runPostJsonPlugins)(component, options.plugins);
+        }
+        var css = (0, collect_css_1.collectCss)(component, {
+            prefix: (_e = (_d = options.cssNamespace) === null || _d === void 0 ? void 0 : _d.call(options)) !== null && _e !== void 0 ? _e : undefined,
+        });
+        (0, strip_meta_properties_1.stripMetaProperties)(component);
+        var template = (0, function_1.pipe)(component.children.map(function (item) { return (0, blocks_1.blockToVue)(item, options, { isRootNode: true }); }).join('\n'), helpers_1.renameMitosisComponentsToKebabCase);
+        var onUpdateWithDeps = ((_f = component.hooks.onUpdate) === null || _f === void 0 ? void 0 : _f.filter(function (hook) { var _a; return (_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length; })) || [];
+        var onUpdateWithoutDeps = ((_g = component.hooks.onUpdate) === null || _g === void 0 ? void 0 : _g.filter(function (hook) { var _a; return !((_a = hook.deps) === null || _a === void 0 ? void 0 : _a.length); })) || [];
+        var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
+        var elementProps = Array.from((0, get_props_1.getProps)(component)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        // import from vue
+        var vueImports = [];
+        if (options.vueVersion >= 3 && options.asyncComponentImports) {
+            vueImports.push('defineAsyncComponent');
+        }
+        if (options.api === 'composition') {
+            onUpdateWithDeps.length && vueImports.push('watch');
+            ((_h = component.hooks.onMount) === null || _h === void 0 ? void 0 : _h.code) && vueImports.push('onMounted');
+            ((_j = component.hooks.onUnMount) === null || _j === void 0 ? void 0 : _j.code) && vueImports.push('onUnMounted');
+            onUpdateWithoutDeps.length && vueImports.push('onUpdated');
+            (0, lodash_1.size)(getterKeys) && vueImports.push('computed');
+            (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');
+        }
+        var tsLangAttribute = options.typescript ? "lang='ts'" : '';
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "], ["\n    <template>\n      ", "\n    </template>\n\n\n    <script ", " ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n  "])), template, options.api === 'composition' ? 'setup' : '', tsLangAttribute, vueImports.length ? "import { ".concat((0, lodash_1.uniq)(vueImports).sort().join(', '), " } from \"vue\"") : '', (options.typescript && ((_k = component.types) === null || _k === void 0 ? void 0 : _k.join('\n'))) || '', (0, render_imports_1.renderPreComponent)({
+            component: component,
+            target: 'vue',
+            asyncComponentImports: options.asyncComponentImports,
+        }), options.api === 'composition'
+            ? (0, compositionApi_1.generateCompositionApiScript)(component, options, template, elementProps, onUpdateWithDeps, onUpdateWithoutDeps)
+            : (0, optionsApi_1.generateOptionsApiScript)(component, options, path, template, elementProps, onUpdateWithDeps, onUpdateWithoutDeps), !css.trim().length
+            ? ''
+            : "<style scoped>\n      ".concat(css, "\n    </style>"));
+        if (options.plugins) {
+            str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        }
+        if (true || options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'vue',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-typescript'),
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify', { string: str }, err);
+            }
+        }
+        if (options.plugins) {
+            str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        }
+        for (var _i = 0, removePatterns_1 = removePatterns; _i < removePatterns_1.length; _i++) {
+            var pattern = removePatterns_1[_i];
+            str = str.replace(pattern, '');
+        }
+        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;
+// Remove unused artifacts like empty script or style tags
+var removePatterns = [
+    "<script>\nexport default {};\n</script>",
+    "<style>\n</style>",
+];
+var templateObject_1;

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

@@ -1,21 +1,24 @@
 import { Target } from '../types/config';
 import { MitosisComponent, MitosisImport } from '../types/mitosis-component';
 export declare const checkIsComponentImport: (theImport: MitosisImport) => boolean;
-export declare const renderImport: ({ theImport, target, asyncComponentImports, }: {
+export declare const renderImport: ({ theImport, target, asyncComponentImports, preserveFileExtensions, }: {
     theImport: MitosisImport;
     target: Target;
     asyncComponentImports: boolean;
+    preserveFileExtensions?: boolean | undefined;
 }) => string;
-export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, }: {
+export declare const renderImports: ({ imports, target, asyncComponentImports, excludeMitosisComponents, preserveFileExtensions, }: {
     imports: MitosisImport[];
     target: Target;
     asyncComponentImports: boolean;
     excludeMitosisComponents?: boolean | undefined;
+    preserveFileExtensions?: boolean | undefined;
 }) => string;
-export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, }: {
+export declare const renderPreComponent: ({ component, target, excludeMitosisComponents, asyncComponentImports, preserveFileExtensions, }: {
     component: MitosisComponent;
     target: Target;
     asyncComponentImports?: boolean | undefined;
     excludeMitosisComponents?: boolean | undefined;
+    preserveFileExtensions?: boolean | undefined;
 }) => string;
 export declare const renderExportAndLocal: (component: MitosisComponent) => string;

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

@@ -40,7 +40,8 @@ var getFileExtensionForTarget = function (target) {
         case 'angular':
             return '';
         // these `.lite` extensions are handled in the `transpile` step of the CLI.
-        // TO-DO: consolidate file-extension renaming to this file, and remove `.lite` replaces from the CLI `transpile`.
+        // TO-DO: consolidate file-extension renaming to this file, and remove `.lite` replaces from the CLI `transpile`. (outdated) ?
+        // Bit team wanted to make sure React and Angular behaved the same in regards to imports - ALU 10/05/22
         default:
             return '.lite';
     }
@@ -49,12 +50,12 @@ var checkIsComponentImport = function (theImport) {
     return theImport.path.endsWith('.lite') && !theImport.path.endsWith('.context.lite');
 };
 exports.checkIsComponentImport = checkIsComponentImport;
-var transformImportPath = function (theImport, target) {
+var transformImportPath = function (theImport, target, preserveFileExtensions) {
     // We need to drop the `.lite` from context files, because the context generator does so as well.
     if (theImport.path.endsWith('.context.lite')) {
         return theImport.path.replace('.lite', '.js');
     }
-    if ((0, exports.checkIsComponentImport)(theImport)) {
+    if ((0, exports.checkIsComponentImport)(theImport) && !preserveFileExtensions) {
         return theImport.path.replace('.lite', getFileExtensionForTarget(target));
     }
     return theImport.path;
@@ -94,9 +95,9 @@ var getImportValue = function (_a) {
     }
 };
 var renderImport = function (_a) {
-    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports;
+    var theImport = _a.theImport, target = _a.target, asyncComponentImports = _a.asyncComponentImports, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b;
     var importedValues = getImportedValues({ theImport: theImport });
-    var path = transformImportPath(theImport, target);
+    var path = transformImportPath(theImport, target, preserveFileExtensions);
     var importValue = getImportValue(importedValues);
     var isComponentImport = (0, exports.checkIsComponentImport)(theImport);
     var shouldBeAsyncImport = asyncComponentImports && isComponentImport;
@@ -118,7 +119,7 @@ var renderImport = function (_a) {
 };
 exports.renderImport = renderImport;
 var renderImports = function (_a) {
-    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents;
+    var imports = _a.imports, target = _a.target, asyncComponentImports = _a.asyncComponentImports, excludeMitosisComponents = _a.excludeMitosisComponents, _b = _a.preserveFileExtensions, preserveFileExtensions = _b === void 0 ? false : _b;
     return imports
         .filter(function (theImport) {
         if (
@@ -135,18 +136,21 @@ var renderImports = function (_a) {
             return true;
         }
     })
-        .map(function (theImport) { return (0, exports.renderImport)({ theImport: theImport, target: target, asyncComponentImports: asyncComponentImports }); })
+        .map(function (theImport) {
+        return (0, exports.renderImport)({ theImport: theImport, target: target, asyncComponentImports: asyncComponentImports, preserveFileExtensions: preserveFileExtensions });
+    })
         .join('\n');
 };
 exports.renderImports = renderImports;
 var renderPreComponent = function (_a) {
     var _b;
-    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c;
+    var component = _a.component, target = _a.target, excludeMitosisComponents = _a.excludeMitosisComponents, _c = _a.asyncComponentImports, asyncComponentImports = _c === void 0 ? false : _c, _d = _a.preserveFileExtensions, preserveFileExtensions = _d === void 0 ? false : _d;
     return "\n    ".concat((0, exports.renderImports)({
         imports: component.imports,
         target: target,
         asyncComponentImports: asyncComponentImports,
         excludeMitosisComponents: excludeMitosisComponents,
+        preserveFileExtensions: preserveFileExtensions,
     }), "\n    ").concat((0, exports.renderExportAndLocal)(component), "\n    ").concat(((_b = component.hooks.preComponent) === null || _b === void 0 ? void 0 : _b.code) || '', "\n  ");
 };
 exports.renderPreComponent = renderPreComponent;

package/dist/src/index.d.ts

@@ -43,6 +43,7 @@ export * from './generators/context/solid';
 export * from './generators/context/vue';
 export * from './generators/context/svelte';
 export * from './generators/react';
+export * from './generators/rsc';
 export * from './generators/solid';
 export * from './generators/liquid';
 export * from './generators/builder';

package/dist/src/index.js

@@ -81,6 +81,7 @@ __exportStar(require("./generators/context/solid"), exports);
 __exportStar(require("./generators/context/vue"), exports);
 __exportStar(require("./generators/context/svelte"), exports);
 __exportStar(require("./generators/react"), exports);
+__exportStar(require("./generators/rsc"), exports);
 __exportStar(require("./generators/solid"), exports);
 __exportStar(require("./generators/liquid"), exports);
 __exportStar(require("./generators/builder"), exports);

package/dist/src/targets.d.ts

@@ -20,4 +20,5 @@ export declare const targets: {
     readonly marko: import(".").TranspilerGenerator<import("./generators/marko").ToMarkoOptions, string>;
     readonly preact: import(".").TranspilerGenerator<import("./generators/react").ToReactOptions, string>;
     readonly lit: import(".").TranspilerGenerator<import("./generators/lit").ToLitOptions, string>;
+    readonly rsc: import(".").TranspilerGenerator<import("./generators/rsc").ToRscOptions, string>;
 };

package/dist/src/targets.js

@@ -18,6 +18,7 @@ var stencil_1 = require("./generators/stencil");
 var qwik_1 = require("./generators/qwik");
 var marko_1 = require("./generators/marko");
 var lit_1 = require("./generators/lit");
+var rsc_1 = require("./generators/rsc");
 exports.builder = builder_1.componentToBuilder;
 exports.targets = {
     angular: angular_1.componentToAngular,
@@ -40,4 +41,5 @@ exports.targets = {
     marko: marko_1.componentToMarko,
     preact: react_2.componentToPreact,
     lit: lit_1.componentToLit,
+    rsc: rsc_1.componentToRsc,
 };