@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStateMethodsAndGetters = exports.getLexicalScopeVars = exports.emitStateMethodsAndRewriteBindings = exports.emitUseStore = void 0;
+const legacy_1 = __importDefault(require("neotraverse/legacy"));
+const babel_transform_1 = require("../../../helpers/babel-transform");
+const convert_method_to_function_1 = require("./convert-method-to-function");
+const stable_inject_1 = require("./stable-inject");
+/**
+ * @param file
+ * @param stateInit
+ */
+function emitUseStore({ file, stateInit, isDeep, }) {
+    const state = stateInit[0];
+    const hasState = state && Object.keys(state).length > 0;
+    if (hasState) {
+        file.src.emit('const state=', file.import(file.qwikModule, 'useStore').localName);
+        if (file.options.isTypeScript) {
+            file.src.emit('<any>');
+        }
+        const fnArgs = [(0, stable_inject_1.stableInject)(state), isDeep ? '{deep: true}' : undefined].filter(Boolean);
+        file.src.emit(`(${fnArgs});`);
+    }
+    else {
+        // TODO hack for now so that `state` variable is defined, even though it is never read.
+        file.src.emit(`const state${file.options.isTypeScript ? ': any' : ''} = {};`);
+    }
+}
+exports.emitUseStore = emitUseStore;
+function emitStateMethods(file, componentState, lexicalArgs) {
+    const stateValues = {};
+    const stateInit = [stateValues];
+    const methodMap = getStateMethodsAndGetters(componentState);
+    for (const key in componentState) {
+        const stateValue = componentState[key];
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'method':
+            case 'function':
+                let code = stateValue.code;
+                const isAsync = code.startsWith('async');
+                if (!isAsync) {
+                    let prefixIdx = 0;
+                    if (stateValue.type === 'function') {
+                        prefixIdx += 'function '.length;
+                    }
+                    code = code.substring(prefixIdx);
+                    code = (0, convert_method_to_function_1.convertMethodToFunction)(code, methodMap, lexicalArgs).replace('(', `(${lexicalArgs.join(',')},`);
+                }
+                const functionName = code.split(/\(/)[0];
+                if (!file.options.isTypeScript) {
+                    // Erase type information
+                    code = (0, babel_transform_1.convertTypeScriptToJS)(code);
+                }
+                file.exportConst(isAsync ? key : functionName, isAsync ? code : 'function ' + code, true);
+                continue;
+            case 'property':
+                stateValues[key] = stateValue.code;
+                continue;
+        }
+    }
+    return stateInit;
+}
+function emitStateMethodsAndRewriteBindings(file, component, metadata) {
+    var _a;
+    const lexicalArgs = getLexicalScopeVars(component);
+    const state = emitStateMethods(file, component.state, lexicalArgs);
+    const methodMap = getStateMethodsAndGetters(component.state);
+    rewriteCodeExpr(component, methodMap, lexicalArgs, (_a = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _a === void 0 ? void 0 : _a.replace);
+    return state;
+}
+exports.emitStateMethodsAndRewriteBindings = emitStateMethodsAndRewriteBindings;
+const checkIsObjectWithCodeBlock = (obj) => {
+    return typeof obj == 'object' && (obj === null || obj === void 0 ? void 0 : obj.code) && typeof obj.code === 'string';
+};
+function getLexicalScopeVars(component) {
+    const newLocal = [
+        'props',
+        'state',
+        // all `useComputed` values
+        ...Object.keys(component.state).filter((k) => component.state[k].type === 'getter'),
+        ...Object.keys(component.refs),
+        ...Object.keys(component.context.get),
+    ];
+    return newLocal;
+}
+exports.getLexicalScopeVars = getLexicalScopeVars;
+function rewriteCodeExpr(component, methodMap, lexicalArgs, replace = {}) {
+    (0, legacy_1.default)(component).forEach(function (item) {
+        if (!checkIsObjectWithCodeBlock(item)) {
+            return;
+        }
+        let code = (0, convert_method_to_function_1.convertMethodToFunction)(item.code, methodMap, lexicalArgs);
+        Object.keys(replace).forEach((key) => {
+            code = code.replace(key, replace[key]);
+        });
+        item.code = code;
+    });
+}
+function getStateMethodsAndGetters(state) {
+    const methodMap = {};
+    Object.keys(state).forEach((key) => {
+        const stateVal = state[key];
+        if ((stateVal === null || stateVal === void 0 ? void 0 : stateVal.type) === 'getter' || (stateVal === null || stateVal === void 0 ? void 0 : stateVal.type) === 'method') {
+            methodMap[key] = stateVal.type;
+        }
+    });
+    return methodMap;
+}
+exports.getStateMethodsAndGetters = getStateMethodsAndGetters;

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

@@ -0,0 +1,7 @@
+import { MitosisNode } from '../../..';
+import { SrcBuilder } from '../src-generator';
+export type CssStyles = {
+    CLASS_NAME: string;
+} & Record<string, string>;
+export declare function collectStyles(children: MitosisNode[], styleMap: Map<string, CssStyles>): Map<string, CssStyles>;
+export declare function renderStyles(styles: Map<string, CssStyles>): (this: SrcBuilder) => void;

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

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderStyles = exports.collectStyles = void 0;
+const json5_1 = __importDefault(require("json5"));
+const dash_case_1 = require("../../../helpers/dash-case");
+function collectStyles(children, styleMap) {
+    var _a;
+    const nodes = [...children];
+    while (nodes.length) {
+        const child = nodes.shift();
+        nodes.push(...child.children);
+        const css = (_a = child.bindings.css) === null || _a === void 0 ? void 0 : _a.code;
+        if (css && typeof css == 'string') {
+            const value = { CLASS_NAME: 'c' + hashCode(css), ...json5_1.default.parse(css) };
+            styleMap.set(css, value);
+        }
+    }
+    return styleMap;
+}
+exports.collectStyles = collectStyles;
+function hashCode(text) {
+    var hash = 0, i, chr;
+    if (text.length === 0)
+        return hash;
+    for (i = 0; i < text.length; i++) {
+        chr = text.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return Number(Math.abs(hash)).toString(36);
+}
+function renderStyles(styles) {
+    return function () {
+        this.emit('`');
+        const mediaStyles = [];
+        styles.forEach((styles) => {
+            this.emit('.', styles.CLASS_NAME, /*'.🏷️�', WS,*/ '{');
+            for (const key in styles) {
+                if (key !== 'CLASS_NAME' && Object.prototype.hasOwnProperty.call(styles, key)) {
+                    const value = styles[key];
+                    if (value && typeof value == 'object') {
+                        mediaStyles.push(styles.CLASS_NAME, key, value);
+                    }
+                    else {
+                        this.emit((0, dash_case_1.dashCase)(key), ':', value, ';');
+                    }
+                }
+            }
+            this.emit('}');
+        });
+        while (mediaStyles.length) {
+            const className = mediaStyles.shift();
+            const mediaKey = mediaStyles.shift();
+            const mediaObj = mediaStyles.shift();
+            this.emit(mediaKey, '{.', className, /*'.🏷️�',*/ '{');
+            for (const key in mediaObj) {
+                if (Object.prototype.hasOwnProperty.call(mediaObj, key)) {
+                    const value = mediaObj[key];
+                    this.emit((0, dash_case_1.dashCase)(key), ':', value, ';');
+                }
+            }
+            this.emit('}}');
+        }
+        this.emit('`');
+    };
+}
+exports.renderStyles = renderStyles;

package/dist/src/generators/qwik/index.d.ts

@@ -0,0 +1,5 @@
+export { addCommonStyles, addComponent, createFileSet } from './component';
+export type { FileSet, QwikOptions } from './component';
+export { componentToQwik } from './component-generator';
+export { File } from './src-generator';
+export * from './types';

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

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = 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];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.File = exports.componentToQwik = exports.createFileSet = exports.addComponent = exports.addCommonStyles = void 0;
+var component_1 = require("./component");
+Object.defineProperty(exports, "addCommonStyles", { enumerable: true, get: function () { return component_1.addCommonStyles; } });
+Object.defineProperty(exports, "addComponent", { enumerable: true, get: function () { return component_1.addComponent; } });
+Object.defineProperty(exports, "createFileSet", { enumerable: true, get: function () { return component_1.createFileSet; } });
+var component_generator_1 = require("./component-generator");
+Object.defineProperty(exports, "componentToQwik", { enumerable: true, get: function () { return component_generator_1.componentToQwik; } });
+var src_generator_1 = require("./src-generator");
+Object.defineProperty(exports, "File", { enumerable: true, get: function () { return src_generator_1.File; } });
+__exportStar(require("./types"), exports);

package/dist/src/generators/qwik/jsx.d.ts

@@ -0,0 +1,17 @@
+import { MitosisNode } from '../../types/mitosis-node';
+import { CssStyles } from './helpers/styles';
+import { File } from './src-generator';
+/**
+ * Convert a Mitosis nodes to a JSX nodes.
+ *
+ * @param file File into which the output will be written to.
+ * @param directives Store for directives which we came across so that they can be imported.
+ * @param handlers A set of handlers which we came across so that they can be rendered
+ * @param children A list of children to convert to JSX
+ * @param styles Store for styles which we came across so that they can be rendered.
+ * @param key Key to be used for the node if needed
+ * @param parentSymbolBindings A set of bindings from parent to be written into the child.
+ * @param root True if this is the root JSX, and may need a Fragment wrapper.
+ * @returns
+ */
+export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, key: string | null | undefined, parentSymbolBindings: Record<string, string>, root?: boolean): any;

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

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderJSXNodes = void 0;
+const is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
+const directives_1 = require("./directives");
+const src_generator_1 = require("./src-generator");
+/**
+ * Convert a Mitosis nodes to a JSX nodes.
+ *
+ * @param file File into which the output will be written to.
+ * @param directives Store for directives which we came across so that they can be imported.
+ * @param handlers A set of handlers which we came across so that they can be rendered
+ * @param children A list of children to convert to JSX
+ * @param styles Store for styles which we came across so that they can be rendered.
+ * @param key Key to be used for the node if needed
+ * @param parentSymbolBindings A set of bindings from parent to be written into the child.
+ * @param root True if this is the root JSX, and may need a Fragment wrapper.
+ * @returns
+ */
+function renderJSXNodes(file, directives, handlers, children, styles, key, parentSymbolBindings, root = true) {
+    return function () {
+        const srcBuilder = this;
+        if (children.length == 0)
+            return;
+        if (root)
+            this.emit('(');
+        const needsFragment = root &&
+            (children.length > 1 ||
+                (children.length && (isInlinedDirective(children[0]) || isTextNode(children[0]))));
+        file.import(file.qwikModule, 'h');
+        const fragmentSymbol = file.import(file.qwikModule, 'Fragment');
+        if (needsFragment) {
+            this.jsxBeginFragment(fragmentSymbol);
+        }
+        children.forEach((child) => {
+            var _a, _b;
+            if (isEmptyTextNode(child))
+                return;
+            if (isTextNode(child)) {
+                const text = child.properties._text;
+                const textExpr = (_a = child.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+                if (typeof text == 'string') {
+                    this.isJSX ? this.emit(text) : this.jsxTextBinding((0, src_generator_1.quote)(text));
+                }
+                else if (typeof textExpr == 'string') {
+                    this.isJSX ? this.emit('{', textExpr, '}') : this.jsxTextBinding(textExpr);
+                }
+            }
+            else if (isSlotProjection(child)) {
+                this.file.import(this.file.qwikModule, 'Slot');
+                this.jsxBegin('Slot', {}, {});
+                this.jsxEnd('Slot');
+            }
+            else {
+                let childName = child.name;
+                const directive = directives_1.DIRECTIVES[childName];
+                if (typeof directive == 'function') {
+                    const blockFn = mitosisNodeToRenderBlock(child.children);
+                    const meta = child.meta;
+                    Object.keys(meta).forEach((key) => {
+                        const value = meta[key];
+                        if ((0, is_mitosis_node_1.isMitosisNode)(value)) {
+                            blockFn[key] = mitosisNodeToRenderBlock([value]);
+                        }
+                    });
+                    this.emit(directive(child, blockFn));
+                    !this.isJSX && this.emit(',');
+                    includedHelperDirectives(directive.toString(), directives);
+                }
+                else {
+                    if (childName === 'Slot') {
+                        this.file.import(this.file.qwikModule, 'Slot');
+                    }
+                    else {
+                        if (typeof directive == 'string') {
+                            directives.set(childName, directive);
+                            includedHelperDirectives(directive, directives);
+                            if (file.module !== 'med' && file.imports.hasImport(childName)) {
+                                file.import('./med.js', childName);
+                            }
+                        }
+                        if (isSymbol(childName)) {
+                            // TODO(misko): We are hard coding './med.js' which is not right.
+                            !file.imports.hasImport(childName) && file.import('./med.js', childName);
+                            let exportedChildName = file.exports.get(childName);
+                            if (exportedChildName) {
+                                childName = exportedChildName;
+                            }
+                        }
+                    }
+                    let props = child.properties;
+                    const css = (_b = child.bindings.css) === null || _b === void 0 ? void 0 : _b.code;
+                    const specialBindings = {};
+                    if (css) {
+                        props = { ...props };
+                        const styleProps = styles.get(css);
+                        const imageMaxWidth = childName == 'Image' && styleProps.maxWidth;
+                        if (imageMaxWidth && imageMaxWidth.endsWith('px')) {
+                            // special case for Images. We want to make sure that we include the maxWidth in a srcset
+                            specialBindings.srcsetSizes = Number.parseInt(imageMaxWidth);
+                        }
+                        if (styleProps === null || styleProps === void 0 ? void 0 : styleProps.CLASS_NAME) {
+                            props.class = addClass(styleProps.CLASS_NAME, props.class);
+                        }
+                    }
+                    key = props['builder-id'] || key;
+                    if (props.innerHTML) {
+                        // Special case. innerHTML requires `key` in Qwik
+                        props = {
+                            key: key || 'default',
+                            ...props,
+                        };
+                    }
+                    const symbolBindings = {};
+                    const bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
+                    this.jsxBegin(childName, props, {
+                        ...bindings,
+                        ...parentSymbolBindings,
+                        ...specialBindings,
+                    });
+                    renderJSXNodes(file, directives, handlers, child.children, styles, key, symbolBindings, false).call(this);
+                    this.jsxEnd(childName);
+                }
+            }
+        });
+        if (needsFragment) {
+            this.jsxEndFragment();
+        }
+        if (root)
+            this.emit(')');
+        function mitosisNodeToRenderBlock(children) {
+            return () => {
+                children = children.filter((c) => !isEmptyTextNode(c));
+                const childNeedsFragment = children.length > 1 || (children.length && isTextNode(children[0]));
+                childNeedsFragment && srcBuilder.jsxBeginFragment(fragmentSymbol);
+                renderJSXNodes(file, directives, handlers, children, styles, null, {}, false).call(srcBuilder);
+                childNeedsFragment && srcBuilder.jsxEndFragment();
+            };
+        }
+    };
+}
+exports.renderJSXNodes = renderJSXNodes;
+function includedHelperDirectives(directive, directives) {
+    Array.from(directive.matchAll(/(__[\w]+__)/g)).forEach((match) => {
+        const name = match[0];
+        const code = directives_1.DIRECTIVES[name];
+        typeof code == 'string' && directives.set(name, code);
+    });
+}
+function isSymbol(name) {
+    return (name.charAt(0) === name.charAt(0).toUpperCase() &&
+        // we want to exclude any property access, as that can't be a symbol
+        !name.includes('.'));
+}
+function addClass(className, existingClass) {
+    return [className, ...(existingClass ? existingClass.split(' ') : [])].join(' ');
+}
+function isEmptyTextNode(child) {
+    var _a;
+    return ((_a = child.properties._text) === null || _a === void 0 ? void 0 : _a.trim()) == '';
+}
+function isTextNode(child) {
+    var _a;
+    if (child.properties._text !== undefined) {
+        return true;
+    }
+    const code = (_a = child.bindings._text) === null || _a === void 0 ? void 0 : _a.code;
+    if (code !== undefined && code !== 'props.children') {
+        return true;
+    }
+    return false;
+}
+function isSlotProjection(child) {
+    var _a;
+    return ((_a = child.bindings._text) === null || _a === void 0 ? void 0 : _a.code) === 'props.children';
+}
+/**
+ * Rewrites bindings:
+ * - Remove `css`
+ * - Rewrites event handles
+ * - Extracts symbol bindings.
+ *
+ * @param file
+ * @param handlers
+ * @param bindings
+ * @param symbolBindings Options record which will receive the symbol bindings
+ * @returns
+ */
+function rewriteHandlers(file, handlers, bindings, symbolBindings) {
+    const outBindings = {};
+    for (let key in bindings) {
+        if (Object.prototype.hasOwnProperty.call(bindings, key)) {
+            const bindingValue = bindings[key];
+            let bindingExpr = bindingValue.code;
+            const handlerBlock = handlers.get(bindingExpr);
+            if (key == 'css') {
+                continue;
+            }
+            else if (handlerBlock) {
+                key = `${key}$`;
+                bindingExpr = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
+                    (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
+                    (0, src_generator_1.quote)(handlerBlock),
+                    file.options.isBuilder ? '[s,l]' : '[state]',
+                ]);
+            }
+            else if (symbolBindings && key.startsWith('symbol.data.')) {
+                symbolBindings[(0, src_generator_1.lastProperty)(key)] = bindingExpr;
+            }
+            else if (key.startsWith('component.options.')) {
+                key = (0, src_generator_1.lastProperty)(key);
+            }
+            outBindings[key] = {
+                ...bindingValue,
+                code: bindingExpr,
+            };
+        }
+    }
+    return outBindings;
+}
+function isInlinedDirective(node) {
+    return ((0, is_mitosis_node_1.isMitosisNode)(node) && node.name == 'Show') || node.name == 'For';
+}

package/dist/src/generators/qwik/src-generator.d.ts

@@ -0,0 +1,83 @@
+export interface SrcBuilderOptions {
+    isPretty: boolean;
+    isTypeScript: boolean;
+    isModule: boolean;
+    isJSX: boolean;
+    isBuilder: boolean;
+}
+export type EmitFn = (this: SrcBuilder) => void;
+export declare class File {
+    filename: string;
+    imports: Imports;
+    options: SrcBuilderOptions;
+    src: SrcBuilder;
+    qwikModule: string;
+    qrlPrefix: string;
+    exports: Map<string, string>;
+    get module(): string;
+    get path(): string;
+    get contents(): string;
+    constructor(filename: string, options: SrcBuilderOptions, qwikModule: string, qrlPrefix: string);
+    import(module: string, symbol: string, as?: string): Symbol;
+    toQrlChunk(): string;
+    exportConst(name: string, value?: any, locallyVisible?: boolean): void;
+    exportDefault(symbolName: any): void;
+    toString(): string;
+}
+export declare class SrcBuilder {
+    file: File;
+    isTypeScript: boolean;
+    isModule: boolean;
+    isJSX: boolean;
+    buf: string[];
+    jsxDepth: number;
+    /**
+     * Used to signal that we are generating code for Builder.
+     *
+     * In builder the `<For/>` iteration places the value on the state.
+     */
+    isBuilder: any;
+    constructor(file: File, options: SrcBuilderOptions);
+    import(module: string, symbols: Symbol[]): this;
+    emit(...values: any[]): this;
+    private push;
+    emitList(values: any[], sep?: string): this;
+    const(name: string, value?: any, export_?: boolean, locallyVisible?: boolean): this;
+    type(def: string): this;
+    typeParameters(typeParameters: string[] | undefined): void;
+    jsxExpression(expression: EmitFn): void;
+    jsxBegin(symbol: Symbol | string, props: Record<string, any>, bindings: Record<string, any>): void;
+    isSelfClosingTag(symbol: Symbol | string): boolean;
+    jsxEnd(symbol: Symbol | string): void;
+    jsxBeginFragment(symbol: Symbol): void;
+    jsxEndFragment(): void;
+    jsxTextBinding(exp: string): void;
+    toString(): string;
+}
+export declare class Symbol {
+    importName: string;
+    localName: string;
+    constructor(importName: string, localName: string);
+}
+export declare class Imports {
+    imports: Map<string, Map<string, Symbol>>;
+    get(moduleName: string, symbolName: string, asVar?: string): Symbol;
+    hasImport(localName: string): boolean;
+}
+export declare function quote(text: string): string;
+export declare function invoke(symbol: Symbol | string, args: any[], typeParameters?: string[]): (this: SrcBuilder) => void;
+export declare function arrowFnBlock(args: string[], statements: any[], argTypes?: string[]): (this: SrcBuilder) => void;
+export declare function arrowFnValue(args: string[], expression: any): (this: SrcBuilder) => void;
+export declare function iif(code: any): ((this: SrcBuilder) => void) | undefined;
+/**
+ * Returns `true` if the code is a statement (rather than expression).
+ *
+ * Code is an expression if it is a list of identifiers all connected with a valid separator
+ * identifier: [a-z_$](a-z0-9_$)*
+ * separator: [()[]{}.-+/*,]
+ *
+ * it is not 100% but a good enough approximation
+ */
+export declare function isStatement(code: string): boolean;
+export declare function lastProperty(expr: string): string;
+export declare function iteratorProperty(expr: string): string;