@builder.io/mitosis 0.0.46 → 0.0.49

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

@@ -1,24 +1,104 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DIRECTIVES = void 0;
+exports.CoreButton = exports.Image = exports.DIRECTIVES = void 0;
+var minify_1 = require("../minify");
 var src_generator_1 = require("./src-generator");
 exports.DIRECTIVES = {
     Show: function (node, blockFn) {
         return function () {
             var expr = node.bindings.when;
-            if (this.isJSX) {
-                this.emit('{', src_generator_1.WS, src_generator_1.INDENT, expr, src_generator_1.WS, '?', src_generator_1.NL);
-            }
-            else {
-                this.emit(expr, src_generator_1.WS, '?', src_generator_1.INDENT, src_generator_1.NL);
-            }
+            this.isJSX && this.emit('{', src_generator_1.WS);
+            this.emit(expr, src_generator_1.WS, '?', src_generator_1.INDENT, src_generator_1.NL);
+            blockFn();
+            this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL);
+            this.isJSX && this.emit('}', src_generator_1.NL);
+        };
+    },
+    For: function (node, blockFn) {
+        return function () {
+            var expr = node.bindings.each;
+            this.isJSX && this.emit('{', src_generator_1.WS);
+            this.emit('(', expr, src_generator_1.WS, '||', src_generator_1.WS, '[])');
+            this.emit('.map(', '(function(__value__)', src_generator_1.WS, '{', src_generator_1.INDENT, src_generator_1.NL);
+            this.emit('var state', src_generator_1.WS, '=', src_generator_1.WS, 'Object.assign({},', src_generator_1.WS, 'this,', src_generator_1.WS, '{', (0, src_generator_1.iteratorProperty)(expr), ':', src_generator_1.WS, '__value__', src_generator_1.WS, '==', src_generator_1.WS, 'null', src_generator_1.WS, '?', src_generator_1.WS, '{}', src_generator_1.WS, ':', src_generator_1.WS, '__value__', '});', src_generator_1.NL);
+            this.emit('return', src_generator_1.WS, '(');
             blockFn();
-            if (this.isJSX) {
-                this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL, '}', src_generator_1.NL);
-            }
-            else {
-                this.emit(':', src_generator_1.WS, 'null', src_generator_1.UNINDENT, src_generator_1.NL);
-            }
+            this.emit(')', ';', src_generator_1.UNINDENT, src_generator_1.NL);
+            this.emit('}', ').bind(state))', src_generator_1.NL);
+            this.isJSX && this.emit('}', src_generator_1.NL);
         };
     },
+    Image: (0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), Image),
+    CoreButton: (0, minify_1.minify)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), CoreButton),
 };
+function Image(props) {
+    var jsx = props.children || [];
+    var image = props.image;
+    if (image) {
+        var isBuilderIoImage = !!(image || '').match(/builder\.io/);
+        var imgProps = {
+            src: props.image,
+            style: "object-fit:".concat(props.backgroundSize ||
+                'cover', ";object-position:").concat(props.backgroundPosition || 'center', ";") +
+                (props.aspectRatio
+                    ? 'position:absolute;height:100%;width:100%;top:0;left:0'
+                    : ''),
+            sizes: props.sizes,
+            alt: props.altText,
+            loading: props.lazy ? 'lazy' : undefined,
+            srcset: undefined,
+        };
+        var sizingDiv = h('div', {
+            class: 'builder-image-sizer',
+            style: "width:100%;padding-top:".concat((props.aspectRatio || 1) *
+                100, "%;pointer-events:none;font-size:0"),
+        });
+        if (isBuilderIoImage) {
+            var srcset = ['100', '200', '400', '800', '1200', '1600', '2000']
+                .map(function (size) {
+                return updateQueryParam(image, 'width', size) + ' ' + size + 'w';
+            })
+                .concat([image])
+                .join(', ');
+            imgProps.srcset = srcset;
+            jsx = jsx = [
+                h('picture', {}, [
+                    h('source', { type: 'image/webp', srcset: srcset }),
+                    h('img', imgProps, jsx),
+                ]),
+                sizingDiv,
+            ];
+        }
+        else {
+            jsx = [h('img', imgProps, jsx), sizingDiv];
+        }
+    }
+    var children = props.children ? [jsx].concat(props.children) : [jsx];
+    return h(props.href ? 'a' : 'div', { href: props.href, class: props.class }, children);
+    function updateQueryParam(uri, key, value) {
+        if (uri === void 0) { uri = ''; }
+        var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
+        var separator = uri.indexOf('?') !== -1 ? '&' : '?';
+        if (uri.match(re)) {
+            return uri.replace(re, '$1' + key + '=' + encodeURIComponent(value) + '$2');
+        }
+        return uri + separator + key + '=' + encodeURIComponent(value);
+    }
+}
+exports.Image = Image;
+function CoreButton(props) {
+    var hasLink = !!props.link;
+    var hProps = {
+        innerHTML: props.text || '',
+        href: props.link,
+        target: props.openInNewTab ? '_blank' : '_self',
+        class: props.class,
+    };
+    return h(hasLink ? 'a' : props.tagName$ || 'span', hProps);
+}
+exports.CoreButton = CoreButton;
+var templateObject_1, templateObject_2;

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

@@ -1,4 +1,4 @@
 import { MitosisNode } from '../../types/mitosis-node';
 import { File } from './src-generator';
 import { CssStyles } from './styles';
-export declare function renderJSXNodes(file: File, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, root?: boolean): any;
+export declare function renderJSXNodes(file: File, directives: Map<string, string>, handlers: Map<string, string>, children: MitosisNode[], styles: Map<string, CssStyles>, parentSymbolBindings: Record<string, string>, root?: boolean): any;

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

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderJSXNodes = void 0;
 var directives_1 = require("./directives");
 var src_generator_1 = require("./src-generator");
-function renderJSXNodes(file, handlers, children, styles, root) {
+function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, root) {
     if (root === void 0) { root = true; }
     return function () {
         var _this = this;
@@ -47,7 +47,7 @@ function renderJSXNodes(file, handlers, children, styles, root) {
                 else {
                     _this.isJSX
                         ? _this.emit(child.properties._text)
-                        : _this.jsxTextBinding((0, src_generator_1.string)(child.properties._text));
+                        : _this.jsxTextBinding((0, src_generator_1.quote)(child.properties._text));
                 }
             }
             else {
@@ -55,10 +55,16 @@ function renderJSXNodes(file, handlers, children, styles, root) {
                 var directive = directives_1.DIRECTIVES[childName];
                 if (typeof directive == 'function') {
                     _this.emit(directive(child, function () {
-                        return renderJSXNodes(file, handlers, child.children, styles, false).call(_this);
+                        return renderJSXNodes(file, directives, handlers, child.children, styles, {}, false).call(_this);
                     }));
                 }
                 else {
+                    if (typeof directive == 'string') {
+                        directives.set(childName, directive);
+                        if (file.module !== 'med') {
+                            file.import('./med.js', childName);
+                        }
+                    }
                     if (isSymbol(childName)) {
                         // TODO(misko): We are hard coding './med.js' which is not right.
                         file.import('./med.js', childName);
@@ -73,8 +79,10 @@ function renderJSXNodes(file, handlers, children, styles, root) {
                         props = __assign({}, props);
                         props.class = addClass(styles.get(css).CLASS_NAME, props.class);
                     }
-                    _this.jsxBegin(childName, props, rewriteHandlers(file, handlers, child.bindings));
-                    renderJSXNodes(file, handlers, child.children, styles, false).call(_this);
+                    var symbolBindings = {};
+                    var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
+                    _this.jsxBegin(childName, props, __assign(__assign({}, bindings), parentSymbolBindings));
+                    renderJSXNodes(file, directives, handlers, child.children, styles, symbolBindings, false).call(_this);
                     _this.jsxEnd(childName);
                 }
             }
@@ -100,7 +108,19 @@ function isEmptyTextNode(child) {
 function isTextNode(child) {
     return (child.properties._text !== undefined || child.bindings._text !== undefined);
 }
-function rewriteHandlers(file, handlers, bindings) {
+/**
+ * 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) {
     var outBindings = {};
     for (var key in bindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
@@ -113,9 +133,12 @@ function rewriteHandlers(file, handlers, bindings) {
                 else if ((handlerBlock = handlers.get(binding))) {
                     key = "on:".concat(key.substr(2).toLowerCase());
                     binding = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qHook'), [
-                        (0, src_generator_1.string)(file.qrlPrefix + 'high#' + handlerBlock),
+                        (0, src_generator_1.quote)(file.qrlPrefix + 'high#' + handlerBlock),
                     ]);
                 }
+                else if (symbolBindings && key.startsWith('symbol.data.')) {
+                    symbolBindings[(0, src_generator_1.lastProperty)(key)] = binding;
+                }
                 outBindings[key] = binding;
             }
         }

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

@@ -40,7 +40,7 @@ export declare class SrcBuilder {
     emit(...values: any[]): this;
     private push;
     emitList(values: any[], sep?: string): this;
-    const(name: string, value?: any, exprt?: boolean): this;
+    const(name: string, value?: any, exprt?: boolean, locallyVisible?: boolean): this;
     type(def: string): this;
     typeParameters(typeParameters: string[] | undefined): void;
     jsxBegin(symbol: Symbol | string, props: Record<string, any>, bindings: Record<string, any>): void;
@@ -62,7 +62,20 @@ export declare class Block {
     imports: Imports;
     constructor(imports: Imports);
 }
-export declare function string(text: string): string;
+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[]): (this: SrcBuilder) => void;
 export declare function arrowFnValue(args: string[], expression: any): (this: SrcBuilder) => void;
+export declare function iif(code: any): (this: SrcBuilder) => void;
+/**
+ * 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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.string = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = exports.UNINDENT = exports.INDENT = exports.NL = exports.RS = exports.WS = void 0;
+exports.iteratorProperty = exports.lastProperty = exports.isStatement = exports.iif = exports.arrowFnValue = exports.arrowFnBlock = exports.invoke = exports.quote = exports.Block = exports.Imports = exports.Symbol = exports.SrcBuilder = exports.File = exports.UNINDENT = exports.INDENT = exports.NL = exports.RS = exports.WS = void 0;
 exports.WS = String.fromCharCode(29);
 exports.RS = ' ';
 exports.NL = '\n';
@@ -41,9 +41,11 @@ var File = /** @class */ (function () {
         return this.imports.get(module, symbol);
     };
     File.prototype.toQrl = function (symbol) {
-        return string(this.qrlPrefix + this.module + '#' + symbol);
+        return quote(this.qrlPrefix + this.module + '#' + symbol);
     };
     File.prototype.exportConst = function (name, value) {
+        if (this.exports.has(name))
+            return;
         this.exports.set(name, this.src.isModule ? name : 'exports.' + name);
         this.src.const(name, value, true);
     };
@@ -84,12 +86,12 @@ var SrcBuilder = /** @class */ (function () {
     SrcBuilder.prototype.import = function (module, symbols) {
         var _this = this;
         if (this.isModule) {
-            this.emit('import', exports.WS, '{', exports.WS, symbols, exports.WS, '}', exports.WS, 'from', exports.WS, string(module), ';', exports.NL);
+            this.emit('import', exports.WS, '{', exports.WS, symbols, exports.WS, '}', exports.WS, 'from', exports.WS, quote(module), ';', exports.NL);
         }
         else {
             symbols.forEach(function (symbol) {
                 _this.const(symbol, function () {
-                    this.emit(invoke('require', [string(module)]), '.', symbol);
+                    this.emit(invoke('require', [quote(module)]), '.', symbol);
                 });
             });
         }
@@ -188,10 +190,13 @@ var SrcBuilder = /** @class */ (function () {
         }
         return this;
     };
-    SrcBuilder.prototype.const = function (name, value, exprt) {
+    SrcBuilder.prototype.const = function (name, value, exprt, locallyVisible) {
         if (exprt === void 0) { exprt = false; }
+        if (locallyVisible === void 0) { locallyVisible = false; }
         if (exprt) {
-            this.emit(this.isModule ? 'export const ' : 'exports.');
+            this.emit(this.isModule
+                ? 'export const '
+                : (locallyVisible ? 'const ' + name + '=' : '') + 'exports.');
         }
         else {
             this.emit('const ');
@@ -215,6 +220,10 @@ var SrcBuilder = /** @class */ (function () {
         }
     };
     SrcBuilder.prototype.jsxBegin = function (symbol, props, bindings) {
+        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);
         }
@@ -223,7 +232,9 @@ var SrcBuilder = /** @class */ (function () {
         }
         var first = true;
         for (var key in props) {
-            if (Object.prototype.hasOwnProperty.call(props, key) && !ignoreKey(key)) {
+            if (Object.prototype.hasOwnProperty.call(props, key) &&
+                !ignoreKey(key) &&
+                !Object.prototype.hasOwnProperty.call(bindings, key)) {
                 if (first) {
                     first = false;
                     this.isJSX && this.emit(exports.RS, exports.INDENT, exports.INDENT);
@@ -233,12 +244,14 @@ var SrcBuilder = /** @class */ (function () {
                 }
                 this.isJSX ? this.emit(key) : this.emit(possiblyQuotePropertyName(key));
                 this.isJSX ? this.emit('=') : this.emit(':', exports.WS);
-                this.emit(string(props[key]));
+                this.emit(quote(props[key]));
             }
         }
-        for (var key in bindings) {
-            if (Object.prototype.hasOwnProperty.call(bindings, key) &&
-                !ignoreKey(key)) {
+        for (var rawKey in bindings) {
+            if (Object.prototype.hasOwnProperty.call(bindings, rawKey) &&
+                !ignoreKey(rawKey)) {
+                var binding = bindings[rawKey];
+                var key = lastProperty(rawKey);
                 if (first) {
                     first = false;
                     this.isJSX && this.emit(exports.RS, exports.INDENT, exports.INDENT);
@@ -248,7 +261,15 @@ var SrcBuilder = /** @class */ (function () {
                 }
                 this.isJSX ? this.emit(key) : this.emit(possiblyQuotePropertyName(key));
                 this.isJSX ? this.emit('={') : this.emit(':', exports.WS);
-                this.emit(bindings[key]);
+                if (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 = JSON.stringify(binding);
+                }
+                else if (typeof binding == 'string' && isStatement(binding)) {
+                    binding = iif(binding);
+                }
+                this.emit(binding);
                 this.isJSX ? this.emit('}') : this.emit();
             }
         }
@@ -332,7 +353,8 @@ function ignoreKey(key) {
         key.startsWith('_') ||
         key == 'code' ||
         key == '' ||
-        key == 'builder-id');
+        key == 'builder-id' ||
+        key.indexOf('.') !== -1);
 }
 var Block = /** @class */ (function () {
     function Block(imports) {
@@ -344,10 +366,10 @@ exports.Block = Block;
 function possiblyQuotePropertyName(key) {
     return /^\w[\w\d]*$/.test(key) ? key : JSON.stringify(key);
 }
-function string(text) {
+function quote(text) {
     return JSON.stringify(text);
 }
-exports.string = string;
+exports.quote = quote;
 function invoke(symbol, args, typeParameters) {
     return function () {
         this.emit(typeof symbol == 'string' ? symbol : symbol.name);
@@ -371,15 +393,59 @@ function arrowFnValue(args, expression) {
     };
 }
 exports.arrowFnValue = arrowFnValue;
+function iif(code) {
+    return function () {
+        this.emit('(()', exports.WS, '=>', exports.WS, '{', exports.WS, exports.NL, code, exports.NL, '}', ')()');
+    };
+}
+exports.iif = iif;
 var LOWER_CASE = 'a'.charCodeAt(0) - 1;
 function literalTagName(symbol) {
     if (typeof symbol == 'string' &&
         symbol.charCodeAt(0) > LOWER_CASE &&
         symbol.indexOf('.') === -1) {
-        return string(symbol);
+        return quote(symbol);
     }
     return symbol;
 }
 function isWhitespace(ch) {
     return ch == '' || ch == exports.RS || ch == exports.NL;
 }
+/**
+ * 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) {
+    if (code.startsWith('(')) {
+        // Code starting with `(` is most likely and IFF and hence is an expression.
+        return false;
+    }
+    var codeNoStrings = code.replace(STRING_LITERAL, 'STRING_LITERAL');
+    var identifiers = codeNoStrings.split(EXPRESSION_SEPARATORS);
+    var filteredIdentifiers = identifiers.filter(function (i) {
+        i = i.trim();
+        return i && !i.match(EXPRESSION_IDENTIFIER);
+    });
+    return filteredIdentifiers.length !== 0;
+}
+exports.isStatement = isStatement;
+// https://regexr.com/6cppf
+var STRING_LITERAL = /(["'`])((\\{2})*|((\n|.)*?[^\\](\\{2})*))\1/g;
+// https://regexr.com/6cpk4
+var EXPRESSION_SEPARATORS = /[()\[\]{}.\?:\-+/*,]+/;
+// https://regexr.com/6cpka
+var EXPRESSION_IDENTIFIER = /^\s*[a-zA-Z0-9_$]+\s*$/;
+function lastProperty(expr) {
+    var 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.d.ts

@@ -0,0 +1,21 @@
+import { Plugin } from '../modules/plugins';
+import { MitosisComponent } from '../types/mitosis-component';
+declare type ToQwikOptions = {
+    prettier?: boolean;
+    plugins?: Plugin[];
+    qwikLib?: string;
+    qrlPrefix?: string;
+    cssNamespace?: string;
+    minifyStyles?: boolean;
+    qrlSuffix?: string;
+    bundle?: boolean;
+    format?: 'builder' | 'default';
+};
+export declare type File = {
+    path: string;
+    contents: string;
+};
+export declare const componentToQwik: (componentJson: MitosisComponent, toQwikOptions?: ToQwikOptions) => Promise<{
+    files: File[];
+}>;
+export {};