@builder.io/mitosis 0.0.56-1 → 0.0.56-101

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

@@ -8,7 +8,7 @@ var File = /** @class */ (function () {
         this.exports = new Map();
         this.filename = filename;
         this.options = options;
-        this.src = new SrcBuilder(this.options);
+        this.src = new SrcBuilder(this, this.options);
         this.qwikModule = qwikModule;
         this.qrlPrefix = qrlPrefix;
     }
@@ -33,8 +33,8 @@ var File = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    File.prototype.import = function (module, symbol) {
-        return this.imports.get(module, symbol);
+    File.prototype.import = function (module, symbol, as) {
+        return this.imports.get(module, symbol, as);
     };
     File.prototype.toQrlChunk = function () {
         return quote(this.qrlPrefix + this.module + '.js');
@@ -46,58 +46,110 @@ var File = /** @class */ (function () {
         this.exports.set(name, this.src.isModule ? name : 'exports.' + name);
         this.src.const(name, value, true, locallyVisible);
     };
+    File.prototype.exportDefault = function (symbolName) {
+        if (this.options.isModule) {
+            this.src.emit('export default ', symbolName, ';');
+        }
+        else {
+            this.src.emit('module.exports=', symbolName, ';');
+        }
+    };
     File.prototype.toString = function () {
         var _this = this;
-        var srcImports = new SrcBuilder(this.options);
+        var srcImports = new SrcBuilder(this, this.options);
         var imports = this.imports.imports;
         var modules = Array.from(imports.keys()).sort();
         modules.forEach(function (module) {
+            if (module == '<SELF>')
+                return;
             var symbolMap = imports.get(module);
-            var symbols = Array.from(symbolMap.keys()).sort();
+            var symbols = Array.from(symbolMap.values());
+            symbols.sort(symbolSort);
             if (removeExt(module) !== removeExt(_this.qrlPrefix + _this.filename)) {
                 srcImports.import(module, symbols);
             }
         });
         var source = srcImports.toString() + this.src.toString();
         if (this.options.isPretty) {
-            source = (0, standalone_1.format)(source, {
-                parser: 'typescript',
-                plugins: [
-                    // To support running in browsers
-                    require('prettier/parser-typescript'),
-                    require('prettier/parser-postcss'),
-                    require('prettier/parser-html'),
-                    require('prettier/parser-babel'),
-                ],
-                htmlWhitespaceSensitivity: 'ignore',
-            });
+            try {
+                source = (0, standalone_1.format)(source, {
+                    parser: 'typescript',
+                    plugins: [
+                        // To support running in browsers
+                        require('prettier/parser-typescript'),
+                        require('prettier/parser-postcss'),
+                        require('prettier/parser-html'),
+                        require('prettier/parser-babel'),
+                    ],
+                    htmlWhitespaceSensitivity: 'ignore',
+                });
+            }
+            catch (e) {
+                throw new Error(e +
+                    '\n' +
+                    '========================================================================\n' +
+                    source +
+                    '\n\n========================================================================');
+            }
         }
         return source;
     };
     return File;
 }());
 exports.File = File;
+function symbolSort(a, b) {
+    return a.importName < b.importName ? -1 : a.importName === b.importName ? 0 : 1;
+}
 function removeExt(filename) {
     var indx = filename.lastIndexOf('.');
     return indx == -1 ? filename : filename.substr(0, indx);
 }
 var spaces = [''];
 var SrcBuilder = /** @class */ (function () {
-    function SrcBuilder(options) {
+    function SrcBuilder(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;
     }
     SrcBuilder.prototype.import = function (module, symbols) {
         var _this = this;
         if (this.isModule) {
-            this.emit('import{', symbols, '}from', quote(module), ';');
+            this.emit('import');
+            if (symbols.length === 1 && symbols[0].importName === 'default') {
+                this.emit(' ', symbols[0].localName, ' ');
+            }
+            else {
+                this.emit('{');
+                symbols.forEach(function (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(function (symbol) {
-                _this.const(symbol, function () {
-                    this.emit(invoke('require', [quote(module)]), '.', symbol);
+                _this.const(symbol.localName, function () {
+                    this.emit(invoke('require', [quote(module)]));
+                    if (symbol.importName !== 'default') {
+                        this.emit('.', symbol.importName);
+                    }
                 });
             });
         }
@@ -156,6 +208,7 @@ var SrcBuilder = /** @class */ (function () {
             value.startsWith(':') ||
             value.startsWith(']') ||
             value.startsWith('}') ||
+            value.startsWith(',') ||
             value.startsWith('?')) {
             // clear last ',' or ';';
             var index = this.buf.length - 1;
@@ -209,7 +262,24 @@ var SrcBuilder = /** @class */ (function () {
             this.emit('<', typeParameters, '>');
         }
     };
+    SrcBuilder.prototype.jsxExpression = function (expression) {
+        var 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;
+        }
+    };
     SrcBuilder.prototype.jsxBegin = function (symbol, props, bindings) {
+        this.jsxDepth++;
         var self = this;
         if (symbol == 'div' && ('href' in props || 'href' in bindings)) {
             // HACK: if we contain href then we are `a` not `div`
@@ -225,15 +295,35 @@ var SrcBuilder = /** @class */ (function () {
             if (Object.prototype.hasOwnProperty.call(props, key) &&
                 !ignoreKey(key) &&
                 !Object.prototype.hasOwnProperty.call(bindings, key)) {
-                emitJsxProp(possiblyQuotePropertyName(key), quote(props[key]));
+                emitJsxProp(key, quote(props[key]));
             }
         }
         var _loop_1 = function (rawKey) {
-            if (Object.prototype.hasOwnProperty.call(bindings, rawKey) &&
-                !ignoreKey(rawKey)) {
+            if (rawKey === '_spread') {
+                if (this_1.isJSX) {
+                    this_1.emit('{...', bindings[rawKey].code, '}');
+                }
+                else {
+                    this_1.emit('...', bindings[rawKey].code);
+                }
+            }
+            else if (Object.prototype.hasOwnProperty.call(bindings, rawKey) && !ignoreKey(rawKey)) {
                 var binding_1 = bindings[rawKey];
+                binding_1 =
+                    binding_1 && typeof binding_1 == 'object' && 'code' in binding_1 ? binding_1.code : binding_1;
+                if (rawKey === 'class' && props.class) {
+                    // special case for classes as they can have both static and dynamic binding
+                    binding_1 = quote(props.class + ' ') + '+' + binding_1;
+                }
                 var key = lastProperty(rawKey);
-                if (binding_1 === props[key]) {
+                if (isEvent(key)) {
+                    key = key + '$';
+                    binding_1 = "(event)=>".concat(binding_1);
+                }
+                if (!binding_1 && rawKey in props) {
+                    binding_1 = quote(props[rawKey]);
+                }
+                else if (binding_1 != null && binding_1 === 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_1 = quote(binding_1);
@@ -248,10 +338,11 @@ var SrcBuilder = /** @class */ (function () {
                     });
                 }
                 else {
-                    emitJsxProp(possiblyQuotePropertyName(key), binding_1);
+                    emitJsxProp(key, binding_1);
                 }
             }
         };
+        var this_1 = this;
         for (var rawKey in bindings) {
             _loop_1(rawKey);
         }
@@ -262,18 +353,22 @@ var SrcBuilder = /** @class */ (function () {
             this.emit('},');
         }
         function emitJsxProp(key, value) {
-            if (self.isJSX) {
-                self.emit(' ', key, '=');
-                if (typeof value == 'string' && value.startsWith('"')) {
-                    self.emit(value);
+            if (value) {
+                if (key === 'innerHTML')
+                    key = 'dangerouslySetInnerHTML';
+                if (self.isJSX) {
+                    self.emit(' ', key, '=');
+                    if (typeof value == 'string' && value.startsWith('"') && value.endsWith('"')) {
+                        self.emit(value);
+                    }
+                    else {
+                        self.emit('{', value, '}');
+                    }
                 }
                 else {
-                    self.emit('{', value, '}');
+                    self.emit(possiblyQuotePropertyName(key), ':', value, ',');
                 }
             }
-            else {
-                self.emit(key, ':', value, ',');
-            }
         }
     };
     SrcBuilder.prototype.jsxEnd = function (symbol) {
@@ -283,16 +378,19 @@ var SrcBuilder = /** @class */ (function () {
         else {
             this.emit('),');
         }
+        this.jsxDepth--;
     };
     SrcBuilder.prototype.jsxBeginFragment = function (symbol) {
+        this.jsxDepth++;
         if (this.isJSX) {
             this.emit('<>');
         }
         else {
-            this.emit('h(', symbol.name, ',null,');
+            this.emit('h(', symbol.localName, ',null,');
         }
     };
     SrcBuilder.prototype.jsxEndFragment = function () {
+        this.jsxDepth--;
         if (this.isJSX) {
             this.emit('</>');
         }
@@ -314,9 +412,16 @@ var SrcBuilder = /** @class */ (function () {
     return SrcBuilder;
 }());
 exports.SrcBuilder = SrcBuilder;
+function isEvent(name) {
+    return name.startsWith('on') && isUppercase(name.charAt(2)) && !name.endsWith('$');
+}
+function isUppercase(ch) {
+    return ch == ch.toUpperCase();
+}
 var Symbol = /** @class */ (function () {
-    function Symbol(name) {
-        this.name = name;
+    function Symbol(importName, localName) {
+        this.importName = importName;
+        this.localName = localName;
     }
     return Symbol;
 }());
@@ -325,7 +430,7 @@ var Imports = /** @class */ (function () {
     function Imports() {
         this.imports = new Map();
     }
-    Imports.prototype.get = function (moduleName, symbolName) {
+    Imports.prototype.get = function (moduleName, symbolName, as) {
         var importSymbols = this.imports.get(moduleName);
         if (!importSymbols) {
             importSymbols = new Map();
@@ -333,11 +438,23 @@ var Imports = /** @class */ (function () {
         }
         var symbol = importSymbols.get(symbolName);
         if (!symbol) {
-            symbol = new Symbol(symbolName);
+            symbol = new Symbol(symbolName, as || symbolName);
             importSymbols.set(symbolName, symbol);
         }
         return symbol;
     };
+    Imports.prototype.hasImport = function (localName) {
+        for (var _i = 0, _a = Array.from(this.imports.values()); _i < _a.length; _i++) {
+            var symbolMap = _a[_i];
+            for (var _b = 0, _c = Array.from(symbolMap.values()); _b < _c.length; _b++) {
+                var symbol = _c[_b];
+                if (symbol.localName === localName) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
     return Imports;
 }());
 exports.Imports = Imports;
@@ -346,7 +463,6 @@ function ignoreKey(key) {
         key.startsWith('_') ||
         key == 'code' ||
         key == '' ||
-        key == 'builder-id' ||
         key.indexOf('.') !== -1);
 }
 var Block = /** @class */ (function () {
@@ -371,15 +487,25 @@ function quote(text) {
 exports.quote = quote;
 function invoke(symbol, args, typeParameters) {
     return function () {
-        this.emit(typeof symbol == 'string' ? symbol : symbol.name);
+        this.emit(typeof symbol == 'string' ? symbol : symbol.localName);
         this.typeParameters(typeParameters);
         this.emit('(', args, ')');
     };
 }
 exports.invoke = invoke;
-function arrowFnBlock(args, statements) {
+function arrowFnBlock(args, statements, argTypes) {
     return function () {
-        this.emit('(', args, ')=>{').emitList(statements, ';').emit('}');
+        this.emit('(');
+        for (var i = 0; i < args.length; i++) {
+            var arg = args[i];
+            var 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;
@@ -389,7 +515,15 @@ function arrowFnValue(args, expression) {
     };
 }
 exports.arrowFnValue = arrowFnValue;
+var _virtual_index = '_virtual_index;';
+var 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;
+    }
     return function () {
         code && this.emit('(()=>{', code, '})()');
     };
@@ -431,7 +565,7 @@ exports.isStatement = isStatement;
 // https://regexr.com/6cppf
 var STRING_LITERAL = /(["'`])((\\{2})*|((\n|.)*?[^\\](\\{2})*))\1/g;
 // https://regexr.com/6cpk4
-var EXPRESSION_SEPARATORS = /[()\[\]{}.\?:\-+/*,]+/;
+var EXPRESSION_SEPARATORS = /[()\[\]{}.\?:\-+/*,|&]+/;
 // https://regexr.com/6cpka
 var EXPRESSION_IDENTIFIER = /^\s*[a-zA-Z0-9_$]+\s*$/;
 function lastProperty(expr) {

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

@@ -27,11 +27,12 @@ exports.renderStyles = exports.collectStyles = void 0;
 var json5_1 = __importDefault(require("json5"));
 var dash_case_1 = require("../../helpers/dash-case");
 function collectStyles(children, styleMap) {
+    var _a;
     var nodes = __spreadArray([], children, true);
     while (nodes.length) {
         var child = nodes.shift();
         nodes.push.apply(nodes, child.children);
-        var css = child.bindings.css;
+        var css = (_a = child.bindings.css) === null || _a === void 0 ? void 0 : _a.code;
         if (css && typeof css == 'string') {
             var value = __assign({ CLASS_NAME: 'c' + hashCode(css) }, json5_1.default.parse(css));
             styleMap.set(css, value);
@@ -59,8 +60,7 @@ function renderStyles(styles) {
         styles.forEach(function (styles) {
             _this.emit('.', styles.CLASS_NAME, /*'.🏷️�', WS,*/ '{');
             for (var key in styles) {
-                if (key !== 'CLASS_NAME' &&
-                    Object.prototype.hasOwnProperty.call(styles, key)) {
+                if (key !== 'CLASS_NAME' && Object.prototype.hasOwnProperty.call(styles, key)) {
                     var value = styles[key];
                     if (value && typeof value == 'object') {
                         mediaStyles.push(styles.CLASS_NAME, key, value);

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

@@ -0,0 +1,6 @@
+import { Transpiler } from '../../types/transpiler';
+import { MitosisNode } from '../../types/mitosis-node';
+import { ToReactOptions } from './types';
+export declare const blockToReact: (json: MitosisNode, options: ToReactOptions, parentSlots?: any[]) => string;
+export declare const componentToPreact: (reactOptions?: ToReactOptions) => Transpiler;
+export declare const componentToReact: (reactOptions?: ToReactOptions) => Transpiler;