@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/generators/qwik/directives.js

@@ -0,0 +1,152 @@
+"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;
+        },
+    });
+}

package/dist/src/generators/qwik/helpers/add-prevent-default.d.ts

@@ -0,0 +1,7 @@
+import { MitosisComponent } from '../../../types/mitosis-component';
+/**
+ * Find event handlers that explicitly call .preventDefault() and
+ * add preventdefault:event
+ * https://qwik.builder.io/tutorial/events/preventdefault
+ */
+export declare function addPreventDefault(json: MitosisComponent): void;

package/dist/src/generators/qwik/helpers/add-prevent-default.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addPreventDefault = void 0;
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const is_mitosis_node_1 = require("../../../helpers/is-mitosis-node");
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+/**
+ * Find event handlers that explicitly call .preventDefault() and
+ * add preventdefault:event
+ * https://qwik.builder.io/tutorial/events/preventdefault
+ */
+function addPreventDefault(json) {
+    (0, legacy_1.default)(json).forEach((node) => {
+        var _a;
+        if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+            if (node.bindings) {
+                for (const key of Object.keys(node.bindings)) {
+                    if ((0, event_handlers_1.checkIsEvent)(key)) {
+                        if ((_a = node.bindings[key]) === null || _a === void 0 ? void 0 : _a.code.includes('.preventDefault()')) {
+                            const event = key.slice(2).toLowerCase();
+                            node.properties['preventdefault:' + event] = '';
+                            node.bindings[key].code = node.bindings[key].code.replace(/.*?\.preventDefault\(\);?/, '').trim();
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+exports.addPreventDefault = addPreventDefault;

package/dist/src/generators/qwik/helpers/convert-method-to-function.d.ts

@@ -0,0 +1,2 @@
+import type { MethodMap } from './state';
+export declare function convertMethodToFunction(code: string, properties: MethodMap, lexicalArgs: string[]): string;

package/dist/src/generators/qwik/helpers/convert-method-to-function.js

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMethodToFunction = void 0;
+function convertMethodToFunction(code, properties, lexicalArgs) {
+    const out = [];
+    let idx = 0;
+    let lastIdx = idx;
+    let end = code.length;
+    let mode = "code" /* Mode.code */;
+    let braceDepth = 0;
+    let stringEndBraceDepth = -1;
+    let stringEndBraceDepthQueue = [];
+    let lastCh = null;
+    while (idx < end) {
+        const ch = code.charCodeAt(idx++);
+        switch (mode) {
+            case "code" /* Mode.code */:
+                if (ch === QUOTE_DOUBLE) {
+                    mode = "stringDouble" /* Mode.stringDouble */;
+                }
+                else if (ch === QUOTE_SINGLE) {
+                    mode = "stringSingle" /* Mode.stringSingle */;
+                }
+                else if (ch === QUOTE_BACK_TICK) {
+                    mode = "stringTemplate" /* Mode.stringTemplate */;
+                }
+                else if (ch === OPEN_BRACE) {
+                    braceDepth++;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == FORWARD_SLASH) {
+                    mode = "commentSingleline" /* Mode.commentSingleline */;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == STAR) {
+                    mode = "commentMultiline" /* Mode.commentMultiline */;
+                }
+                else if (ch === CLOSE_BRACE) {
+                    braceDepth--;
+                    if (braceDepth === stringEndBraceDepth) {
+                        stringEndBraceDepth = stringEndBraceDepthQueue.pop();
+                        mode = "stringTemplate" /* Mode.stringTemplate */;
+                    }
+                }
+                else if (isWord(ch, code, idx, 'this') || isWord(ch, code, idx, 'state')) {
+                    idx--;
+                    flush();
+                    consumeIdent();
+                    if (code.charCodeAt(idx) == DOT) {
+                        idx++;
+                        const propEndIdx = findIdentEnd();
+                        const identifier = code.substring(idx, propEndIdx);
+                        const propType = properties[identifier];
+                        if (propType) {
+                            const isGetter = code.charCodeAt(propEndIdx) !== OPEN_PAREN;
+                            lastIdx = idx = propEndIdx + (isGetter ? 0 : 1);
+                            if (isGetter) {
+                                if (propType === 'method') {
+                                    out.push(identifier, `.bind(null,${lexicalArgs.join(',')})`);
+                                }
+                                else {
+                                    out.push(identifier, `(${lexicalArgs.join(',')})`);
+                                }
+                            }
+                            else {
+                                out.push(identifier, `(${lexicalArgs.join(',')},`);
+                            }
+                        }
+                        else {
+                            flush();
+                        }
+                    }
+                }
+                break;
+            case "commentSingleline" /* Mode.commentSingleline */:
+                if (ch == EOL)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "commentMultiline" /* Mode.commentMultiline */:
+                if (lastCh == STAR && ch == FORWARD_SLASH)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringSingle" /* Mode.stringSingle */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_SINGLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringDouble" /* Mode.stringDouble */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_DOUBLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringTemplate" /* Mode.stringTemplate */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_BACK_TICK) {
+                    mode = "code" /* Mode.code */;
+                }
+                else if (lastCh === DOLLAR && ch == OPEN_BRACE) {
+                    mode = "code" /* Mode.code */;
+                    stringEndBraceDepthQueue.push(stringEndBraceDepth);
+                    stringEndBraceDepth = braceDepth;
+                    braceDepth++;
+                }
+                break;
+        }
+        lastCh = ch;
+    }
+    flush();
+    return out.join('');
+    function flush() {
+        out.push(code.substring(lastIdx, idx));
+        lastIdx = idx;
+    }
+    function findIdentEnd() {
+        let scanIdx = idx;
+        while (isIdentCh(code.charCodeAt(scanIdx)) && scanIdx < end) {
+            scanIdx++;
+        }
+        return scanIdx;
+    }
+    function consumeIdent() {
+        while (isIdentCh(code.charCodeAt(idx))) {
+            idx++;
+        }
+    }
+}
+exports.convertMethodToFunction = convertMethodToFunction;
+function isIdentCh(ch) {
+    return ((CHAR_0 <= ch && ch <= CHAR_9) ||
+        (CHAR_a <= ch && ch <= CHAR_z) ||
+        (CHAR_A <= ch && ch <= CHAR_Z) ||
+        ch === UNDERSCORE ||
+        ch === DOLLAR);
+}
+function isWord(ch, code, idx, word) {
+    if (ch !== word.charCodeAt(0))
+        return false;
+    for (let i = 1; i < word.length; i++) {
+        if (code.charCodeAt(idx + i - 1) !== word.charCodeAt(i)) {
+            return false;
+        }
+    }
+    if (isIdentCh(code.charCodeAt(idx + word.length - 1))) {
+        return false;
+    }
+    return true;
+}
+const QUOTE_DOUBLE = '"'.charCodeAt(0);
+const QUOTE_SINGLE = "'".charCodeAt(0);
+const QUOTE_BACK_TICK = '`'.charCodeAt(0);
+const BACKSLASH = `\\`.charCodeAt(0);
+const FORWARD_SLASH = `/`.charCodeAt(0);
+const EOL = `\n`.charCodeAt(0);
+const STAR = `*`.charCodeAt(0);
+const CHAR_0 = `0`.charCodeAt(0);
+const CHAR_9 = `9`.charCodeAt(0);
+const CHAR_a = `a`.charCodeAt(0);
+const CHAR_z = `z`.charCodeAt(0);
+const CHAR_A = `A`.charCodeAt(0);
+const CHAR_Z = `Z`.charCodeAt(0);
+const UNDERSCORE = `_`.charCodeAt(0);
+const DOLLAR = `$`.charCodeAt(0);
+const DOT = `.`.charCodeAt(0);
+const OPEN_PAREN = '('.charCodeAt(0);
+const OPEN_BRACE = '{'.charCodeAt(0);
+const CLOSE_BRACE = '}'.charCodeAt(0);

package/dist/src/generators/qwik/helpers/handlers.d.ts

@@ -0,0 +1,3 @@
+import { MitosisNode } from '../../../types/mitosis-node';
+import { File } from '../src-generator';
+export declare function renderHandlers(file: File, componentName: string, children: MitosisNode[]): Map<string, string>;

package/dist/src/generators/qwik/helpers/handlers.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHandlers = void 0;
+const event_handlers_1 = require("../../../helpers/event-handlers");
+const component_1 = require("../component");
+const src_generator_1 = require("../src-generator");
+const IIF_START = '(() => {';
+const IIF_END = '})()';
+function extractJSBlock(binding) {
+    if (typeof binding == 'string') {
+        if (binding.startsWith('{') &&
+            binding.endsWith('}') &&
+            !binding.startsWith('{"') &&
+            !binding.endsWith('"}')) {
+            return binding.substring(1, binding.length - 2);
+        }
+        else if (binding.startsWith(IIF_START) && binding.endsWith(IIF_END)) {
+            return binding.substring(IIF_START.length, binding.length - IIF_END.length - 1);
+        }
+    }
+    return null;
+}
+function renderHandlers(file, componentName, children) {
+    let id = 0;
+    const map = new Map();
+    const nodes = [...children];
+    while (nodes.length) {
+        const node = nodes.shift();
+        const bindings = node.bindings;
+        for (const key in bindings) {
+            if (Object.prototype.hasOwnProperty.call(bindings, key)) {
+                const { code: binding } = bindings[key];
+                if (binding != null) {
+                    if (isEventName(key)) {
+                        let block = extractJSBlock(binding) || binding;
+                        const symbol = `${componentName}_${key}_${id++}`;
+                        map.set(binding, symbol);
+                        renderHandler(file, symbol, block);
+                    }
+                }
+            }
+        }
+        nodes.push(...node.children);
+    }
+    return map;
+}
+exports.renderHandlers = renderHandlers;
+function renderHandler(file, symbol, code) {
+    const body = [code];
+    const shouldRenderStateRestore = code.indexOf('state') !== -1;
+    if (shouldRenderStateRestore) {
+        body.unshift((0, component_1.renderUseLexicalScope)(file));
+    }
+    file.exportConst(symbol, function () {
+        this.emit([(0, src_generator_1.arrowFnBlock)(['event'], body)]);
+    });
+}
+function isEventName(name) {
+    return (0, event_handlers_1.checkIsEvent)(name) && name.charAt(2).toUpperCase() == name.charAt(2);
+}

package/dist/src/generators/qwik/helpers/stable-inject.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Similar to our `stableJSONSerialize` function, except that it does not stringify the values: it injects them as-is.
+ * This is needed for our `MitosisState` values which are JS expressions stored as strings.
+ */
+export declare function stableInject(obj: any): string;

package/dist/src/generators/qwik/helpers/stable-inject.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableInject = void 0;
+/**
+ * Similar to our `stableJSONSerialize` function, except that it does not stringify the values: it injects them as-is.
+ * This is needed for our `MitosisState` values which are JS expressions stored as strings.
+ */
+function stableInject(obj) {
+    const output = [];
+    _serialize(output, obj);
+    return output.join('');
+}
+exports.stableInject = stableInject;
+function _serialize(output, obj) {
+    if (obj == null) {
+        output.push('null');
+    }
+    else if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            output.push('[');
+            let sep = '';
+            for (let i = 0; i < obj.length; i++) {
+                output.push(sep);
+                _serialize(output, obj[i]);
+                sep = ',';
+            }
+            output.push(']');
+        }
+        else {
+            const keys = Object.keys(obj).sort();
+            output.push('{');
+            let sep = '';
+            for (const key of keys) {
+                const value = obj[key];
+                if (value !== undefined) {
+                    output.push(sep);
+                    output.push(JSON.stringify(key));
+                    output.push(':');
+                    _serialize(output, value);
+                    sep = ',';
+                }
+            }
+            output.push('}');
+        }
+    }
+    else {
+        output.push(obj);
+    }
+}

package/dist/src/generators/qwik/helpers/stable-serialize.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+export declare function stableJSONserialize(obj: any): string;

package/dist/src/generators/qwik/helpers/stable-serialize.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stableJSONserialize = void 0;
+/**
+ * Same as JSON.stringify, but sorts keys ensuring that the output is stable across runs.
+ * @param obj
+ * @returns JSON serialized string
+ */
+function stableJSONserialize(obj) {
+    const output = [];
+    _serialize(output, obj);
+    return output.join('');
+}
+exports.stableJSONserialize = stableJSONserialize;
+function _serialize(output, obj) {
+    if (obj == null) {
+        output.push('null');
+    }
+    else if (typeof obj === 'object') {
+        if (Array.isArray(obj)) {
+            output.push('[');
+            let sep = '';
+            for (let i = 0; i < obj.length; i++) {
+                output.push(sep);
+                _serialize(output, obj[i]);
+                sep = ',';
+            }
+            output.push(']');
+        }
+        else {
+            const keys = Object.keys(obj).sort();
+            output.push('{');
+            let sep = '';
+            for (const key of keys) {
+                const value = obj[key];
+                if (value !== undefined) {
+                    output.push(sep);
+                    output.push(JSON.stringify(key));
+                    output.push(':');
+                    _serialize(output, value);
+                    sep = ',';
+                }
+            }
+            output.push('}');
+        }
+    }
+    else {
+        output.push(JSON.stringify(obj));
+    }
+}

package/dist/src/generators/qwik/helpers/state.d.ts

@@ -0,0 +1,32 @@
+import { ComponentMetadata } from '../../../types/metadata';
+import { MitosisComponent } from '../../../types/mitosis-component';
+import { File } from '../src-generator';
+/**
+ * Stores getters and initialization map.
+ */
+export type StateInit = [
+    StateValues,
+    /**
+     * Set of state initializers.
+     */
+    ...string[]
+];
+export type PropertyName = string;
+export type StateValue = string;
+/**
+ * Map of getters that need to be rewritten to function invocations.
+ */
+export type StateValues = Record<PropertyName, StateValue>;
+/**
+ * @param file
+ * @param stateInit
+ */
+export declare function emitUseStore({ file, stateInit, isDeep, }: {
+    file: File;
+    stateInit: StateInit;
+    isDeep?: boolean;
+}): void;
+export declare function emitStateMethodsAndRewriteBindings(file: File, component: MitosisComponent, metadata?: ComponentMetadata): StateInit;
+export declare function getLexicalScopeVars(component: MitosisComponent): string[];
+export type MethodMap = Record<string, 'method' | 'getter'>;
+export declare function getStateMethodsAndGetters(state: MitosisComponent['state']): MethodMap;