@builder.io/mitosis 0.0.48 → 0.0.49

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

@@ -1,6 +1,11 @@
 "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) {
@@ -18,10 +23,82 @@ exports.DIRECTIVES = {
             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(', '()', src_generator_1.WS, '=>', src_generator_1.WS, '(', src_generator_1.INDENT, src_generator_1.NL);
+            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();
-            this.emit(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;
@@ -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)) {
@@ -116,6 +136,9 @@ function rewriteHandlers(file, handlers, bindings) {
                         (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;
@@ -77,3 +77,5 @@ export declare function iif(code: any): (this: SrcBuilder) => void;
  * 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.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.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';
@@ -44,6 +44,8 @@ var File = /** @class */ (function () {
         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);
     };
@@ -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);
         }
@@ -238,9 +247,11 @@ var SrcBuilder = /** @class */ (function () {
                 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);
@@ -250,8 +261,12 @@ var SrcBuilder = /** @class */ (function () {
                 }
                 this.isJSX ? this.emit(key) : this.emit(possiblyQuotePropertyName(key));
                 this.isJSX ? this.emit('={') : this.emit(':', exports.WS);
-                var binding = bindings[key];
-                if (typeof binding == 'string' && isStatement(binding)) {
+                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);
@@ -336,10 +351,10 @@ exports.Imports = Imports;
 function ignoreKey(key) {
     return (key.startsWith('$') ||
         key.startsWith('_') ||
-        key.startsWith('symbol.data') ||
         key == 'code' ||
         key == '' ||
-        key == 'builder-id');
+        key == 'builder-id' ||
+        key.indexOf('.') !== -1);
 }
 var Block = /** @class */ (function () {
     function Block(imports) {
@@ -425,3 +440,12 @@ var STRING_LITERAL = /(["'`])((\\{2})*|((\n|.)*?[^\\](\\{2})*))\1/g;
 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 {};