@builder.io/mitosis 0.0.50-3 → 0.0.50-5

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

@@ -1,5 +1,5 @@
 import { MitosisComponent } from '../../types/mitosis-component';
-import { File } from './src-generator';
+import { File, SrcBuilder } from './src-generator';
 export declare type QwikOptions = {
     qwikLib?: string;
     qrlPrefix?: string;
@@ -17,4 +17,6 @@ export declare function addComponent(fileSet: FileSet, component: MitosisCompone
     isRoot?: boolean;
     shareStyles?: boolean;
 }): void;
+export declare function renderStateConst(file: File, isMount?: boolean): any;
+export declare function renderUseLexicalScope(file: File): (this: SrcBuilder) => SrcBuilder;
 export declare function addCommonStyles(fileSet: FileSet): void;

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

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addCommonStyles = exports.addComponent = exports.createFileSet = void 0;
+exports.addCommonStyles = exports.renderUseLexicalScope = exports.renderStateConst = exports.addComponent = exports.createFileSet = void 0;
 var compile_away_builder_components_1 = require("../../plugins/compile-away-builder-components");
 var minify_1 = require("../minify");
 var handlers_1 = require("./handlers");
@@ -49,7 +49,6 @@ function getCommonStyles(fileSet) {
     return fileSet['_commonStyles'];
 }
 function addComponent(fileSet, component, opts) {
-    var _a, _b;
     if (opts === void 0) { opts = {}; }
     var _opts = __assign({ isRoot: false, shareStyles: false }, opts);
     (0, compile_away_builder_components_1.compileAwayBuilderComponentsFromTree)(component, __assign(__assign({}, compile_away_builder_components_1.components), { Image: undefined, CoreButton: undefined }));
@@ -61,52 +60,34 @@ 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;
-    if (!componentFile.exports.get('onMountCreateEmptyState')) {
-        componentFile.exportConst('onMountCreateEmptyState', function () {
-            this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [(0, src_generator_1.arrowFnValue)([], ['({})'])], ['any', 'any']));
-        });
-    }
-    if ((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code) {
-        addComponentOnMount(componentFile, componentName, component);
-    }
     var styles = _opts.shareStyles
         ? getCommonStyles(fileSet).styles
         : new Map();
     (0, styles_1.collectStyles)(component.children, styles);
-    var qComponentOptions = {
-        // tagName: string(componentName.toLowerCase()),
-        onMount: (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [
-            componentFile.toQrl(((_b = component.hooks.onMount) === null || _b === void 0 ? void 0 : _b.code)
-                ? componentName + '_onMount'
-                : 'onMountCreateEmptyState'),
-        ]),
-        onRender: (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [
-            onRenderFile.toQrl(componentName + '_onRender'),
-        ]),
-    };
+    var withStyles = function () { return null; };
     if (_opts.shareStyles) {
         if (_opts.isRoot) {
-            var symbolName = componentName + '_styles';
-            getCommonStyles(fileSet).symbolName = symbolName;
-            qComponentOptions.unscopedStyles = onRenderFile.toQrl(symbolName);
+            var symbolName_1 = componentName + '_styles';
+            getCommonStyles(fileSet).symbolName = symbolName_1;
+            withStyles = generateStyles(componentFile, onRenderFile, symbolName_1, false);
         }
     }
     else {
         if (styles.size) {
-            qComponentOptions.styles = onRenderFile.toQrl(componentName + '_styles');
-            onRenderFile.exportConst(componentName + '_styles', (0, styles_1.renderStyles)(styles));
+            var symbolName_2 = componentName + '_styles';
+            onRenderFile.exportConst(symbolName_2, (0, styles_1.renderStyles)(styles));
+            withStyles = generateStyles(componentFile, onRenderFile, symbolName_2, true);
         }
     }
-    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qComponent'), [qComponentOptions], ['any', 'any']));
+    addComponentOnMount(componentFile, onRenderFile, componentName, component, withStyles);
+    componentFile.exportConst(componentName, (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'component'), [generateQrl(componentFile, componentName + '_onMount')], ['any', 'any']));
     onRenderFile.src.emit(src_generator_1.NL);
     var directives = new Map();
-    onRenderFile.exportConst(componentName + '_onRender', (0, src_generator_1.invoke)(onRenderFile.import(onRenderFile.qwikModule, 'qHook'), [
-        (0, src_generator_1.arrowFnBlock)(['__props__', '__state__'], [
-            renderStateConst(onRenderFile),
-            function () {
-                return this.emit('return ', (0, jsx_1.renderJSXNodes)(onRenderFile, directives, handlers, component.children, styles, {}), ';');
-            },
-        ]),
+    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, {}), ';');
+        },
     ]));
     directives.forEach(function (code, name) {
         fileSet.med.import(fileSet.med.qwikModule, 'h');
@@ -114,14 +95,26 @@ function addComponent(fileSet, component, opts) {
     });
 }
 exports.addComponent = addComponent;
+function generateStyles(componentFile, styleFile, symbol, scoped) {
+    return function () {
+        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, scoped ? 'withScopedSty' : 'withStyles'), [generateQrl(styleFile, symbol)]));
+    };
+}
 function renderStateConst(file, isMount) {
     if (isMount === void 0) { isMount = false; }
     return function () {
         return this.emit('const state', src_generator_1.WS, '=', src_generator_1.WS, file.module == 'med'
             ? file.exports.get('__merge')
-            : file.import('./med', '__merge').name, '(__state__,', src_generator_1.WS, '__props__', isMount ? ',true);' : ');', src_generator_1.NL);
+            : file.import('./med.js', '__merge').name, '(__state__,', src_generator_1.WS, '__props__', isMount ? ',true);' : ');', src_generator_1.NL);
     };
 }
+exports.renderStateConst = renderStateConst;
+function renderUseLexicalScope(file) {
+    return function () {
+        return this.emit('const __scope__', src_generator_1.WS, '=', src_generator_1.WS, file.import(file.qwikModule, 'useLexicalScope').name, '();', src_generator_1.NL, 'const __props__', src_generator_1.WS, '=', src_generator_1.WS, '__scope__[0];', src_generator_1.NL, 'const __state__', src_generator_1.WS, '=', src_generator_1.WS, '__scope__[1];', src_generator_1.NL, renderStateConst(file, false));
+    };
+}
+exports.renderUseLexicalScope = renderUseLexicalScope;
 function addCommonStyles(fileSet) {
     var _a = getCommonStyles(fileSet), styles = _a.styles, symbolName = _a.symbolName;
     var onRenderFile = fileSet.low;
@@ -130,15 +123,16 @@ function addCommonStyles(fileSet) {
     }
 }
 exports.addCommonStyles = addCommonStyles;
-function addComponentOnMount(componentFile, componentName, component) {
+function addComponentOnMount(componentFile, onRenderFile, componentName, component, withStyles) {
     componentFile.exportConst(componentName + '_onMount', function () {
         var _this = this;
-        this.emit((0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qHook'), [
-            (0, src_generator_1.arrowFnValue)(['__props__'], function () {
-                var _a;
-                return _this.emit('{', src_generator_1.NL, src_generator_1.INDENT, 'const __state__', src_generator_1.WS, '=', src_generator_1.WS, componentFile.import(componentFile.qwikModule, 'qObject').name, '({});', src_generator_1.NL, renderStateConst(componentFile, true), (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code), src_generator_1.NL, 'return state;', src_generator_1.UNINDENT, src_generator_1.NL, '}');
-            }),
-        ], ['any', 'any']));
+        this.emit((0, src_generator_1.arrowFnValue)(['__props__'], function () {
+            var _a;
+            return _this.emit('{', src_generator_1.NL, src_generator_1.INDENT, 'const __state__', src_generator_1.WS, '=', src_generator_1.WS, componentFile.import(componentFile.qwikModule, 'createStore').name, '({});', src_generator_1.NL, renderStateConst(componentFile, true), (0, src_generator_1.iif)((_a = component.hooks.onMount) === null || _a === void 0 ? void 0 : _a.code), withStyles, src_generator_1.NL, 'return ', generateQrl(onRenderFile, componentName + '_onRender', [
+                '__props__',
+                '__state__',
+            ]), ';', src_generator_1.UNINDENT, src_generator_1.NL, '}');
+        }));
     });
 }
 function __merge(state, props, create) {
@@ -151,9 +145,16 @@ function __merge(state, props, create) {
         }
     }
     if (create && typeof __STATE__ == 'object' && props.serverStateId) {
-        debugger;
         Object.assign(state, __STATE__[props.serverStateId]);
     }
     return state;
 }
+function generateQrl(componentFile, componentName, capture) {
+    if (capture === void 0) { capture = []; }
+    return (0, src_generator_1.invoke)(componentFile.import(componentFile.qwikModule, 'qrl'), [
+        componentFile.toQrlChunk(),
+        (0, src_generator_1.quote)(componentName),
+        "[".concat(capture.join(','), "]"),
+    ]);
+}
 var templateObject_1;

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

@@ -10,6 +10,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderHandlers = exports.extractJSBlock = void 0;
+var component_1 = require("./component");
 var src_generator_1 = require("./src-generator");
 var IIF_START = '(() => {';
 var IIF_END = '})()';
@@ -55,7 +56,9 @@ function renderHandlers(file, componentName, children) {
 exports.renderHandlers = renderHandlers;
 function renderHandler(file, symbol, code) {
     file.exportConst(symbol, function () {
-        this.emit((0, src_generator_1.invoke)(file.import(file.qwikModule, 'qHook'), [(0, src_generator_1.arrowFnBlock)(['props', 'state'], [wrapWithUse(file, code)])], ['any', 'any']));
+        this.emit([
+            (0, src_generator_1.arrowFnBlock)([], [(0, component_1.renderUseLexicalScope)(file), wrapWithUse(file, code)]),
+        ]);
     });
     file.src.emit(src_generator_1.NL);
 }

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

@@ -131,9 +131,11 @@ function rewriteHandlers(file, handlers, bindings, symbolBindings) {
                     continue;
                 }
                 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.quote)(file.qrlPrefix + 'high#' + handlerBlock),
+                    key = "on:".concat(key.substring(2).toLowerCase());
+                    binding = (0, src_generator_1.invoke)(file.import(file.qwikModule, 'qrl'), [
+                        (0, src_generator_1.quote)(file.qrlPrefix + 'high.js'),
+                        (0, src_generator_1.quote)(handlerBlock),
+                        '[__props__, __state__]',
                     ]);
                 }
                 else if (symbolBindings && key.startsWith('symbol.data.')) {

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

@@ -9,6 +9,7 @@ export interface SrcBuilderOptions {
     isModule: boolean;
     isJSX: boolean;
 }
+export declare type EmitFn = (this: SrcBuilder) => void;
 export declare class File {
     filename: string;
     imports: Imports;
@@ -22,7 +23,7 @@ export declare class File {
     get contents(): string;
     constructor(filename: string, options: SrcBuilderOptions, qwikModule: string, qrlPrefix: string);
     import(module: string, symbol: string): Symbol;
-    toQrl(symbol: string): string;
+    toQrlChunk(): string;
     exportConst(name: string, value?: any): void;
     toString(): string;
 }

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

@@ -40,8 +40,8 @@ var File = /** @class */ (function () {
     File.prototype.import = function (module, symbol) {
         return this.imports.get(module, symbol);
     };
-    File.prototype.toQrl = function (symbol) {
-        return quote(this.qrlPrefix + this.module + '#' + symbol);
+    File.prototype.toQrlChunk = function () {
+        return quote(this.qrlPrefix + this.module + '.js');
     };
     File.prototype.exportConst = function (name, value) {
         if (this.exports.has(name))
@@ -395,7 +395,7 @@ 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, '}', ')()');
+        code && this.emit('(()', exports.WS, '=>', exports.WS, '{', exports.WS, exports.NL, code, exports.NL, '}', ')()');
     };
 }
 exports.iif = iif;

package/dist/src/generators/qwik.js

@@ -153,7 +153,7 @@ var NODE_MAPPERS = {
             .join('\n') + "</>";
     },
     For: function (json, options) {
-        return "{" + processBinding(json.bindings.each, options) + "?.map(" + json.properties._forName + " => (\n      <>" + json.children
+        return "{" + processBinding(json.bindings.each, options) + ".map(" + json.properties._forName + " => (\n      <>" + json.children
             .filter(filter_empty_text_nodes_1.filterEmptyTextNodes)
             .map(function (item) { return blockToQwik(item, options); })
             .join('\n') + "</>\n    ))}";
@@ -167,10 +167,10 @@ var NODE_MAPPERS = {
 };
 var getId = function (json, options) {
     var name = json.properties.$name
-        ? camelCase(json.properties.$name)
+        ? lodash_1.camelCase(json.properties.$name)
         : /^h\d$/.test(json.name || '') // don't dashcase h1 into h-1
             ? json.name
-            : camelCase(json.name || 'div');
+            : lodash_1.camelCase(json.name || 'div');
     var newNameNum = (options.namesMap[name] || 0) + 1;
     options.namesMap[name] = newNameNum;
     return capitalize_1.capitalize("" + name + (newNameNum === 1 ? '' : "" + newNameNum));
@@ -248,7 +248,7 @@ var blockToQwik = function (json, options) {
     return str;
 };
 var getComponentName = function (json, options) {
-    return capitalize_1.capitalize(camelCase(json.name || 'my-component'));
+    return capitalize_1.capitalize(lodash_1.camelCase(json.name || 'my-component'));
 };
 // TODO
 var getProvidersString = function (componentJson, options) {
@@ -320,9 +320,9 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                     if (options.plugins) {
                         json = plugins_1.runPostJsonPlugins(json, options.plugins);
                     }
-                    componentName = capitalize_1.capitalize(camelCase(componentJson.name || 'my-component'));
+                    componentName = capitalize_1.capitalize(lodash_1.camelCase(componentJson.name || 'my-component'));
                     strip_meta_properties_1.stripMetaProperties(json);
-                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, h } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ",
+                    str = dedent_1.default(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ", "\n\n    export ", " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ", "\n        ", "\n        ", ")\n    })\n  "], ["\n    import { injectMethod, QRL, jsxFactory } from '", "';\n    import { ", "Component } from './", "_component.js'\n    ",
                         "\n\n    export ",
                         " injectMethod(", "Component, function (this: ", "Component) {\n      return (", "\n        ",
                         "\n        ", "\n        ", ")\n    })\n  "])), qwikImport(options), componentName, componentName, render_imports_1.renderPreComponent(__assign(__assign({}, json), { imports: json.imports.map(function (item) {
@@ -333,7 +333,7 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                                     // Get the -1 index of array
                                     .slice(-2, -1)
                                     .pop();
-                                var pascalName = capitalize_1.capitalize(camelCase(name_1));
+                                var pascalName = capitalize_1.capitalize(lodash_1.camelCase(name_1));
                                 clone.path = "../" + pascalName + "/public.js";
                                 for (var key in clone.imports) {
                                     var value = clone.imports[key];
@@ -400,14 +400,14 @@ var componentToQwik = function (componentJson, toQwikOptions) {
                                         jsx: 'react',
                                         isTSX: true,
                                         allExtensions: true,
-                                        jsxFactory: 'h',
-                                        jsxPragma: 'h',
+                                        jsxFactory: 'jsxFactory',
+                                        jsxPragma: 'jsxFactory',
                                     },
                                 ],
                                 [
                                     require('@babel/plugin-transform-react-jsx'),
                                     {
-                                        pragma: 'h',
+                                        pragma: 'jsxFactory',
                                         pragmaFrag: 'null',
                                         throwIfNamespace: false,
                                     },
@@ -442,17 +442,4 @@ var componentToQwik = function (componentJson, toQwikOptions) {
     });
 };
 exports.componentToQwik = componentToQwik;
-/**
- * This is a function similar to loadash `camelCase`, but it does not mess with capitalization.
- *
- * loadash: `camelCase('A-BC')` => "ABc"
- * this fn: `camelCase('A-BC')` => "ABC"
- *
- */
-function camelCase(text) {
-    if (text === void 0) { text = ''; }
-    var parts = text.split('-');
-    var first = parts.shift();
-    return first + parts.map(capitalize_1.capitalize).join('');
-}
 var templateObject_1;

package/dist/test/.history/qwik/Accordion/low_20211113070910.jsx

@@ -0,0 +1,24 @@
+import { h, qHook } from "@builder.io/qwik";
+
+
+export const MyComponent_styles = `
+  .csw5022{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    margin-top: 20px;
+    align-items: stretch;
+  }
+`;
+
+export const MyComponent_onRender = qHook((props, state) => (
+  <div gridRowWidth="25%"
+      class="csw5022"
+      items={[{title:[{'@type':'@builder.io/sdk:Element','@version':2,layerName:'Accordion item title',id:'builder-5fed2723c1cc4fb39e9d22b9c54ef179',children:[{'@type':'@builder.io/sdk:Element','@version':2,id:'builder-2cad86b387ec405d82917895d7af0a12',component:{name:'Text',options:{text:'<p>Item 1</p>'}},responsiveStyles:{large:{textAlign:'left',display:'flex',flexDirection:'column'}}}],responsiveStyles:{large:{marginTop:'10px',position:'relative',display:'flex',alignItems:'stretch',flexDirection:'column',paddingBottom:'10px'}}}],detail:[{'@type':'@builder.io/sdk:Element','@version':2,layerName:'Accordion item detail',id:'builder-18279a99b32240f19aa21d3f4b015cc9',children:[{'@type':'@builder.io/sdk:Element','@version':2,id:'builder-2dbfa56b8988461c8566bbe759580e9b',component:{name:'Text',options:{text:'<p>Item 1 content</p>'}},responsiveStyles:{large:{paddingTop:'50px',textAlign:'left',display:'flex',flexDirection:'column',paddingBottom:'50px'}}}],responsiveStyles:{large:{position:'relative',display:'flex',alignItems:'stretch',flexDirection:'column',marginTop:'10px',paddingBottom:'10px'}}}]},{title:[{'@type':'@builder.io/sdk:Element','@version':2,layerName:'Accordion item title',id:'builder-2a93def22a354cf7aa193c20d1ad6def',children:[{'@type':'@builder.io/sdk:Element','@version':2,id:'builder-1365fc457ece45db82ad90dbe9819e7c',component:{name:'Text',options:{text:'<p>Item 2</p>'}},responsiveStyles:{large:{textAlign:'left',display:'flex',flexDirection:'column'}}}],responsiveStyles:{large:{marginTop:'10px',position:'relative',display:'flex',alignItems:'stretch',flexDirection:'column',paddingBottom:'10px'}}}],detail:[{'@type':'@builder.io/sdk:Element','@version':2,layerName:'Accordion item detail',id:'builder-fd6ef41da6d040328fbd8b0801611fe5',children:[{'@type':'@builder.io/sdk:Element','@version':2,id:'builder-7362f9fd64c647c5a400d9e75c74473f',component:{name:'Text',options:{text:'<p>Item 2 content</p>'}},responsiveStyles:{large:{paddingTop:'50px',textAlign:'left',display:'flex',flexDirection:'column',paddingBottom:'50px'}}}],responsiveStyles:{large:{position:'relative',display:'flex',alignItems:'stretch',flexDirection:'column',marginTop:'10px',paddingBottom:'10px'}}}]}]}
+      animate={true}>
+    <div innerHTML="">
+    </div>
+  </div>
+));

package/dist/test/.history/qwik/Accordion/low_20211113070955.jsx

@@ -0,0 +1,171 @@
+import { h, qHook } from '@builder.io/qwik';
+
+export const MyComponent_styles = `
+  .csw5022{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    margin-top: 20px;
+    align-items: stretch;
+  }
+`;
+
+export const MyComponent_onRender = qHook((props, state) => (
+  <div
+    gridRowWidth="25%"
+    class="csw5022"
+    items={[
+      {
+        title: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            layerName: 'Accordion item title',
+            id: 'builder-5fed2723c1cc4fb39e9d22b9c54ef179',
+            children: [
+              {
+                '@type': '@builder.io/sdk:Element',
+                '@version': 2,
+                id: 'builder-2cad86b387ec405d82917895d7af0a12',
+                component: { name: 'Text', options: { text: '<p>Item 1</p>' } },
+                responsiveStyles: {
+                  large: {
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  },
+                },
+              },
+            ],
+            responsiveStyles: {
+              large: {
+                marginTop: '10px',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'stretch',
+                flexDirection: 'column',
+                paddingBottom: '10px',
+              },
+            },
+          },
+        ],
+        detail: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            layerName: 'Accordion item detail',
+            id: 'builder-18279a99b32240f19aa21d3f4b015cc9',
+            children: [
+              {
+                '@type': '@builder.io/sdk:Element',
+                '@version': 2,
+                id: 'builder-2dbfa56b8988461c8566bbe759580e9b',
+                component: {
+                  name: 'Text',
+                  options: { text: '<p>Item 1 content</p>' },
+                },
+                responsiveStyles: {
+                  large: {
+                    paddingTop: '50px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingBottom: '50px',
+                  },
+                },
+              },
+            ],
+            responsiveStyles: {
+              large: {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'stretch',
+                flexDirection: 'column',
+                marginTop: '10px',
+                paddingBottom: '10px',
+              },
+            },
+          },
+        ],
+      },
+      {
+        title: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            layerName: 'Accordion item title',
+            id: 'builder-2a93def22a354cf7aa193c20d1ad6def',
+            children: [
+              {
+                '@type': '@builder.io/sdk:Element',
+                '@version': 2,
+                id: 'builder-1365fc457ece45db82ad90dbe9819e7c',
+                component: { name: 'Text', options: { text: '<p>Item 2</p>' } },
+                responsiveStyles: {
+                  large: {
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  },
+                },
+              },
+            ],
+            responsiveStyles: {
+              large: {
+                marginTop: '10px',
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'stretch',
+                flexDirection: 'column',
+                paddingBottom: '10px',
+              },
+            },
+          },
+        ],
+        detail: [
+          {
+            '@type': '@builder.io/sdk:Element',
+            '@version': 2,
+            layerName: 'Accordion item detail',
+            id: 'builder-fd6ef41da6d040328fbd8b0801611fe5',
+            children: [
+              {
+                '@type': '@builder.io/sdk:Element',
+                '@version': 2,
+                id: 'builder-7362f9fd64c647c5a400d9e75c74473f',
+                component: {
+                  name: 'Text',
+                  options: { text: '<p>Item 2 content</p>' },
+                },
+                responsiveStyles: {
+                  large: {
+                    paddingTop: '50px',
+                    textAlign: 'left',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingBottom: '50px',
+                  },
+                },
+              },
+            ],
+            responsiveStyles: {
+              large: {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'stretch',
+                flexDirection: 'column',
+                marginTop: '10px',
+                paddingBottom: '10px',
+              },
+            },
+          },
+        ],
+      },
+    ]}
+    animate={true}
+  >
+    <div innerHTML=""></div>
+  </div>
+));

package/dist/test/qwik/.history/Image/med_20220125204036.js

@@ -0,0 +1,10 @@
+import { h, qComponent, qHook } from "@builder.io/qwik";
+
+
+export const onMountCreateEmptyState = qHook(() => ({}));
+export const MyComponent = qComponent({
+  onMount: qHook("./med#onMountCreateEmptyState"),
+  onRender: qHook("./low#MyComponent_onRender"),
+  styles: "./low#MyComponent_styles"
+});
+export function Image(props){var jsx = props.children || [];var image = props.image;if(image){var isBuilderIoImage = !!(image || '').match(/builder\.io/);var imgProps ={src:props.image,backgroundSize:props.backgroundSize,backgroundPosition:props.backgroundPosition,altText:props.altText,fitContent:props.fitContent,aspectRatio:props.aspectRatio,class:props.class,lazy:props.lazy ? 'lazy':null,srcset:null,};var img = h('img',imgProps,jsx);if(isBuilderIoImage){var url_1 = new URL(image);var srcset = [100,200,400,800,1200,1600,2000] .map(function(size){url_1.searchParams.set('width',String(size));return "".concat(url_1," ").concat(size,"w");}).concat([image]).join(',');imgProps.srcset = srcset;jsx = jsx = [ h('picture',{},[ h('source',{type:'image/webp',srcset:srcset}),img,]),];}else{jsx = [img];}}if(props.href){jsx = [h('a',{href:props.href},jsx)];}return jsx;}

package/dist/test/qwik/.history/Image/med_20220125204101.js

@@ -0,0 +1,50 @@
+import { h, qComponent, qHook } from '@builder.io/qwik';
+
+export const onMountCreateEmptyState = qHook(() => ({}));
+export const MyComponent = qComponent({
+  onMount: qHook('./med#onMountCreateEmptyState'),
+  onRender: qHook('./low#MyComponent_onRender'),
+  styles: './low#MyComponent_styles',
+});
+export function Image(props) {
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || '').match(/builder\.io/);
+    var imgProps = {
+      src: props.image,
+      backgroundSize: props.backgroundSize,
+      backgroundPosition: props.backgroundPosition,
+      altText: props.altText,
+      fitContent: props.fitContent,
+      aspectRatio: props.aspectRatio,
+      class: props.class,
+      lazy: props.lazy ? 'lazy' : null,
+      srcset: null,
+    };
+    var img = h('img', imgProps, jsx);
+    if (isBuilderIoImage) {
+      var url_1 = new URL(image);
+      var srcset = [100, 200, 400, 800, 1200, 1600, 2000]
+        .map(function (size) {
+          url_1.searchParams.set('width', String(size));
+          return ''.concat(url_1, ' ').concat(size, 'w');
+        })
+        .concat([image])
+        .join(',');
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h('picture', {}, [
+          h('source', { type: 'image/webp', srcset: srcset }),
+          img,
+        ]),
+      ];
+    } else {
+      jsx = [img];
+    }
+  }
+  if (props.href) {
+    jsx = [h('a', { href: props.href }, jsx)];
+  }
+  return jsx;
+}

package/dist/test/qwik/.history/Image/med_20220125205805.js

@@ -0,0 +1,55 @@
+import { h, qComponent, qHook } from '@builder.io/qwik';
+
+export const onMountCreateEmptyState = qHook(() => ({}));
+export const MyComponent = qComponent({
+  onMount: qHook('./med#onMountCreateEmptyState'),
+  onRender: qHook('./low#MyComponent_onRender'),
+  styles: './low#MyComponent_styles',
+});
+export const Image = function Image(props) {
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || '').match(/builder\.io/);
+    var imgProps = {
+      src: props.image,
+      sizes: props.sizes,
+      alt: props.altText,
+      class: props.class,
+      lazy: props.lazy ? 'lazy' : undefined,
+      srcset: undefined,
+    };
+    if (isBuilderIoImage) {
+      var url_1 = new URL(image);
+      var srcset = [100, 200, 400, 800, 1200, 1600, 2000]
+        .map(function (size) {
+          url_1.searchParams.set('width', String(size));
+          return ''.concat(url_1, ' ').concat(size, 'w');
+        })
+        .concat([image])
+        .join(',');
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h('picture', {}, [
+          h('source', { type: 'image/webp', srcset: srcset }),
+          h('img', imgProps, jsx),
+          h('div', {
+            class: 'builder-image-sizer',
+            styles: {
+              width: '100%',
+              paddingTop: (props.aspectRatio || 1) * 100 + '%',
+              pointerEvents: 'none',
+              fontSize: '0',
+            },
+          }),
+        ]),
+      ];
+    } else {
+      jsx = [h('img', imgProps, jsx)];
+    }
+  }
+  if (props.href) {
+    jsx = [h('a', { href: props.href }, jsx)];
+  }
+  return jsx;
+};