@builder.io/mitosis 0.0.55 → 0.0.56-10

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

@@ -2,16 +2,76 @@
 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 slot = require('./data/blocks/slot.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 basicOutputs = require('./data/basic-outputs.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 classNameJsx = require('./data/blocks/classname-jsx.raw');
+// const slotHtml = require('./data/blocks/slot-html.raw');
 describe('Angular', function () {
+    test('basic outputs', function () {
+        var component = (0, jsx_1.parseJsx)(basicOutputs);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    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 });
         expect(output).toMatchSnapshot();
     });
-    test('ng-content', function () {
-        var component = (0, jsx_1.parseJsx)(slot);
+    test('onMount', function () {
+        var component = (0, jsx_1.parseJsx)(onMount);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit and onMount', function () {
+        var component = (0, jsx_1.parseJsx)(onInitonMount);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onInit', function () {
+        var component = (0, jsx_1.parseJsx)(onInit);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('BasicFor', function () {
+        var component = (0, jsx_1.parseJsx)(basicFor);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    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();
+    // });
+    test('className to class', function () {
+        var component = (0, jsx_1.parseJsx)(classNameJsx);
         var output = (0, angular_1.componentToAngular)()({ component: component });
         expect(output).toMatchSnapshot();
     });

package/dist/src/__tests__/data/basic-child-component.raw.d.ts

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

package/dist/src/__tests__/data/basic-child-component.raw.jsx

@@ -0,0 +1,20 @@
+"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 basic_raw_1 = __importDefault(require("./basic.raw"));
+var basic_onMount_update_raw_1 = __importDefault(require("./basic-onMount-update.raw"));
+function MyBasicChildComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'Steve',
+    });
+    return (<div>
+      <basic_raw_1.default />
+      <div>
+        <basic_onMount_update_raw_1.default />
+      </div>
+    </div>);
+}
+exports.default = MyBasicChildComponent;

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-for.raw.d.ts

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicForComponent() {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+        names: ['Steve', 'PatrickJS'],
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount code');
+    });
+    return (<div>
+      <mitosis_1.For each={state.names}>
+        {function (person) { return (<>
+            <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.For>
+    </div>);
+}
+exports.default = MyBasicForComponent;

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/basic-outputs-meta.raw.d.ts

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

package/dist/src/__tests__/data/basic-outputs-meta.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+(0, mitosis_1.useMetadata)({
+    outputs: ['onMessage', 'onEvent'],
+});
+function MyBasicOutputsComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onMount)(function () {
+        props.onMessage(state.name);
+        props.onEvent(props.message);
+    });
+    return <div></div>;
+}
+exports.default = MyBasicOutputsComponent;

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

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

package/dist/src/__tests__/data/basic-outputs.raw.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyBasicOutputsComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        name: 'PatrickJS',
+    });
+    (0, mitosis_1.onMount)(function () {
+        props.onMessage(state.name);
+        props.onEvent(props.message);
+    });
+    return <div></div>;
+}
+exports.default = MyBasicOutputsComponent;

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ClassNameCode(props) {
+    var state = (0, mitosis_1.useState)({
+        bindings: 'a binding',
+    });
+    return (<div>
+      {/*// @ts-ignore */}
+      <div className="no binding">Without Binding</div>
+      {/*// @ts-ignore */}
+      <div className={state.bindings}>With binding</div>
+    </div>);
+}
+exports.default = ClassNameCode;

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/img-state.raw.d.ts

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

package/dist/src/__tests__/data/blocks/img-state.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function ImgStateComponent() {
+    var state = (0, mitosis_1.useState)({
+        canShow: true,
+        images: ['http://example.com/qwik.png'],
+    });
+    return (<div>
+      <mitosis_1.For each={state.images}>
+        {function (item, itemIndex) { return (<>
+            <img class={'custom-class'} src={item} key={itemIndex}/>
+          </>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = ImgStateComponent;

package/dist/src/__tests__/data/blocks/onInit-onMount.raw.d.ts

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

package/dist/src/__tests__/data/blocks/onInit-onMount.raw.jsx

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function OnInit() {
+    (0, mitosis_1.onInit)(function () {
+        console.log('onInit');
+    });
+    (0, mitosis_1.onMount)(function () {
+        console.log('onMount');
+    });
+    return <div />;
+}
+exports.default = OnInit;

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

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

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

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

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__/data/blocks/section-state.raw.d.ts

@@ -0,0 +1,6 @@
+export interface SectionProps {
+    maxWidth?: number;
+    attributes?: any;
+    children?: any;
+}
+export default function SectionStateComponent(props: SectionProps): JSX.Element;

package/dist/src/__tests__/data/blocks/section-state.raw.jsx

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function SectionStateComponent(props) {
+    var state = (0, mitosis_1.useState)({
+        max: 42,
+        items: [42],
+    });
+    return (<mitosis_1.Show when={state.max}>
+      <mitosis_1.For each={state.items}>
+        {function (item) { return (<section {...props.attributes} style={{ maxWidth: item + state.max }}>
+            {props.children}
+          </section>); }}
+      </mitosis_1.For>
+    </mitosis_1.Show>);
+}
+exports.default = SectionStateComponent;

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/context/component-with-context.lite.d.ts

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

package/dist/src/__tests__/data/context/component-with-context.lite.jsx

@@ -6,9 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var _1_1 = __importDefault(require("@dummy/1"));
 var _2_1 = __importDefault(require("@dummy/2"));
 var mitosis_1 = require("@builder.io/mitosis");
-function ComponentWithContext() {
+function ComponentWithContext(props) {
     var foo = (0, mitosis_1.useContext)(_1_1.default);
-    (0, mitosis_1.setContext)(_1_1.default, { foo: 'bar' });
+    (0, mitosis_1.setContext)(_1_1.default, {
+        foo: 'bar',
+        content: function () {
+            return props.content;
+        },
+    });
     return (<_2_1.default.Provider value={{ bar: 'baz' }}>
       <>{foo.value}</>
     </_2_1.default.Provider>);

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

@@ -2,9 +2,135 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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 submitButtonBlock = require('./data/blocks/submit-button.raw');
+var inputBlock = require('./data/blocks/input.raw');
+var selectBlock = require('./data/blocks/select.raw');
+// const formBlock = require('./data/blocks/form.raw');
+var button = require('./data/blocks/button.raw');
+var textarea = require('./data/blocks/textarea.raw');
+var img = require('./data/blocks/img.raw');
+var video = require('./data/blocks/video.raw');
+var section = require('./data/blocks/section.raw');
+var sectionState = require('./data/blocks/section-state.raw');
+var text = require('./data/blocks/text.raw');
+var image = require('./data/blocks/image.raw');
+var imageState = require('./data/blocks/img-state.raw');
+var columns = require('./data/blocks/columns.raw');
+var onUpdate = require('./data/blocks/onUpdate.raw');
+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 stamped = require('./data/blocks/stamped-io.raw');
 var shadowDom = require('./data/blocks/shadow-dom.raw');
 describe('Html', function () {
+    test('Basic', function () {
+        var component = (0, jsx_1.parseJsx)(basic);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('BasicFor', function () {
+        var component = (0, jsx_1.parseJsx)(basicFor);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Input block', function () {
+        var component = (0, jsx_1.parseJsx)(inputBlock);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Submit button block', function () {
+        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Select block', function () {
+        var component = (0, jsx_1.parseJsx)(selectBlock);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    // test('Form block', () => {
+    //   const component = parseJsx(formBlock);
+    //   const output = componentToHtml()({ component });
+    //   expect(output).toMatchSnapshot();
+    // });
+    test('Button', function () {
+        var component = (0, jsx_1.parseJsx)(button);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Textarea', function () {
+        var component = (0, jsx_1.parseJsx)(textarea);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Img', function () {
+        var component = (0, jsx_1.parseJsx)(img);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('ImageState', function () {
+        var component = (0, jsx_1.parseJsx)(imageState);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Video', function () {
+        var component = (0, jsx_1.parseJsx)(video);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Section', function () {
+        var component = (0, jsx_1.parseJsx)(section);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('SectionState', function () {
+        var component = (0, jsx_1.parseJsx)(sectionState);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Text', function () {
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Image', function () {
+        var component = (0, jsx_1.parseJsx)(image);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Columns', function () {
+        var component = (0, jsx_1.parseJsx)(columns);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnnUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdateWithDeps);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onMount & onUnMount', function () {
+        var component = (0, jsx_1.parseJsx)(onMount);
+        var output = (0, html_1.componentToHtml)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Stamped', function () {
         var component = (0, jsx_1.parseJsx)(stamped);
         var html = (0, html_1.componentToHtml)()({ component: component });