@builder.io/mitosis 0.0.55 → 0.0.56-2

package/dist/src/__tests__/data/blocks/rootShow.raw.d.ts

@@ -0,0 +1,3 @@
+export default function RenderStyles(props: {
+    foo: string;
+}): JSX.Element;

package/dist/src/__tests__/data/blocks/rootShow.raw.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function RenderStyles(props) {
+    return (<mitosis_1.Show when={props.foo === 'bar'} else={<div>Foo</div>}>
+      <div>Bar</div>
+    </mitosis_1.Show>);
+}
+exports.default = RenderStyles;

package/dist/src/__tests__/react.test.js

@@ -24,6 +24,7 @@ var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
 var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var multipleOnUpdateWithDeps = require('./data/blocks/multiple-onUpdateWithDeps.raw');
 var onMount = require('./data/blocks/onMount.raw');
+var rootShow = require('./data/blocks/rootShow.raw');
 describe('React', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
@@ -138,4 +139,9 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('rootShow', function () {
+        var component = (0, jsx_1.parseJsx)(rootShow);
+        var output = (0, react_1.componentToReact)({ prettier: false })({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

package/dist/src/generators/html.js

@@ -167,12 +167,12 @@ var blockToHtml = function (json, options) {
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        addOnChangeJs(elId, options, "el.style.display = ".concat(json.bindings.when.replace(/;$/, ''), " ? 'inline' : 'none'"));
-        str += "<span data-name=\"".concat(elId, "\">");
+        addOnChangeJs(elId, options, "\n      if(".concat(json.bindings.when.replace(/;$/, ''), ") {\n      \tconst clonedElement = el.content.cloneNode(true);\n        const endTag = document.createElement('template');\n        endTag.setAttribute('data-show', '").concat(elId, "-end');\n\t\t\t\t\n        el.after(endTag);\n        el.after(clonedElement)\n      } else {\n        if (this.querySelector(\"[data-show='").concat(elId, "-end']\") === null) {\n        \treturn;\n        }\n\n        let sibling = el.nextSibling;\n        const toBeRemoved = [];\n        while (sibling) {\n          toBeRemoved.push(sibling);\n          if (sibling?.dataset?.show === '").concat(elId, "-end') {\n          \ttoBeRemoved.forEach(sib => sib.remove());\n            return;\n          }        \n          sibling = sibling.nextSibling;\n        }\n      }     \n      "));
+        str += "<template data-name=\"".concat(elId, "\">");
         if (json.children) {
             str += json.children.map(function (item) { return blockToHtml(item, options); }).join('\n');
         }
-        str += '</span>';
+        str += '</template>';
     }
     else {
         str += "<".concat(json.name, " ");

package/dist/src/generators/react.js

@@ -49,6 +49,14 @@ var plugins_1 = require("../modules/plugins");
 var jsx_1 = require("../parsers/jsx");
 var context_1 = require("./helpers/context");
 var react_native_1 = require("./react-native");
+/**
+ * If the root Mitosis component only has 1 child, and it is a `Show` node, then we need to wrap it in a fragment.
+ * Otherwise, we end up with invalid React render code.
+ *
+ */
+var isRootShowNode = function (json) {
+    return json.children.length === 1 && ['Show'].includes(json.children[0].name);
+};
 var wrapInFragment = function (json) {
     return json.children.length !== 1;
 };
@@ -387,7 +395,9 @@ var _componentToReact = function (json, options, isSubComponent) {
         ((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.length)) {
         reactLibImports.add('useEffect');
     }
-    var wrap = wrapInFragment(json) || (componentHasStyles && stylesType === 'styled-jsx');
+    var wrap = wrapInFragment(json) ||
+        (componentHasStyles && stylesType === 'styled-jsx') ||
+        isRootShowNode(json);
     var nativeStyles = stylesType === 'react-native' &&
         componentHasStyles &&
         (0, react_native_1.collectReactNativeStyles)(json);

package/dist/src/helpers/render-imports.d.ts

@@ -1,2 +1,2 @@
 import { MitosisComponent } from '../types/mitosis-component';
-export declare const renderPreComponent: (component: MitosisComponent, target?: "react" | "template" | "angular" | "builder" | "customElement" | "html" | "mitosis" | "liquid" | "reactNative" | "solid" | "svelte" | "swift" | "webcomponent" | "vue" | undefined) => string;
+export declare const renderPreComponent: (component: MitosisComponent, target?: "html" | "template" | "angular" | "builder" | "customElement" | "mitosis" | "liquid" | "react" | "reactNative" | "solid" | "svelte" | "swift" | "webcomponent" | "vue" | undefined) => string;

package/dist/src/types/mitosis-node.d.ts

@@ -3,9 +3,30 @@ export declare type MitosisNode = {
     '@type': '@builder.io/mitosis/node';
     name: string;
     meta: JSONObject;
+    /**
+     * Key-value store of static values for DOM attributes.
+     * ```js
+     * {
+     *   disabled: false,
+     *   defaultValue: 'initial text`,
+     *   width: 100,
+     * }
+     * ```
+     */
     properties: {
         [key: string]: string | undefined;
     };
+    /**
+     * Key-value store of _dynamic_ values for DOM attributes.
+     *
+     * ```js
+     * {
+     *   disabled: state.isDisabled,
+     *   defaultValue: `${props.text} + ' initial'`,
+     *   width: props.width * 10,
+     * }
+     * ```
+     */
     bindings: {
         [key: string]: string | undefined;
     };