@builder.io/mitosis 0.0.54 → 0.0.56-1

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/generators/solid.js

@@ -114,9 +114,11 @@ var blockToSolid = function (json, options) {
     }
     if (json.name === 'For') {
         var needsWrapper = json.children.length !== 1;
-        return "<For each={".concat(json.bindings.each, "}>\n    {(").concat(json.properties._forName, ", index) =>\n      ").concat(needsWrapper ? '<>' : '', "\n        ").concat(json.children
+        // The SolidJS `<For>` component has a special index() signal function.
+        // https://www.solidjs.com/docs/latest#%3Cfor%3E
+        return "<For each={".concat(json.bindings.each, "}>\n    {(").concat(json.properties._forName, ", _index) => {\n      const index = _index();\n      return ").concat(needsWrapper ? '<>' : '').concat(json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
-            .map(function (child) { return blockToSolid(child, options); }), "}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
+            .map(function (child) { return blockToSolid(child, options); }), "}}\n      ").concat(needsWrapper ? '</>' : '', "\n    </For>");
     }
     var str = '';
     if (json.name === 'Fragment') {
@@ -236,7 +238,7 @@ var componentToSolid = function (options) {
         var componentHasContext = (0, context_1.hasContext)(json);
         var hasShowComponent = componentsUsed.has('Show');
         var hasForComponent = componentsUsed.has('For');
-        var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "], ["\n    ", "\n    ", "\n    ", "\n    ", "\n    ", "\n\n    export default function ", "(props) {\n      ", "\n      \n      ", "\n      ", "\n\n      ", "\n\n      return (", "\n        ", "\n        ", ")\n    }\n\n  "])), !(hasShowComponent || hasForComponent)
+        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      return (", "\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      return (", "\n        ", "\n        ", ")\n    }\n\n    export default ", ";\n  "])), !(hasShowComponent || hasForComponent)
             ? ''
             : "import { \n          ".concat(!componentHasContext ? '' : 'useContext, ', "\n          ").concat(!hasShowComponent ? '' : 'Show, ', "\n          ").concat(!hasForComponent ? '' : 'For, ', "\n          ").concat(!((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ? '' : 'onMount, ', "\n         } from 'solid-js';"), !foundDynamicComponents ? '' : "import { Dynamic } from 'solid-js/web';", !hasState ? '' : "import { createMutable } from 'solid-js/store';", !componentHasStyles
             ? ''
@@ -245,7 +247,7 @@ var componentToSolid = function (options) {
             : "onMount(() => { ".concat(json.hooks.onMount.code, " })"), addWrapper ? '<>' : '', json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToSolid(item, options); })
-            .join('\n'), addWrapper ? '</>' : '');
+            .join('\n'), addWrapper ? '</>' : '', json.name);
         // HACK: for some reason we are generating `state.state.foo` instead of `state.foo`
         // need a full fix, but this unblocks a lot in the short term
         str = str.replace(/state\.state\./g, 'state.');

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;
     };