@builder.io/mitosis 0.0.56-5 → 0.0.56-6

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

@@ -2,13 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var angular_1 = require("../generators/angular");
 var jsx_1 = require("../parsers/jsx");
+var multipleOnUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var onUpdate = require('./data/blocks/onUpdate.raw');
 var onMount = require('./data/blocks/onMount.raw');
 var onInitonMount = require('./data/blocks/onInit-onMount.raw');
 var onInit = require('./data/blocks/onInit.raw');
 var basicFor = require('./data/basic-for.raw');
-var slot = require('./data/blocks/slot.raw');
+var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
+var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
+var slotJsx = require('./data/blocks/slot-jsx.raw');
+// const slotHtml = require('./data/blocks/slot-html.raw');
 describe('Angular', function () {
+    test('multiple onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(onUpdate);
         var output = (0, angular_1.componentToAngular)()({ component: component });
@@ -34,9 +43,24 @@ describe('Angular', function () {
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });
-    test('ng-content', function () {
-        var component = (0, jsx_1.parseJsx)(slot);
+    test('ng-content and Slot', function () {
+        var component = (0, jsx_1.parseJsx)(contentSlotHtml);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('ng-content and Slot jsx-props', function () {
+        var component = (0, jsx_1.parseJsx)(contentSlotJsx);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Slot Jsx', function () {
+        var component = (0, jsx_1.parseJsx)(slotJsx);
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    // test('Slot Html', () => {
+    //   const component = parseJsx(slotHtml);
+    //   const output = componentToAngular()({ component });
+    //   expect(output).toMatchSnapshot();
+    // });
 });

package/dist/src/__tests__/data/basic-for-show.raw.d.ts

@@ -0,0 +1 @@
+export default function MyBasicForShowComponent(): JSX.Element;

package/dist/src/__tests__/data/basic-for-show.raw.jsx

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForShowComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    return (<div>
+      <mitosis_1.For each={state.names}>
+        {function (person) { return (<mitosis_1.Show when={person === state.name}>
+            <input value={state.name} onChange={function (event) {
+                state.name = event.target.value + ' and ' + person;
+            }}/>
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
+            or Liquid!
+          </mitosis_1.Show>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = MyBasicForShowComponent;

package/dist/src/__tests__/data/basic-onMount-update.raw.d.ts

@@ -0,0 +1 @@
+export default function MyBasicOnMountUpdateComponent(): JSX.Element;

package/dist/src/__tests__/data/basic-onMount-update.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOnMountUpdateComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    (0, mitosis_1.onInit)(function () {
+        state.name = 'PatrickJS onInit';
+    });
+    (0, mitosis_1.onMount)(function () {
+        state.name = 'PatrickJS onMount';
+    });
+    return <div>Hello {state.name}</div>;
+}
+exports.default = MyBasicOnMountUpdateComponent;

package/dist/src/__tests__/data/blocks/content-slot-html.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ContentSlotCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/content-slot-html.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ContentSlotCode(props) {
+    return (<div>
+      <mitosis_1.Slot name={props.slotTesting}/>
+      <div>
+        <hr />
+      </div>
+      <div>
+        <mitosis_1.Slot />
+      </div>
+    </div>);
+}
+exports.default = ContentSlotCode;

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    [key: string]: string | JSX.Element;
+};
+export default function ContentSlotJsxCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/content-slot-jsx.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function ContentSlotJsxCode(props) {
+    return (<div>
+      {props.slotTesting}
+      <div>
+        <hr />
+      </div>
+      <div>{props.children}</div>
+    </div>);
+}
+exports.default = ContentSlotJsxCode;

package/dist/src/__tests__/data/blocks/content-slot.raw.d.ts

@@ -0,0 +1,6 @@
+declare type Props = {
+    [key: string]: string | JSX.Element;
+    slotTesting: JSX.Element;
+};
+export default function ContentSlotCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/content-slot.raw.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ContentSlotCode(props) {
+    return (<div>
+      <mitosis_1.Slot name={props.slotTesting}/>
+      <div>
+        <hr />
+      </div>
+      <div>{props.children}</div>
+    </div>);
+}
+exports.default = ContentSlotCode;

package/dist/src/__tests__/data/blocks/slot-html.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    [key: string]: string;
+};
+export default function SlotCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/slot-html.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+var content_slot_jsx_raw_1 = __importDefault(require("./content-slot-jsx.raw"));
+function SlotCode(props) {
+    return (<div>
+      <content_slot_jsx_raw_1.default>
+        <mitosis_1.Slot testing={<div>Hello</div>}></mitosis_1.Slot>
+      </content_slot_jsx_raw_1.default>
+    </div>);
+}
+exports.default = SlotCode;

package/dist/src/__tests__/data/blocks/slot-jsx.raw.d.ts

@@ -0,0 +1,5 @@
+declare type Props = {
+    [key: string]: string;
+};
+export default function SlotCode(props: Props): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/slot-jsx.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var content_slot_jsx_raw_1 = __importDefault(require("./content-slot-jsx.raw"));
+function SlotCode(props) {
+    return (<div>
+      <content_slot_jsx_raw_1.default slotTesting={<div>Hello</div>}/>
+    </div>);
+}
+exports.default = SlotCode;

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

@@ -1,6 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var content_slot_raw_1 = __importDefault(require("./content-slot.raw"));
 function SlotCode(props) {
-    return <div>{props.children}</div>;
+    return (<div>
+      <content_slot_raw_1.default slotTesting={<div>Hello</div>}/>
+    </div>);
 }
 exports.default = SlotCode;

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

@@ -27,7 +27,31 @@ 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');
+var contentSlotHtml = require('./data/blocks/content-slot-html.raw');
+var contentSlotJsx = require('./data/blocks/content-slot-jsx.raw');
+var slotJsx = require('./data/blocks/slot-jsx.raw');
+var slotHtml = require('./data/blocks/slot-html.raw');
 describe('React', function () {
+    test('ContentSlotJSX', function () {
+        var component = (0, jsx_1.parseJsx)(contentSlotJsx);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('ContentSlotHtml', function () {
+        var component = (0, jsx_1.parseJsx)(contentSlotHtml);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('SlotJsx', function () {
+        var component = (0, jsx_1.parseJsx)(slotJsx);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('SlotHtml', function () {
+        var component = (0, jsx_1.parseJsx)(slotHtml);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
         var output = (0, react_1.componentToReact)()({ component: component });

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

@@ -4,6 +4,8 @@ var html_1 = require("../generators/html");
 var jsx_1 = require("../parsers/jsx");
 var basic = require('./data/basic.raw');
 var basicFor = require('./data/basic-for.raw');
+var basicForShow = require('./data/basic-for-show.raw');
+var basicOnMountUpdate = require('./data/basic-onMount-update.raw');
 var submitButtonBlock = require('./data/blocks/submit-button.raw');
 var inputBlock = require('./data/blocks/input.raw');
 var selectBlock = require('./data/blocks/select.raw');
@@ -38,6 +40,16 @@ describe('webcomponent', function () {
         var output = (0, html_1.componentToCustomElement)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('BasicForShow', function () {
+        var component = (0, jsx_1.parseJsx)(basicForShow);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('BasicOnMountUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(basicOnMountUpdate);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Input block', function () {
         var component = (0, jsx_1.parseJsx)(inputBlock);
         var output = (0, html_1.componentToCustomElement)()({ component: component });

package/dist/src/flow.d.ts

@@ -10,6 +10,11 @@ export declare function For<T, U extends JSX.Element>(props: {
     each?: readonly T[];
     children: (item: T, index: number) => U;
 }): any;
+export declare function Slot<T, U extends JSX.Element>(props: {
+    name?: JSX.Element;
+} | {
+    [key: string]: any;
+}): any;
 export declare function Show<T>(props: {
     when: T | undefined | null | false;
     else?: JSX.Element;

package/dist/src/flow.js

@@ -8,11 +8,15 @@
  * These elements all compile away so they return `null`
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Show = exports.For = void 0;
+exports.Show = exports.Slot = exports.For = void 0;
 function For(props) {
     return null;
 }
 exports.For = For;
+function Slot(props) {
+    return null;
+}
+exports.Slot = Slot;
 function Show(props) {
     return null;
 }

package/dist/src/generators/angular.js

@@ -31,8 +31,21 @@ var mappers = {
             .map(function (item) { return (0, exports.blockToAngular)(item, options); })
             .join('\n'), "</div>");
     },
+    Slot: function (json, options) {
+        return "<ng-content ".concat(Object.keys(json.bindings)
+            .map(function (binding) {
+            var _a;
+            if (binding === 'name') {
+                var selector = (0, lodash_1.kebabCase)((_a = json.bindings.name) === null || _a === void 0 ? void 0 : _a.replace('props.slot', ''));
+                return "select=\"[".concat(selector, "]\"");
+            }
+            return "".concat(json.bindings[binding]);
+        })
+            .join('\n'), "></ng-content>");
+    },
 };
 var blockToAngular = function (json, options) {
+    var _a;
     if (options === void 0) { options = {}; }
     if (mappers[json.name]) {
         return mappers[json.name](json, options);
@@ -43,10 +56,15 @@ var blockToAngular = function (json, options) {
     if (json.properties._text) {
         return json.properties._text;
     }
+    if (/props\.slot/.test(json.bindings._text)) {
+        var selector = (0, lodash_1.kebabCase)((_a = json.bindings._text) === null || _a === void 0 ? void 0 : _a.replace('props.slot', ''));
+        return "<ng-content select=\"[".concat(selector, "]\"></ng-content>");
+    }
     if (json.bindings._text) {
         return "{{".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings._text), "}}");
     }
     var str = '';
+    var needsToRenderSlots = [];
     if (json.name === 'For') {
         str += "<ng-container *ngFor=\"let ".concat(json.properties._forName, " of ").concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(json.bindings.each), "\">");
         str += json.children
@@ -99,6 +117,11 @@ var blockToAngular = function (json, options) {
             else if (key === 'ref') {
                 str += " #".concat(useValue, " ");
             }
+            else if (key.startsWith('slot')) {
+                var lowercaseKey = key.replace('slot', '')[0].toLowerCase() +
+                    key.replace('slot', '').substring(1);
+                needsToRenderSlots.push("".concat(useValue.replace(/(\/\>)|\>/, " ".concat(lowercaseKey, ">"))));
+            }
             else {
                 str += " [".concat(key, "]=\"").concat(useValue, "\" ");
             }
@@ -107,6 +130,9 @@ var blockToAngular = function (json, options) {
             return str + ' />';
         }
         str += '>';
+        if (needsToRenderSlots.length > 0) {
+            str += needsToRenderSlots.map(function (el) { return el; }).join('');
+        }
         if (json.children) {
             str += json.children
                 .map(function (item) { return (0, exports.blockToAngular)(item, options); })
@@ -152,6 +178,7 @@ var componentToAngular = function (options) {
         var str = (0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: `\n        ", "\n      `,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "], ["\n    import { Component ", "", " } from '@angular/core';\n    ", "\n\n    @Component({\n      selector: '", "',\n      template: \\`\n        ", "\n      \\`,\n      ", "\n    })\n    export default class ", " {\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n\n      ", "\n    }\n  "])), refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), (0, indent_1.indent)(template, 8).replace(/`/g, '\\`').replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat((0, indent_1.indent)(css, 8), "`\n      ],")
             : '', component.name, Array.from(props)
+            .filter(function (item) { return !item.startsWith('slot'); })
             .map(function (item) { return "@Input() ".concat(item, ": any"); })
             .join('\n'), refs
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
@@ -167,11 +194,12 @@ var componentToAngular = function (options) {
                     replaceWith: 'this.',
                 }), "\n                "), "\n            }"), !((_h = component.hooks.onUpdate) === null || _h === void 0 ? void 0 : _h.length)
             ? ''
-            : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.map(function (hook) {
-                return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
+            : "ngAfterContentChecked() {\n              ".concat(component.hooks.onUpdate.reduce(function (code, hook) {
+                code += (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(hook.code, {
                     replaceWith: 'this.',
                 });
-            }), "\n            }"), !component.hooks.onUnMount
+                return code + '\n';
+            }, ''), "\n            }"), !component.hooks.onUnMount
             ? ''
             : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount.code, {
                 replaceWith: 'this.',

package/dist/src/generators/html.js

@@ -76,11 +76,16 @@ var addUpdateAfterSet = function (json, options) {
         }
     });
 };
-var addScopeVars = function (parentScopeVars, value, fn) {
-    return "".concat(parentScopeVars
-        .filter(function (scopeVar) {
+var getScopeVars = function (parentScopeVars, value) {
+    return parentScopeVars.filter(function (scopeVar) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
         return new RegExp(scopeVar).test(value);
-    })
+    });
+};
+var addScopeVars = function (parentScopeVars, value, fn) {
+    return "".concat(getScopeVars(parentScopeVars, value)
         .map(function (scopeVar) {
         return fn(scopeVar);
     })
@@ -193,7 +198,10 @@ var blockToHtml = function (json, options, parentScopeVars) {
         str += '</template>';
     }
     else if (json.name === 'Show') {
-        addOnChangeJs(elId, options, "\n        const whenCondition = ".concat(json.bindings.when.replace(/;$/, ''), ";\n        if (whenCondition) {\n          ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n        }\n      "));
+        var whenCondition = json.bindings.when.replace(/;$/, '');
+        addOnChangeJs(elId, options, "\n        ".concat(addScopeVars(parentScopeVars, whenCondition, function (scopeVar) {
+            return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+        }), "\n        const whenCondition = ").concat(whenCondition, ";\n        if (whenCondition) {\n          ").concat(options.format === 'class' ? 'this.' : '', "showContent(el)\n        }\n      "));
         str += "<template data-name=\"".concat(elId, "\">");
         if (json.children) {
             str += json.children
@@ -224,6 +232,10 @@ var blockToHtml = function (json, options, parentScopeVars) {
                 .replace(/\n/g, '\\n');
             str += " ".concat(key, "=\"").concat(value, "\" ");
         }
+        // batch all local vars within the bindings
+        var batchScopeVars_1 = {};
+        var injectOnce = false;
+        var startInjectVar = '%%START_VARS%%';
         for (var key in json.bindings) {
             if (key === '_spread' || key === 'ref' || key === 'css') {
                 continue;
@@ -253,13 +265,27 @@ var blockToHtml = function (json, options, parentScopeVars) {
                     }), "\n            ;Object.assign(el.style, ").concat(useValue, ");"));
                 }
                 else {
-                    addOnChangeJs(elId, options, "\n            ".concat(addScopeVars(parentScopeVars, useValue, function (scopeVar) {
-                        // TODO: multiple loops may duplicate variable declarations
-                        return ";var ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
-                    }), "\n            ").concat(generateSetElementAttributeCode(key, useValue, options), "\n            "));
+                    // gather all local vars to inject later
+                    getScopeVars(parentScopeVars, useValue).forEach(function (key) {
+                        // unique keys
+                        batchScopeVars_1[key] = true;
+                    });
+                    addOnChangeJs(elId, options, "\n            ".concat(injectOnce ? '' : startInjectVar, "\n            ").concat(generateSetElementAttributeCode(key, useValue, options), "\n            "));
+                    if (!injectOnce) {
+                        injectOnce = true;
+                    }
                 }
             }
         }
+        // batch inject local vars in the beginning of the function block
+        var codeBlock = options.onChangeJsById[elId];
+        var testInjectVar = new RegExp(startInjectVar);
+        if (codeBlock && testInjectVar.test(codeBlock)) {
+            var localScopeVars = Object.keys(batchScopeVars_1);
+            options.onChangeJsById[elId] = codeBlock.replace(startInjectVar, "\n        ".concat(addScopeVars(localScopeVars, true, function (scopeVar) {
+                return "const ".concat(scopeVar, " = ").concat(options.format === 'class' ? 'this.' : '', "getContext(el, \"").concat(scopeVar, "\");");
+            }), "\n        "));
+        }
         if (jsx_1.selfClosingTags.has(json.name)) {
             return str + ' />';
         }
@@ -359,28 +385,29 @@ var componentToHtml = function (options) {
                 valueMapper: function (value) {
                     return addUpdateAfterSetInCode(updateReferencesInCode(value, useOptions), useOptions);
                 },
-            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let nodesToDestroy = [];\n        ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
+            }), ";\n        ").concat(componentHasProps ? "let props = {};" : '', "\n        let nodesToDestroy = [];\n        let pendingUpdate = false;\n        ").concat(!((_d = (_c = json.hooks) === null || _c === void 0 ? void 0 : _c.onInit) === null || _d === void 0 ? void 0 : _d.code) ? '' : 'let onInitOnce = false;', "\n\n        function destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          nodesToDestroy.forEach(el => el.remove());\n          nodesToDestroy = [];\n        }\n        ").concat(!hasChangeListeners
                 ? ''
-                : "\n        \n        // Function to update data bindings and loops\n        // call update() when you mutate state and need the updates to reflect\n        // in the dom\n        function update() {\n          ".concat(Object.keys(useOptions.onChangeJsById)
+                : "\n        \n        // Function to update data bindings and loops\n        // call update() when you mutate state and need the updates to reflect\n        // in the dom\n        function update() {\n          if (pendingUpdate === true) {\n            return;\n          }\n          pendingUpdate = true;\n          ".concat(Object.keys(useOptions.onChangeJsById)
                     .map(function (key) {
                     var value = useOptions.onChangeJsById[key];
                     if (!value) {
                         return '';
                     }
-                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el, index) => {\n                ").concat(value, "\n              })\n            ");
+                    return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              });\n            ");
                 })
-                    .join('\n\n'), "\n\n            destroyAnyNodes();\n\n            ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
+                    .join('\n\n'), "\n\n          destroyAnyNodes();\n\n          ").concat(!((_e = json.hooks.onUpdate) === null || _e === void 0 ? void 0 : _e.length)
                     ? ''
-                    : "\n                  ".concat(json.hooks.onUpdate.map(function (hook) {
-                        return updateReferencesInCode(hook.code, useOptions);
-                    }), " \n                  "), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_g = (_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onInit) === null || _g === void 0 ? void 0 : _g.code)
+                    : "\n                ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
+                        code += addUpdateAfterSetInCode(updateReferencesInCode(hook.code, useOptions), useOptions);
+                        return code + '\n';
+                    }, ''), " \n                "), "\n\n          pendingUpdate = false;\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_g = (_f = json.hooks) === null || _f === void 0 ? void 0 : _f.onInit) === null || _g === void 0 ? void 0 : _g.code)
                 ? ''
-                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode((_j = (_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit) === null || _j === void 0 ? void 0 : _j.code, useOptions), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code)
+                : "\n            if (!onInitOnce) {\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_j = (_h = json.hooks) === null || _h === void 0 ? void 0 : _h.onInit) === null || _j === void 0 ? void 0 : _j.code, useOptions), useOptions), "\n              onInitOnce = true;\n            }\n            "), "\n\n        ").concat(!((_k = json.hooks.onMount) === null || _k === void 0 ? void 0 : _k.code)
                 ? ''
                 : // TODO: make prettier by grabbing only the function body
                     "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasShow
                 ? ''
-                : "\n          function showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              ".concat(options.format === 'class' ? 'this.' : '', "nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        "), "\n        ").concat(!hasLoop
+                : "\n          function showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }\n  \n        ", "\n        ").concat(!hasLoop
                 ? ''
                 : "\n          // Helper to render loops\n          function renderLoop(el, array, template, itemName, itemIndex, collectionName) {\n            el.innerHTML = \"\";\n            for (let [index, value] of array.entries()) {\n              let tmp = document.createElement(\"span\");\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                if (itemName !== undefined) {\n                  child['__' + itemName] = value;\n                }\n                if (itemIndex !== undefined) {\n                  child['__' + itemIndex] = index;\n                }\n                if (collectionName !== undefined) {\n                  child['__' + collectionName] = array;\n                }\n                el.appendChild(child);\n              });\n            }\n          }\n\n          function getContext(el, name) {\n            do {\n              let value = el['__' + name]\n              if (value !== undefined) {\n                return value\n              }\n            } while ((el = el.parentNode));\n          }\n        ", "\n      })()\n      </script>\n    ");
         }
@@ -417,7 +444,10 @@ var componentToCustomElement = function (options) {
     return function (_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
         var component = _a.component;
-        var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
+        var kebabName = component.name
+            .replace(/([a-z])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+        var useOptions = __assign(__assign({ prefix: kebabName }, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
         var json = (0, fast_clone_1.fastClone)(component);
         if (options.plugins) {
             json = (0, plugins_1.runPreJsonPlugins)(json, options.plugins);
@@ -446,7 +476,7 @@ var componentToCustomElement = function (options) {
             .map(function (item) { return blockToHtml(item, useOptions); })
             .join('\n');
         if ((_d = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _d === void 0 ? void 0 : _d.childrenHtml) {
-            html = (_e = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml(html, json, useOptions);
+            html = (_e = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _e === void 0 ? void 0 : _e.childrenHtml(html, kebabName, json, useOptions);
         }
         if ((_f = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _f === void 0 ? void 0 : _f.cssHtml) {
             html += (_g = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _g === void 0 ? void 0 : _g.cssHtml(css);
@@ -473,9 +503,6 @@ var componentToCustomElement = function (options) {
                 console.warn('Could not prettify', { string: html }, err);
             }
         }
-        var kebabName = component.name
-            .replace(/([a-z])([A-Z])/g, '$1-$2')
-            .toLowerCase();
         var str = "\n      ".concat((0, render_imports_1.renderPreComponent)(json), "\n      /**\n       * Usage:\n       * \n       *  <").concat(kebabName, "></").concat(kebabName, ">\n       * \n       */\n      class ").concat(component.name, " extends ").concat(((_h = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _h === void 0 ? void 0 : _h.classExtends)
             ? (_j = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _j === void 0 ? void 0 : _j.classExtends(json, useOptions)
             : 'HTMLElement', " {\n        constructor() {\n          super();\n          const self = this;\n          ").concat(!((_l = (_k = json.hooks) === null || _k === void 0 ? void 0 : _k.onInit) === null || _l === void 0 ? void 0 : _l.code) ? '' : 'this.onInitOnce = false;', "\n          this.state = ").concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
@@ -494,7 +521,7 @@ var componentToCustomElement = function (options) {
             },
         }), ";\n          ").concat(componentHasProps /* TODO: accept these as attributes/properties on the custom element */
             ? "this.props = {};"
-            : '', "\n\n\n          // used to keep track of all nodes created by show/for\n          this.nodesToDestroy = [];\n          ").concat(((_m = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _m === void 0 ? void 0 : _m.componentConstructor)
+            : '', "\n\n\n          // used to keep track of all nodes created by show/for\n          this.nodesToDestroy = [];\n          // batch updates\n          this.pendingUpdate = false;\n          ").concat(((_m = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _m === void 0 ? void 0 : _m.componentConstructor)
             ? (_o = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _o === void 0 ? void 0 : _o.componentConstructor(json, useOptions)
             : '', "\n\n          ").concat(useOptions.js, "\n\n          if (").concat((_p = json.meta.useMetadata) === null || _p === void 0 ? void 0 : _p.isAttachedToShadowDom, ") {\n            this.attachShadow({ mode: 'open' })\n          }\n        }\n\n\n        ").concat(!((_q = json.hooks.onUnMount) === null || _q === void 0 ? void 0 : _q.code)
             ? ''
@@ -502,11 +529,11 @@ var componentToCustomElement = function (options) {
                 ? (_s = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _s === void 0 ? void 0 : _s.disconnectedCallback(json, useOptions)
                 : "\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions), "\n            this.destroyAnyNodes(); // clean up nodes when component is destroyed\n            ").concat(!((_u = (_t = json.hooks) === null || _t === void 0 ? void 0 : _t.onInit) === null || _u === void 0 ? void 0 : _u.code) ? '' : 'this.onInitOnce = false;', "\n            "), "\n          }\n          "), "\n\n        destroyAnyNodes() {\n          // destroy current view template refs before rendering again\n          this.nodesToDestroy.forEach(el => el.remove());\n          this.nodesToDestroy = [];\n        }\n\n        get _root() {\n          return this.shadowRoot || this;\n        }\n\n        connectedCallback() {\n          ").concat(((_v = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _v === void 0 ? void 0 : _v.connectedCallbackUpdate)
             ? (_w = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _w === void 0 ? void 0 : _w.connectedCallbackUpdate(json, html, useOptions)
-            : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.render();\n              ").concat(!((_y = (_x = json.hooks) === null || _x === void 0 ? void 0 : _x.onInit) === null || _y === void 0 ? void 0 : _y.code) ? '' : 'this.onInit();', "\n              this.onMount();\n              this.onUpdate();\n              "), "\n        }\n        ").concat(!((_0 = (_z = json.hooks) === null || _z === void 0 ? void 0 : _z.onInit) === null || _0 === void 0 ? void 0 : _0.code)
+            : "\n              this._root.innerHTML = `\n      ".concat(html, "`;\n              this.pendingUpdate = true;\n              this.render();\n              ").concat(!((_y = (_x = json.hooks) === null || _x === void 0 ? void 0 : _x.onInit) === null || _y === void 0 ? void 0 : _y.code) ? '' : 'this.onInit();', "\n              this.onMount();\n              this.pendingUpdate = false;\n              this.update();\n              "), "\n        }\n        ").concat(!((_0 = (_z = json.hooks) === null || _z === void 0 ? void 0 : _z.onInit) === null || _0 === void 0 ? void 0 : _0.code)
             ? ''
             : "\n            onInit() {\n              ".concat(!((_2 = (_1 = json.hooks) === null || _1 === void 0 ? void 0 : _1.onInit) === null || _2 === void 0 ? void 0 : _2.code)
                 ? ''
-                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode((_4 = (_3 = json.hooks) === null || _3 === void 0 ? void 0 : _3.onInit) === null || _4 === void 0 ? void 0 : _4.code, useOptions), "\n                    this.onInitOnce = true;\n                  }"), "\n            }\n            "), "\n\n        ").concat(!hasShow
+                : "\n                  if (!this.onInitOnce) {\n                    ".concat(updateReferencesInCode(addUpdateAfterSetInCode((_4 = (_3 = json.hooks) === null || _3 === void 0 ? void 0 : _3.onInit) === null || _4 === void 0 ? void 0 : _4.code, useOptions), useOptions), "\n                    this.onInitOnce = true;\n                  }"), "\n            }\n            "), "\n\n        ").concat(!hasShow
             ? ''
             : "\n          showContent(el) {\n            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content\n            // grabs the content of a node that is between <template> tags\n            // iterates through child nodes to register all content including text elements\n            // attaches the content after the template\n  \n  \n            const elementFragment = el.content.cloneNode(true);\n            const children = Array.from(elementFragment.childNodes)\n            children.forEach(child => {\n              this.nodesToDestroy.push(child);\n            });\n            el.after(elementFragment);\n          }", "\n        ").concat(!((_5 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _5 === void 0 ? void 0 : _5.attributeChangedCallback)
             ? ''
@@ -515,13 +542,14 @@ var componentToCustomElement = function (options) {
             : // TODO: make prettier by grabbing only the function body
                 "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n                "), "\n        }\n\n        onUpdate() {\n          ").concat(!((_8 = json.hooks.onUpdate) === null || _8 === void 0 ? void 0 : _8.length)
             ? ''
-            : "\n      ".concat(json.hooks.onUpdate.map(function (hook) {
-                return updateReferencesInCode(hook.code, useOptions);
-            }), " \n      "), " \n        }\n\n        update() {\n          ").concat(!((_9 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _9 === void 0 ? void 0 : _9.shouldComponentUpdateStart)
+            : "\n            ".concat(json.hooks.onUpdate.reduce(function (code, hook) {
+                code += updateReferencesInCode(hook.code, useOptions);
+                return code + '\n';
+            }, ''), " \n            "), "\n        }\n\n        update() {\n          if (this.pendingUpdate === true) {\n            return;\n          }\n          this.pendingUpdate = true;\n          ").concat(!((_9 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _9 === void 0 ? void 0 : _9.shouldComponentUpdateStart)
             ? ''
             : "\n            ".concat((_10 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _10 === void 0 ? void 0 : _10.shouldComponentUpdateStart(json, useOptions), "\n            "), "\n          this.render();\n          this.onUpdate();\n          ").concat(!((_11 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _11 === void 0 ? void 0 : _11.shouldComponentUpdateEnd)
             ? ''
-            : "\n            ".concat((_12 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _12 === void 0 ? void 0 : _12.shouldComponentUpdateEnd(json, useOptions), "\n            "), "\n        }\n\n        render() {\n          // re-rendering needs to ensure that all nodes generated by for/show are refreshed\n          this.destroyAnyNodes();\n          ").concat(((_13 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _13 === void 0 ? void 0 : _13.updateBindings)
+            : "\n            ".concat((_12 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _12 === void 0 ? void 0 : _12.shouldComponentUpdateEnd(json, useOptions), "\n            "), "\n          this.pendingUpdate = false;\n        }\n\n        render() {\n          // re-rendering needs to ensure that all nodes generated by for/show are refreshed\n          this.destroyAnyNodes();\n          ").concat(((_13 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _13 === void 0 ? void 0 : _13.updateBindings)
             ? (_14 = useOptions === null || useOptions === void 0 ? void 0 : useOptions.experimental) === null || _14 === void 0 ? void 0 : _14.updateBindings(json, useOptions)
             : 'this.updateBindings();', "\n        }\n\n        updateBindings() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
             .map(function (key) {

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

@@ -6,5 +6,5 @@ export interface ToReactOptions extends BaseTranspilerOptions {
     format?: 'lite' | 'safe';
     type?: 'dom' | 'native';
 }
-export declare const blockToReact: (json: MitosisNode, options: ToReactOptions) => string;
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[] | undefined) => string;
 export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;