@builder.io/mitosis 0.5.17 → 0.5.18

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

@@ -57,10 +57,10 @@ const NODE_MAPPERS = {
         return `<>{${slotProp} ${hasChildren ? `|| (${renderChildren()})` : ''}}</>`;
     },
     Fragment(json, options, component) {
-        const wrap = (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
-        return `${wrap ? (0, helpers_1.getFragment)('open', options) : ''}${json.children
+        const wrap = (0, helpers_1.isFragmentWithKey)(json) || (0, helpers_1.wrapInFragment)(json) || (0, is_root_text_node_1.isRootTextNode)(json);
+        return `${wrap ? (0, helpers_1.getFragment)('open', options, json) : ''}${json.children
             .map((item) => (0, exports.blockToReact)(item, options, component, wrap))
-            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options) : ''}`;
+            .join('\n')}${wrap ? (0, helpers_1.getFragment)('close', options, json) : ''}`;
     },
     For(_json, options, component, insideJsx) {
         var _a;

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

@@ -4,6 +4,7 @@ import { ToReactOptions } from './types';
 export declare const processBinding: (str: string, options: ToReactOptions) => string;
 export declare const openFrag: (options: ToReactOptions) => string;
 export declare const closeFrag: (options: ToReactOptions) => string;
-export declare function getFragment(type: 'open' | 'close', options: ToReactOptions): string;
+export declare const isFragmentWithKey: (node?: MitosisNode) => boolean;
+export declare function getFragment(type: 'open' | 'close', options: ToReactOptions, node?: MitosisNode): string;
 export declare const wrapInFragment: (json: MitosisComponent | MitosisNode) => boolean;
 export declare function processTagReferences(json: MitosisComponent, options: ToReactOptions): void;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
+exports.processTagReferences = exports.wrapInFragment = exports.getFragment = exports.isFragmentWithKey = exports.closeFrag = exports.openFrag = exports.processBinding = void 0;
 const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 const strip_state_and_props_refs_1 = require("../../helpers/strip-state-and-props-refs");
 const lodash_1 = require("lodash");
@@ -23,9 +23,21 @@ const openFrag = (options) => getFragment('open', options);
 exports.openFrag = openFrag;
 const closeFrag = (options) => getFragment('close', options);
 exports.closeFrag = closeFrag;
-function getFragment(type, options) {
-    const tagName = options.preact ? 'Fragment' : '';
-    return type === 'open' ? `<${tagName}>` : `</${tagName}>`;
+const isFragmentWithKey = (node) => (node === null || node === void 0 ? void 0 : node.name) === 'Fragment' && !!(node === null || node === void 0 ? void 0 : node.bindings['key']);
+exports.isFragmentWithKey = isFragmentWithKey;
+function getFragment(type, options, node) {
+    var _a;
+    let tag = '';
+    if (node && node.bindings && (0, exports.isFragmentWithKey)(node)) {
+        tag = options.preact ? 'Fragment' : 'React.Fragment';
+        if (type === 'open') {
+            tag += ` key={${(_a = node.bindings['key']) === null || _a === void 0 ? void 0 : _a.code}}`;
+        }
+    }
+    else if (options.preact) {
+        tag = 'Fragment';
+    }
+    return type === 'open' ? `<${tag}>` : `</${tag}>`;
 }
 exports.getFragment = getFragment;
 const wrapInFragment = (json) => json.children.length !== 1;

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

@@ -50,7 +50,8 @@ const blockToSolid = (json, component, options, insideJsx) => {
     </For>`;
     }
     let str = '';
-    if (json.name === 'Fragment') {
+    const isFragmentWithoutKey = json.name === 'Fragment' && !json.bindings.key;
+    if (isFragmentWithoutKey) {
         str += '<';
     }
     else {
@@ -121,7 +122,7 @@ const blockToSolid = (json, component, options, insideJsx) => {
             .map((item) => (0, exports.blockToSolid)(item, component, options, true))
             .join('\n');
     }
-    if (json.name === 'Fragment') {
+    if (isFragmentWithoutKey) {
         str += '</>';
     }
     else {

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

@@ -198,7 +198,8 @@ const processStateObjectSlice = (item) => {
                 type: 'function',
             };
         }
-        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...item, returnType: null }));
+        const method = (0, types_1.objectMethod)(item.kind, item.key, item.params, item.body, false, false, item.async);
+        const n = getCleanedStateCode((0, helpers_1.parseCode)({ ...method, returnType: null }));
         const isGetter = item.kind === 'get';
         return {
             code: n,

package/package.json

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