@builder.io/mitosis 0.0.56-2 → 0.0.56-22

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

@@ -35,6 +35,7 @@ function createFileSet(options) {
         isModule: opts.output != 'cjs',
         isTypeScript: opts.output == 'ts',
         isJSX: opts.jsx,
+        isBuilder: true,
     };
     var fileSet = {
         high: new src_generator_1.File('high.' + extension, srcOptions, opts.qwikLib, opts.qrlPrefix),
@@ -63,48 +64,42 @@ function addComponent(fileSet, component, opts) {
     var isStatic = Array.from(handlers.keys()).reduce(function (p, v) { return p && v.indexOf('state') == -1; }, true);
     var onRenderFile = isStatic ? fileSet.low : fileSet.med;
     var componentFile = fileSet.med;
-    var styles = _opts.shareStyles
-        ? getCommonStyles(fileSet).styles
-        : new Map();
+    var styles = _opts.shareStyles ? getCommonStyles(fileSet).styles : new Map();
     (0, styles_1.collectStyles)(component.children, styles);
     var useStyles = function () { return null; };
     if (_opts.shareStyles) {
         if (_opts.isRoot) {
             var symbolName = componentName + '_styles';
             getCommonStyles(fileSet).symbolName = symbolName;
-            useStyles = generateStyles(componentFile, fileSet.low, symbolName, false);
+            useStyles = generateStyles(onRenderFile, fileSet.low, symbolName, false);
         }
     }
     else {
         if (styles.size) {
             var symbolName = componentName + '_styles';
             onRenderFile.exportConst(symbolName, (0, styles_1.renderStyles)(styles));
-            useStyles = generateStyles(componentFile, onRenderFile, symbolName, true);
+            useStyles = generateStyles(onRenderFile, onRenderFile, symbolName, true);
         }
     }
-    addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles);
-    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'componentQrl'), [generateQrl(componentFile, componentName + '_onMount')], ['any', 'any']));
     var directives = new Map();
-    onRenderFile.exportConst(componentName + '_onRender', (0, src_generator_1.arrowFnBlock)([], [
-        renderUseLexicalScope(onRenderFile),
-        function () {
-            return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
-        },
-    ]));
+    addComponentOnMount(onRenderFile, function () {
+        return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
+    }, 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(function (code, name) {
         fileSet.med.import(fileSet.med.qwikModule, 'h');
         fileSet.med.exportConst(name, code, true);
     });
 }
 exports.addComponent = addComponent;
-function generateStyles(componentFile, styleFile, symbol, scoped) {
+function generateStyles(fromFile, dstFile, symbol, scoped) {
     return function () {
-        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(styleFile, symbol)]), ';');
+        this.emit((0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, scoped ? 'withScopedStylesQrl' : 'useStylesQrl'), [generateQrl(fromFile, dstFile, symbol)]), ';');
     };
 }
 function renderUseLexicalScope(file) {
     return function () {
-        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').name, '()[0]');
+        return this.emit('const state=', file.import(file.qwikModule, 'useLexicalScope').localName, '()[0]');
     };
 }
 exports.renderUseLexicalScope = renderUseLexicalScope;
@@ -116,32 +111,33 @@ function addCommonStyles(fileSet) {
     }
 }
 exports.addCommonStyles = addCommonStyles;
-function addComponentOnMount(componentFile, onRenderFile, componentName, component, useStyles) {
+function addComponentOnMount(componentFile, onRenderEmit, componentName, component, useStyles) {
     var inputInitializer = [];
     if (component.inputs) {
         component.inputs.forEach(function (input) {
             input.defaultValue !== undefined &&
-                inputInitializer.push('if(state.', input.name, '===undefined)state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
+                inputInitializer.push('if(!state.hasOwnProperty("', input.name, '"))state.', input.name, '=', JSON.stringify(input.defaultValue), ';');
         });
     }
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
         this.emit((0, src_generator_1.arrowFnValue)(['state'], function () {
             var _a;
-            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{'], inputInitializer, false), ['typeof __STATE__==="object"&&Object.assign(state,__STATE__[state.serverStateId]);',
+            return _this.emit.apply(_this, __spreadArray(__spreadArray(['{',
+                'if(!state.__INIT__){',
+                'state.__INIT__=true;'], inputInitializer, false), ['typeof __STATE__==="object"&&Object.assign(state,__STATE__[state.serverStateId]);',
                 (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code),
-                ';',
+                '}',
                 useStyles,
-                'return ',
-                generateQrl(onRenderFile, componentName + '_onRender', ['state']),
+                onRenderEmit,
                 ';}'], false));
         }));
     });
 }
-function generateQrl(componentFile, componentName, capture) {
+function generateQrl(fromFile, dstFile, componentName, capture) {
     if (capture === void 0) { capture = []; }
-    return (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qrl'), [
-        componentFile.toQrlChunk(),
+    return (0, src_generator_1.invoke)(fromFile.import(fromFile.qwikModule, 'qrl'), [
+        dstFile.toQrlChunk(),
         (0, src_generator_1.quote)(componentName),
         "[".concat(capture.join(','), "]"),
     ]);

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

@@ -0,0 +1 @@
+export declare function convertMethodToFunction(code: string, methods: Record<string, 'method' | 'getter'>, lexicalArgs: string[]): string;

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

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertMethodToFunction = void 0;
+function convertMethodToFunction(code, methods, lexicalArgs) {
+    var out = [];
+    var idx = 0;
+    var lastIdx = idx;
+    var end = code.length;
+    var templateDepth = 0;
+    var mode = "code" /* Mode.code */;
+    var braceDepth = 0;
+    var stringEndBraceDepth = -1;
+    var stringEndBraceDepthQueue = [];
+    var lastCh = null;
+    while (idx < end) {
+        var ch = code.charCodeAt(idx++);
+        // console.log(mode, code[idx - 1]);
+        switch (mode) {
+            case "code" /* Mode.code */:
+                if (ch === QUOTE_DOUBLE) {
+                    mode = "stringDouble" /* Mode.stringDouble */;
+                }
+                else if (ch === QUOTE_SINGLE) {
+                    mode = "stringSingle" /* Mode.stringSingle */;
+                }
+                else if (ch === QUOTE_BACK_TICK) {
+                    mode = "stringTemplate" /* Mode.stringTemplate */;
+                    templateDepth++;
+                }
+                else if (ch === OPEN_BRACE) {
+                    braceDepth++;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == FORWARD_SLASH) {
+                    mode = "commentSingleline" /* Mode.commentSingleline */;
+                }
+                else if (lastCh == FORWARD_SLASH && ch == STAR) {
+                    mode = "commentMultiline" /* Mode.commentMultiline */;
+                }
+                else if (ch === CLOSE_BRACE) {
+                    braceDepth--;
+                    if (braceDepth === stringEndBraceDepth) {
+                        stringEndBraceDepth = stringEndBraceDepthQueue.pop();
+                        templateDepth--;
+                        mode = "stringTemplate" /* Mode.stringTemplate */;
+                    }
+                }
+                else if (isWord(ch, code, idx, 'this') || isWord(ch, code, idx, 'state')) {
+                    idx--;
+                    flush();
+                    consumeIdent();
+                    if (code.charCodeAt(idx) == DOT) {
+                        idx++;
+                        var propEndIdx = findIdentEnd();
+                        var identifier = code.substring(idx, propEndIdx);
+                        if (identifier in methods) {
+                            var isGetter = code.charCodeAt(propEndIdx) !== OPEN_PAREN;
+                            lastIdx = idx = propEndIdx + (isGetter ? 0 : 1);
+                            if (isGetter) {
+                                out.push(identifier, "(".concat(lexicalArgs.join(','), ")"));
+                            }
+                            else {
+                                out.push(identifier, "(".concat(lexicalArgs.join(','), ","));
+                            }
+                        }
+                        else {
+                            flush();
+                        }
+                    }
+                }
+                break;
+            case "commentSingleline" /* Mode.commentSingleline */:
+                if (ch == EOL)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "commentMultiline" /* Mode.commentMultiline */:
+                if (lastCh == STAR && ch == FORWARD_SLASH)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringSingle" /* Mode.stringSingle */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_SINGLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringDouble" /* Mode.stringDouble */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_DOUBLE)
+                    mode = "code" /* Mode.code */;
+                break;
+            case "stringTemplate" /* Mode.stringTemplate */:
+                if (lastCh !== BACKSLASH && ch == QUOTE_BACK_TICK) {
+                    mode = "code" /* Mode.code */;
+                    templateDepth--;
+                }
+                else if (lastCh === DOLLAR && ch == OPEN_BRACE) {
+                    templateDepth++;
+                    mode = "code" /* Mode.code */;
+                    stringEndBraceDepthQueue.push(stringEndBraceDepth);
+                    stringEndBraceDepth = braceDepth;
+                    braceDepth++;
+                }
+                break;
+        }
+        lastCh = ch;
+    }
+    flush();
+    return out.join('');
+    function flush() {
+        out.push(code.substring(lastIdx, idx));
+        lastIdx = idx;
+    }
+    function findIdentEnd() {
+        var scanIdx = idx;
+        while (isIdentCh(code.charCodeAt(scanIdx)) && scanIdx < end) {
+            scanIdx++;
+        }
+        return scanIdx;
+    }
+    function consumeIdent() {
+        while (isIdentCh(code.charCodeAt(idx))) {
+            idx++;
+        }
+    }
+}
+exports.convertMethodToFunction = convertMethodToFunction;
+function isIdentCh(ch) {
+    return ((CHAR_0 <= ch && ch <= CHAR_9) ||
+        (CHAR_a <= ch && ch <= CHAR_z) ||
+        (CHAR_A <= ch && ch <= CHAR_Z) ||
+        ch === UNDERSCORE ||
+        ch === DOLLAR);
+}
+function isWord(ch, code, idx, word) {
+    if (ch !== word.charCodeAt(0))
+        return false;
+    for (var i = 1; i < word.length; i++) {
+        if (code.charCodeAt(idx + i - 1) !== word.charCodeAt(i)) {
+            return false;
+        }
+    }
+    if (isIdentCh(code.charCodeAt(idx + word.length - 1))) {
+        return false;
+    }
+    return true;
+}
+var QUOTE_DOUBLE = '"'.charCodeAt(0);
+var QUOTE_SINGLE = "'".charCodeAt(0);
+var QUOTE_BACK_TICK = '`'.charCodeAt(0);
+var BACKSLASH = "\\".charCodeAt(0);
+var FORWARD_SLASH = "/".charCodeAt(0);
+var EOL = "\n".charCodeAt(0);
+var STAR = "*".charCodeAt(0);
+var CHAR_0 = "0".charCodeAt(0);
+var CHAR_9 = "9".charCodeAt(0);
+var CHAR_a = "a".charCodeAt(0);
+var CHAR_z = "z".charCodeAt(0);
+var CHAR_A = "A".charCodeAt(0);
+var CHAR_Z = "Z".charCodeAt(0);
+var UNDERSCORE = "_".charCodeAt(0);
+var DOLLAR = "$".charCodeAt(0);
+var DOT = ".".charCodeAt(0);
+var OPEN_PAREN = '('.charCodeAt(0);
+var OPEN_BRACE = '{'.charCodeAt(0);
+var CLOSE_BRACE = '}'.charCodeAt(0);

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

@@ -10,24 +10,32 @@ var src_generator_1 = require("./src-generator");
 exports.DIRECTIVES = {
     Show: function (node, blockFn) {
         return function () {
-            var expr = node.bindings.when;
-            this.isJSX && this.emit('{');
-            this.emit(expr, '?');
-            blockFn();
-            this.emit(':null');
-            this.isJSX && this.emit('}');
+            var _this = this;
+            var _a;
+            var expr = (_a = node.bindings.when) === null || _a === void 0 ? void 0 : _a.code;
+            this.jsxExpression(function () {
+                _this.emit(expr, '?');
+                blockFn();
+                _this.emit(':null');
+            });
         };
     },
     For: function (node, blockFn) {
         return function () {
-            var expr = node.bindings.each;
-            this.isJSX && this.emit('{');
-            this.emit('(', expr, '||[]).map(', '(function(__value__){');
-            this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':__value__==null?{}:__value__});');
-            this.emit('return(');
-            blockFn();
-            this.emit(');}).bind(state))');
-            this.isJSX && this.emit('}');
+            var _this = this;
+            var _a;
+            var expr = (_a = node.bindings.each) === null || _a === void 0 ? void 0 : _a.code;
+            this.jsxExpression(function () {
+                var forName = node.properties._forName || '_';
+                var indexName = node.properties._indexName;
+                _this.emit('(', expr, '||[]).map(', '((', forName, indexName ? ',' : '', indexName ? indexName : '', ') => {');
+                if (_this.isBuilder) {
+                    _this.emit('var state=Object.assign({},this,{', (0, src_generator_1.iteratorProperty)(expr), ':', forName, '==null?{}:', forName, '});');
+                }
+                _this.emit('return(');
+                blockFn();
+                _this.emit(');}))');
+            });
         };
     },
     Image: (0, minify_1.minify)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), Image),
@@ -43,10 +51,7 @@ function Image(props) {
         var isPixel = (_a = props.builderBlock) === null || _a === void 0 ? void 0 : _a.id.startsWith('builder-pixel-');
         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'
-                    : ''),
+            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,
             role: !props.altText ? 'presentation' : undefined,
@@ -54,12 +59,13 @@ function Image(props) {
             srcset: undefined,
         };
         if (isBuilderIoImage) {
-            image = updateQueryParam(image, 'format', 'webp');
+            var webpImage_1 = updateQueryParam(image, 'format', 'webp');
             var srcset = ['100', '200', '400', '800', '1200', '1600', '2000']
                 .concat(props.srcsetSizes ? String(props.srcsetSizes).split(' ') : [])
                 .map(function (size) {
-                return updateQueryParam(image, 'width', size) + ' ' + size + 'w';
+                return updateQueryParam(webpImage_1, 'width', size) + ' ' + size + 'w';
             })
+                .concat([image])
                 .join(', ');
             imgProps.srcset = srcset;
             jsx = jsx = [
@@ -72,8 +78,7 @@ function Image(props) {
         else {
             jsx = [h('img', imgProps, jsx)];
         }
-        if (props.aspectRatio &&
-            !(props.fitContent && props.children && props.children.length)) {
+        if (props.aspectRatio && !(props.fitContent && props.children && props.children.length)) {
             var sizingDiv = h('div', {
                 class: 'builder-image-sizer',
                 style: "width:100%;padding-top:".concat((props.aspectRatio || 1) * 100, "%;pointer-events:none;font-size:0"),

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

@@ -38,7 +38,7 @@ function renderHandlers(file, componentName, children) {
         var bindings = node.bindings;
         for (var key in bindings) {
             if (Object.prototype.hasOwnProperty.call(bindings, key)) {
-                var binding = bindings[key];
+                var binding = bindings[key].code;
                 if (binding != null) {
                     if (key.startsWith('on')) {
                         var block = extractJSBlock(binding) || binding;
@@ -55,31 +55,15 @@ function renderHandlers(file, componentName, children) {
 }
 exports.renderHandlers = renderHandlers;
 function renderHandler(file, symbol, code) {
-    var body = [wrapWithUse(file, code)];
+    var body = [code];
     var shouldRenderStateRestore = code.indexOf('state') !== -1;
     if (shouldRenderStateRestore) {
         body.unshift((0, component_1.renderUseLexicalScope)(file));
     }
     file.exportConst(symbol, function () {
-        this.emit([(0, src_generator_1.arrowFnBlock)([], body)]);
+        this.emit([(0, src_generator_1.arrowFnBlock)(['event'], body)]);
     });
 }
-function wrapWithUse(file, code) {
-    var needsEvent = !!code.match(/\bevent\b/);
-    if (needsEvent) {
-        return function () {
-            this.emit('{');
-            needsEvent &&
-                this.emit('const event=', (0, src_generator_1.invoke)(file.import(file.qwikModule, 'useEvent'), []), ';');
-            var blockContent = stripBlock(code);
-            this.emit(blockContent);
-            this.emit('}');
-        };
-    }
-    else {
-        return code;
-    }
-}
 function stripBlock(block) {
     return block.substring(1, block.length - 1).trim();
 }

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

@@ -1,2 +1,4 @@
-export { addCommonStyles, addComponent, createFileSet, FileSet, QwikOptions, } from './component';
+export { addCommonStyles, addComponent, createFileSet } from './component';
+export type { FileSet, QwikOptions } from './component';
+export { componentToQwik } from './component-generator';
 export { File } from './src-generator';

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

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.File = exports.createFileSet = exports.addComponent = exports.addCommonStyles = void 0;
+exports.File = exports.componentToQwik = exports.createFileSet = exports.addComponent = exports.addCommonStyles = void 0;
 var component_1 = require("./component");
 Object.defineProperty(exports, "addCommonStyles", { enumerable: true, get: function () { return component_1.addCommonStyles; } });
 Object.defineProperty(exports, "addComponent", { enumerable: true, get: function () { return component_1.addComponent; } });
 Object.defineProperty(exports, "createFileSet", { enumerable: true, get: function () { return component_1.createFileSet; } });
+var component_generator_1 = require("./component-generator");
+Object.defineProperty(exports, "componentToQwik", { enumerable: true, get: function () { return component_generator_1.componentToQwik; } });
 var src_generator_1 = require("./src-generator");
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return src_generator_1.File; } });

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

@@ -21,6 +21,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderJSXNodes = void 0;
+var is_mitosis_node_1 = require("../../helpers/is-mitosis-node");
 var directives_1 = require("./directives");
 var src_generator_1 = require("./src-generator");
 function renderJSXNodes(file, directives, handlers, children, styles, parentSymbolBindings, root) {
@@ -31,18 +32,26 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
             return;
         if (root)
             this.emit('(');
-        var needsFragment = root && children.length > 1;
+        var needsFragment = root && (children.length > 1 || isInlinedDirective(children[0]));
         file.import(file.qwikModule, 'h');
+        var fragmentSymbol = file.import(file.qwikModule, 'Fragment');
         if (needsFragment) {
-            file.import(file.qwikModule, 'Fragment');
-            this.jsxBeginFragment(file.import(file.qwikModule, 'Fragment'));
+            this.jsxBeginFragment(fragmentSymbol);
         }
         children.forEach(function (child) {
+            var _a, _b;
             if (isEmptyTextNode(child))
                 return;
             if (isTextNode(child)) {
-                if (child.bindings._text !== undefined) {
-                    _this.jsxTextBinding(child.bindings._text);
+                if (((_a = child.bindings._text) === null || _a === void 0 ? void 0 : _a.code) !== undefined) {
+                    if (child.bindings._text.code == 'props.children') {
+                        _this.file.import(_this.file.qwikModule, 'Slot');
+                        _this.jsxBegin('Slot', {}, {});
+                        _this.jsxEnd('Slot');
+                    }
+                    else {
+                        _this.jsxTextBinding(child.bindings._text.code);
+                    }
                 }
                 else {
                     _this.isJSX
@@ -55,8 +64,13 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                 var directive = directives_1.DIRECTIVES[childName];
                 if (typeof directive == 'function') {
                     _this.emit(directive(child, function () {
-                        return renderJSXNodes(file, directives, handlers, child.children, styles, {}, false).call(_this);
+                        var children = child.children.filter(function (c) { return !isEmptyTextNode(c); });
+                        var needsFragment = children.length > 1 || isTextNode(children[0]);
+                        needsFragment && _this.jsxBeginFragment(fragmentSymbol);
+                        renderJSXNodes(file, directives, handlers, children, styles, {}, false).call(_this);
+                        needsFragment && _this.jsxEndFragment();
                     }));
+                    !_this.isJSX && _this.emit(',');
                 }
                 else {
                     if (typeof directive == 'string') {
@@ -66,20 +80,20 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                             var code = directives_1.DIRECTIVES[name];
                             typeof code == 'string' && directives.set(name, code);
                         });
-                        if (file.module !== 'med') {
+                        if (file.module !== 'med' && file.imports.hasImport(childName)) {
                             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);
+                        !file.imports.hasImport(childName) && file.import('./med.js', childName);
                         var exportedChildName = file.exports.get(childName);
                         if (exportedChildName) {
                             childName = exportedChildName;
                         }
                     }
                     var props = child.properties;
-                    var css = child.bindings.css;
+                    var css = (_b = child.bindings.css) === null || _b === void 0 ? void 0 : _b.code;
                     var specialBindings = {};
                     if (css) {
                         props = __assign({}, props);
@@ -89,7 +103,9 @@ function renderJSXNodes(file, directives, handlers, children, styles, parentSymb
                             // special case for Images. We want to make sure that we include the maxWidth in a srcset
                             specialBindings.srcsetSizes = Number.parseInt(imageMaxWidth);
                         }
-                        props.class = addClass(styleProps.CLASS_NAME, props.class);
+                        if (styleProps === null || styleProps === void 0 ? void 0 : styleProps.CLASS_NAME) {
+                            props.class = addClass(styleProps.CLASS_NAME, props.class);
+                        }
                     }
                     var symbolBindings = {};
                     var bindings = rewriteHandlers(file, handlers, child.bindings, symbolBindings);
@@ -118,7 +134,8 @@ function isEmptyTextNode(child) {
     return ((_a = child.properties._text) === null || _a === void 0 ? void 0 : _a.trim()) == '';
 }
 function isTextNode(child) {
-    return (child.properties._text !== undefined || child.bindings._text !== undefined);
+    var _a;
+    return child.properties._text !== undefined || ((_a = child.bindings._text) === null || _a === void 0 ? void 0 : _a.code) !== undefined;
 }
 /**
  * Rewrites bindings:
@@ -136,7 +153,7 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
     var outBindings = {};
     for (var key in bindings) {
         if (Object.prototype.hasOwnProperty.call(bindings, key)) {
-            var binding = bindings[key];
+            var binding = bindings[key].code;
             var handlerBlock = void 0;
             if (binding != null) {
                 if (key == 'css') {
@@ -153,9 +170,12 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
                 else if (symbolBindings && key.startsWith('symbol.data.')) {
                     symbolBindings[(0, src_generator_1.lastProperty)(key)] = binding;
                 }
-                outBindings[key] = binding;
+                outBindings[key] = { code: binding };
             }
         }
     }
     return outBindings;
 }
+function isInlinedDirective(node) {
+    return ((0, is_mitosis_node_1.isMitosisNode)(node) && node.name == 'Show') || node.name == 'For';
+}

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

@@ -3,6 +3,7 @@ export interface SrcBuilderOptions {
     isTypeScript: boolean;
     isModule: boolean;
     isJSX: boolean;
+    isBuilder: boolean;
 }
 export declare type EmitFn = (this: SrcBuilder) => void;
 export declare class File {
@@ -17,24 +18,34 @@ export declare class File {
     get path(): string;
     get contents(): string;
     constructor(filename: string, options: SrcBuilderOptions, qwikModule: string, qrlPrefix: string);
-    import(module: string, symbol: string): Symbol;
+    import(module: string, symbol: string, as?: string): Symbol;
     toQrlChunk(): string;
     exportConst(name: string, value?: any, locallyVisible?: boolean): void;
+    exportDefault(symbolName: any): void;
     toString(): string;
 }
 export declare class SrcBuilder {
+    file: File;
     isTypeScript: boolean;
     isModule: boolean;
     isJSX: boolean;
     buf: string[];
-    constructor(options: SrcBuilderOptions);
-    import(module: string, symbols: string[]): this;
+    jsxDepth: number;
+    /**
+     * Used to signal that we are generating code for Builder.
+     *
+     * In builder the `<For/>` iteration places the value on the state.
+     */
+    isBuilder: any;
+    constructor(file: File, options: SrcBuilderOptions);
+    import(module: string, symbols: Symbol[]): this;
     emit(...values: any[]): this;
     private push;
     emitList(values: any[], sep?: string): this;
     const(name: string, value?: any, export_?: boolean, locallyVisible?: boolean): this;
     type(def: string): this;
     typeParameters(typeParameters: string[] | undefined): void;
+    jsxExpression(expression: EmitFn): void;
     jsxBegin(symbol: Symbol | string, props: Record<string, any>, bindings: Record<string, any>): void;
     jsxEnd(symbol: Symbol | string): void;
     jsxBeginFragment(symbol: Symbol): void;
@@ -43,12 +54,14 @@ export declare class SrcBuilder {
     toString(): string;
 }
 export declare class Symbol {
-    name: string;
-    constructor(name: string);
+    importName: string;
+    localName: string;
+    constructor(importName: string, localName: string);
 }
 export declare class Imports {
     imports: Map<string, Map<string, Symbol>>;
-    get(moduleName: string, symbolName: string): Symbol;
+    get(moduleName: string, symbolName: string, as?: string): Symbol;
+    hasImport(localName: string): boolean;
 }
 export declare class Block {
     imports: Imports;
@@ -56,9 +69,9 @@ export declare class Block {
 }
 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 arrowFnBlock(args: string[], statements: any[], argTypes?: string[]): (this: SrcBuilder) => void;
 export declare function arrowFnValue(args: string[], expression: any): (this: SrcBuilder) => void;
-export declare function iif(code: any): (this: SrcBuilder) => void;
+export declare function iif(code: any): ((this: SrcBuilder) => void) | undefined;
 /**
  * Returns `true` if the code is a statement (rather than expression).
  *