@builder.io/mitosis 0.0.0-dev-20260605060721

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

@@ -0,0 +1,575 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = void 0;
+const parser_typescript_1 = __importDefault(require("prettier/parser-typescript"));
+const standalone_1 = require("prettier/standalone");
+const event_handlers_1 = require("../../helpers/event-handlers");
+const html_tags_1 = require("../../constants/html_tags");
+const builder_1 = require("../../parsers/builder");
+const stable_serialize_1 = require("./helpers/stable-serialize");
+class File {
+    get module() {
+        return this.filename.substr(0, this.filename.lastIndexOf('.'));
+    }
+    get path() {
+        return this.filename;
+    }
+    get contents() {
+        return this.toString();
+    }
+    constructor(filename, options, qwikModule, qrlPrefix) {
+        this.imports = new Imports();
+        this.exports = new Map();
+        this.filename = filename;
+        this.options = options;
+        this.src = new SrcBuilder(this, this.options);
+        this.qwikModule = qwikModule;
+        this.qrlPrefix = qrlPrefix;
+    }
+    import(module, symbol, as) {
+        return this.imports.get(module, symbol, as);
+    }
+    toQrlChunk() {
+        return quote(this.qrlPrefix + this.module + '.js');
+    }
+    exportConst(name, value, locallyVisible = false) {
+        if (this.exports.has(name))
+            return;
+        this.exports.set(name, this.src.isModule ? name : 'exports.' + name);
+        this.src.const(name, value, true, locallyVisible);
+    }
+    exportDefault(symbolName) {
+        if (this.options.isPretty) {
+            this.src.emit('\n\n');
+        }
+        if (this.options.isModule) {
+            this.src.emit('export default ', symbolName, ';');
+        }
+        else {
+            this.src.emit('module.exports=', symbolName, ';');
+        }
+    }
+    toString() {
+        const srcImports = new SrcBuilder(this, this.options);
+        const imports = this.imports.imports;
+        const modules = Array.from(imports.keys()).sort();
+        modules.forEach((module) => {
+            if (module == '<SELF>')
+                return;
+            const symbolMap = imports.get(module);
+            const symbols = Array.from(symbolMap.values());
+            symbols.sort(symbolSort);
+            if (removeExt(module) !== removeExt(this.qrlPrefix + this.filename)) {
+                srcImports.import(module, symbols);
+            }
+        });
+        let source = srcImports.toString() + this.src.toString();
+        if (this.options.isPretty) {
+            try {
+                source = (0, standalone_1.format)(source, {
+                    parser: 'typescript',
+                    plugins: [
+                        'prettier/parser-postcss',
+                        parser_typescript_1.default,
+                        'prettier-plugin-organize-imports',
+                    ],
+                    htmlWhitespaceSensitivity: 'ignore',
+                });
+            }
+            catch (e) {
+                throw new Error(e +
+                    '\n' +
+                    '========================================================================\n' +
+                    source +
+                    '\n\n========================================================================');
+            }
+        }
+        return source;
+    }
+}
+exports.File = File;
+function symbolSort(a, b) {
+    return a.importName < b.importName ? -1 : a.importName === b.importName ? 0 : 1;
+}
+function removeExt(filename) {
+    const indx = filename.lastIndexOf('.');
+    return indx == -1 ? filename : filename.substr(0, indx);
+}
+class SrcBuilder {
+    constructor(file, options) {
+        this.buf = [];
+        this.jsxDepth = 0;
+        /**
+         * Used to signal that we are generating code for Builder.
+         *
+         * In builder the `<For/>` iteration places the value on the state.
+         */
+        this.isBuilder = false;
+        this.file = file;
+        this.isTypeScript = options.isTypeScript;
+        this.isModule = options.isModule;
+        this.isJSX = options.isJSX;
+        this.isBuilder = options.isBuilder;
+    }
+    import(module, symbols) {
+        if (this.isModule) {
+            this.emit('import');
+            if (symbols.length === 1 && symbols[0].importName === 'default') {
+                this.emit(' ', symbols[0].localName, ' ');
+            }
+            else {
+                this.emit('{');
+                symbols.forEach((symbol) => {
+                    if (symbol.importName === symbol.localName) {
+                        this.emit(symbol.importName);
+                    }
+                    else {
+                        this.emit(symbol.importName, ' as ', symbol.localName);
+                    }
+                    this.emit(',');
+                });
+                this.emit('}');
+            }
+            this.emit('from', quote(module), ';');
+        }
+        else {
+            symbols.forEach((symbol) => {
+                this.const(symbol.localName, function () {
+                    this.emit(invoke('require', [quote(module)]));
+                    if (symbol.importName !== 'default') {
+                        this.emit('.', symbol.importName);
+                    }
+                });
+            });
+        }
+        if (this.file.options.isPretty) {
+            this.emit('\n\n');
+        }
+        return this;
+    }
+    emit(...values) {
+        for (let i = 0; i < values.length; i++) {
+            const value = values[i];
+            if (typeof value == 'function') {
+                value.call(this);
+            }
+            else if (value === null) {
+                this.push('null');
+            }
+            else if (value === undefined) {
+                this.push('undefined');
+            }
+            else if (typeof value == 'string') {
+                this.push(value);
+            }
+            else if (typeof value == 'number') {
+                this.push(String(value));
+            }
+            else if (typeof value == 'boolean') {
+                this.push(String(value));
+            }
+            else if (Array.isArray(value)) {
+                this.emitList(value);
+            }
+            else if (typeof value == 'object') {
+                this.emit('{');
+                let separator = false;
+                for (const key in value) {
+                    if (Object.prototype.hasOwnProperty.call(value, key)) {
+                        if (separator) {
+                            this.emit(',');
+                        }
+                        this.emit(possiblyQuotePropertyName(key)).emit(':', value[key]);
+                        separator = true;
+                    }
+                }
+                this.emit('}');
+            }
+            else {
+                throw new Error('Unexpected value: ' + value);
+            }
+        }
+        return this;
+    }
+    push(value) {
+        if (value.startsWith(')') ||
+            value.startsWith(':') ||
+            value.startsWith(']') ||
+            value.startsWith('}') ||
+            value.startsWith(',') ||
+            value.startsWith('?')) {
+            // clear last ',' or ';';
+            let index = this.buf.length - 1;
+            let ch = this.buf[index];
+            if (ch.endsWith(',') || ch.endsWith(';')) {
+                ch = ch.substring(0, ch.length - 1);
+                this.buf[index] = ch;
+            }
+        }
+        this.buf.push(value);
+    }
+    emitList(values, sep = ',') {
+        let separator = false;
+        for (const value of values) {
+            if (separator) {
+                this.emit(sep);
+            }
+            this.emit(value);
+            separator = true;
+        }
+        return this;
+    }
+    const(name, value, export_ = false, locallyVisible = false) {
+        if (export_) {
+            this.emit(this.isModule
+                ? 'export const '
+                : (locallyVisible ? 'const ' + name + '=' : '') + 'exports.');
+        }
+        else {
+            this.emit('const ');
+        }
+        this.emit(name);
+        if (value !== undefined) {
+            this.emit('=', value);
+        }
+        this.emit(';');
+        return this;
+    }
+    type(def) {
+        if (this.isTypeScript) {
+            this.emit(':', def);
+        }
+        return this;
+    }
+    typeParameters(typeParameters) {
+        if (this.isTypeScript && typeParameters && typeParameters.length) {
+            this.emit('<', typeParameters, '>');
+        }
+    }
+    jsxExpression(expression) {
+        const previousJsxDepth = this.jsxDepth;
+        try {
+            if (previousJsxDepth) {
+                this.jsxDepth = 0;
+                this.isJSX && this.emit('{');
+            }
+            expression.apply(this);
+        }
+        finally {
+            if (previousJsxDepth) {
+                this.isJSX && this.emit('}');
+            }
+            this.jsxDepth = previousJsxDepth;
+        }
+    }
+    jsxBegin(symbol, props, bindings) {
+        this.jsxDepth++;
+        const self = this;
+        if (symbol == 'div' && ('href' in props || 'href' in bindings)) {
+            // HACK: if we contain href then we are `a` not `div`
+            symbol = 'a';
+        }
+        if (this.isJSX) {
+            this.emit('<' + symbol);
+        }
+        else {
+            this.emit('h(', literalTagName(symbol), ',{');
+        }
+        for (const key in props) {
+            if (Object.prototype.hasOwnProperty.call(props, key) &&
+                !ignoreKey(key) &&
+                !Object.prototype.hasOwnProperty.call(bindings, key)) {
+                emitJsxProp(key, quote(props[key]));
+            }
+        }
+        for (const rawKey in bindings) {
+            if (bindings[rawKey].type === 'spread') {
+                if (this.isJSX) {
+                    this.emit('{...', bindings[rawKey].code, '}');
+                }
+                else {
+                    this.emit('...', bindings[rawKey].code);
+                }
+            }
+            else if (Object.prototype.hasOwnProperty.call(bindings, rawKey) && !ignoreKey(rawKey)) {
+                let binding = bindings[rawKey];
+                binding =
+                    binding && typeof binding == 'object' && 'code' in binding ? binding.code : binding;
+                if (rawKey === 'class' && props.class) {
+                    // special case for classes as they can have both static and dynamic binding
+                    binding = quote(props.class + ' ') + '+' + binding;
+                }
+                let key = lastProperty(rawKey);
+                if (isEvent(key)) {
+                    key = key + '$';
+                    binding = `${this.file.import(this.file.qwikModule, '$').localName}((event)=>${binding})`;
+                }
+                else if (!binding && rawKey in props) {
+                    binding = quote(props[rawKey]);
+                }
+                else if (binding != null && binding === props[key]) {
+                    // HACK: workaround for the fact that sometimes the `bindings` have string literals
+                    // We assume that when the binding content equals prop content.
+                    binding = quote(binding);
+                }
+                else if (typeof binding == 'string' && isStatement(binding)) {
+                    binding = iif(binding);
+                }
+                if (key === 'hide' || key === 'show') {
+                    let [truthy, falsy] = key == 'hide' ? ['"none"', '"inherit"'] : ['"inherit"', '"none"'];
+                    emitJsxProp('style', function () {
+                        this.emit('{display:', binding, '?', truthy, ':', falsy, '}');
+                    });
+                }
+                else {
+                    emitJsxProp(key, binding);
+                }
+            }
+        }
+        if (this.isJSX) {
+            if (!this.isSelfClosingTag(symbol)) {
+                this.emit('>');
+            }
+        }
+        else {
+            this.emit('},');
+        }
+        function emitJsxProp(key, value) {
+            if (value) {
+                if (key === 'innerHTML')
+                    key = 'dangerouslySetInnerHTML';
+                if (key === 'dataSet')
+                    return; // ignore
+                if (self.isJSX) {
+                    if (key.includes(':') && value === '""') {
+                        self.emit(' ', key);
+                        return;
+                    }
+                    self.emit(' ', key, '=');
+                    if (typeof value == 'string' && value.startsWith('"') && value.endsWith('"')) {
+                        self.emit(value);
+                    }
+                    else {
+                        self.emit('{', value, '}');
+                    }
+                }
+                else {
+                    self.emit(possiblyQuotePropertyName(key), ':', value, ',');
+                }
+            }
+        }
+    }
+    isSelfClosingTag(symbol) {
+        return html_tags_1.SELF_CLOSING_HTML_TAGS.has(String(symbol));
+    }
+    jsxEnd(symbol) {
+        if (this.isJSX) {
+            if (this.isSelfClosingTag(symbol)) {
+                this.emit(' />');
+            }
+            else {
+                this.emit('</', symbol, '>');
+            }
+        }
+        else {
+            this.emit('),');
+        }
+        this.jsxDepth--;
+    }
+    jsxBeginFragment(symbol) {
+        this.jsxDepth++;
+        if (this.isJSX) {
+            this.emit('<>');
+        }
+        else {
+            this.emit('h(', symbol.localName, ',null,');
+        }
+    }
+    jsxEndFragment() {
+        this.jsxDepth--;
+        if (this.isJSX) {
+            this.emit('</>');
+        }
+        else {
+            this.emit(')');
+        }
+    }
+    jsxTextBinding(exp) {
+        if (this.isJSX) {
+            this.emit('{', exp, '}');
+        }
+        else {
+            this.emit(exp);
+        }
+    }
+    toString() {
+        return this.buf.join('');
+    }
+}
+exports.SrcBuilder = SrcBuilder;
+function isEvent(name) {
+    return (0, event_handlers_1.checkIsEvent)(name) && isUppercase(name.charAt(2)) && !name.endsWith('$');
+}
+function isUppercase(ch) {
+    return ch == ch.toUpperCase();
+}
+class Symbol {
+    constructor(importName, localName) {
+        this.importName = importName;
+        this.localName = localName;
+    }
+}
+exports.Symbol = Symbol;
+class Imports {
+    constructor() {
+        this.imports = new Map();
+    }
+    get(moduleName, symbolName, asVar) {
+        let importSymbols = this.imports.get(moduleName);
+        if (!importSymbols) {
+            importSymbols = new Map();
+            this.imports.set(moduleName, importSymbols);
+        }
+        let symbol = importSymbols.get(symbolName);
+        if (!symbol) {
+            symbol = new Symbol(symbolName, asVar || symbolName);
+            importSymbols.set(symbolName, symbol);
+        }
+        return symbol;
+    }
+    hasImport(localName) {
+        for (const symbolMap of Array.from(this.imports.values())) {
+            for (const symbol of Array.from(symbolMap.values())) {
+                if (symbol.localName === localName) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+}
+exports.Imports = Imports;
+function ignoreKey(key) {
+    return (key.startsWith('$') ||
+        key.startsWith('_') ||
+        key == 'code' ||
+        key == '' ||
+        key.indexOf('.') !== -1);
+}
+function possiblyQuotePropertyName(key) {
+    return /^\w[\w\d]*$/.test(key) ? key : quote(key);
+}
+function quote(text) {
+    const string = (0, stable_serialize_1.stableJSONserialize)(text);
+    // So \u2028 is a line separator character and prettier treats it as such
+    // https://www.fileformat.info/info/unicode/char/2028/index.htm
+    // That means it can't be inside of a string, so we replace it with `\\u2028`.
+    // (see double `\\` vs `\`)
+    const parts = string.split('\u2028');
+    return parts.join('\\u2028');
+}
+exports.quote = quote;
+function invoke(symbol, args, typeParameters) {
+    return function () {
+        this.emit(typeof symbol == 'string' ? symbol : symbol.localName);
+        this.typeParameters(typeParameters);
+        this.emit('(', args, ')');
+    };
+}
+exports.invoke = invoke;
+function arrowFnBlock(args, statements, argTypes) {
+    return function () {
+        this.emit('(');
+        for (let i = 0; i < args.length; i++) {
+            const arg = args[i];
+            const type = argTypes && argTypes[i];
+            this.emit(arg);
+            if (type && this.file.options.isTypeScript) {
+                this.emit(':', type);
+            }
+            this.emit(',');
+        }
+        this.emit(')=>{').emitList(statements, ';').emit('}');
+    };
+}
+exports.arrowFnBlock = arrowFnBlock;
+function arrowFnValue(args, expression) {
+    return function () {
+        this.emit('(', args, ')=>', expression);
+    };
+}
+exports.arrowFnValue = arrowFnValue;
+const _virtual_index = '_virtual_index;';
+const return_virtual_index = 'return _virtual_index;';
+function iif(code) {
+    if (!code)
+        return;
+    code = code.trim();
+    if (code.endsWith(_virtual_index) && !code.endsWith(return_virtual_index)) {
+        code = code.substr(0, code.length - _virtual_index.length) + return_virtual_index;
+    }
+    if (code.indexOf('export') !== -1) {
+        code = (0, builder_1.convertExportDefaultToReturn)(code);
+    }
+    return function () {
+        code && this.emit('(()=>{', code, '})()');
+    };
+}
+exports.iif = iif;
+const LOWER_CASE = 'a'.charCodeAt(0) - 1;
+function literalTagName(symbol) {
+    if (typeof symbol == 'string' &&
+        symbol.charCodeAt(0) > LOWER_CASE &&
+        symbol.indexOf('.') === -1) {
+        return quote(symbol);
+    }
+    return symbol;
+}
+/**
+ * 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
+ */
+function isStatement(code) {
+    // remove trailing `!` as it is used to mark a non-null assertion in TS
+    // it messes up the logic afterwards
+    if (code.endsWith('!')) {
+        code = code.substr(0, code.length - 1);
+    }
+    code = code.trim();
+    if ((code.startsWith('(') && code.endsWith(')')) ||
+        (code.startsWith('{') && code.endsWith('}'))) {
+        // Code starting with `(` is most likely an IFF and hence is an expression.
+        return false;
+    }
+    const codeNoStrings = code.replace(STRING_LITERAL, 'STRING_LITERAL');
+    const identifiers = codeNoStrings.split(EXPRESSION_SEPARATORS);
+    const filteredIdentifiers = identifiers.filter((i) => {
+        i = i.trim();
+        return i && !i.match(EXPRESSION_IDENTIFIER);
+    });
+    return filteredIdentifiers.length !== 0;
+}
+exports.isStatement = isStatement;
+// https://regexr.com/6cppf
+const STRING_LITERAL = /(["'`])((\\{2})*|((\n|.)*?[^\\](\\{2})*))\1/g;
+// https://regexr.com/6cpk4
+const EXPRESSION_SEPARATORS = /[()\[\]{}.\?:\-+/*,|&]+/;
+// https://regexr.com/6cpka
+const EXPRESSION_IDENTIFIER = /^\s*[a-zA-Z0-9_$]+\s*$/;
+function lastProperty(expr) {
+    const parts = expr.split('.');
+    return parts[parts.length - 1];
+}
+exports.lastProperty = lastProperty;
+function iteratorProperty(expr) {
+    return lastProperty(expr) + 'Item';
+}
+exports.iteratorProperty = iteratorProperty;

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

@@ -0,0 +1,14 @@
+import { Dictionary } from '../../helpers/typescript';
+import { BaseTranspilerOptions } from '../../types/transpiler';
+export interface ToQwikOptions extends BaseTranspilerOptions {
+}
+export type QwikMetadata = {
+    component?: {
+        isLight?: boolean;
+    };
+    setUseStoreFirst?: boolean;
+    hasDeepStore?: boolean;
+    mutable?: string[];
+    imports?: Dictionary<string>;
+    replace?: Record<string, string>;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/generators/react/blocks.d.ts

@@ -0,0 +1,4 @@
+import { MitosisComponent } from '../../types/mitosis-component';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToReactOptions } from './types';
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, component: MitosisComponent, insideJsx: boolean, parentSlots?: any[]) => string;