@builder.io/mitosis 0.0.70 → 0.0.72-0

package/dist/src/constants/hooks.d.ts

@@ -4,4 +4,5 @@ export declare const HOOKS: {
     readonly CONTEXT: "useContext";
     readonly REF: "useRef";
     readonly DEFAULT_PROPS: "useDefaultProps";
+    readonly STYLE: "useStyle";
 };

package/dist/src/constants/hooks.js

@@ -7,4 +7,5 @@ exports.HOOKS = {
     CONTEXT: 'useContext',
     REF: 'useRef',
     DEFAULT_PROPS: 'useDefaultProps',
+    STYLE: 'useStyle',
 };

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

@@ -3,6 +3,7 @@ import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler'
 export interface ToAngularOptions extends BaseTranspilerOptions {
     standalone?: boolean;
     preserveImports?: boolean;
+    preserveFileExtensions?: boolean;
 }
 interface AngularBlockOptions {
     contextVars?: string[];

package/dist/src/generators/angular.js

@@ -220,6 +220,7 @@ var componentToAngular = function (userOptions) {
         var _component = _a.component;
         var DEFAULT_OPTIONS = {
             preserveImports: false,
+            preserveFileExtensions: false,
         };
         var options = __assign(__assign({}, DEFAULT_OPTIONS), userOptions);
         // Make a copy we can safely mutate, similar to babel's toolchain
@@ -317,7 +318,11 @@ var componentToAngular = function (userOptions) {
             },
         });
         // Preparing built in component metadata parameters
-        var componentMetadata = __assign(__assign({ selector: "'".concat((0, lodash_1.kebabCase)(json.name || 'my-component'), ", ").concat(json.name, "'"), template: "`\n        ".concat((0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        `") }, (css.length ? { styles: "[`".concat((0, indent_1.indent)(css, 8), "`]") } : {})), (options.standalone
+        var componentMetadata = __assign(__assign({ selector: "'".concat((0, lodash_1.kebabCase)(json.name || 'my-component'), ", ").concat(json.name, "'"), template: "`\n        ".concat((0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), "\n        `") }, (css.length
+            ? {
+                styles: "[`".concat((0, indent_1.indent)(css, 8), "`]"),
+            }
+            : {})), (options.standalone
             ? // TODO: also add child component imports here as well
                 {
                     standalone: 'true',
@@ -333,6 +338,7 @@ var componentToAngular = function (userOptions) {
             component: json,
             target: 'angular',
             excludeMitosisComponents: !options.standalone && !options.preserveImports,
+            preserveFileExtensions: options.preserveFileExtensions,
         }), Object.entries(componentMetadata)
             .map(function (_a) {
             var k = _a[0], v = _a[1];

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

@@ -430,8 +430,10 @@ var _componentToReact = function (json, options, isSubComponent) {
                 : stateType === 'solid'
                     ? "const state = useMutable(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
                     : stateType === 'builder'
-                        ? "var state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
-                        : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+                        ? "const state = useBuilderState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
+                        : stateType === 'variables'
+                            ? "const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ";")
+                            : "const state = useLocalProxy(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json), ");")
         : '', hasStateArgument ? refsString : '', getContextString(json, options), getInitCode(json, options), ((_g = json.hooks.onInit) === null || _g === void 0 ? void 0 : _g.code)
         ? "\n          useEffect(() => {\n            ".concat((0, state_2.processHookCode)({
             str: json.hooks.onInit.code,

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

@@ -1,7 +1,7 @@
 import { BaseTranspilerOptions } from '../../types/transpiler';
 export interface ToReactOptions extends BaseTranspilerOptions {
     stylesType?: 'emotion' | 'styled-components' | 'styled-jsx' | 'react-native' | 'style-tag';
-    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder';
+    stateType?: 'useState' | 'mobx' | 'valtio' | 'solid' | 'builder' | 'variables';
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
     preact?: boolean;

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

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions, TranspilerGenerator } from '../types/transpiler';
+export interface ToRscOptions extends BaseTranspilerOptions {
+}
+export declare const componentToRsc: TranspilerGenerator<ToRscOptions>;

package/dist/src/generators/rsc.js

@@ -0,0 +1,79 @@
+"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 __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.componentToRsc = void 0;
+var traverse_1 = __importDefault(require("traverse"));
+var fast_clone_1 = require("../helpers/fast-clone");
+var is_mitosis_node_1 = require("../helpers/is-mitosis-node");
+var react_1 = require("./react");
+/**
+ * Transform react to be RSC compatible, such as
+ * - remove event listeners
+ * - remove lifecycle hooks
+ * - remove refs
+ */
+var RSC_TRANSFORM_PLUGIN = function () { return ({
+    json: {
+        pre: function (json) {
+            if (json.hooks.onMount) {
+                delete json.hooks.onMount;
+            }
+            if (json.hooks.onUnMount) {
+                delete json.hooks.onUnMount;
+            }
+            if (json.hooks.onUpdate) {
+                delete json.hooks.onUpdate;
+            }
+            if (json.refs) {
+                json.refs = {};
+            }
+            (0, traverse_1.default)(json).forEach(function (node) {
+                if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                    if (node.bindings.ref) {
+                        delete node.bindings.ref;
+                    }
+                    for (var key in node.bindings) {
+                        if (key.match(/^on[A-Z]/)) {
+                            delete node.bindings[key];
+                        }
+                    }
+                }
+            });
+        },
+    },
+}); };
+var DEFAULT_OPTIONS = {
+    plugins: [RSC_TRANSFORM_PLUGIN],
+};
+var componentToRsc = function (_options) {
+    if (_options === void 0) { _options = {}; }
+    return function (_a) {
+        var component = _a.component, path = _a.path;
+        var json = (0, fast_clone_1.fastClone)(component);
+        var options = __assign(__assign(__assign({}, DEFAULT_OPTIONS), _options), { plugins: __spreadArray(__spreadArray([], (DEFAULT_OPTIONS.plugins || []), true), (_options.plugins || []), true), stylesType: 'style-tag', stateType: 'variables' });
+        return (0, react_1.componentToReact)(options)({ component: json, path: path });
+    };
+};
+exports.componentToRsc = componentToRsc;

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

@@ -0,0 +1,8 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToVueOptions } from './types';
+declare type BlockRenderer = (json: MitosisNode, options: ToVueOptions, scope?: Scope) => string;
+interface Scope {
+    isRootNode?: boolean;
+}
+export declare const blockToVue: BlockRenderer;
+export {};

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

@@ -0,0 +1,294 @@
+"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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blockToVue = void 0;
+var function_1 = require("fp-ts/lib/function");
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var is_children_1 = __importDefault(require("../../helpers/is-children"));
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var remove_surrounding_block_1 = require("../../helpers/remove-surrounding-block");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
+var slots_1 = require("../../helpers/slots");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var jsx_1 = require("../../parsers/jsx");
+var helpers_1 = require("./helpers");
+var SPECIAL_PROPERTIES = {
+    V_IF: 'v-if',
+    V_FOR: 'v-for',
+    V_ELSE: 'v-else',
+    V_ELSE_IF: 'v-else-if',
+};
+// TODO: Maybe in the future allow defining `string | function` as values
+var BINDING_MAPPERS = {
+    innerHTML: 'v-html',
+};
+var NODE_MAPPERS = {
+    Fragment: function (json, options, scope) {
+        if (options.vueVersion === 2 && (scope === null || scope === void 0 ? void 0 : scope.isRootNode)) {
+            throw new Error('Vue 2 template should have a single root element');
+        }
+        return json.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n');
+    },
+    For: function (_json, options) {
+        var _a, _b;
+        var _c;
+        var json = _json;
+        var keyValue = json.bindings.key || { code: 'index' };
+        var forValue = "(".concat(json.scope.forName, ", index) in ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_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); })
+            : '';
+    },
+    Show: function (json, options, scope) {
+        var _a, _b, _c, _d, _e, _f;
+        var _g, _h;
+        var ifValue = (0, slots_1.replaceSlotsInString)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_g = json.bindings.when) === null || _g === void 0 ? void 0 : _g.code), function (slotName) { return "$slots.".concat(slotName); });
+        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 = (0, function_1.pipe)((_c = child.bindings.when) === null || _c === void 0 ? void 0 : _c.code, strip_state_and_props_refs_1.stripStateAndPropsRefs);
+                            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, strip_state_and_props_refs_1.stripStateAndPropsRefs, 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                  ");
+                }
+        }
+    },
+    Slot: function (json, options) {
+        var _a, _b;
+        if (!json.bindings.name) {
+            var key = Object.keys(json.bindings).find(Boolean);
+            if (!key)
+                return '<slot />';
+            return "\n        <template #".concat(key, ">\n        ").concat((_a = json.bindings[key]) === null || _a === void 0 ? void 0 : _a.code, "\n        </template>\n      ");
+        }
+        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.name.code);
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\">").concat((_b = json.children) === null || _b === void 0 ? void 0 : _b.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'), "</slot>");
+    },
+};
+var stringifyBinding = function (node) {
+    return function (_a) {
+        var key = _a[0], value = _a[1];
+        if (key === '_spread') {
+            return '';
+        }
+        else if (key === 'class') {
+            return " :class=\"_classStringToObject(".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code, {
+                replaceWith: '',
+            }), ")\" ");
+            // TODO: support dynamic classes as objects somehow like Vue requires
+            // https://vuejs.org/v2/guide/class-and-style.html
+        }
+        else {
+            // TODO: proper babel transform to replace. Util for this
+            var useValue = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(value === null || value === void 0 ? void 0 : value.code);
+            if (key.startsWith('on')) {
+                var _b = value.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
+                var event_1 = key.replace('on', '').toLowerCase();
+                if (event_1 === 'change' && node.name === 'input') {
+                    event_1 = 'input';
+                }
+                var isAssignmentExpression = useValue.includes('=');
+                var valueWRenamedEvent = (0, replace_identifiers_1.replaceIdentifiers)({
+                    code: useValue,
+                    from: cusArgs[0],
+                    to: '$event',
+                });
+                // TODO: proper babel transform to replace. Util for this
+                if (isAssignmentExpression) {
+                    return " @".concat(event_1, "=\"").concat((0, helpers_1.encodeQuotes)((0, remove_surrounding_block_1.removeSurroundingBlock)(valueWRenamedEvent)), "\" ");
+                }
+                else {
+                    return " @".concat(event_1, "=\"").concat((0, helpers_1.encodeQuotes)((0, remove_surrounding_block_1.removeSurroundingBlock)((0, remove_surrounding_block_1.removeSurroundingBlock)(valueWRenamedEvent))), "\" ");
+                }
+            }
+            else if (key === 'ref') {
+                return " ref=\"".concat((0, helpers_1.encodeQuotes)(useValue), "\" ");
+            }
+            else if (BINDING_MAPPERS[key]) {
+                return " ".concat(BINDING_MAPPERS[key], "=\"").concat((0, helpers_1.encodeQuotes)(useValue.replace(/"/g, "\\'")), "\" ");
+            }
+            else {
+                return " :".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(useValue), "\" ");
+            }
+        }
+    };
+};
+var blockToVue = function (node, options, scope) {
+    var _a, _b;
+    var nodeMapper = NODE_MAPPERS[node.name];
+    if (nodeMapper) {
+        return nodeMapper(node, options, scope);
+    }
+    if ((0, is_children_1.default)(node)) {
+        return "<slot/>";
+    }
+    if (node.name === 'style') {
+        // Vue doesn't allow <style>...</style> in templates, but does support the synonymous
+        // <component is="'style'">...</component>
+        node.name = 'component';
+        node.bindings.is = { code: "'style'" };
+    }
+    if (node.properties._text) {
+        return "".concat(node.properties._text);
+    }
+    var textCode = (_a = node.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (textCode) {
+        var strippedTextCode = (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(textCode);
+        if ((0, slots_1.isSlotProperty)(strippedTextCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(strippedTextCode).toLowerCase(), "\"/>");
+        }
+        return "{{".concat(strippedTextCode, "}}");
+    }
+    var str = '';
+    str += "<".concat(node.name, " ");
+    if ((_b = node.bindings._spread) === null || _b === void 0 ? void 0 : _b.code) {
+        str += "v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(node.bindings._spread.code)), "\"");
+    }
+    for (var key in node.properties) {
+        var value = node.properties[key];
+        if (key === 'className') {
+            continue;
+        }
+        else if (key === SPECIAL_PROPERTIES.V_ELSE) {
+            str += " ".concat(key, " ");
+        }
+        else if (typeof value === 'string') {
+            str += " ".concat(key, "=\"").concat((0, helpers_1.encodeQuotes)(value), "\" ");
+        }
+    }
+    var stringifiedBindings = Object.entries(node.bindings)
+        .map(function (_a) {
+        var k = _a[0], v = _a[1];
+        return stringifyBinding(node)([k, v]);
+    })
+        .join('');
+    str += stringifiedBindings;
+    if (jsx_1.selfClosingTags.has(node.name)) {
+        return str + ' />';
+    }
+    str += '>';
+    if (node.children) {
+        str += node.children.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('');
+    }
+    return str + "</".concat(node.name, ">");
+};
+exports.blockToVue = blockToVue;

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

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

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

@@ -0,0 +1,107 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCompositionApiScript = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var json5_1 = __importDefault(require("json5"));
+var lodash_1 = require("lodash");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var core_1 = require("@babel/core");
+var helpers_1 = require("./helpers");
+var getCompositionPropDefinition = function (_a) {
+    var options = _a.options, component = _a.component, props = _a.props;
+    var str = 'const props = ';
+    if (component.defaultProps) {
+        var generic = options.typescript ? "<".concat(component.propsTypeRef, ">") : '';
+        str += "withDefaults(defineProps".concat(generic, "(), ").concat(json5_1.default.stringify(component.defaultProps), ")");
+    }
+    else if (options.typescript && component.propsTypeRef && component.propsTypeRef !== 'any') {
+        str += "defineProps<".concat(component.propsTypeRef, ">()");
+    }
+    else {
+        str += "defineProps(".concat(json5_1.default.stringify(props), ")");
+    }
+    return str;
+};
+function appendValueToRefs(input, component, options) {
+    var refKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
+    var output = (0, helpers_1.processBinding)({ code: input, options: options, json: component, includeProps: false });
+    return (0, babel_transform_1.babelTransformExpression)(output, {
+        Identifier: function (path) {
+            if (!(core_1.types.isFunctionDeclaration(path.parent) && path.parent.id === path.node) &&
+                !core_1.types.isCallExpression(path.parent) &&
+                (!core_1.types.isMemberExpression(path.parent) || core_1.types.isThisExpression(path.parent.object)) &&
+                path.parentPath.listKey !== 'arguments' &&
+                path.parentPath.listKey !== 'params' &&
+                refKeys.includes(path.node.name)) {
+                path.replaceWith(core_1.types.identifier("".concat(path.node.name, ".value")));
+            }
+        },
+    });
+}
+function generateCompositionApiScript(component, options, template, props, onUpdateWithDeps, onUpdateWithoutDeps) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var refs = (0, get_state_object_string_1.getStateObjectStringFromComponent)(component, {
+        data: true,
+        functions: false,
+        getters: false,
+        format: 'variables',
+        valueMapper: function (code) {
+            return (0, helpers_1.processBinding)({ code: "ref(".concat(code, ")"), options: options, json: component });
+        },
+        keyPrefix: 'const',
+    });
+    var methods = (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, includeProps: false }); },
+        format: 'variables',
+    });
+    if (template.includes('_classStringToObject')) {
+        methods += " function _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    } ";
+    }
+    var getterKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'getter'; }));
+    var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "], ["\n    ", "\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n  "])), props.length ? getCompositionPropDefinition({ component: component, props: props, options: options }) : '', refs, (_a = Object.keys(component.context.get)) === null || _a === void 0 ? void 0 : _a.map(function (key) { return "const ".concat(key, " = inject(").concat(component.context.get[key].name, ")"); }).join('\n'), (_b = Object.keys(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (key) { return "provide(".concat(component.context.set[key].name, ", ").concat(component.context.set[key].ref, ")"); }).join('\n'), (_c = Object.keys(component.refs)) === null || _c === void 0 ? void 0 : _c.map(function (key) {
+        if (options.typescript) {
+            return "const ".concat(key, " = ref<").concat(component.refs[key].typeParameter, ">()");
+        }
+        else {
+            return "const ".concat(key, " = ref(null)");
+        }
+    }).join('\n'), appendValueToRefs((_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : '', component, options), !((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code)
+        ? ''
+        : "onMounted(() => { ".concat(appendValueToRefs(component.hooks.onMount.code, component, options), "})"), !((_g = component.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code)
+        ? ''
+        : "onMounted(() => { ".concat(appendValueToRefs(component.hooks.onUnMount.code, component, options), "})"), !getterKeys
+        ? ''
+        : getterKeys
+            .map(function (key) {
+            var _a, _b;
+            var code = (_b = (_a = component.state[key]) === null || _a === void 0 ? void 0 : _a.code) === null || _b === void 0 ? void 0 : _b.toString();
+            return !code
+                ? ''
+                : "const ".concat(key, " = computed(").concat(appendValueToRefs(code.replace(key, '').replace('get ()', '() =>'), component, options), ")");
+        })
+            .join('\n'), !(onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.length)
+        ? ''
+        : onUpdateWithoutDeps.map(function (hook) {
+            return "onUpdated(() => ".concat(appendValueToRefs(hook.code, component, options), ")");
+        }), !(onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.length)
+        ? ''
+        : onUpdateWithDeps.map(function (hook) {
+            return appendValueToRefs("watch(".concat(hook.deps, ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, "})\n"), component, options);
+        }), (methods === null || methods === void 0 ? void 0 : methods.length) ? appendValueToRefs(methods, component, options) : '');
+    str = str.replace(/this\./g, ''); // strip this elsewhere (e.g. functions)
+    return str;
+}
+exports.generateCompositionApiScript = generateCompositionApiScript;
+var templateObject_1;

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

@@ -0,0 +1,16 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToVueOptions } from './types';
+export declare const addPropertiesToJson: (properties: MitosisNode['properties']) => (json: MitosisNode) => MitosisNode;
+export declare const addBindingsToJson: (bindings: MitosisNode['bindings']) => (json: MitosisNode) => MitosisNode;
+export declare const getOnUpdateHookName: (index: number) => string;
+export declare const invertBooleanExpression: (expression: string) => string;
+export declare function encodeQuotes(string: string): string;
+export declare const renameMitosisComponentsToKebabCase: (str: string) => string;
+export declare function getContextNames(json: MitosisComponent): string[];
+export declare function processBinding({ code, options, json, includeProps, }: {
+    code: string;
+    options: ToVueOptions;
+    json: MitosisComponent;
+    includeProps?: boolean;
+}): string;