@builder.io/mitosis 0.0.80 → 0.0.82

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

@@ -67,50 +67,90 @@ var isRootSpecialNode = function (json) {
 };
 var wrapInFragment = function (json) { return json.children.length !== 1; };
 var NODE_MAPPERS = {
-    Slot: function (json, options, parentSlots) {
+    Slot: function (json, options, component, parentSlots) {
         var _a;
-        if (!json.bindings.name) {
+        var _b, _c;
+        var slotName = ((_b = json.bindings.name) === null || _b === void 0 ? void 0 : _b.code) || json.properties.name;
+        var hasChildren = json.children.length;
+        var renderChildren = function () {
+            var _a;
+            var childrenStr = (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToReact)(item, options, component); }).join('\n').trim();
+            /**
+             * Ad-hoc way of figuring out if the children defaultProp is:
+             * - a JSX element, e.g. `<div>foo</div>`
+             * - a JS expression, e.g. `true`, `false`
+             * - a string, e.g. `'Default text'`
+             *
+             * and correctly wrapping it in quotes when appropriate.
+             */
+            if (childrenStr.startsWith("<") && childrenStr.endsWith(">")) {
+                return childrenStr;
+            }
+            else if (['false', 'true', 'null', 'undefined'].includes(childrenStr)) {
+                return childrenStr;
+            }
+            else {
+                return "\"".concat(childrenStr, "\"");
+            }
+        };
+        if (!slotName) {
             // TODO: update MitosisNode for simple code
             var key = Object.keys(json.bindings).find(Boolean);
             if (key && parentSlots) {
                 var propKey = (0, lodash_1.camelCase)('Slot' + key[0].toUpperCase() + key.substring(1));
-                parentSlots.push({ key: propKey, value: (_a = json.bindings[key]) === null || _a === void 0 ? void 0 : _a.code });
+                parentSlots.push({ key: propKey, value: (_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code });
                 return '';
             }
+            if (hasChildren) {
+                component.defaultProps = __assign(__assign({}, (component.defaultProps || {})), { children: {
+                        code: renderChildren(),
+                        type: 'property',
+                    } });
+            }
             return "{".concat((0, helpers_2.processBinding)('props.children', options), "}");
         }
-        var slotProp = (0, helpers_2.processBinding)(json.bindings.name.code, options).replace('name=', '');
+        var slotProp = (0, helpers_2.processBinding)(slotName, options).replace('name=', '');
+        if (!slotProp.startsWith('props.slot')) {
+            slotProp = "props.slot".concat((0, lodash_1.upperFirst)((0, lodash_1.camelCase)(slotProp)));
+        }
+        if (hasChildren) {
+            component.defaultProps = __assign(__assign({}, (component.defaultProps || {})), (_a = {}, _a[slotProp.replace('props.', '')] = {
+                code: renderChildren(),
+                type: 'property',
+            }, _a));
+        }
         return "{".concat(slotProp, "}");
     },
-    Fragment: function (json, options) {
+    Fragment: function (json, options, component) {
         var wrap = wrapInFragment(json);
         return "".concat(wrap ? getFragment('open', options) : '').concat(json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
             .join('\n')).concat(wrap ? getFragment('close', options) : '');
     },
-    For: function (_json, options) {
+    For: function (_json, options, component) {
         var _a;
         var json = _json;
         var wrap = wrapInFragment(json);
         var forArguments = (0, for_1.getForArguments)(json).join(', ');
         return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.each) === null || _a === void 0 ? void 0 : _a.code, options), "?.map((").concat(forArguments, ") => (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
             .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ))}");
     },
-    Show: function (json, options) {
+    Show: function (json, options, component) {
         var _a;
         var wrap = wrapInFragment(json);
         return "{".concat((0, helpers_2.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? openFrag(options) : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (item) { return (0, exports.blockToReact)(item, options); })
-            .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options), "}");
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component); })
+            .join('\n')).concat(wrap ? closeFrag(options) : '', "\n    ) : ").concat(!json.meta.else ? 'null' : (0, exports.blockToReact)(json.meta.else, options, component), "}");
     },
 };
 var ATTTRIBUTE_MAPPERS = {
     spellcheck: 'spellCheck',
     autocapitalize: 'autoCapitalize',
     autocomplete: 'autoComplete',
+    for: 'htmlFor',
 };
 // TODO: Maybe in the future allow defining `string | function` as values
 var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
@@ -126,10 +166,10 @@ var BINDING_MAPPERS = __assign({ ref: function (ref, value, options) {
     }, innerHTML: function (_key, value) {
         return ['dangerouslySetInnerHTML', "{__html: ".concat(value.replace(/\s+/g, ' '), "}")];
     } }, ATTTRIBUTE_MAPPERS);
-var blockToReact = function (json, options, parentSlots) {
+var blockToReact = function (json, options, component, parentSlots) {
     var _a, _b, _c;
     if (NODE_MAPPERS[json.name]) {
-        return NODE_MAPPERS[json.name](json, options, parentSlots);
+        return NODE_MAPPERS[json.name](json, options, component, parentSlots);
     }
     if (json.properties._text) {
         var text = json.properties._text;
@@ -150,7 +190,7 @@ var blockToReact = function (json, options, parentSlots) {
     for (var key in json.properties) {
         var value = (json.properties[key] || '').replace(/"/g, '&quot;').replace(/\n/g, '\\n');
         if (key === 'class') {
-            str += " className=\"".concat(value, "\" ");
+            str = "".concat(str.trim(), " className=\"").concat(value, "\" ");
         }
         else if (BINDING_MAPPERS[key]) {
             var mapper = BINDING_MAPPERS[key];
@@ -217,7 +257,7 @@ var blockToReact = function (json, options, parentSlots) {
     var childrenNodes = '';
     if (json.children) {
         childrenNodes = json.children
-            .map(function (item) { return (0, exports.blockToReact)(item, options, needsToRenderSlots); })
+            .map(function (item) { return (0, exports.blockToReact)(item, options, component, needsToRenderSlots); })
             .join('\n');
     }
     if (needsToRenderSlots.length) {
@@ -226,7 +266,7 @@ var blockToReact = function (json, options, parentSlots) {
             str += " ".concat(key, "={").concat(value, "} ");
         });
     }
-    str += '>';
+    str = str.trim() + '>';
     if (json.children) {
         str += childrenNodes;
     }
@@ -428,6 +468,21 @@ var _componentToReact = function (json, options, isSubComponent) {
     var nativeStyles = stylesType === 'react-native' && componentHasStyles && (0, react_native_1.collectReactNativeStyles)(json);
     var propType = json.propsTypeRef || 'any';
     var propsArgs = "props".concat(options.typescript ? ":".concat(propType) : '');
+    var getPropsDefinition = function (_a) {
+        var json = _a.json;
+        if (!json.defaultProps)
+            return '';
+        var defalutPropsString = Object.keys(json.defaultProps)
+            .map(function (prop) {
+            var _a;
+            var value = json.defaultProps.hasOwnProperty(prop)
+                ? (_a = json.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                : '{}';
+            return "".concat(prop, ": ").concat(value);
+        })
+            .join(',');
+        return "".concat(json.name || 'MyComponent', ".defaultProps = {").concat(defalutPropsString, "};");
+    };
     var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\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    ", "", "", "function ", "(", "", ") {\n    ", "\n    ", "\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n\n      return (\n        ", "\n        ", "\n        ", "\n        ", "\n      );\n    }", "\n\n    ", "\n\n    ", "\n\n    ", "\n    ", "\n\n  "])), options.preact
         ? "\n    /** @jsx h */\n    import { h, Fragment } from 'preact';\n    "
         : options.type !== 'native'
@@ -472,13 +527,11 @@ var _componentToReact = function (json, options, isSubComponent) {
             str: json.hooks.onUnMount.code,
             options: options,
         }), "\n            }\n          }, [])")
-        : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
+        : '', wrap ? openFrag(options) : '', json.children.map(function (item) { return (0, exports.blockToReact)(item, options, json, []); }).join('\n'), componentHasStyles && stylesType === 'styled-jsx'
         ? "<style jsx>{`".concat(css, "`}</style>")
         : componentHasStyles && stylesType === 'style-tag'
             ? "<style>{`".concat(css, "`}</style>")
-            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', !json.defaultProps
-        ? ''
-        : "".concat(json.name || 'MyComponent', ".defaultProps = ").concat(json5_1.default.stringify(json.defaultProps), ";"), !nativeStyles
+            : '', wrap ? closeFrag(options) : '', isForwardRef ? ')' : '', getPropsDefinition({ json: json }), !nativeStyles
         ? ''
         : "\n      const styles = StyleSheet.create(".concat(json5_1.default.stringify(nativeStyles), ");\n    "), styledComponentsCode ? styledComponentsCode : '', stateType === 'mobx'
         ? "\n      const observed".concat(json.name || 'MyComponent', " = observer(").concat(json.name || 'MyComponent', ");\n      export default observed").concat(json.name || 'MyComponent', ";\n    ")

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

@@ -66,7 +66,6 @@ var traverse_1 = __importDefault(require("traverse"));
 var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
 var create_mitosis_node_1 = require("../../helpers/create-mitosis-node");
-var context_1 = require("../helpers/context");
 var babel_transform_1 = require("../../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
@@ -80,12 +79,14 @@ var S = __importStar(require("fp-ts/string"));
 var helpers_2 = require("./state/helpers");
 var merge_options_1 = require("../../helpers/merge-options");
 var process_code_1 = require("../../helpers/plugins/process-code");
+var context_1 = require("../helpers/context");
+var typescript_1 = require("../../helpers/typescript");
 // Transform <foo.bar key="value" /> to <component :is="foo.bar" key="value" />
 function processDynamicComponents(json, options) {
     var found = false;
     (0, traverse_1.default)(json).forEach(function (node) {
         if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-            if (node.name.includes('.')) {
+            if (node.name.includes('.') && !node.name.endsWith('.Provider')) {
                 node.bindings.component = { code: node.name };
                 node.name = 'Dynamic';
                 found = true;
@@ -163,6 +164,14 @@ var preProcessBlockCode = function (_a) {
         }
     }
 };
+var ATTTRIBUTE_MAPPERS = {
+    for: 'htmlFor',
+};
+var transformAttributeName = function (name) {
+    if ((0, typescript_1.objectHasKey)(ATTTRIBUTE_MAPPERS, name))
+        return ATTTRIBUTE_MAPPERS[name];
+    return name;
+};
 var blockToSolid = function (_a) {
     var _b, _c;
     var json = _a.json, options = _a.options, component = _a.component;
@@ -196,7 +205,8 @@ var blockToSolid = function (_a) {
     }
     for (var key in json.properties) {
         var value = json.properties[key];
-        str += " ".concat(key, "=\"").concat(value, "\" ");
+        var newKey = transformAttributeName(key);
+        str += " ".concat(newKey, "=\"").concat(value, "\" ");
     }
     for (var key in json.bindings) {
         var _d = json.bindings[key], code = _d.code, _e = _d.arguments, cusArg = _e === void 0 ? ['event'] : _e, type = _d.type;
@@ -234,7 +244,8 @@ var blockToSolid = function (_a) {
                     },
                 });
             }
-            str += " ".concat(key, "={").concat(useValue, "} ");
+            var newKey = transformAttributeName(key);
+            str += " ".concat(newKey, "={").concat(useValue, "} ");
         }
     }
     if (jsx_1.selfClosingTags.has(json.name)) {
@@ -317,17 +328,16 @@ var componentToSolid = function (passedOptions) {
             });
         var state = (0, state_1.getState)({ json: json, options: options });
         var componentsUsed = (0, get_components_used_1.getComponentsUsed)(json);
-        var componentHasContext = (0, context_1.hasContext)(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
         var solidJSImports = (0, Array_1.uniq)(S.Eq)(__spreadArray(__spreadArray([
-            componentHasContext ? 'useContext' : undefined,
+            (0, context_1.hasGetContext)(json) ? 'useContext' : undefined,
             hasShowComponent ? 'Show' : undefined,
             hasForComponent ? 'For' : undefined,
             ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? 'onMount' : undefined
         ], (((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length) ? ['on', 'createEffect'] : []), true), ((_d = state === null || state === void 0 ? void 0 : state.import.solidjs) !== null && _d !== void 0 ? _d : []), true).filter(nullable_1.checkIsDefined));
         var storeImports = (_e = state === null || state === void 0 ? void 0 : state.import.store) !== null && _e !== void 0 ? _e : [];
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
+        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    function ", "(props) {\n      ", "\n\n      ", "\n      ", "\n\n      ", "\n      ", "\n\n      return (", "\n        ", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), solidJSImports.length > 0 ? "import { ".concat(solidJSImports.join(', '), " } from 'solid-js';") : '', !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", storeImports.length > 0 ? "import { ".concat(storeImports.join(', '), " } from 'solid-js/store';") : '', !componentHasStyles && options.stylesType === 'styled-components'
             ? ''
             : "import { css } from \"solid-styled-components\";", (0, render_imports_1.renderPreComponent)({ component: json, target: 'solid' }), json.name, (_f = state === null || state === void 0 ? void 0 : state.str) !== null && _f !== void 0 ? _f : '', getRefsString(json), getContextString(json, options), !((_g = json.hooks.onMount) === null || _g === void 0 ? void 0 : _g.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), json.hooks.onUpdate
             ? json.hooks.onUpdate

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

@@ -53,15 +53,24 @@ var mappers = {
             : '', "\n{/if}");
     },
     Slot: function (_a) {
-        var _b, _c;
+        var _b, _c, _d;
         var json = _a.json, options = _a.options, parentComponent = _a.parentComponent;
-        if (!json.bindings.name) {
+        var slotName = ((_b = json.bindings.name) === null || _b === void 0 ? void 0 : _b.code) || json.properties.name;
+        var renderChildren = function () {
+            var _a;
+            return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n');
+        };
+        if (!slotName) {
             var key = Object.keys(json.bindings).find(Boolean);
-            if (!key)
-                return '<slot />';
-            return "\n        <span #".concat(key, ">\n        ").concat((_b = json.bindings[key]) === null || _b === void 0 ? void 0 : _b.code, "\n        </span>\n      ");
+            if (!key) {
+                if (!((_c = json.children) === null || _c === void 0 ? void 0 : _c.length)) {
+                    return '<slot/>';
+                }
+                return "<slot>".concat(renderChildren(), "</slot>");
+            }
+            return "\n        <span #".concat(key, ">\n        ").concat((_d = json.bindings[key]) === null || _d === void 0 ? void 0 : _d.code, "\n        </span>\n      ");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(json.bindings.name.code).toLowerCase(), "\">").concat((_c = json.children) === null || _c === void 0 ? void 0 : _c.map(function (item) { return (0, exports.blockToSvelte)({ json: item, options: options, parentComponent: parentComponent }); }).join('\n'), "</slot>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var BINDINGS_MAPPER = {

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

@@ -35,7 +35,6 @@ 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");
@@ -106,7 +105,7 @@ var DEFAULT_OPTIONS = {
 };
 var componentToSvelte = function (userProvidedOptions) {
     return function (_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         var component = _a.component;
         var options = (0, merge_options_1.mergeOptions)(DEFAULT_OPTIONS, userProvidedOptions);
         options.plugins = __spreadArray(__spreadArray([], (options.plugins || []), true), [
@@ -171,21 +170,25 @@ var componentToSvelte = function (userProvidedOptions) {
         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) {
+        if ((_f = (_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.filter(function (x) { return !x.deps; })) === null || _f === void 0 ? void 0 : _f.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) {
+        if ((_h = (_g = json.hooks.onUnMount) === null || _g === void 0 ? void 0 : _g.code) === null || _h === void 0 ? void 0 : _h.length) {
             svelteImports.push('onDestroy');
         }
-        if ((0, context_1.hasContext)(component)) {
-            svelteImports.push('getContext', 'setContext');
+        if ((0, context_1.hasGetContext)(component)) {
+            svelteImports.push('getContext');
         }
-        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\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\n\n      ", "\n\n      ", "\n      ", "\n      "
+        if ((0, context_1.hasSetContext)(component)) {
+            svelteImports.push('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\n      ", "\n    </script>\n\n    ", "\n\n    ", "\n  "], ["\n      <script ", ">\n      ", "\n      ", "\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'"), !svelteStoreImports.length
+            , "\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'"), !svelteStoreImports.length
             ? ''
             : "import { ".concat(svelteStoreImports.sort().join(', '), " } from 'svelte/store'"), (0, render_imports_1.renderPreComponent)({ component: json, target: 'svelte' }), !hasData || options.stateType === 'variables' ? '' : "import onChange from 'on-change'", props
             .map(function (name) {
+            var _a;
             if (name === 'children') {
                 return '';
             }
@@ -194,7 +197,7 @@ var componentToSvelte = function (userProvidedOptions) {
                 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 += "=".concat((_a = json.defaultProps[name]) === null || _a === void 0 ? void 0 : _a.code);
             }
             propDeclaration += ';';
             return propDeclaration;
@@ -207,14 +210,14 @@ var componentToSvelte = function (userProvidedOptions) {
             ? dataString.length < 4
                 ? ''
                 : "let state = onChange(".concat(dataString, ", () => state = state)")
-            : dataString, (_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) {
+            : dataString, (_k = (_j = json.hooks.onInit) === null || _j === void 0 ? void 0 : _j.code) !== null && _k !== void 0 ? _k : '', !((_l = json.hooks.onMount) === null || _l === void 0 ? void 0 : _l.code) ? '' : "onMount(() => { ".concat(json.hooks.onMount.code, " });"), ((_m = json.hooks.onUpdate) === null || _m === void 0 ? void 0 : _m.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(deps, ")\n            ");
-        }).join(';')) || '', !((_m = json.hooks.onUnMount) === null || _m === void 0 ? void 0 : _m.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
+        }).join(';')) || '', !((_o = json.hooks.onUnMount) === null || _o === void 0 ? void 0 : _o.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children
             .map(function (item) {
             return (0, blocks_1.blockToSvelte)({
                 json: item,
@@ -245,6 +248,7 @@ var componentToSvelte = function (userProvidedOptions) {
                 console.warn({ string: str }, err);
             }
         }
+        str = str.replace(/<script>\n<\/script>/g, '').trim();
         str = (0, plugins_1.runPostCodePlugins)(str, options.plugins);
         return str;
     };

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

@@ -173,14 +173,20 @@ var NODE_MAPPERS = {
         }
     },
     Slot: function (json, options) {
-        var _a, _b;
-        if (!json.bindings.name) {
+        var _a, _b, _c;
+        var slotName = ((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.code) || json.properties.name;
+        var renderChildren = function () { var _a; return (_a = json.children) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (0, exports.blockToVue)(item, options); }).join('\n'); };
+        if (!slotName) {
             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      ");
+            if (!key) {
+                if (!((_b = json.children) === null || _b === void 0 ? void 0 : _b.length)) {
+                    return '<slot/>';
+                }
+                return "<slot>".concat(renderChildren(), "</slot>");
+            }
+            return "\n        <template #".concat(key, ">\n          ").concat((_c = json.bindings[key]) === null || _c === void 0 ? void 0 : _c.code, "\n        </template>\n      ");
         }
-        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(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>");
+        return "<slot name=\"".concat((0, slots_1.stripSlotPrefix)(slotName).toLowerCase(), "\">").concat(renderChildren(), "</slot>");
     },
 };
 var stringifyBinding = function (node) {

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

@@ -14,12 +14,22 @@ var lodash_1 = require("lodash");
 var get_state_object_string_1 = require("../../helpers/get-state-object-string");
 var helpers_1 = require("./helpers");
 var strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
+var helpers_2 = 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), ")");
+        var defalutPropsString = props
+            .map(function (prop) {
+            var _a;
+            var value = component.defaultProps.hasOwnProperty(prop)
+                ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                : '{}';
+            return "".concat(prop, ": ").concat(value);
+        })
+            .join(',');
+        str += "withDefaults(defineProps".concat(generic, "(), {").concat(defalutPropsString, "})");
     }
     else if (options.typescript && component.propsTypeRef && component.propsTypeRef !== 'any') {
         str += "defineProps<".concat(component.propsTypeRef, ">()");
@@ -76,7 +86,11 @@ function generateCompositionApiScript(component, options, template, props, onUpd
         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, " })");
+        return "watch(() => ".concat((0, helpers_2.processBinding)({
+            code: hook.deps || '',
+            options: options,
+            json: component,
+        }), ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " }, {immediate: true})");
     }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
     return str;
 }

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

@@ -28,6 +28,7 @@ var babel_transform_1 = require("../../helpers/babel-transform");
 var core_1 = require("@babel/core");
 var lodash_1 = require("lodash");
 var patterns_1 = require("../../helpers/patterns");
+var replace_identifiers_1 = require("../../helpers/replace-identifiers");
 var addPropertiesToJson = function (properties) {
     return function (json) { return (__assign(__assign({}, json), { properties: __assign(__assign({}, json.properties), properties) })); };
 };
@@ -101,32 +102,54 @@ function processRefs(input, component, options) {
         },
     });
 }
+function prefixMethodsWithThis(input, component, options) {
+    if (options.api === 'options') {
+        var allMethodNames = Object.entries(component.state)
+            .filter(function (_a) {
+            var _key = _a[0], value = _a[1];
+            return (value === null || value === void 0 ? void 0 : value.type) === 'function';
+        })
+            .map(function (_a) {
+            var key = _a[0];
+            return key;
+        });
+        if (!allMethodNames.length)
+            return input;
+        return (0, replace_identifiers_1.replaceIdentifiers)({ code: input, from: allMethodNames, to: function (name) { return "this.".concat(name); } });
+    }
+    else {
+        return input;
+    }
+}
 // TODO: migrate all stripStateAndPropsRefs to use this here
 // to properly replace context refs
 var processBinding = function (_a) {
     var code = _a.code, options = _a.options, json = _a.json, _b = _a.preserveGetter, preserveGetter = _b === void 0 ? false : _b;
-    return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
-        includeState: true,
-        // we don't want to process `props` in the Composition API because it has a `props` ref,
-        // therefore we can keep pointing to `props.${value}`
-        includeProps: options.api === 'options',
-        replaceWith: function (name) {
-            switch (options.api) {
-                case 'composition':
-                    return name;
-                case 'options':
-                    if (name === 'children' || name.startsWith('children.')) {
-                        return 'this.$slots.default';
-                    }
-                    return "this.".concat(name);
-            }
-        },
-    }), function (x) {
-        var wasGetter = x.match(patterns_1.GETTER);
-        return (0, function_1.pipe)(x, 
-        // workaround so that getter code is valid and parseable by babel.
-        patterns_1.stripGetter, function (code) { return processRefs(code, json, options); }, function (code) { return (preserveGetter && wasGetter ? "get ".concat(code) : code); });
-    });
+    try {
+        return (0, function_1.pipe)((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, {
+            includeState: true,
+            // we don't want to process `props` in the Composition API because it has a `props` ref,
+            // therefore we can keep pointing to `props.${value}`
+            includeProps: options.api === 'options',
+            replaceWith: function (name) {
+                switch (options.api) {
+                    case 'composition':
+                        return name;
+                    case 'options':
+                        if (name === 'children' || name.startsWith('children.')) {
+                            return 'this.$slots.default';
+                        }
+                        return "this.".concat(name);
+                }
+            },
+        }), function (x) {
+            return (0, function_1.pipe)(x, function (code) { return processRefs(code, json, options); }, function (code) { return prefixMethodsWithThis(code, json, options); }, function (code) { return (preserveGetter === false ? (0, patterns_1.stripGetter)(code) : code); });
+        });
+    }
+    catch (e) {
+        console.log('could not process bindings in ', { code: code });
+        throw e;
+    }
 };
 exports.processBinding = processBinding;
 var getContextValue = function (_a) {

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

@@ -24,7 +24,7 @@ var helpers_1 = require("./helpers");
 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 += "\n      ".concat(key, ": ").concat((0, helpers_1.encodeQuotes)(component.context.get[key].name), ",\n    ");
     }
     str += '}';
     return str;
@@ -112,20 +112,30 @@ function generateOptionsApiScript(component, options, path, template, props, onU
     })) === 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);
-        }, {});
-    }
+    var getPropDefinition = function (_a) {
+        var component = _a.component, props = _a.props;
+        var propsDefinition = Array.from(props).filter(function (prop) { return prop !== 'children' && prop !== 'class'; });
+        var str = 'props: ';
+        if (component.defaultProps) {
+            var defalutPropsString = propsDefinition
+                .map(function (prop) {
+                var _a;
+                var value = component.defaultProps.hasOwnProperty(prop)
+                    ? (_a = component.defaultProps[prop]) === null || _a === void 0 ? void 0 : _a.code
+                    : '{}';
+                return "".concat(prop, ": { default: ").concat(value, " }");
+            })
+                .join(',');
+            str += "{".concat(defalutPropsString, "}");
+        }
+        else {
+            str += "".concat(json5_1.default.stringify(propsDefinition));
+        }
+        return "".concat(str, ",");
+    };
     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
+        : "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 ? getPropDefinition({ component: component, props: props }) : '', "\n        ").concat(dataString.length < 4
         ? ''
         : "\n        data: () => (".concat(dataString, "),\n        "), "\n\n        ").concat((0, lodash_1.size)(component.context.set)
         ? "provide() {\n                return ".concat((0, helpers_1.getContextProvideString)(component, options), "\n              },")
@@ -140,14 +150,14 @@ function generateOptionsApiScript(component, options, path, template, props, onU
         : '', "\n        ").concat(onUpdateWithDeps.length
         ? "watch: {\n            ".concat(onUpdateWithDeps
             .map(function (hook, index) {
-            return "".concat((0, helpers_1.getOnUpdateHookName)(index), "() {\n                  ").concat(hook.code, "\n                  }\n                ");
+            return "".concat((0, helpers_1.getOnUpdateHookName)(index), ": { handler() { ").concat(hook.code, " }, immediate: true }");
         })
             .join(','), "\n          },")
         : '', "\n        ").concat(component.hooks.onUnMount
         ? "unmounted() {\n                ".concat(component.hooks.onUnMount.code, "\n              },")
         : '', "\n\n        ").concat(getterString.length < 4
         ? ''
-        : " \n          computed: ".concat(getterString, ",\n        "), "\n        ").concat(functionsString.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) {