@builder.io/mitosis 0.0.144 → 0.0.146

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

@@ -59,13 +59,13 @@ var NODE_MAPPERS = {
                 return '';
             }
             var children = (0, helpers_1.processBinding)('props.children', options);
-            return "{".concat(children, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}");
+            return "<>{".concat(children, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
         }
         var slotProp = (0, helpers_1.processBinding)(slotName, options).replace('name=', '');
         if (!slotProp.startsWith('props.')) {
             slotProp = "props.".concat(slotProp);
         }
-        return "{".concat(slotProp, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}");
+        return "<>{".concat(slotProp, " ").concat(hasChildren ? "|| (".concat(renderChildren(), ")") : '', "}</>");
     },
     Fragment: function (json, options, component) {
         var wrap = (0, helpers_1.wrapInFragment)(json);
@@ -85,7 +85,12 @@ var NODE_MAPPERS = {
     },
     Show: function (json, options, component) {
         var _a;
-        var wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        var wrap = (0, helpers_1.wrapInFragment)(json) ||
+            (0, is_root_text_node_1.isRootTextNode)(json) ||
+            component.children[0] === json ||
+            // when `<Show><For>...</For></Show>`, we need to wrap the For generated code in a fragment
+            // since it's a `.map()` call
+            (json.children.length === 1 && ['For', 'Show'].includes(json.children[0].name));
         var wrapElse = json.meta.else &&
             ((0, helpers_1.wrapInFragment)(json.meta.else) || (0, mitosis_node_1.checkIsForNode)(json.meta.else));
         return "{".concat((0, helpers_1.processBinding)((_a = json.bindings.when) === null || _a === void 0 ? void 0 : _a.code, options), " ? (\n      ").concat(wrap ? (0, helpers_1.openFrag)(options) : '').concat(json.children
@@ -219,7 +224,7 @@ var blockToReact = function (json, options, component, parentSlots) {
     if (json.children) {
         childrenNodes = json.children
             .map(function (item) { return (0, exports.blockToReact)(item, options, component, needsToRenderSlots); })
-            .join('\n');
+            .join('');
     }
     if (needsToRenderSlots.length) {
         needsToRenderSlots.forEach(function (_a) {

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

@@ -312,7 +312,29 @@ var componentToSvelte = function (userProvidedOptions) {
                 return "afterUpdate(() => { ".concat(code, " });");
             }
             var fnName = "onUpdateFn_".concat(index);
-            return "\n              function ".concat(fnName, "(..._args").concat(options.typescript ? ': any[]' : '', ") {\n                ").concat(code, "\n              }\n              $: ").concat(fnName, "(...").concat(deps, ")\n            ");
+            var depsArray = deps
+                .slice(1, deps.length - 1)
+                .split(',')
+                .map(function (x) { return x.trim(); });
+            var getReactiveDepName = function (dep) {
+                return "".concat(fnName, "_").concat(dep.slice(1).replace(/(\.|\?)/g, '_'));
+            };
+            var isStoreAccessDep = function (dep) { return dep.startsWith('$'); };
+            var reactiveDepsWorkaround = depsArray
+                .filter(isStoreAccessDep)
+                .map(function (dep) { return "$: ".concat(getReactiveDepName(dep), " = ").concat(dep, ";"); })
+                .join('\n');
+            var depsArrayStr = depsArray
+                .map(function (x) { return (isStoreAccessDep(x) ? getReactiveDepName(x) : x); })
+                .join(', ');
+            /**
+             * We create a reactive value for each `onUpdate`'s dependency that
+             * accesses a store so that Svelte has accurate dependency tracking.
+             *
+             * Otherwise, if the dependency is a value within a store, Svelte will
+             * rerun the effect every time the parent store is changed in any way.
+             */
+            return "\n              function ".concat(fnName, "(..._args").concat(options.typescript ? ': any[]' : '', ") {\n                ").concat(code, "\n              }\n              ").concat(reactiveDepsWorkaround, "\n              $: ").concat(fnName, "(...[").concat(depsArrayStr, "]);\n            ");
         }).join(';')) || '', 
         // make sure this is after all other state/code is initialized
         setContextCode({ json: json, options: options }), !((_k = json.hooks.onUnMount) === null || _k === void 0 ? void 0 : _k.code) ? '' : "onDestroy(() => { ".concat(json.hooks.onUnMount.code, " });"), json.children

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

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCompositionApiScript = void 0;
 var dedent_1 = require("../../helpers/dedent");
 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 json5_1 = __importDefault(require("json5"));
 var lodash_1 = require("lodash");
 var helpers_1 = require("./helpers");
@@ -93,7 +92,7 @@ function generateCompositionApiScript(component, options, template, props, onUpd
             code: hook.deps || '',
             options: options,
             json: component,
-        }), ", (").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.deps), ") => { ").concat(hook.code, " }, {immediate: true})");
+        }), ", () => { ").concat(hook.code, " }, {immediate: true})");
     }).join('\n')) || '', methods !== null && methods !== void 0 ? methods : '');
     return str;
 }

package/dist/src/helpers/filter-empty-text-nodes.d.ts

@@ -1,2 +1,3 @@
 import { MitosisNode } from '../types/mitosis-node';
+export declare const isEmptyTextNode: (node: MitosisNode) => boolean;
 export declare const filterEmptyTextNodes: (node: MitosisNode) => boolean;

package/dist/src/helpers/filter-empty-text-nodes.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterEmptyTextNodes = void 0;
-var filterEmptyTextNodes = function (node) {
-    return !(typeof node.properties._text === 'string' && !node.properties._text.trim().length);
+exports.filterEmptyTextNodes = exports.isEmptyTextNode = void 0;
+var isEmptyTextNode = function (node) {
+    return typeof node.properties._text === 'string' && node.properties._text.trim().length === 0;
 };
+exports.isEmptyTextNode = isEmptyTextNode;
+var filterEmptyTextNodes = function (node) { return !(0, exports.isEmptyTextNode)(node); };
 exports.filterEmptyTextNodes = filterEmptyTextNodes;

package/dist/src/helpers/is-root-text-node.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTextNode = exports.isRootTextNode = void 0;
 function isRootTextNode(json) {
     var firstChild = json.children[0];
-    return Boolean(firstChild && isTextNode(firstChild));
+    return Boolean(json.children.length === 1 && firstChild && isTextNode(firstChild));
 }
 exports.isRootTextNode = isRootTextNode;
 function isTextNode(node) {

package/dist/src/helpers/typescript-project.js

@@ -53,7 +53,7 @@ var getProject = function (tsConfigFilePath) {
         return new ts_morph_1.Project({ tsConfigFilePath: tsConfigFilePath });
     }
     catch (err) {
-        throw new Error('Error creating Typescript Project. Make sure `tsConfigFilePath` points to a valid tsconfig.json file');
+        throw new Error("Error creating Typescript Project. Make sure `tsConfigFilePath` points to a valid tsconfig.json file.\n      Path received: \"".concat(tsConfigFilePath, "\"\n      "));
     }
 };
 var createTypescriptProject = function (tsConfigFilePath) {

package/dist/src/parsers/jsx/jsx.js

@@ -38,6 +38,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseJsx = void 0;
+var filter_empty_text_nodes_1 = require("../../helpers/filter-empty-text-nodes");
+var traverse_nodes_1 = require("../../helpers/traverse-nodes");
 var babel = __importStar(require("@babel/core"));
 var generator_1 = __importDefault(require("@babel/generator"));
 var plugin_syntax_typescript_1 = __importDefault(require("@babel/plugin-syntax-typescript"));
@@ -234,6 +236,9 @@ function parseJsx(jsx, _options) {
             mitosisComponent.context.get[context].type = 'reactive';
         });
     }
+    (0, traverse_nodes_1.traverseNodes)(mitosisComponent, function (node) {
+        node.children = node.children.filter(filter_empty_text_nodes_1.filterEmptyTextNodes);
+    });
     return mitosisComponent;
 }
 exports.parseJsx = parseJsx;

package/package.json

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