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

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

@@ -2,17 +2,65 @@
 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 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 });
         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();
+    // });
 });

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/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/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/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__/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 });

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("../generators/react");
 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');
@@ -20,17 +21,47 @@ 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 onInit = require('./data/blocks/onInit.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 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 });
         expect(output).toMatchSnapshot();
     });
+    test('BasicFor', function () {
+        var component = (0, jsx_1.parseJsx)(basicFor);
+        var output = (0, react_1.componentToReact)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Input block', function () {
         var component = (0, jsx_1.parseJsx)(inputBlock);
         var output = (0, react_1.componentToReact)()({ component: component });
@@ -119,6 +150,11 @@ describe('React', function () {
         var output = (0, react_1.componentToReact)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('onInit', function () {
+        var component = (0, jsx_1.parseJsx)(onInit);
+        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 });