@builder.io/mitosis/dist/src/generators/qwik/directives.js

Write components once, run everywhere. Compiles to Vue, React, Solid, and Liquid. Import code from Figma and Builder.io

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Image = exports.DIRECTIVES = void 0;
const for_1 = require("../../helpers/nodes/for");
const minify_1 = require("../helpers/minify");
const src_generator_1 = require("./src-generator");
exports.DIRECTIVES = {
    Show: (node, blockFn) => function () {
        var _a;
        const expr = (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
        const elseBlockFn = blockFn.else;
        this.jsxExpression(() => {
            this.emit(expr, '?');
            blockFn();
            this.emit(':');
            if (elseBlockFn) {
                elseBlockFn();
            }
            else {
                this.emit('null');
            }
        });
    },
    For: (_node, blockFn) => function () {
        var _a;
        const node = _node;
        const expr = (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code;
        this.jsxExpression(() => {
            const forArgs = (0, for_1.getForArguments)(node);
            const forName = forArgs[0];
            this.emit('(', expr, '||[]).map(');
            this.isBuilder && this.emit('((');
            this.emit('(', forArgs, ') => {');
            if (this.isBuilder) {
                this.emit('const l={...this,', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, ',', () => forArgs.forEach((arg) => {
                    this.emit(arg, ':', arg, ',');
                }), '};');
                this.emit('const state = __proxyMerge__(s,l);');
            }
            this.emit('return(');
            blockFn();
            this.emit(');}');
            this.isBuilder && this.emit(').bind(l))');
            this.emit(')');
        });
    },
    Image: (0, minify_1.minify) `${Image}`,
    CoreButton: (0, minify_1.minify) `${CoreButton}`,
    __passThroughProps__: (0, minify_1.minify) `${__passThroughProps__}`,
    __proxyMerge__: (0, minify_1.minify) `${__proxyMerge__}`,
};
function Image(props) {
    var _a;
    let jsx = props.children || [];
    let image = props.image;
    if (image) {
        const isBuilderIoImage = !!(image || '').match(/\.builder\.io/) && !props.noWebp;
        const isPixel = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.id.startsWith('builder-pixel-');
        const imgProps = {
            src: props.image,
            style: `object-fit:${props.backgroundSize || 'cover'};object-position:${props.backgroundPosition || 'center'};` + (props.aspectRatio ? 'position:absolute;height:100%;width:100%;top:0;left:0' : ''),
            sizes: props.sizes,
            alt: props.altText,
            role: !props.altText ? 'presentation' : undefined,
            loading: isPixel ? 'eager' : 'lazy',
            srcset: undefined,
        };
        const qwikBugWorkaround = (imgProps) => Object.keys(imgProps).forEach((k) => imgProps[k] === undefined && delete imgProps[k]);
        qwikBugWorkaround(imgProps);
        if (isBuilderIoImage) {
            const webpImage = updateQueryParam(image, 'format', 'webp');
            const srcset = ['100', '200', '400', '800', '1200', '1600', '2000']
                .concat(props.srcsetSizes ? String(props.srcsetSizes).split(' ') : [])
                .map((size) => {
                return updateQueryParam(webpImage, 'width', size) + ' ' + size + 'w';
            })
                .concat(tryAppendWidth(image))
                .join(', ');
            imgProps.srcset = srcset;
            jsx = jsx = [
                h('picture', {}, [
                    h('source', { type: 'image/webp', srcset: srcset }),
                    h('img', imgProps, jsx),
                ]),
            ];
        }
        else {
            jsx = [h('img', imgProps, jsx)];
        }
        if (props.aspectRatio && !(props.fitContent && props.children && props.children.length)) {
            const sizingDiv = h('div', {
                class: 'builder-image-sizer',
                style: `width:100%;padding-top:${(props.aspectRatio || 1) * 100}%;pointer-events:none;font-size:0`,
            });
            jsx.push(sizingDiv);
        }
    }
    const children = props.children ? [jsx].concat(props.children) : [jsx];
    return h(props.href ? 'a' : 'div', __passThroughProps__({ href: props.href, class: props.class }, props), children);
    function updateQueryParam(uri = '', key, value) {
        const re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
        const separator = uri.indexOf('?') !== -1 ? '&' : '?';
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
        }
        return uri + separator + key + '=' + encodeURIComponent(value);
    }
    function tryAppendWidth(url) {
        const match = url.match(/[?&]width=(\d+)/);
        const width = match && match[1];
        if (width) {
            return [url + ' ' + width + 'w'];
        }
        return [];
    }
}
exports.Image = Image;
function __passThroughProps__(dstProps, srcProps) {
    for (const key in srcProps) {
        if (Object.prototype.hasOwnProperty.call(srcProps, key) &&
            ((key.startsWith('on') && key.endsWith('$')) || key == 'style')) {
            dstProps[key] = srcProps[key];
        }
    }
    return dstProps;
}
function CoreButton(props) {
    const hasLink = !!props.link;
    const hProps = {
        dangerouslySetInnerHTML: props.text || '',
        href: props.link,
        target: props.openInNewTab ? '_blank' : '_self',
        class: props.class,
    };
    return h(hasLink ? 'a' : props.tagName$ || 'span', __passThroughProps__(hProps, props));
}
function __proxyMerge__(state, local) {
    return new Proxy(state, {
        get: (obj, prop) => {
            if (local && prop in local) {
                return local[prop];
            }
            else {
                return state[prop];
            }
        },
        set: (obj, prop, value) => {
            obj[prop] = value;
            return true;
        },
    });
}