@builder.io/mitosis 0.0.56-1 → 0.0.56-4

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,21 @@
+"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'],
+    });
+    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/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/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/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 });

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');
@@ -31,6 +32,11 @@ describe('React', function () {
         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 });

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

@@ -1,36 +1,70 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var svelte_1 = require("../generators/svelte");
+var svelte_1 = require("../generators/context/svelte");
+var context_1 = require("../parsers/context");
+var svelte_2 = require("../generators/svelte");
 var jsx_1 = require("../parsers/jsx");
 var onUpdate = require('./data/blocks/onUpdate.raw');
 var multipleOUpdate = require('./data/blocks/multiple-onUpdate.raw');
 var selfReferencingComponent = require('./data/blocks/self-referencing-component.raw');
 var selfReferencingComponentWithChildren = require('./data/blocks/self-referencing-component-with-children.raw');
 var builderRenderBlock = require('./data/blocks/builder-render-block.raw');
+var rootShow = require('./data/blocks/rootShow.raw');
+var simpleExample = require('./data/context/simple.context.lite');
+var componentWithContext = require('./data/context/component-with-context.lite');
+var renderBlock = require('./data/blocks/builder-render-block.raw');
 describe('Svelte', function () {
     test('onUpdate', function () {
         var component = (0, jsx_1.parseJsx)(onUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('multipleOnUpdate', function () {
         var component = (0, jsx_1.parseJsx)(multipleOUpdate);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponent', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponent);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('selfReferencingComponentWithChildren', function () {
         var component = (0, jsx_1.parseJsx)(selfReferencingComponentWithChildren);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
     test('BuilderRenderBlock', function () {
         var component = (0, jsx_1.parseJsx)(builderRenderBlock);
-        var output = (0, svelte_1.componentToSvelte)()({ component: component });
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
         expect(output).toMatchSnapshot();
     });
+    test('rootShow', function () {
+        var component = (0, jsx_1.parseJsx)(rootShow);
+        var output = (0, svelte_2.componentToSvelte)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    describe('Context', function () {
+        test('Parse context', function () {
+            var component = (0, context_1.parseContext)(simpleExample, { name: 'SimpleExample' });
+            if (!component) {
+                throw new Error('No parseable context found for simple.context.lite.ts');
+            }
+            expect(component).toMatchSnapshot();
+            var context = (0, svelte_1.contextToSvelte)()({ context: component });
+            expect(context).toMatchSnapshot();
+        });
+        test('Use and set context in components', function () {
+            var component = (0, jsx_1.parseJsx)(componentWithContext);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+        test('Use and set context in complex components', function () {
+            var component = (0, jsx_1.parseJsx)(renderBlock);
+            expect(component).toMatchSnapshot();
+            var output = (0, svelte_2.componentToSvelte)()({ component: component });
+            expect(output).toMatchSnapshot();
+        });
+    });
 });

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

@@ -2,11 +2,143 @@
 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('webcomponent', function () {
+    test('Basic', function () {
+        var component = (0, jsx_1.parseJsx)(basic);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('BasicFor', function () {
+        var component = (0, jsx_1.parseJsx)(basicFor);
+        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 });
+        expect(output).toMatchSnapshot();
+    });
+    test('Submit button block', function () {
+        var component = (0, jsx_1.parseJsx)(submitButtonBlock);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Select block', function () {
+        var component = (0, jsx_1.parseJsx)(selectBlock);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    // test('Form block', () => {
+    //   const component = parseJsx(formBlock);
+    //   const output = componentToCustomElement()({ component });
+    //   expect(output).toMatchSnapshot();
+    // });
+    test('Button', function () {
+        var component = (0, jsx_1.parseJsx)(button);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Textarea', function () {
+        var component = (0, jsx_1.parseJsx)(textarea);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Img', function () {
+        var component = (0, jsx_1.parseJsx)(img);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Video', function () {
+        var component = (0, jsx_1.parseJsx)(video);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Section', function () {
+        var component = (0, jsx_1.parseJsx)(section);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('SectionState', function () {
+        var component = (0, jsx_1.parseJsx)(sectionState);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Text', function () {
+        var component = (0, jsx_1.parseJsx)(text);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Image', function () {
+        var component = (0, jsx_1.parseJsx)(image);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('ImageState', function () {
+        var component = (0, jsx_1.parseJsx)(imageState);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('Columns', function () {
+        var component = (0, jsx_1.parseJsx)(columns);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdate);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(onUpdateWithDeps);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnUpdate', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdate);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('multipleOnnUpdateWithDeps', function () {
+        var component = (0, jsx_1.parseJsx)(multipleOnUpdateWithDeps);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
+    test('onMount & onUnMount', function () {
+        var component = (0, jsx_1.parseJsx)(onMount);
+        var output = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
     test('Stamped', function () {
         var component = (0, jsx_1.parseJsx)(stamped);
         var html = (0, html_1.componentToCustomElement)()({ component: component });
         expect(html).toMatchSnapshot();
     });
+    test('Shadow DOM', function () {
+        var component = (0, jsx_1.parseJsx)(shadowDom);
+        var html = (0, html_1.componentToCustomElement)()({ component: component });
+        expect(html).toMatchSnapshot();
+    });
 });