@builder.io/mitosis 0.0.74 → 0.0.76

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

@@ -0,0 +1,3 @@
+import { TranspilerGenerator } from '../../types/transpiler';
+import { ToSvelteOptions } from './types';
+export declare const componentToSvelte: TranspilerGenerator<ToSvelteOptions>;

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

@@ -0,0 +1,250 @@
+"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 __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.componentToSvelte = void 0;
+var dedent_1 = __importDefault(require("dedent"));
+var standalone_1 = require("prettier/standalone");
+var traverse_1 = __importDefault(require("traverse"));
+var collect_css_1 = require("../../helpers/styles/collect-css");
+var helpers_1 = require("../../helpers/styles/helpers");
+var fast_clone_1 = require("../../helpers/fast-clone");
+var get_props_1 = require("../../helpers/get-props");
+var get_refs_1 = require("../../helpers/get-refs");
+var get_state_object_string_1 = require("../../helpers/get-state-object-string");
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+var render_imports_1 = require("../../helpers/render-imports");
+var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var plugins_1 = require("../../modules/plugins");
+var strip_meta_properties_1 = require("../../helpers/strip-meta-properties");
+var getters_to_functions_1 = require("../../helpers/getters-to-functions");
+var babel_transform_1 = require("../../helpers/babel-transform");
+var function_1 = require("fp-ts/lib/function");
+var context_1 = require("../helpers/context");
+var slots_1 = require("../../helpers/slots");
+var json5_1 = __importDefault(require("json5"));
+var functions_1 = require("../helpers/functions");
+var merge_options_1 = require("../../helpers/merge-options");
+var process_code_1 = require("../../helpers/plugins/process-code");
+var helpers_2 = require("./helpers");
+var blocks_1 = require("./blocks");
+var getContextCode = function (json) {
+    var contextGetters = json.context.get;
+    return Object.keys(contextGetters)
+        .map(function (key) { return "let ".concat(key, " = getContext(").concat(contextGetters[key].name, ".key);"); })
+        .join('\n');
+};
+var setContextCode = function (json) {
+    var contextSetters = json.context.set;
+    return Object.keys(contextSetters)
+        .map(function (key) {
+        var _a = contextSetters[key], ref = _a.ref, value = _a.value, name = _a.name;
+        return "setContext(".concat(value ? "".concat(name, ".key") : name, ", ").concat(value
+            ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((0, get_state_object_string_1.stringifyContextValue)(value))
+            : ref
+                ? (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)
+                : 'undefined', ");");
+    })
+        .join('\n');
+};
+/**
+ * Replace
+ *    <input value={state.name} onChange={event => state.name = event.target.value}
+ * with
+ *    <input bind:value={state.name}/>
+ * when easily identified, for more idiomatic svelte code
+ */
+var useBindValue = function (json, options) {
+    function normalizeStr(str) {
+        return str
+            .trim()
+            .replace(/\n|\r/g, '')
+            .replace(/^{/, '')
+            .replace(/}$/, '')
+            .replace(/;$/, '')
+            .replace(/\s+/g, '');
+    }
+    (0, traverse_1.default)(json).forEach(function (item) {
+        if ((0, is_mitosis_node_1.isMitosisNode)(item)) {
+            var _a = item.bindings, value = _a.value, onChange = _a.onChange;
+            if (value && onChange) {
+                var _b = onChange.arguments, cusArgs = _b === void 0 ? ['event'] : _b;
+                if (normalizeStr(onChange.code) === "".concat(normalizeStr(value.code), "=").concat(cusArgs[0], ".target.value")) {
+                    delete item.bindings.value;
+                    delete item.bindings.onChange;
+                    item.bindings['bind:value'] = value;
+                }
+            }
+        }
+    });
+};
+/**
+ * Removes all `this.` references.
+ */
+var stripThisRefs = function (str) {
+    return str.replace(/this\.([a-zA-Z_\$0-9]+)/g, '$1');
+};
+var DEFAULT_OPTIONS = {
+    stateType: 'variables',
+    prettier: true,
+    plugins: [functions_1.FUNCTION_HACK_PLUGIN],
+};
+var transformHookCode = function (options) { return function (hookCode) {
+    return (0, function_1.pipe)((0, helpers_2.stripStateAndProps)(hookCode, options), babel_transform_1.babelTransformCode);
+}; };
+var componentToSvelte = function (userProvidedOptions) {
+    return function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var component = _a.component;
+        var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userProvidedOptions);
+        options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
+            (0, process_code_1.CODE_PROCESSOR_PLUGIN)(function (codeType) {
+                switch (codeType) {
+                    case 'hooks':
+                        return transformHookCode(options);
+                    case 'bindings':
+                    case 'hooks-deps':
+                    case 'state':
+                    case 'properties':
+                        return function (c) { return c; };
+                }
+            }),
+        ], false);
+        // Make a copy we can safely mutate, similar to babel's toolchain
+        var json = (0, fast_clone_1.fastClone)(component);
+        json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
+        var refs = Array.from((0, get_refs_1.getRefs)(json));
+        useBindValue(json, options);
+        (0, getters_to_functions_1.gettersToFunctions)(json);
+        var props = Array.from((0, get_props_1.getProps)(json)).filter(function (prop) { return !(0, slots_1.isSlotProperty)(prop); });
+        json = (0, plugins_1.runPostJsonPlugins)(json, options.plugins);
+        var css = (0, collect_css_1.collectCss)(json);
+        (0, strip_meta_properties_1.stripMetaProperties)(json);
+        var dataString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            data: true,
+            functions: false,
+            getters: false,
+            format: options.stateType === 'proxies' ? 'object' : 'variables',
+            keyPrefix: options.stateType === 'variables' ? 'let ' : '',
+            valueMapper: function (code) { return (0, helpers_2.stripStateAndProps)(code, options); },
+        }), babel_transform_1.babelTransformCode);
+        var getterString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            data: false,
+            getters: true,
+            functions: false,
+            format: 'variables',
+            keyPrefix: '$: ',
+            valueMapper: function (code) {
+                return (0, function_1.pipe)(code.replace(/^get ([a-zA-Z_\$0-9]+)/, '$1 = ').replace(/\)/, ') => '), function (str) { return (0, helpers_2.stripStateAndProps)(str, options); }, stripThisRefs);
+            },
+        }), babel_transform_1.babelTransformCode);
+        var functionsString = (0, function_1.pipe)((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
+            data: false,
+            getters: false,
+            functions: true,
+            format: 'variables',
+            valueMapper: function (code) { return (0, function_1.pipe)((0, helpers_2.stripStateAndProps)(code, options), stripThisRefs); },
+        }), babel_transform_1.babelTransformCode);
+        var hasData = dataString.length > 4;
+        var str = '';
+        var tsLangAttribute = options.typescript ? "lang='ts'" : '';
+        if (options.typescript && ((_b = json.types) === null || _b === void 0 ? void 0 : _b.length)) {
+            str += (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \n\n      \n\n      "], ["\n      <script context='module' ", ">\n        ", "\n      </script>\n      \\n\n      \\n\n      "])), tsLangAttribute, json.types ? json.types.join('\n\n') + '\n' : '');
+        }
+        // prepare svelte imports
+        var svelteImports = [];
+        if ((_d = (_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code) === null || _d === void 0 ? void 0 : _d.length) {
+            svelteImports.push('onMount');
+        }
+        if ((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length) {
+            svelteImports.push('afterUpdate');
+        }
+        if ((_g = (_f = json.hooks.onUnMount) === null || _f === void 0 ? void 0 : _f.code) === null || _g === void 0 ? void 0 : _g.length) {
+            svelteImports.push('onDestroy');
+        }
+        if ((0, context_1.hasContext)(component)) {
+            svelteImports.push('getContext', 'setContext');
+        }
+        str += (0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n      ", "\n      "
+            // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
+            , "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      \n      ", "\n\n      ", "\n\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "])), tsLangAttribute, !svelteImports.length ? '' : "import { ".concat(svelteImports.sort().join(', '), " } from 'svelte'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
+            .map(function (name) {
+            if (name === 'children') {
+                return '';
+            }
+            var propDeclaration = "export let ".concat(name);
+            if (options.typescript && json.propsTypeRef && json.propsTypeRef !== 'any') {
+                propDeclaration += ": ".concat(json.propsTypeRef.split(' |')[0], "['").concat(name, "']");
+            }
+            if (json.defaultProps && json.defaultProps.hasOwnProperty(name)) {
+                propDeclaration += "=".concat(json5_1.default.stringify(json.defaultProps[name]));
+            }
+            propDeclaration += ';';
+            return propDeclaration;
+        })
+            .join('\n'), 
+        // https://svelte.dev/repl/bd9b56891f04414982517bbd10c52c82?version=3.31.0
+        (0, helpers_1.hasStyle)(json)
+            ? "\n        function mitosis_styling (node, vars) {\n          Object.entries(vars || {}).forEach(([ p, v ]) => {\n            if (p.startsWith('--')) {\n              node.style.setProperty(p, v);\n            } else {\n              node.style[p] = v;\n            }\n          })\n        }\n      "
+            : '', getContextCode(json), setContextCode(json), functionsString.length < 4 ? '' : functionsString, getterString.length < 4 ? '' : getterString, refs.map(function (ref) { return "let ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(ref)); }).join('\n'), options.stateType === 'proxies'
+            ? dataString.length < 4
+                ? ''
+                : "let state = onChange(".concat(dataString, ", () => state = state)")
+            : dataString, (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)((_j = (_h = json.hooks.onInit) === null || _h === void 0 ? void 0 : _h.code) !== null && _j !== void 0 ? _j : ''), !((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " });"), ((_l = json.hooks.onUpdate) === null || _l === void 0 ? void 0 : _l.map(function (_a, index) {
+            var code = _a.code, deps = _a.deps;
+            if (!deps) {
+                return "afterUpdate(() => { ".concat(code, " });");
+            }
+            var fnName = "onUpdateFn_".concat(index);
+            return "\n              function ".concat(fnName, "() {\n                ").concat(code, "\n              }\n              $: ").concat(fnName, "(...").concat((0, helpers_2.stripStateAndProps)(deps, options), ")\n            ");
+        }).join(';')) || '', !((_m = json.hooks.onUnMount) === null || _m === void 0 ? void 0 : _m.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
+            .map(function (item) {
+            return (0, blocks_1.blockToSvelte)({
+                json: item,
+                options: options,
+                parentComponent: json,
+            });
+        })
+            .join('\n'), !css.trim().length
+            ? ''
+            : "<style>\n      ".concat(css, "\n    </style>"));
+        str = (0, plugins_1.runPreCodePlugins)(str, options.plugins);
+        if (options.prettier !== false) {
+            try {
+                str = (0, standalone_1.format)(str, {
+                    parser: 'svelte',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-html'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-babel'),
+                        require('prettier/parser-typescript'),
+                        require('prettier-plugin-svelte'),
+                    ],
+                });
+            }
+            catch (err) {
+                console.warn('Could not prettify');
+                console.warn({ string: str }, err);
+            }
+        }
+        str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
+        return str;
+    };
+};
+exports.componentToSvelte = componentToSvelte;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,4 @@
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export declare type ToSvelteOptions = BaseTranspilerOptions & {
+    stateType?: 'proxies' | 'variables';
+};

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

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

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

@@ -23,7 +23,6 @@ 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 = {
@@ -48,7 +47,7 @@ var NODE_MAPPERS = {
         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));
+        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>");
@@ -64,7 +63,7 @@ var NODE_MAPPERS = {
     Show: function (json, options, scope) {
         var _a, _b, _c, _d, _e, _f;
         var _g, _h;
-        var ifValue = (0, slots_1.replaceSlotsInString)((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 ifValue = (0, slots_1.replaceSlotsInString)(((_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    ");
@@ -109,7 +108,7 @@ var NODE_MAPPERS = {
                         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 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;
                         }
@@ -152,7 +151,7 @@ var NODE_MAPPERS = {
                      *
                      */
                     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 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
@@ -181,8 +180,7 @@ var NODE_MAPPERS = {
                 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>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(json.bindings.name.code).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) {
@@ -193,15 +191,13 @@ var stringifyBinding = function (node) {
             return ''; // we handle this after
         }
         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: '',
-            }), ")\" ");
+            return " :class=\"_classStringToObject(".concat(value === null || value === void 0 ? void 0 : value.code, ")\" ");
             // 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);
+            var useValue = (value === null || value === void 0 ? void 0 : value.code) || '';
             if (key.startsWith('on')) {
                 var _c = value.arguments, cusArgs = _c === void 0 ? ['event'] : _c;
                 var event_1 = key.replace('on', '').toLowerCase();
@@ -254,11 +250,10 @@ var blockToVue = function (node, options, scope) {
     }
     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(), "\"/>");
+        if ((0, slots_1.isSlotProperty)(textCode)) {
+            return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(textCode).toLowerCase(), "\"/>");
         }
-        return "{{".concat(strippedTextCode, "}}");
+        return "{{".concat(textCode, "}}");
     }
     var str = '';
     str += "<".concat(node.name, " ");
@@ -274,22 +269,17 @@ var blockToVue = function (node, options, scope) {
             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('');
+    var stringifiedBindings = Object.entries(node.bindings).map(stringifyBinding(node)).join('');
     str += stringifiedBindings;
     // spreads
     var spreads = (0, lodash_1.filter)(node.bindings, function (binding) { return (binding === null || binding === void 0 ? void 0 : binding.type) === 'spread'; }).map(function (value) { return value === null || value === void 0 ? void 0 : value.code; });
     if (spreads === null || spreads === void 0 ? void 0 : spreads.length) {
         if (spreads.length > 1) {
             var spreadsString = "{...".concat(spreads.join(', ...'), "}");
-            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreadsString)), "\"");
+            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)(spreadsString), "\"");
         }
         else {
-            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(spreads.join(''))), "\"");
+            str += " v-bind=\"".concat((0, helpers_1.encodeQuotes)(spreads.join('')), "\"");
         }
     }
     if (jsx_1.selfClosingTags.has(node.name)) {

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

@@ -3,15 +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 __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 };
 };
@@ -20,11 +11,9 @@ 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 strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 var getCompositionPropDefinition = function (_a) {
     var options = _a.options, component = _a.component, props = _a.props;
     var str = 'const props = ';
@@ -40,48 +29,6 @@ var getCompositionPropDefinition = function (_a) {
     }
     return str;
 };
-function shouldAppendValueToRef(path) {
-    var parent = path.parent, node = path.node;
-    if (core_1.types.isFunctionDeclaration(parent) && parent.id === node) {
-        return false;
-    }
-    if (core_1.types.isCallExpression(parent)) {
-        return false;
-    }
-    var isMemberExpression = core_1.types.isMemberExpression(parent);
-    if (isMemberExpression &&
-        core_1.types.isThisExpression(parent.object) &&
-        core_1.types.isProgram(path.scope.block) &&
-        path.scope.hasReference(node.name)) {
-        return false;
-    }
-    if (isMemberExpression &&
-        core_1.types.isIdentifier(parent.object) &&
-        core_1.types.isIdentifier(parent.property) &&
-        parent.property.name === node.name) {
-        return false;
-    }
-    if (Object.keys(path.scope.bindings).includes(path.node.name)) {
-        return false;
-    }
-    if (path.parentPath.listKey === 'arguments' || path.parentPath.listKey === 'params') {
-        return false;
-    }
-    return true;
-}
-function appendValueToRefs(input, component, options) {
-    var refKeys = Object.keys(component.refs);
-    var stateKeys = Object.keys((0, lodash_1.pickBy)(component.state, function (i) { return (i === null || i === void 0 ? void 0 : i.type) === 'property'; }));
-    var allKeys = __spreadArray(__spreadArray([], refKeys, true), stateKeys, true);
-    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 (allKeys.includes(path.node.name) && shouldAppendValueToRef(path)) {
-                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, {
@@ -89,53 +36,46 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         functions: false,
         getters: false,
         format: 'variables',
-        valueMapper: function (code) {
-            return (0, helpers_1.processBinding)({ code: "ref(".concat(code, ")"), options: options, json: component });
-        },
+        valueMapper: function (code) { return "ref(".concat(code, ")"); },
         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    } ";
+        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) {
+    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    ", "\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.values(component.context.set)) === null || _b === void 0 ? void 0 : _b.map(function (contextSet) {
+        return "provide(".concat(contextSet.name, ", ").concat((0, helpers_1.getContextValue)({
+            json: component,
+            options: options,
+        })(contextSet), ")");
+    }).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)
+    }).join('\n'), (_e = (_d = component.hooks.onInit) === null || _d === void 0 ? void 0 : _d.code) !== null && _e !== void 0 ? _e : '', !((_f = component.hooks.onMount) === null || _f === void 0 ? void 0 : _f.code) ? '' : "onMounted(() => { ".concat(component.hooks.onMount.code, "})"), !((_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)
+        : "onUnmounted(() => { ".concat(component.hooks.onUnMount.code, "})"), (getterKeys === null || getterKeys === void 0 ? void 0 : 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();
+        if (!code) {
+            return '';
+        }
+        // transform `foo() { return this.bar }` to `() => { return bar.value }`
+        var getterAsFunction = code.replace(key, '').trim().replace(/^\(\)/, '() =>');
+        var computedCode = "const ".concat(key, " = computed(").concat(getterAsFunction, ")");
+        return computedCode;
+    }).join('\n')) || '', (onUpdateWithoutDeps === null || onUpdateWithoutDeps === void 0 ? void 0 : onUpdateWithoutDeps.map(function (hook) { return "onUpdated(() => ".concat(hook.code, ")"); }).join('\n')) || '', (onUpdateWithDeps === null || onUpdateWithDeps === void 0 ? void 0 : onUpdateWithDeps.map(function (hook) {
+        return "watch(() => ".concat(hook.deps, ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " })");
+    }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
     return str;
 }
 exports.generateCompositionApiScript = generateCompositionApiScript;

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

@@ -1,4 +1,5 @@
-import { MitosisComponent } from '../../types/mitosis-component';
+import { Nullable } from '../../helpers/nullable';
+import { ContextSetInfo, 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;
@@ -8,9 +9,14 @@ 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, }: {
+export declare const processBinding: ({ code, options, json, includeProps, }: {
     code: string;
     options: ToVueOptions;
     json: MitosisComponent;
-    includeProps?: boolean;
-}): string;
+    includeProps?: boolean | undefined;
+}) => string;
+export declare const getContextValue: ({ options, json }: {
+    options: ToVueOptions;
+    json: MitosisComponent;
+}) => ({ name, ref, value }: ContextSetInfo) => Nullable<string>;
+export declare const getContextProvideString: (json: MitosisComponent, options: ToVueOptions) => string;