@builder.io/mitosis 0.0.50-6 → 0.0.50

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

@@ -3,10 +3,16 @@ 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');
+var slot = require('./data/blocks/slot.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();
     });
+    test('ng-content', function () {
+        var component = (0, jsx_1.parseJsx)(slot);
+        var output = (0, angular_1.componentToAngular)()({ component: component });
+        expect(output).toMatchSnapshot();
+    });
 });

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

@@ -5,7 +5,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

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

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

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

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

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

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

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

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

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

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

package/dist/src/__tests__/data/blocks/self-referencing-component-with-children.raw.d.ts

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

package/dist/src/__tests__/data/blocks/self-referencing-component-with-children.raw.jsx

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyComponent(props) {
+    return (<div>
+      {props.name}
+      {props.children}
+      <mitosis_1.Show when={props.name === 'Batman'}>
+        <MyComponent name={'Bruce'}>
+          <div>Wayne</div>
+        </MyComponent>
+      </mitosis_1.Show>
+    </div>);
+}
+exports.default = MyComponent;

package/dist/src/__tests__/data/blocks/self-referencing-component.raw.d.ts

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

package/dist/src/__tests__/data/blocks/self-referencing-component.raw.jsx

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+function MyComponent(props) {
+    return (<div>
+      {props.name}
+      <mitosis_1.Show when={props.name === 'Batman'}>
+        <MyComponent name={'Bruce Wayne'}/>
+      </mitosis_1.Show>
+    </div>);
+}
+exports.default = MyComponent;

package/dist/src/__tests__/data/blocks/shadow-dom.raw.d.ts

@@ -0,0 +1,6 @@
+declare type SmileReviewsProps = {
+    productId: string;
+    apiKey: string;
+};
+export default function SmileReviews(props: SmileReviewsProps): JSX.Element;
+export {};

package/dist/src/__tests__/data/blocks/shadow-dom.raw.jsx

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var mitosis_1 = require("@builder.io/mitosis");
+(0, mitosis_1.useMetadata)({ isAttachedToShadowDom: true });
+function SmileReviews(props) {
+    var state = (0, mitosis_1.useState)({
+        reviews: [],
+        name: 'test',
+        showReviewPrompt: false,
+    });
+    // TODO: allow async function here
+    (0, mitosis_1.onMount)(function () {
+        fetch("https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=".concat(props.apiKey || 'pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM', "&productId=").concat(props.productId || '2410511106127'))
+            .then(function (res) { return res.json(); })
+            .then(function (data) {
+            state.reviews = data.data;
+        });
+    });
+    return (<div data-user={state.name}>
+      <button onClick={function () { return (state.showReviewPrompt = true); }}>
+        Write a review
+      </button>
+      <mitosis_1.Show when={state.showReviewPrompt}>
+        <input placeholder="Email"/>
+
+        <input css={{ display: 'block' }} placeholder="Title"/>
+
+        <textarea css={{ display: 'block' }} placeholder="How was your experience?"/>
+        <button css={{ display: 'block' }} onClick={function () {
+            state.showReviewPrompt = false;
+        }}>
+          Submit
+        </button>
+      </mitosis_1.Show>
+      <mitosis_1.For each={state.reviews}>
+        {function (review, index) { return (<div $name="Review" key={review.id} css={{
+                margin: '10px',
+                padding: '10px',
+                background: 'white',
+                display: 'flex',
+                borderRadius: '5px',
+                boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
+            }}>
+            <img css={{ height: '30px', width: '30px', marginRight: '10px' }} src={review.avatar}/>
+            <div class={state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'}>
+              <div>N: {index}</div>
+              <div>{review.author}</div>
+              <div>{review.reviewMessage}</div>
+            </div>
+          </div>); }}
+      </mitosis_1.For>
+    </div>);
+}
+exports.default = SmileReviews;

package/dist/src/__tests__/data/blocks/slot.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.raw.jsx

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

package/dist/src/__tests__/data/blocks/stamped-io.raw.jsx

@@ -1,11 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var mitosis_1 = require("@builder.io/mitosis");
+var lodash_1 = require("lodash");
+var lodash_2 = require("lodash");
 function SmileReviews(props) {
     var state = (0, mitosis_1.useState)({
         reviews: [],
         name: 'test',
         showReviewPrompt: false,
+        kebabCaseValue: function () {
+            return (0, lodash_1.kebabCase)('testThat');
+        },
+        snakeCaseValue: function () {
+            return (0, lodash_2.snakeCase)('testThis');
+        },
     });
     // TODO: allow async function here
     (0, mitosis_1.onMount)(function () {

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

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

package/dist/src/__tests__/data/blocks/styles.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/context/simple.context.lite.d.ts

@@ -1,2 +1,9 @@
-declare const _default: any;
+declare const _default: import("@builder.io/mitosis").Context<{
+    foo: string;
+    readonly fooUpperCase: any;
+    someMethod(): any;
+    content: null;
+    context: any;
+    state: {};
+}>;
 export default _default;

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

@@ -3,10 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var html_1 = require("../generators/html");
 var jsx_1 = require("../parsers/jsx");
 var stamped = require('./data/blocks/stamped-io.raw');
+var shadowDom = require('./data/blocks/shadow-dom.raw');
 describe('Html', function () {
     test('Stamped', function () {
         var component = (0, jsx_1.parseJsx)(stamped);
         var html = (0, html_1.componentToHtml)()({ component: component });
         expect(html).toMatchSnapshot();
     });
+    test('Shadow DOM', function () {
+        var component = (0, jsx_1.parseJsx)(shadowDom);
+        var html = (0, html_1.componentToHtml)()({ component: component });
+        expect(html).toMatchSnapshot();
+    });
 });

package/dist/src/__tests__/qwik.directive.test.d.ts

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

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

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var directives_1 = require("../generators/qwik/directives");
+describe('qwik directives', function () {
+    var partial = expect.objectContaining;
+    beforeEach(function () {
+        global.h = mockH;
+    });
+    afterEach(function () { return (global.h = undefined); });
+    describe('Image', function () {
+        test('altText', function () {
+            expect((0, directives_1.Image)({ altText: 'foo', image: 'http://some.url' }).children[0][0]).toEqual(partial({
+                tag: 'img',
+                props: partial({ src: 'http://some.url', alt: 'foo' }),
+            }));
+            expect((0, directives_1.Image)({ image: 'http://some.url' }).children[0][0]).toEqual(partial({
+                tag: 'img',
+                props: partial({ src: 'http://some.url', role: 'presentation' }),
+            }));
+        });
+        test('builder-pixel is eager', function () {
+            expect((0, directives_1.Image)({
+                builderBlock: { id: 'builder-pixel-foo' },
+                image: 'http://some.url',
+            }).children[0][0]).toEqual(partial({
+                tag: 'img',
+                props: partial({ loading: 'eager' }),
+            }));
+        });
+        test('images are lazy loaded', function () {
+            expect((0, directives_1.Image)({
+                image: 'http://some.url',
+            }).children[0][0]).toEqual(partial({
+                tag: 'img',
+                props: partial({ loading: 'lazy' }),
+            }));
+        });
+        test('builder.io URLs are served using webp', function () {
+            expect(find('source', (0, directives_1.Image)({
+                image: 'http://foo.builder.io/foo',
+            }))).toEqual(partial({
+                tag: 'source',
+                props: partial({
+                    srcset: srcSet('http://foo.builder.io/foo?format=webp'),
+                    type: 'image/webp',
+                }),
+            }));
+        });
+        test('maxWidth is added to the srcs', function () {
+            expect(find('source', (0, directives_1.Image)({
+                image: 'http://foo.builder.io/foo',
+                srcsetSizes: '1234 456',
+            }))).toEqual(partial({
+                tag: 'source',
+                props: partial({
+                    srcset: srcSet('http://foo.builder.io/foo?format=webp', '1234 456'),
+                    type: 'image/webp',
+                }),
+            }));
+        });
+        test('anchor should wrap in <a>', function () {
+            expect(find('a', (0, directives_1.Image)({
+                image: 'http://some.url',
+                href: 'my-url',
+            }))).toEqual(partial({
+                tag: 'a',
+                props: partial({ href: 'my-url' }),
+            }));
+        });
+    });
+});
+function find(tag, jsx) {
+    if (tag == jsx.tag)
+        return jsx;
+    return findInChildren(tag, jsx.children);
+    function findInChildren(tag, jsxs) {
+        var value = undefined;
+        for (var i = 0; i < jsxs.length; i++) {
+            var jsx_1 = jsxs[i];
+            if (Array.isArray(jsx_1)) {
+                value = findInChildren(tag, jsx_1);
+            }
+            else {
+                value = find(tag, jsx_1);
+            }
+            if (value)
+                return value;
+        }
+        return undefined;
+    }
+}
+var mockH = function (tag, props, children) { return ({
+    tag: tag,
+    props: props,
+    children: children,
+}); };
+function srcSet(url, additionalSizes) {
+    if (additionalSizes === void 0) { additionalSizes = ''; }
+    return ['100', '200', '400', '800', '1200', '1600', '2000']
+        .concat(additionalSizes ? additionalSizes.split(' ') : [])
+        .map(function (size) {
+        var parsedUrl = new URL(url);
+        parsedUrl.searchParams.set('width', size);
+        return "".concat(parsedUrl, " ").concat(size, "w");
+    })
+        .join(', ');
+}