@builder.io/mitosis 0.0.0-dev-20260605060721

package/dist/src/generators/qwik/component-generator.js

@@ -0,0 +1,337 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentToQwik = void 0;
+const babel_transform_1 = require("../../helpers/babel-transform");
+const fast_clone_1 = require("../../helpers/fast-clone");
+const merge_options_1 = require("../../helpers/merge-options");
+const on_event_1 = require("../../helpers/on-event");
+const process_code_1 = require("../../helpers/plugins/process-code");
+const render_imports_1 = require("../../helpers/render-imports");
+const replace_identifiers_1 = require("../../helpers/replace-identifiers");
+const state_1 = require("../../helpers/state");
+const collect_css_1 = require("../../helpers/styles/collect-css");
+const standalone_1 = require("prettier/standalone");
+const plugins_1 = require("../../modules/plugins");
+const add_prevent_default_1 = require("./helpers/add-prevent-default");
+const stable_inject_1 = require("./helpers/stable-inject");
+const state_2 = require("./helpers/state");
+const jsx_1 = require("./jsx");
+const src_generator_1 = require("./src-generator");
+Error.stackTraceLimit = 9999;
+const DEBUG = false;
+const PLUGINS = [
+    () => ({
+        json: {
+            post: (json) => {
+                (0, add_prevent_default_1.addPreventDefault)(json);
+                return json;
+            },
+        },
+    }),
+    (0, on_event_1.processOnEventHooksPlugin)({ setBindings: false, includeRootEvents: false }),
+    (0, process_code_1.CODE_PROCESSOR_PLUGIN)((codeType, json) => {
+        switch (codeType) {
+            case 'types':
+                return (c) => c;
+            case 'bindings':
+            case 'state':
+            case 'context-set':
+            case 'hooks':
+            case 'hooks-deps':
+            case 'hooks-deps-array':
+            case 'properties':
+            case 'dynamic-jsx-elements':
+                // update signal getters to have `.value`
+                return (code, k) => {
+                    // `ref` should not update the signal value access
+                    if (k === 'ref') {
+                        return code;
+                    }
+                    Object.keys(json.refs).forEach((ref) => {
+                        code = (0, replace_identifiers_1.replaceIdentifiers)({
+                            code,
+                            from: ref,
+                            to: (x) => (x === ref ? `${x}.value` : `${ref}.value.${x}`),
+                        });
+                    });
+                    // update signal getters to have `.value`
+                    return (0, replace_identifiers_1.replaceStateIdentifier)((name) => {
+                        const state = json.state[name];
+                        switch (state === null || state === void 0 ? void 0 : state.type) {
+                            case 'getter':
+                                return `${name}.value`;
+                            case 'function':
+                            case 'method':
+                            case 'property':
+                            case undefined:
+                                return `state.${name}`;
+                        }
+                    })(code);
+                };
+        }
+    }),
+];
+const DEFAULT_OPTIONS = {
+    plugins: PLUGINS,
+};
+const componentToQwik = (userOptions = {}) => ({ component: _component, path }) => {
+    var _a, _b, _c, _d;
+    // Make a copy we can safely mutate, similar to babel's toolchain
+    let component = (0, fast_clone_1.fastClone)(_component);
+    const options = (0, merge_options_1.initializeOptions)({
+        target: 'qwik',
+        component,
+        defaults: DEFAULT_OPTIONS,
+        userOptions: userOptions,
+    });
+    component = (0, plugins_1.runPreJsonPlugins)({ json: component, plugins: options.plugins });
+    component = (0, plugins_1.runPostJsonPlugins)({ json: component, plugins: options.plugins });
+    const isTypeScript = !!options.typescript;
+    const file = new src_generator_1.File(component.name + (isTypeScript ? '.ts' : '.js'), {
+        isPretty: true,
+        isJSX: true,
+        isTypeScript: isTypeScript,
+        isModule: true,
+        isBuilder: false,
+    }, '@builder.io/qwik', '');
+    try {
+        emitImports(file, component);
+        emitTypes(file, component);
+        emitExports(file, component);
+        const metadata = component.meta.useMetadata;
+        const isLightComponent = ((_b = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.isLight) || false;
+        const mutable = ((_c = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _c === void 0 ? void 0 : _c.mutable) || [];
+        const imports = ((_d = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _d === void 0 ? void 0 : _d.imports) || {};
+        Object.keys(imports).forEach((key) => file.import(imports[key], key));
+        const state = (0, state_2.emitStateMethodsAndRewriteBindings)(file, component, metadata);
+        const hasState = (0, state_1.checkHasState)(component);
+        let css = null;
+        const emitStore = () => { var _a; return hasState && (0, state_2.emitUseStore)({ file, stateInit: state, isDeep: (_a = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _a === void 0 ? void 0 : _a.hasDeepStore }); };
+        const componentFn = (0, src_generator_1.arrowFnBlock)(['props'], [
+            function () {
+                var _a, _b;
+                if ((_a = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _a === void 0 ? void 0 : _a.setUseStoreFirst)
+                    emitStore();
+                css = emitUseStyles(file, component);
+                emitUseComputed(file, component);
+                emitUseContext(file, component);
+                emitUseRef(file, component);
+                if (!((_b = metadata === null || metadata === void 0 ? void 0 : metadata.qwik) === null || _b === void 0 ? void 0 : _b.setUseStoreFirst))
+                    emitStore();
+                emitUseOn(file, component);
+                emitUseContextProvider(file, component);
+                emitUseClientEffect(file, component);
+                emitUseMount(file, component);
+                emitUseTask(file, component);
+                emitJSX(file, component, mutable);
+            },
+        ], [(component.propsTypeRef || 'any') + (isLightComponent ? '&{key?:any}' : '')]);
+        file.src.const(component.name, isLightComponent
+            ? componentFn
+            : (0, src_generator_1.invoke)(file.import(file.qwikModule, 'component$'), [componentFn]), true, true);
+        file.exportDefault(component.name);
+        emitStyles(file, css);
+        DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
+        let sourceFile = file.toString();
+        sourceFile = (0, plugins_1.runPreCodePlugins)({
+            json: component,
+            code: sourceFile,
+            plugins: options.plugins,
+        });
+        sourceFile = (0, plugins_1.runPostCodePlugins)({
+            json: component,
+            code: sourceFile,
+            plugins: options.plugins,
+        });
+        return sourceFile;
+    }
+    catch (e) {
+        console.error(e);
+        throw e;
+    }
+};
+exports.componentToQwik = componentToQwik;
+function emitExports(file, component) {
+    Object.keys(component.exports || {}).forEach((key) => {
+        const exportObj = component.exports[key];
+        const code = exportObj.code.startsWith('export ') ? exportObj.code : `export ${exportObj.code}`;
+        file.src.emit(code);
+    });
+}
+function emitUseClientEffect(file, component) {
+    component.hooks.onMount.forEach((onMount) => {
+        const code = onMount.code;
+        const hookToUse = onMount.onSSR ? 'useTask$' : 'useVisibleTask$';
+        file.src.emit(file.import(file.qwikModule, hookToUse).localName, '(()=>{', code, '});');
+    });
+}
+function emitUseMount(file, component) {
+    if (component.hooks.onInit) {
+        const code = component.hooks.onInit.code;
+        file.src.emit(file.import(file.qwikModule, 'useTask$').localName, '(()=>{', code, '});');
+    }
+}
+function emitUseTask(file, component) {
+    if (component.hooks.onUpdate) {
+        component.hooks.onUpdate.forEach((onUpdate) => {
+            file.src.emit(file.import(file.qwikModule, 'useTask$').localName, '(({track})=>{');
+            emitTrackExpressions(file.src, onUpdate.deps);
+            file.src.emit((0, babel_transform_1.convertTypeScriptToJS)(onUpdate.code));
+            file.src.emit('});');
+        });
+    }
+}
+function emitTrackExpressions(src, deps) {
+    if (!deps) {
+        return;
+    }
+    const dependencies = deps.substring(1, deps.length - 1).split(',');
+    dependencies.forEach((dep) => {
+        src.emit(`track(() => ${dep});`);
+    });
+}
+function emitJSX(file, component, mutable) {
+    const directives = new Map();
+    const handlers = new Map();
+    const styles = new Map();
+    const parentSymbolBindings = {};
+    if (file.options.isPretty) {
+        file.src.emit('\n\n');
+    }
+    file.src.emit('return ', (0, jsx_1.renderJSXNodes)(file, directives, handlers, component.children, styles, null, parentSymbolBindings));
+}
+function emitUseContextProvider(file, component) {
+    Object.entries(component.context.set).forEach(([_ctxKey, context]) => {
+        file.src.emit(`${file.import(file.qwikModule, 'useContextProvider').localName}(${context.name}, `);
+        if (context.ref) {
+            file.src.emit(`${context.ref}`);
+        }
+        else {
+            file.src.emit(`${file.import(file.qwikModule, 'useStore').localName}({`);
+            for (const [prop, propValue] of Object.entries(context.value || {})) {
+                file.src.emit(`${prop}: `);
+                switch (propValue === null || propValue === void 0 ? void 0 : propValue.type) {
+                    case 'getter':
+                        file.src.emit(`(()=>{
+            ${extractGetterBody(propValue.code)}
+          })()`);
+                        break;
+                    case 'function':
+                    case 'method':
+                        throw new Error('Qwik: Functions are not supported in context');
+                    case 'property':
+                        file.src.emit((0, stable_inject_1.stableInject)(propValue.code));
+                        break;
+                }
+                file.src.emit(',');
+            }
+            file.src.emit('})');
+        }
+        file.src.emit(');');
+    });
+}
+function emitUseContext(file, component) {
+    Object.keys(component.context.get).forEach((ctxKey) => {
+        const context = component.context.get[ctxKey];
+        file.src.emit('const ', ctxKey, '=', file.import(file.qwikModule, 'useContext').localName, '(', context.name, ');');
+    });
+}
+function emitUseOn(file, component) {
+    component.hooks.onEvent.forEach((hook) => {
+        const eventName = `"${hook.eventName}"`;
+        if (hook.isRoot) {
+            const wrappedHandlerFn = `${file.import(file.qwikModule, '$').localName}((${hook.eventArgName}, ${hook.elementArgName}) => {
+        ${hook.code}
+      }) as Parameters<typeof useOn>[1]`; // this type hack is needed until https://github.com/BuilderIO/qwik/issues/5398 is fixed
+            file.src.emit(file.import(file.qwikModule, 'useOn').localName, `(${eventName}, ${wrappedHandlerFn});`);
+        }
+        else {
+            file.src.emit(file.import(file.qwikModule, 'useVisibleTask$').localName, `(() => {
+          ${hook.refName}.value?.addEventListener(${eventName}, ${(0, on_event_1.getOnEventHandlerName)(hook)});
+          return () => ${hook.refName}.value?.removeEventListener(${eventName}, ${(0, on_event_1.getOnEventHandlerName)(hook)});
+        })  
+        `);
+        }
+    });
+}
+function emitUseRef(file, component) {
+    Object.keys(component.refs).forEach((refKey) => {
+        file.src.emit(`const `, refKey, '=', file.import(file.qwikModule, 'useSignal').localName, `${file.options.isTypeScript ? '<Element>' : ''}();`);
+    });
+}
+function emitUseStyles(file, component) {
+    const css = (0, collect_css_1.collectCss)(component, { prefix: component.name });
+    if (css) {
+        file.src.emit(file.import(file.qwikModule, 'useStylesScoped$').localName, '(STYLES);');
+        if (file.options.isPretty) {
+            file.src.emit('\n\n');
+        }
+    }
+    return css;
+}
+function emitStyles(file, css) {
+    if (!css) {
+        return;
+    }
+    if (file.options.isPretty) {
+        file.src.emit('\n\n');
+        try {
+            css = (0, standalone_1.format)(css, {
+                parser: 'css',
+                plugins: [
+                    // To support running in browsers
+                    require('prettier/parser-postcss'),
+                ],
+            });
+        }
+        catch (e) {
+            throw new Error(e +
+                '\n' +
+                '========================================================================\n' +
+                css +
+                '\n\n========================================================================');
+        }
+    }
+    file.exportConst('STYLES', '`\n' + css.replace(/`/g, '\\`') + '`\n');
+}
+function emitTypes(file, component) {
+    var _a;
+    if (file.options.isTypeScript) {
+        (_a = component.types) === null || _a === void 0 ? void 0 : _a.forEach((t) => file.src.emit(t, '\n'));
+    }
+}
+function emitImports(file, component) {
+    var _a;
+    // <SELF> is used for self-referencing within the file.
+    file.import('<SELF>', component.name);
+    (_a = component.imports) === null || _a === void 0 ? void 0 : _a.forEach((i) => {
+        const importPath = (0, render_imports_1.transformImportPath)({
+            target: 'qwik',
+            theImport: i,
+            preserveFileExtensions: false,
+            explicitImportFileExtension: false,
+        });
+        Object.keys(i.imports).forEach((key) => {
+            const keyValue = i.imports[key];
+            file.import(importPath, keyValue, key);
+        });
+    });
+}
+function extractGetterBody(code) {
+    const start = code.indexOf('{');
+    const end = code.lastIndexOf('}');
+    return code.substring(start + 1, end).trim();
+}
+function emitUseComputed(file, component) {
+    for (const [key, stateValue] of Object.entries(component.state)) {
+        switch (stateValue === null || stateValue === void 0 ? void 0 : stateValue.type) {
+            case 'getter':
+                file.src.const(`
+          ${key} = ${file.import(file.qwikModule, 'useComputed$').localName}(() => {
+            ${extractGetterBody(stateValue.code)}
+          })
+        `);
+                continue;
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { File, SrcBuilder } from './src-generator';
+export type QwikOptions = {
+    qwikLib?: string;
+    qrlPrefix?: string;
+    output?: 'ts' | 'cjs' | 'mjs';
+    jsx?: boolean;
+    minify?: boolean;
+};
+export interface FileSet {
+    high: File;
+    med: File;
+    low: File;
+}
+export declare function createFileSet(options?: QwikOptions): FileSet;
+export declare function addComponent(fileSet: FileSet, component: MitosisComponent, opts?: {
+    isRoot?: boolean;
+    shareStyles?: boolean;
+}): void;
+export declare function renderUseLexicalScope(file: File): (this: SrcBuilder) => SrcBuilder;
+export declare function addCommonStyles(fileSet: FileSet): void;

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

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCommonStyles = exports.renderUseLexicalScope = exports.addComponent = exports.createFileSet = void 0;
+const compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
+const on_mount_1 = require("../helpers/on-mount");
+const directives_1 = require("./directives");
+const handlers_1 = require("./helpers/handlers");
+const stable_serialize_1 = require("./helpers/stable-serialize");
+const styles_1 = require("./helpers/styles");
+const jsx_1 = require("./jsx");
+const src_generator_1 = require("./src-generator");
+function createFileSet(options = {}) {
+    const opts = {
+        qwikLib: '@builder.io/qwik',
+        qrlPrefix: './',
+        output: 'ts',
+        minify: false,
+        jsx: true,
+        ...options,
+    };
+    const extension = (opts.output == 'mjs' ? 'js' : opts.output) + (opts.jsx ? 'x' : '');
+    const srcOptions = {
+        isPretty: !opts.minify,
+        isModule: opts.output != 'cjs',
+        isTypeScript: opts.output == 'ts',
+        isJSX: opts.jsx,
+        isBuilder: true,
+    };
+    const fileSet = {
+        high: new src_generator_1.File('high.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
+        med: new src_generator_1.File('med.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
+        low: new src_generator_1.File('low.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
+    };
+    Object.defineProperty(fileSet, 'CommonStyles', {
+        enumerable: false,
+        value: { styles: new Map(), symbolName: null },
+    });
+    return fileSet;
+}
+exports.createFileSet = createFileSet;
+function getCommonStyles(fileSet) {
+    return fileSet['CommonStyles'];
+}
+function addComponent(fileSet, component, opts = {}) {
+    const _opts = { isRoot: false, shareStyles: false, ...opts };
+    (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, {
+        ...compile_away_builder_components_1.components,
+        // A set of components that should not be compiled away because they are implemented as runtime components.
+        Image: undefined,
+        CoreButton: undefined,
+    });
+    addBuilderBlockClass(component.children);
+    const componentName = component.name;
+    const handlers = (0, handlers_1.renderHandlers)(fileSet.high, componentName, component.children);
+    // If the component has no handlers, than it is probably static
+    // and so it is unlikely to be re-rendered on the client, therefore
+    // put it in a low priority bucket.
+    const isStatic = Array.from(handlers.keys()).reduce((p, v) => p && v.indexOf('state') == -1, true);
+    const onRenderFile = isStatic ? fileSet.low : fileSet.med;
+    const componentFile = fileSet.med;
+    const styles = _opts.shareStyles ? getCommonStyles(fileSet).styles : new Map();
+    (0, styles_1.collectStyles)(component.children, styles);
+    let useStyles = () => null;
+    if (styles.size) {
+        if (_opts.shareStyles) {
+            if (_opts.isRoot) {
+                const symbolName = componentName + 'Styles';
+                getCommonStyles(fileSet).symbolName = symbolName;
+                useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
+            }
+        }
+        else {
+            const symbolName = componentName + 'Styles';
+            onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
+            useStyles = generateStyles(onRenderFile, onRenderFile, symbolName, true);
+        }
+    }
+    if (component.meta.cssCode) {
+        const symbolName = componentName + 'UsrStyles';
+        onRenderFile.exportConst(symbolName, (0, stable_serialize_1.stableJSONserialize)(component.meta.cssCode));
+        useStyles = ((fns) => function () {
+            fns.forEach((fn) => fn.apply(this));
+        })([useStyles, generateStyles(onRenderFile, onRenderFile, symbolName, false)]);
+    }
+    const directives = new Map();
+    let rootChildren = component.children;
+    addComponentOnMount(onRenderFile, function () {
+        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, rootChildren, styles, null, {}), ';');
+    }, componentName, component, useStyles);
+    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, onRenderFile, componentName + 'OnMount')], ['any', 'any']));
+    directives.forEach((code, name) => {
+        fileSet.med.import(fileSet.med.qwikModule, 'h');
+        fileSet.med.exportConst(name, code, true);
+    });
+    fileSet.low.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
+    fileSet.med.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
+    fileSet.high.exportConst('__proxyMerge__', directives_1.DIRECTIVES['__proxyMerge__'], true);
+}
+exports.addComponent = addComponent;
+function generateStyles(fromFile, dstFile, symbol, scoped) {
+    return function () {
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
+        this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'useStylesScopedQrl' : 'useStylesQrl'), [
+            generateQrl(fromFile, dstFile, symbol),
+        ]), ';');
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
+    };
+}
+function addBuilderBlockClass(children) {
+    children.forEach((child) => {
+        const props = child.properties;
+        if (props['builder-id']) {
+            props.class = (props.class ? props.class + ' ' : '') + 'builder-block';
+        }
+    });
+}
+function renderUseLexicalScope(file) {
+    return function () {
+        if (this.file.options.isBuilder) {
+            return this.emit('const [s,l]=', file.import(file.qwikModule, 'useLexicalScope').localName, '();', 'const state=__proxyMerge__(s,l);');
+        }
+        else {
+            return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
+        }
+    };
+}
+exports.renderUseLexicalScope = renderUseLexicalScope;
+function addCommonStyles(fileSet) {
+    const { styles, symbolName } = getCommonStyles(fileSet);
+    const onRenderFile = fileSet.low;
+    if (symbolName) {
+        onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
+    }
+}
+exports.addCommonStyles = addCommonStyles;
+function addComponentOnMount(componentFile, onRenderEmit, componentName, component, useStyles) {
+    const inputInitializer = [];
+    if (component.inputs) {
+        component.inputs.forEach((input) => {
+            input.defaultValue !== undefined &&
+                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', (0, stable_serialize_1.stableJSONserialize)(input.defaultValue), ';');
+        });
+    }
+    componentFile.exportConst(componentName + 'OnMount', function () {
+        this.emit((0, src_generator_1.arrowFnValue)(['p'], () => this.emit('{', 'const s=', componentFile.import(componentFile.qwikModule, 'useStore').localName, '(()=>{', 'const state=Object.assign({},structuredClone(typeof __STATE__==="object"&&__STATE__[p.serverStateId]),p);', ...inputInitializer, inlineCode((0, on_mount_1.stringifySingleScopeOnMount)(component)), 'return state;', '},{deep:true});', 'const l={};', 'const state=__proxyMerge__(s,l);', useStyles, onRenderEmit, ';}')));
+    });
+}
+function inlineCode(code) {
+    return function () {
+        if (code) {
+            // HACK: remove the return value as it is not the state we are creating.
+            code = code
+                .trim()
+                .replace(/return main\(\);?$/, '')
+                .trim();
+            this.emit(code, ';');
+        }
+    };
+}
+function generateQrl(fromFile, dstFile, componentName, capture = []) {
+    return (0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, 'qrl'), [
+        dstFile.toQrlChunk(),
+        (0, src_generator_1.quote)(componentName),
+        `[${capture.join(',')}]`,
+    ]);
+}

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

@@ -0,0 +1,24 @@
+import { MitosisNode } from '../../types/mitosis-node';
+export declare const DIRECTIVES: Record<string, string | ((node: MitosisNode, blockFn: () => void) => void)>;
+interface ImageProps {
+    altText?: string;
+    image?: string;
+    href?: string;
+    height?: number;
+    width?: number;
+    builderBlock?: any;
+    attributes?: any;
+    sizes?: string;
+    srcsetSizes?: string;
+    srcset?: string;
+    backgroundSize?: string;
+    backgroundPosition?: string;
+    fitContent?: boolean;
+    aspectRatio?: number;
+    lazy?: boolean;
+    class?: string;
+    children?: any[];
+    noWebp?: boolean;
+}
+export declare function Image(props: ImageProps): any;
+export {};