@builder.io/mitosis 0.0.63 → 0.0.65

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

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function Button(props) {
-    return (<div>
-      <mitosis_1.Show when={props.link}>
-        <a {...props.attributes} href={props.link} target={props.openLinkInNewTab ? '_blank' : undefined}>
-          {props.text}
-        </a>
-      </mitosis_1.Show>
-      <mitosis_1.Show when={!props.link}>
-        <button {...props.attributes} type="button">
-          {props.text}
-        </button>
-      </mitosis_1.Show>
-    </div>);
-}
-exports.default = Button;

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

@@ -1,7 +0,0 @@
-import type { JSX } from '../../../../jsx-runtime';
-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

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function ClassNameCode(props) {
-    var state = (0, mitosis_1.useStore)({
-        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/columns.raw.d.ts

@@ -1,12 +0,0 @@
-declare type Column = {
-    content: any;
-    width?: number;
-};
-export interface ColumnProps {
-    columns?: Column[];
-    space?: number;
-    stackColumnsAt?: 'tablet' | 'mobile' | 'never';
-    reverseColumnsWhenStacked?: boolean;
-}
-export default function Column(props: ColumnProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function Column(props) {
-    var state = (0, mitosis_1.useStore)({
-        getColumns: function () {
-            return props.columns || [];
-        },
-        getGutterSize: function () {
-            return typeof props.space === 'number' ? props.space || 0 : 20;
-        },
-        getWidth: function (index) {
-            var columns = this.getColumns();
-            return (columns[index] && columns[index].width) || 100 / columns.length;
-        },
-        getColumnCssWidth: function (index) {
-            var columns = this.getColumns();
-            var gutterSize = this.getGutterSize();
-            var subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-            return "calc(".concat(this.getWidth(index), "% - ").concat(subtractWidth, "px)");
-        },
-    });
-    return (<div class="builder-columns" css={{
-            display: 'flex',
-            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, index) { return (<div class="builder-column" css={{ flexGrow: '1' }}>
-            {column.content} {index}
-          </div>); }}
-      </mitosis_1.For>
-    </div>);
-}
-exports.default = Column;

package/dist/src/__tests__/data/blocks/content-slot-html.raw.d.ts

@@ -1,7 +0,0 @@
-import type { JSX } from '../../../../jsx-runtime';
-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

@@ -1,15 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-import type { JSX } from '../../../../jsx-runtime';
-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

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

package/dist/src/__tests__/data/blocks/custom-code.raw.d.ts

@@ -1,5 +0,0 @@
-export interface CustomCodeProps {
-    code: string;
-    replaceNodes?: boolean;
-}
-export default function CustomCode(props: CustomCodeProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

package/dist/src/__tests__/data/blocks/custom-code.raw.jsx

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function CustomCode(props) {
-    var elem = (0, mitosis_1.useRef)(null);
-    var state = (0, mitosis_1.useStore)({
-        scriptsInserted: [],
-        scriptsRun: [],
-        findAndRunScripts: function () {
-            // TODO: Move this function to standalone one in '@builder.io/utils'
-            if (elem && typeof window !== 'undefined') {
-                /** @type {HTMLScriptElement[]} */
-                var scripts = elem.getElementsByTagName('script');
-                for (var i = 0; i < scripts.length; i++) {
-                    var script = scripts[i];
-                    if (script.src) {
-                        if (state.scriptsInserted.includes(script.src)) {
-                            continue;
-                        }
-                        state.scriptsInserted.push(script.src);
-                        var newScript = document.createElement('script');
-                        newScript.async = true;
-                        newScript.src = script.src;
-                        document.head.appendChild(newScript);
-                    }
-                    else if (!script.type ||
-                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
-                        if (state.scriptsRun.includes(script.innerText)) {
-                            continue;
-                        }
-                        try {
-                            state.scriptsRun.push(script.innerText);
-                            new Function(script.innerText)();
-                        }
-                        catch (error) {
-                            console.warn('`CustomCode`: Error running script:', error);
-                        }
-                    }
-                }
-            }
-        },
-    });
-    (0, mitosis_1.onMount)(function () {
-        state.findAndRunScripts();
-    });
-    return (<div ref={elem} class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')} innerHTML={props.code}></div>);
-}
-exports.default = CustomCode;

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

@@ -1,4 +0,0 @@
-export interface EmbedProps {
-    content: string;
-}
-export default function Embed(props: EmbedProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function Embed(props) {
-    var elem = (0, mitosis_1.useRef)(null);
-    var state = (0, mitosis_1.useStore)({
-        scriptsInserted: [],
-        scriptsRun: [],
-        findAndRunScripts: function () {
-            // TODO: Move this function to standalone one in '@builder.io/utils'
-            if (elem && typeof window !== 'undefined') {
-                /** @type {HTMLScriptElement[]} */
-                var scripts = elem.getElementsByTagName('script');
-                for (var i = 0; i < scripts.length; i++) {
-                    var script = scripts[i];
-                    if (script.src) {
-                        if (state.scriptsInserted.includes(script.src)) {
-                            continue;
-                        }
-                        state.scriptsInserted.push(script.src);
-                        var newScript = document.createElement('script');
-                        newScript.async = true;
-                        newScript.src = script.src;
-                        document.head.appendChild(newScript);
-                    }
-                    else if (!script.type ||
-                        ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {
-                        if (state.scriptsRun.includes(script.innerText)) {
-                            continue;
-                        }
-                        try {
-                            state.scriptsRun.push(script.innerText);
-                            new Function(script.innerText)();
-                        }
-                        catch (error) {
-                            console.warn('`Embed`: Error running script:', error);
-                        }
-                    }
-                }
-            }
-        },
-    });
-    (0, mitosis_1.onMount)(function () {
-        state.findAndRunScripts();
-    });
-    return <div ref={elem} class="builder-embed" innerHTML={props.content}></div>;
-}
-exports.default = Embed;

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

@@ -1,25 +0,0 @@
-import { BuilderElement } from '@builder.io/sdk';
-export interface FormProps {
-    attributes?: any;
-    name?: string;
-    action?: string;
-    validate?: boolean;
-    method?: string;
-    builderBlock?: BuilderElement;
-    sendSubmissionsTo?: string;
-    sendSubmissionsToEmail?: string;
-    sendWithJs?: boolean;
-    contentType?: string;
-    customHeaders?: {
-        [key: string]: string;
-    };
-    successUrl?: string;
-    previewState?: FormState;
-    successMessage?: BuilderElement[];
-    errorMessage?: BuilderElement[];
-    sendingMessage?: BuilderElement[];
-    resetFormOnSubmit?: boolean;
-    errorMessagePath?: string;
-}
-export declare type FormState = 'unsubmitted' | 'sending' | 'success' | 'error';
-export default function FormComponent(props: FormProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,272 +0,0 @@
-"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 mitosis_1 = require("@builder.io/mitosis");
-var _fake_1 = require("@fake");
-var sdk_1 = require("@builder.io/sdk");
-var _fake_2 = require("@fake");
-var _fake_3 = require("@fake");
-var _fake_4 = require("@fake");
-function FormComponent(props) {
-    var _a;
-    var state = (0, mitosis_1.useStore)({
-        formState: 'unsubmitted',
-        // TODO: separate response and error?
-        responseData: null,
-        formErrorMessage: '',
-        get submissionState() {
-            return (sdk_1.Builder.isEditing && props.previewState) || state.formState;
-        },
-        onSubmit: function (event) {
-            var _this = this;
-            var _a;
-            var sendWithJs = props.sendWithJs || props.sendSubmissionsTo === 'email';
-            if (props.sendSubmissionsTo === 'zapier') {
-                event.preventDefault();
-            }
-            else if (sendWithJs) {
-                if (!(props.action || props.sendSubmissionsTo === 'email')) {
-                    event.preventDefault();
-                    return;
-                }
-                event.preventDefault();
-                var el = event.currentTarget;
-                var headers = props.customHeaders || {};
-                var body = void 0;
-                var formData = new FormData(el);
-                // TODO: maybe support null
-                var formPairs = Array.from(event.currentTarget.querySelectorAll('input,select,textarea'))
-                    .filter(function (el) { return !!el.name; })
-                    .map(function (el) {
-                    var value;
-                    var key = el.name;
-                    if (el instanceof HTMLInputElement) {
-                        if (el.type === 'radio') {
-                            if (el.checked) {
-                                value = el.name;
-                                return { key: key, value: value };
-                            }
-                        }
-                        else if (el.type === 'checkbox') {
-                            value = el.checked;
-                        }
-                        else if (el.type === 'number' || el.type === 'range') {
-                            var num = el.valueAsNumber;
-                            if (!isNaN(num)) {
-                                value = num;
-                            }
-                        }
-                        else if (el.type === 'file') {
-                            // TODO: one vs multiple files
-                            value = el.files;
-                        }
-                        else {
-                            value = el.value;
-                        }
-                    }
-                    else {
-                        value = el.value;
-                    }
-                    return { key: key, value: value };
-                });
-                var contentType_1 = props.contentType;
-                if (props.sendSubmissionsTo === 'email') {
-                    contentType_1 = 'multipart/form-data';
-                }
-                Array.from(formPairs).forEach(function (_a) {
-                    var value = _a.value;
-                    if (value instanceof File ||
-                        (Array.isArray(value) && value[0] instanceof File) ||
-                        value instanceof FileList) {
-                        contentType_1 = 'multipart/form-data';
-                    }
-                });
-                // TODO: send as urlEncoded or multipart by default
-                // because of ease of use and reliability in browser API
-                // for encoding the form?
-                if (contentType_1 !== 'application/json') {
-                    body = formData;
-                }
-                else {
-                    // Json
-                    var json_1 = {};
-                    Array.from(formPairs).forEach(function (_a) {
-                        var value = _a.value, key = _a.key;
-                        (0, _fake_3.set)(json_1, key, value);
-                    });
-                    body = JSON.stringify(json_1);
-                }
-                if (contentType_1 && contentType_1 !== 'multipart/form-data') {
-                    if (
-                    /* Zapier doesn't allow content-type header to be sent from browsers */
-                    !(sendWithJs && ((_a = props.action) === null || _a === void 0 ? void 0 : _a.includes('zapier.com')))) {
-                        headers['content-type'] = contentType_1;
-                    }
-                }
-                var presubmitEvent = new CustomEvent('presubmit', {
-                    detail: {
-                        body: body,
-                    },
-                });
-                if (formRef) {
-                    formRef.dispatchEvent(presubmitEvent);
-                    if (presubmitEvent.defaultPrevented) {
-                        return;
-                    }
-                }
-                state.formState = 'sending';
-                var formUrl = "".concat(sdk_1.builder.env === 'dev' ? 'http://localhost:5000' : 'https://builder.io', "/api/v1/form-submit?apiKey=").concat(sdk_1.builder.apiKey, "&to=").concat(btoa(props.sendSubmissionsToEmail || ''), "&name=").concat(encodeURIComponent(props.name || ''));
-                fetch(props.sendSubmissionsTo === 'email'
-                    ? formUrl
-                    : props.action /* TODO: throw error if no action URL */, {
-                    body: body,
-                    headers: headers,
-                    method: props.method || 'post',
-                }).then(function (res) { return __awaiter(_this, void 0, void 0, function () {
-                    var body, contentType, message, submitSuccessEvent, event_1;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                contentType = res.headers.get('content-type');
-                                if (!(contentType && contentType.indexOf('application/json') !== -1)) return [3 /*break*/, 2];
-                                return [4 /*yield*/, res.json()];
-                            case 1:
-                                body = _a.sent();
-                                return [3 /*break*/, 4];
-                            case 2: return [4 /*yield*/, res.text()];
-                            case 3:
-                                body = _a.sent();
-                                _a.label = 4;
-                            case 4:
-                                if (!res.ok && props.errorMessagePath) {
-                                    message = (0, _fake_4.get)(body, props.errorMessagePath);
-                                    if (message) {
-                                        if (typeof message !== 'string') {
-                                            /* TODO: ideally convert json to yaml so it woul dbe like
-                                             error: - email has been taken */
-                                            message = JSON.stringify(message);
-                                        }
-                                        state.formErrorMessage = message;
-                                    }
-                                }
-                                state.responseData = body;
-                                state.formState = res.ok ? 'success' : 'error';
-                                if (res.ok) {
-                                    submitSuccessEvent = new CustomEvent('submit:success', {
-                                        detail: {
-                                            res: res,
-                                            body: body,
-                                        },
-                                    });
-                                    if (formRef) {
-                                        formRef.dispatchEvent(submitSuccessEvent);
-                                        if (submitSuccessEvent.defaultPrevented) {
-                                            return [2 /*return*/];
-                                        }
-                                        /* TODO: option to turn this on/off? */
-                                        if (props.resetFormOnSubmit !== false) {
-                                            formRef.reset();
-                                        }
-                                    }
-                                    /* TODO: client side route event first that can be preventDefaulted */
-                                    if (props.successUrl) {
-                                        if (formRef) {
-                                            event_1 = new CustomEvent('route', {
-                                                detail: {
-                                                    url: props.successUrl,
-                                                },
-                                            });
-                                            formRef.dispatchEvent(event_1);
-                                            if (!event_1.defaultPrevented) {
-                                                location.href = props.successUrl;
-                                            }
-                                        }
-                                        else {
-                                            location.href = props.successUrl;
-                                        }
-                                    }
-                                }
-                                return [2 /*return*/];
-                        }
-                    });
-                }); }, function (err) {
-                    var submitErrorEvent = new CustomEvent('submit:error', {
-                        detail: {
-                            error: err,
-                        },
-                    });
-                    if (formRef) {
-                        formRef.dispatchEvent(submitErrorEvent);
-                        if (submitErrorEvent.defaultPrevented) {
-                            return;
-                        }
-                    }
-                    state.responseData = err;
-                    state.formState = 'error';
-                });
-            }
-        },
-    });
-    var formRef = (0, mitosis_1.useRef)(null);
-    return (<form validate={props.validate} ref={formRef} action={!props.sendWithJs && props.action} method={props.method} name={props.name} onSubmit={function (event) { return state.onSubmit(event); }} {...props.attributes}>
-      <mitosis_1.Show when={props.builderBlock && props.builderBlock.children}>
-        <mitosis_1.For each={(_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.children}>
-          {function (block, index) { return <_fake_1.BuilderBlock key={block.id} block={block} index={index}/>; }}
-        </mitosis_1.For>
-      </mitosis_1.Show>
-
-      <mitosis_1.Show when={state.submissionState === 'error'}>
-        <_fake_2.BuilderBlocks dataPath="errorMessage" blocks={props.errorMessage}/>
-      </mitosis_1.Show>
-
-      <mitosis_1.Show when={state.submissionState === 'sending'}>
-        <_fake_2.BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}/>
-      </mitosis_1.Show>
-
-      <mitosis_1.Show when={state.submissionState === 'error' && state.responseData}>
-        <pre class="builder-form-error-text" css={{ padding: '10px', color: 'red', textAlign: 'center' }}>
-          {JSON.stringify(state.responseData, null, 2)}
-        </pre>
-      </mitosis_1.Show>
-
-      <mitosis_1.Show when={state.submissionState === 'success'}>
-        <_fake_2.BuilderBlocks dataPath="successMessage" blocks={props.successMessage}/>
-      </mitosis_1.Show>
-    </form>);
-}
-exports.default = FormComponent;

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

@@ -1,15 +0,0 @@
-export interface ImageProps {
-    _class?: string;
-    image: string;
-    sizes?: string;
-    lazy?: boolean;
-    height?: number;
-    width?: number;
-    altText?: string;
-    backgroundSize?: string;
-    backgroundPosition?: string;
-    srcset?: string;
-    aspectRatio?: number;
-    children?: any;
-}
-export default function Image(props: ImageProps): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function Image(props) {
-    var pictureRef = (0, mitosis_1.useRef)();
-    var state = (0, mitosis_1.useStore)({
-        scrollListener: null,
-        imageLoaded: false,
-        setLoaded: function () {
-            state.imageLoaded = true;
-        },
-        useLazyLoading: function () {
-            // TODO: Add more checks here, like testing for real web browsers
-            return !!props.lazy && isBrowser();
-        },
-    });
-    function isBrowser() {
-        return typeof window !== 'undefined' && window.navigator.product != 'ReactNative';
-    }
-    var _a = (0, mitosis_1.useState)(false), load = _a[0], setLoad = _a[1];
-    (0, mitosis_1.onMount)(function () {
-        if (state.useLazyLoading()) {
-            // throttled scroll capture listener
-            var listener_1 = function () {
-                if (pictureRef) {
-                    var rect = pictureRef.getBoundingClientRect();
-                    var buffer = window.innerHeight / 2;
-                    if (rect.top < window.innerHeight + buffer) {
-                        setLoad(true);
-                        state.scrollListener = null;
-                        window.removeEventListener('scroll', listener_1);
-                    }
-                }
-            };
-            state.scrollListener = listener_1;
-            window.addEventListener('scroll', listener_1, {
-                capture: true,
-                passive: true,
-            });
-            listener_1();
-        }
-    });
-    (0, mitosis_1.onUnMount)(function () {
-        if (state.scrollListener) {
-            window.removeEventListener('scroll', state.scrollListener);
-        }
-    });
-    return (<div>
-      <picture ref={pictureRef}>
-        <mitosis_1.Show when={!state.useLazyLoading() || load}>
-          <img alt={props.altText} aria-role={props.altText ? 'presentation' : undefined} css={{
-            opacity: '1',
-            transition: 'opacity 0.2s ease-in-out',
-            objectFit: 'cover',
-            objectPosition: 'center',
-        }} class={'builder-image' + (props._class ? ' ' + props._class : '')} src={props.image} onLoad={function () { return state.setLoaded(); }} 
-    // TODO: memoize on image on client
-    srcset={props.srcset} sizes={props.sizes}/>
-        </mitosis_1.Show>
-        <source srcset={props.srcset}/>
-      </picture>
-      {props.children}
-    </div>);
-}
-exports.default = Image;

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

@@ -1 +0,0 @@
-export default function ImgStateComponent(): import("@builder.io/mitosis/jsx-runtime").JSX.Element;

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var mitosis_1 = require("@builder.io/mitosis");
-function ImgStateComponent() {
-    var state = (0, mitosis_1.useStore)({
-        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;