@builder.io/mitosis 0.0.47 → 0.0.50-0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

package/dist/src/__tests__/angular.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var angular_1 = require("../generators/angular");
+var jsx_1 = require("../parsers/jsx");
+var onUpdate = require('./data/blocks/onUpdate.raw');
+describe('Angular', function () {
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+});

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

@@ -25,6 +25,12 @@ function Column(props) {
             flexDirection: 'column',
             alignItems: 'stretch',
             lineHeight: 'normal',
+            '@media (max-width: 999px)': {
+                flexDirection: 'row',
+            },
+            '@media (max-width: 639px)': {
+                flexDirection: 'row-reverse',
+            },
         }}>
       <mitosis_1.For each={props.columns}>
         {function (column) { return (<div class="builder-column" css={{ flexGrow: '1' }}>

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnUpdate() {
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('Runs on every update/rerender');
+    });
+    return <div />;
+}
+exports.default = OnUpdate;

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnUpdateWithDeps() {
+    var a, b;
+    (0, mitosis_1.onUpdate)(function () {
+        console.log('Runs when a or b changes');
+    }, [a, b]);
+    return <div />;
+}
+exports.default = OnUpdateWithDeps;

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

@@ -0,0 +1,11 @@
+export interface TabsProps {
+    tabs: {
+        label: any;
+        content: any;
+    }[];
+    defaultActiveTab?: number;
+    collapsible?: boolean;
+    tabHeaderLayout?: string;
+    activeTabStyle?: any;
+}
+export default function Tabs(props: TabsProps): JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("@jsx-lite/core");
+function Tabs(props) {
+    var state = core_1.useState({
+        activeTab: 0,
+    });
+    core_1.onMount(function () {
+        if (props.defaultActiveTab) {
+            state.activeTab = props.defaultActiveTab;
+        }
+    });
+    return (<span css={{
+            display: 'flex',
+            flexDirection: 'row',
+            overflow: 'auto',
+            overflowScrolling: 'touch',
+        }} style={{
+            justifyContent: props.tabHeaderLayout,
+        }} class="builder-tabs-wrap">
+      <core_1.For each={props.tabs}>{function (child) { return <div>{child.content}</div>; }}</core_1.For>
+    </span>);
+}
+exports.default = Tabs;

package/dist/src/__tests__/qoot.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,115 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var fs_extra_promise_1 = require("fs-extra-promise");
+var qoot_1 = require("../generators/qoot");
+var jsx_1 = require("../parsers/jsx");
+var todo = require('../../../../examples/todo/src/components/todo.lite');
+var todos = require('../../../../examples/todo/src/components/todos.lite');
+var debugFiles = true;
+var debugOutput = function (output) { return __awaiter(void 0, void 0, void 0, function () {
+    var _i, _a, file;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                if (!debugFiles) return [3 /*break*/, 4];
+                _i = 0, _a = output.files;
+                _b.label = 1;
+            case 1:
+                if (!(_i < _a.length)) return [3 /*break*/, 4];
+                file = _a[_i];
+                return [4 /*yield*/, fs_extra_promise_1.outputFileAsync('dist/test/qoot/' + file.path, file.contents)];
+            case 2:
+                _b.sent();
+                _b.label = 3;
+            case 3:
+                _i++;
+                return [3 /*break*/, 1];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+describe('Qoot', function () {
+    test('Todo', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var json, output;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    json = jsx_1.parseJsx(todo);
+                    return [4 /*yield*/, qoot_1.componentToQoot(json)];
+                case 1:
+                    output = _a.sent();
+                    expect(output).toMatchSnapshot();
+                    debugOutput(output);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Todo bundle', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var json, output;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    json = jsx_1.parseJsx(todo);
+                    return [4 /*yield*/, qoot_1.componentToQoot(json, {
+                            bundle: true,
+                        })];
+                case 1:
+                    output = _a.sent();
+                    expect(output).toMatchSnapshot();
+                    debugOutput(output);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    test('Todos', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var json, output;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    json = jsx_1.parseJsx(todos);
+                    return [4 /*yield*/, qoot_1.componentToQoot(json)];
+                case 1:
+                    output = _a.sent();
+                    expect(output).toMatchSnapshot();
+                    debugOutput(output);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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

@@ -37,11 +37,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var fs_extra_promise_1 = require("fs-extra-promise");
-var __1 = require("..");
 var index_1 = require("../generators/qwik/index");
 var src_generator_1 = require("../generators/qwik/src-generator");
+var builder_1 = require("../parsers/builder");
 var jsx_1 = require("../parsers/jsx");
 var compile_away_builder_components_1 = require("../plugins/compile-away-builder-components");
+var symbol_processor_1 = require("../symbols/symbol-processor");
 var todo = require('../../../../examples/todo/src/components/todo.lite');
 var todos = require('../../../../examples/todo/src/components/todos.lite');
 var debugFiles = true;
@@ -130,7 +131,7 @@ describe('qwik', function () {
         test('stylesheet', function () { return __awaiter(void 0, void 0, void 0, function () {
             var component, fileSet;
             return __generator(this, function (_a) {
-                component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.hello_world.json'));
+                component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.hello_world.json'));
                 fileSet = (0, index_1.createFileSet)({ output: 'mjs' });
                 (0, index_1.addComponent)(fileSet, component);
                 debugOutput(fileSet);
@@ -142,7 +143,7 @@ describe('qwik', function () {
     test('page-with-symbol', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.page-with-symbol.json'));
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.page-with-symbol.json'));
             fileSet = (0, index_1.createFileSet)({ output: 'mjs', jsx: false });
             (0, index_1.addComponent)(fileSet, component);
             debugOutput(fileSet);
@@ -153,7 +154,7 @@ describe('qwik', function () {
     test('button', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.button.json'));
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.button.json'));
             fileSet = (0, index_1.createFileSet)({ output: 'mjs', jsx: false });
             (0, index_1.addComponent)(fileSet, component);
             debugOutput(fileSet);
@@ -164,7 +165,7 @@ describe('qwik', function () {
     test('svg', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.svg.json'), {
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.svg.json'), {
                 includeBuilderExtras: true,
                 preserveTextBlocks: true,
             });
@@ -178,7 +179,7 @@ describe('qwik', function () {
     test('Image', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.image.json'), {
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.image.json'), {
                 includeBuilderExtras: true,
                 preserveTextBlocks: true,
             });
@@ -192,11 +193,10 @@ describe('qwik', function () {
     test('Image.slow', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.image.json'), {
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.image.json'), {
                 includeBuilderExtras: true,
                 preserveTextBlocks: true,
             });
-            (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, compile_away_builder_components_1.components);
             fileSet = (0, index_1.createFileSet)({ output: 'mjs', jsx: false });
             (0, index_1.addComponent)(fileSet, component);
             debugOutput(fileSet);
@@ -207,7 +207,7 @@ describe('qwik', function () {
     test('Accordion', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.accordion.json'), {
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.accordion.json'), {
                 includeBuilderExtras: true,
                 preserveTextBlocks: true,
             });
@@ -222,7 +222,7 @@ describe('qwik', function () {
     test('For', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component, fileSet;
         return __generator(this, function (_a) {
-            component = (0, __1.builderContentToMitosisComponent)(require('./qwik.test.for-loop.json'), {
+            component = (0, builder_1.builderContentToMitosisComponent)(require('./qwik.test.for-loop.json'), {
                 includeBuilderExtras: true,
                 preserveTextBlocks: true,
             });
@@ -234,6 +234,34 @@ describe('qwik', function () {
             return [2 /*return*/];
         });
     }); });
+    describe('component', function () {
+        test('bindings', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var content, state, hierarchy, fileSet, component;
+            return __generator(this, function (_a) {
+                content = require('./qwik.test.component-binding.json');
+                state = {};
+                hierarchy = (0, symbol_processor_1.convertBuilderContentToSymbolHierarchy)(content, {
+                    collectComponentState: state,
+                });
+                expect(state).toMatchSnapshot();
+                fileSet = (0, index_1.createFileSet)({ output: 'mjs', jsx: true });
+                hierarchy.depthFirstSymbols.forEach(function (builderComponent) {
+                    var mitosisComponent = (0, symbol_processor_1.convertBuilderElementToMitosisComponent)(builderComponent);
+                    mitosisComponent &&
+                        (0, index_1.addComponent)(fileSet, mitosisComponent, { isRoot: false });
+                });
+                component = (0, builder_1.builderContentToMitosisComponent)(content, {
+                    includeBuilderExtras: true,
+                    preserveTextBlocks: true,
+                });
+                (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, compile_away_builder_components_1.components);
+                (0, index_1.addComponent)(fileSet, component);
+                debugOutput(fileSet);
+                expect(toObj(fileSet)).toMatchSnapshot();
+                return [2 /*return*/];
+            });
+        }); });
+    });
     describe('helper functions', function () {
         describe('isStatement', function () {
             test('is an expression', function () {

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

@@ -19,6 +19,8 @@ var customCode = require('./data/blocks/custom-code.raw');
 var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
+var onUpdate = require('./data/blocks/onUpdate.raw');
+var onUpdateWithDeps = require('./data/blocks/onUpdateWithDeps.raw');
 describe('React', function () {
     test('Basic', function () {
         var component = (0, jsx_1.parseJsx)(basic);
@@ -108,4 +110,14 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

package/dist/src/__tests__/svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var svelte_1 = require("../generators/svelte");
+var jsx_1 = require("../parsers/jsx");
+var onUpdate = require('./data/blocks/onUpdate.raw');
+describe('Svelte', function () {
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+});

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

@@ -19,6 +19,7 @@ var customCode = require('./data/blocks/custom-code.raw');
 var embed = require('./data/blocks/embed.raw');
 var image = require('./data/blocks/image.raw');
 var columns = require('./data/blocks/columns.raw');
+var onUpdate = require('./data/blocks/onUpdate.raw');
 var path = 'test-path';
 describe('Vue', function () {
     test('Basic', function () {
@@ -106,4 +107,9 @@ describe('Vue', function () {
         var output = (0, vue_1.componentToVue)()({ component: component, path: path });
         expect(output).toMatchSnapshot();
     });
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, vue_1.componentToVue)()({ component: component, path: path });
+        expect(output).toMatchSnapshot();
+    });
 });

package/dist/src/generators/angular.js

@@ -150,7 +150,7 @@ var componentToAngular = function (options) {
                 return (0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(code, { replaceWith: 'this.' });
             },
         });
-        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    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  "])), refs.length ? ', ViewChild, ElementRef' : '', props.size ? ', Input' : '', (0, render_imports_1.renderPreComponent)(json), (0, lodash_1.kebabCase)(json.name || 'my-component'), indent(template, 8)
+        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'), indent(template, 8)
             .replace(/`/g, '\\`')
             .replace(/\$\{/g, '\\${'), css.length
             ? "styles: [\n        `".concat(indent(css, 8), "`\n      ],")
@@ -160,11 +160,15 @@ var componentToAngular = function (options) {
             .map(function (refName) { return "@ViewChild('".concat(refName, "') ").concat(refName, ": ElementRef"); })
             .join('\n'), !component.hooks.onMount
             ? ''
-            : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount, {
+            : "ngOnInit() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onMount.code, {
+                replaceWith: 'this.',
+            }), "\n            }"), !component.hooks.onUpdate
+            ? ''
+            : "ngAfterContentChecked() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUpdate.code, {
                 replaceWith: 'this.',
             }), "\n            }"), !component.hooks.onUnMount
             ? ''
-            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount, {
+            : "ngOnDestroy() {\n              ".concat((0, strip_state_and_props_refs_1.stripStateAndPropsRefs)(component.hooks.onUnMount.code, {
                 replaceWith: 'this.',
             }), "\n            }"), dataString);
         if (options.plugins) {

package/dist/src/generators/builder.js

@@ -236,28 +236,28 @@ exports.blockToBuilder = blockToBuilder;
 var componentToBuilder = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
-        var _b, _c;
+        var _b, _c, _d, _e;
         var component = _a.component;
         var hasState = Boolean(Object.keys(component.state).length);
         var result = (0, fast_clone_1.fastClone)({
             data: {
                 httpRequests: (_c = (_b = component === null || component === void 0 ? void 0 : component.meta) === null || _b === void 0 ? void 0 : _b.useMetadata) === null || _c === void 0 ? void 0 : _c.httpRequests,
-                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
+                jsCode: tryFormat((0, dedent_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        ", "\n\n        ", "\n        \n        ", "\n      "], ["\n        ", "\n\n        ", "\n        \n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
                     ? ''
-                    : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !component.hooks.onMount ? '' : component.hooks.onMount)),
+                    : "Object.assign(state, ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_d = component.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code) ? '' : component.hooks.onMount.code)),
                 tsCode: tryFormat((0, dedent_1.default)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        ", "\n\n        ", "\n\n        ", "\n      "], ["\n        ", "\n\n        ", "\n\n        ", "\n      "])), !(0, has_props_1.hasProps)(component) ? '' : "var props = state;", !hasState
                     ? ''
-                    : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !component.hooks.onMount
+                    : "useState(".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(component), ");"), !((_e = component.hooks.onMount) === null || _e === void 0 ? void 0 : _e.code)
                     ? ''
-                    : "onMount(() => {\n                ".concat(component.hooks.onMount, "\n              })"))),
+                    : "onMount(() => {\n                ".concat(component.hooks.onMount.code, "\n              })"))),
                 blocks: component.children
                     .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
                     .map(function (child) { return (0, exports.blockToBuilder)(child, options); }),
             },
         });
         var subComponentMap = {};
-        for (var _i = 0, _d = component.subComponents; _i < _d.length; _i++) {
-            var subComponent = _d[_i];
+        for (var _i = 0, _f = component.subComponents; _i < _f.length; _i++) {
+            var subComponent = _f[_i];
             var name_1 = subComponent.name;
             subComponentMap[name_1] = (0, exports.componentToBuilder)(options)({
                 component: subComponent,

package/dist/src/generators/html.js

@@ -266,6 +266,7 @@ var htmlDecode = function (html) { return html.replace(/"/gi, '"'); };
 var componentToHtml = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
+        var _b, _c, _d;
         var component = _a.component;
         var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'script' });
         var json = (0, fast_clone_1.fastClone)(component);
@@ -290,7 +291,10 @@ var componentToHtml = function (options) {
         }
         var hasChangeListeners = Boolean(Object.keys(useOptions.onChangeJsById).length);
         var hasGeneratedJs = Boolean(useOptions.js.trim().length);
-        if (hasChangeListeners || hasGeneratedJs || json.hooks.onMount || hasLoop) {
+        if (hasChangeListeners ||
+            hasGeneratedJs ||
+            ((_b = json.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code) ||
+            hasLoop) {
             // TODO: collectJs helper for here and liquid
             str += "\n      <script>\n      (() => {\n        const state = ".concat((0, get_state_object_string_1.getStateObjectStringFromComponent)(json, {
                 valueMapper: function (value) {
@@ -306,10 +310,12 @@ var componentToHtml = function (options) {
                     }
                     return "\n              document.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(value, "\n              })\n            ");
                 })
-                    .join('\n\n'), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!json.hooks.onMount
+                    .join('\n\n'), "\n\n            ").concat(!((_c = json.hooks.onUpdate) === null || _c === void 0 ? void 0 : _c.code)
+                    ? ''
+                    : "\n                  ".concat(updateReferencesInCode(json.hooks.onUpdate.code, useOptions), " \n                  "), "\n        }\n\n        ").concat(useOptions.js, "\n\n        // Update with initial state on first load\n        update();\n        "), "\n\n        ").concat(!((_d = json.hooks.onMount) === null || _d === void 0 ? void 0 : _d.code)
                 ? ''
                 : // TODO: make prettier by grabbing only the function body
-                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasLoop
+                    "\n              // onMount\n              ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), " \n              "), "\n\n        ").concat(!hasLoop
                 ? ''
                 : "\n\n          // Helper to render loops\n          function renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach(function (child) {\n                contextMap.set(child, {\n                  ...contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          // Helper to pass context down for loops\n          let contextMap = new WeakMap();\n          function getContext(el, name) {\n            let parent = el;\n            do {\n              let context = contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ", "\n      })()\n      </script>\n    ");
         }
@@ -344,6 +350,7 @@ exports.componentToHtml = componentToHtml;
 var componentToCustomElement = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
+        var _b, _c, _d;
         var component = _a.component;
         var useOptions = __assign(__assign({}, options), { onChangeJsById: {}, js: '', namesMap: {}, format: 'class' });
         var json = (0, fast_clone_1.fastClone)(component);
@@ -405,12 +412,12 @@ var componentToCustomElement = function (options) {
             ? "this.props = {};"
             : '', "\n\n          ").concat(!hasLoop
             ? ''
-            : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ", "\n\n          ").concat(useOptions.js, "\n        }\n\n        ").concat(!json.hooks.onUnMount
+            : "\n            // Helper to pass context down for loops\n            this.contextMap = new WeakMap();\n          ", "\n\n          ").concat(useOptions.js, "\n        }\n\n        ").concat(!((_b = json.hooks.onUnMount) === null || _b === void 0 ? void 0 : _b.code)
             ? ''
-            : "\n          disconnectedCallback() {\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount, useOptions), useOptions), "\n          }\n          "), "\n\n        connectedCallback() {\n          this.innerHTML = `\n      ").concat(html, "`;\n          this.update();\n\n          ").concat(!json.hooks.onMount
+            : "\n          disconnectedCallback() {\n            // onUnMount\n            ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onUnMount.code, useOptions), useOptions), "\n          }\n          "), "\n\n        connectedCallback() {\n          this.innerHTML = `\n      ").concat(html, "`;\n          this.update();\n\n          ").concat(!((_c = json.hooks.onMount) === null || _c === void 0 ? void 0 : _c.code)
             ? ''
             : // TODO: make prettier by grabbing only the function body
-                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount, useOptions), useOptions), "\n                "), "\n        }\n\n        update() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
+                "\n                // onMount\n                ".concat(updateReferencesInCode(addUpdateAfterSetInCode(json.hooks.onMount.code, useOptions), useOptions), "\n                "), "\n        }\n\n        update() {\n          ").concat(Object.keys(useOptions.onChangeJsById)
             .map(function (key) {
             var value = useOptions.onChangeJsById[key];
             if (!value) {
@@ -418,7 +425,9 @@ var componentToCustomElement = function (options) {
             }
             return "\n              this.querySelectorAll(\"[data-name='".concat(key, "']\").forEach((el) => {\n                ").concat(updateReferencesInCode(value, useOptions), "\n              })\n            ");
         })
-            .join('\n\n'), "\n        }\n\n        ").concat(!hasLoop
+            .join('\n\n'), "\n\n            ").concat(!((_d = json.hooks.onUpdate) === null || _d === void 0 ? void 0 : _d.code)
+            ? ''
+            : "\n                  ".concat(updateReferencesInCode(json.hooks.onUpdate.code, useOptions), " \n                  "), " \n        }\n\n        ").concat(!hasLoop
             ? ''
             : "\n\n          // Helper to render loops\n          renderLoop(el, array, template, itemName) {\n            el.innerHTML = '';\n            for (let value of array) {\n              let tmp = document.createElement('span');\n              tmp.innerHTML = template.innerHTML;\n              Array.from(tmp.children).forEach((child) => {\n                this.contextMap.set(child, {\n                  ...this.contextMap.get(child),\n                  [itemName]: value\n                });\n                el.appendChild(child);\n              });\n            }\n          }\n\n          getContext(el, name) {\n            let parent = el;\n            do {\n              let context = this.contextMap.get(parent);\n              if (context && name in context) {\n                return context[name];\n              }\n            } while (parent = parent.parentNode)\n          }\n        ", "\n      }\n\n      customElements.define('").concat(kebabName, "', ").concat(component.name, ");\n    ");
         if (options.plugins) {

package/dist/src/generators/jsx-lite.d.ts

@@ -0,0 +1,10 @@
+import { JSXLiteComponent } from '../types/jsx-lite-component';
+import { JSXLiteNode } from '../types/jsx-lite-node';
+export declare const DEFAULT_FORMAT = "legacy";
+export declare type JsxLiteFormat = 'react' | 'legacy';
+export declare type ToJsxLiteOptions = {
+    prettier?: boolean;
+    format: JsxLiteFormat;
+};
+export declare const blockToJsxLite: (json: JSXLiteNode, toJsxLiteOptions?: Partial<ToJsxLiteOptions>) => string;
+export declare const componentToJsxLite: (componentJson: JSXLiteComponent, toJsxLiteOptions?: Partial<ToJsxLiteOptions>) => string;