@builder.io/mitosis 0.0.50-6 → 0.0.50

package/dist/test/qwik/Accordion/low.jsx

@@ -1,76 +1,183 @@
-import { __merge } from "./med.js";
-
 import { h, qrl, useLexicalScope } 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;
-  }
-  .csanagh{
-    margin-top: 10px;
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    flex-direction: column;
-    padding-bottom: 10px;
-  }
-  .c4qyc1p{
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    flex-direction: column;
-    margin-top: 10px;
-    padding-bottom: 10px;
-  }
-  .crwdrpw{
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-  }
-  .ctcw2m4{
-    padding-top: 50px;
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 50px;
-  }
-`;
-
+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}.csanagh{margin-top:10px;position:relative;display:flex;align-items:stretch;flex-direction:column;padding-bottom:10px}.c4qyc1p{position:relative;display:flex;align-items:stretch;flex-direction:column;margin-top:10px;padding-bottom:10px}.crwdrpw{text-align:left;display:flex;flex-direction:column}.ctcw2m4{padding-top:50px;text-align:left;display:flex;flex-direction:column;padding-bottom:50px}`;
 export const MyComponent_onRender = () => {
-  const __scope__ = useLexicalScope();
-  const __props__ = __scope__[0];
-  const __state__ = __scope__[1];
-  const state = __merge(__state__, __props__);
-  ;
+  const state = useLexicalScope()[0];
   return (
-    <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
+      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>
         <div builder="accordion">
           <div builder="accordion-title">
             <div class="csanagh">
               <div class="crwdrpw">
-                <div innerHTML="<p>Item 1</p>"
-                    class="builder-text">
-                </div>
+                <div innerHTML="<p>Item 1</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
             <div class="c4qyc1p">
               <div class="ctcw2m4">
-                <div innerHTML="<p>Item 1 content</p>"
-                    class="builder-text">
-                </div>
+                <div
+                  innerHTML="<p>Item 1 content</p>"
+                  class="builder-text"
+                ></div>
               </div>
             </div>
           </div>
@@ -79,18 +186,17 @@ export const MyComponent_onRender = () => {
           <div builder="accordion-title">
             <div class="csanagh">
               <div class="crwdrpw">
-                <div innerHTML="<p>Item 2</p>"
-                    class="builder-text">
-                </div>
+                <div innerHTML="<p>Item 2</p>" class="builder-text"></div>
               </div>
             </div>
           </div>
           <div builder="accordion-detail">
             <div class="c4qyc1p">
               <div class="ctcw2m4">
-                <div innerHTML="<p>Item 2 content</p>"
-                    class="builder-text">
-                </div>
+                <div
+                  innerHTML="<p>Item 2 content</p>"
+                  class="builder-text"
+                ></div>
               </div>
             </div>
           </div>

package/dist/test/qwik/Accordion/med.jsx

@@ -1,11 +1,10 @@
-import { component, createStore, qrl, withScopedStyles } from "@builder.io/qwik";
-
-
-export const __merge = function __merge(state,props,create){if(create === void 0){create = false;}for(var key in props){if(key.indexOf(':')==-1 && !key.startsWith('__')&& Object.prototype.hasOwnProperty.call(props,key)){state[key] = props[key];}}if(create && typeof __STATE__ == 'object' && props.serverStateId){Object.assign(state,__STATE__[props.serverStateId]);}return state;};
-export const MyComponent_onMount = (__props__) => {
-  const __state__ = createStore({});
-  const state = __merge(__state__, __props__,true);
-  ;withScopedStyles(qrl("./low.js", "MyComponent_styles", []))
-  return qrl("./low.js", "MyComponent_onRender", [__props__,__state__]);
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
 };
-export const MyComponent = component(qrl("./med.js", "MyComponent_onMount", []));
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);

package/dist/test/qwik/For/high.jsx

@@ -1 +0,0 @@
-

package/dist/test/qwik/For/low.jsx

@@ -1,65 +1,32 @@
-import { __merge } from "./med.js";
-
 import { h, qrl, useLexicalScope } from "@builder.io/qwik";
-
-
-export const MyComponent_styles = `
-  .cvdfnp5{
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    margin-top: 0px;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    width: 100vw;
-    margin-left: calc(50% - 50vw);
-  }
-  .cz5wnof{
-    width: 100%;
-    align-self: stretch;
-    flex-grow: 1;
-    box-sizing: border-box;
-    max-width: 1200px;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .cdrk993{
-    text-align: center;
-  }
-`;
-
+export const MyComponent_styles = `.cvdfnp5{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:0px;padding-left:20px;padding-right:20px;padding-top:50px;padding-bottom:50px;width:100vw;margin-left:calc(50% - 50vw)}.cz5wnof{width:100%;align-self:stretch;flex-grow:1;box-sizing:border-box;max-width:1200px;display:flex;flex-direction:column;align-items:stretch;margin-left:auto;margin-right:auto}.cdrk993{text-align:center}`;
 export const MyComponent_onRender = () => {
-  const __scope__ = useLexicalScope();
-  const __props__ = __scope__[0];
-  const __state__ = __scope__[1];
-  const state = __merge(__state__, __props__);
-  ;
+  const state = useLexicalScope()[0];
   return (
-    <div class="cvdfnp5"
-        maxWidth={1200}>
+    <div class="cvdfnp5" maxWidth={1200}>
       <section class="cz5wnof">
-        { (state.simpleList.results || []).map((function(__value__) {
-          var state = Object.assign({}, this, {resultsItem: __value__ == null ? {} : __value__});
-          return (<div class="cdrk993">
-            <div class="builder-text"
-                innerHTML={(() => {
-    try { var _virtual_index=state.resultsItem.data.title;return _virtual_index }
-    catch (err) {
-      console.warn('Builder code error', err);
-    }
-  })()}>
-            </div>
-          </div>
-          );
-        }).bind(state))
-        }
+        {(state.simpleList.results || []).map(
+          function (__value__) {
+            var state = Object.assign({}, this, {
+              resultsItem: __value__ == null ? {} : __value__,
+            });
+            return (
+              <div class="cdrk993">
+                <div
+                  class="builder-text"
+                  innerHTML={(() => {
+                    try {
+                      var _virtual_index = state.resultsItem.data.title;
+                      return _virtual_index;
+                    } catch (err) {
+                      console.warn("Builder code error", err);
+                    }
+                  })()}
+                ></div>
+              </div>
+            );
+          }.bind(state)
+        )}
       </section>
     </div>
   );

package/dist/test/qwik/For/med.jsx

@@ -1,11 +1,10 @@
-import { component, createStore, qrl, withScopedStyles } from "@builder.io/qwik";
-
-
-export const __merge = function __merge(state,props,create){if(create === void 0){create = false;}for(var key in props){if(key.indexOf(':')==-1 && !key.startsWith('__')&& Object.prototype.hasOwnProperty.call(props,key)){state[key] = props[key];}}if(create && typeof __STATE__ == 'object' && props.serverStateId){Object.assign(state,__STATE__[props.serverStateId]);}return state;};
-export const MyComponent_onMount = (__props__) => {
-  const __state__ = createStore({});
-  const state = __merge(__state__, __props__,true);
-  ;withScopedStyles(qrl("./low.js", "MyComponent_styles", []))
-  return qrl("./low.js", "MyComponent_onRender", [__props__,__state__]);
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
 };
-export const MyComponent = component(qrl("./med.js", "MyComponent_onMount", []));
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);

package/dist/test/qwik/Image/high.js

@@ -1 +1,9 @@
-
+import { useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_onClick_0 = () => {
+  const state = useLexicalScope()[0];
+  try {
+    return (state.myState = "changed value");
+  } catch (err) {
+    console.warn("Builder code error", err);
+  }
+};

package/dist/test/qwik/Image/low.js

@@ -1,42 +0,0 @@
-import { Image, __merge } from "./med.js";
-
-import { h, qrl, useLexicalScope } from "@builder.io/qwik";
-
-
-export const MyComponent_styles = `
-  .cvk52jt{
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    margin-top: 20px;
-    min-height: 20px;
-    min-width: 20px;
-    overflow: hidden;
-  }
-`;
-
-export const MyComponent_onRender = () => {
-  const __scope__ = useLexicalScope();
-  const __props__ = __scope__[0];
-  const __state__ = __scope__[1];
-  const state = __merge(__state__, __props__);
-  ;
-  return (
-    h(
-      Image,
-      {
-        image: "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b",
-        backgroundSize: "cover",
-        backgroundPosition: "center",
-        class: "cvk52jt",
-        lazy: true,
-        fitContent: true,
-        aspectRatio: 1,
-        height: 1300,
-        width: 1300
-      }
-    )
-  );
-};

package/dist/test/qwik/Image/med.js

@@ -1,12 +1,149 @@
-import { component, createStore, h, qrl, withScopedStyles } from "@builder.io/qwik";
-
-
-export const __merge = function __merge(state,props,create){if(create === void 0){create = false;}for(var key in props){if(key.indexOf(':')==-1 && !key.startsWith('__')&& Object.prototype.hasOwnProperty.call(props,key)){state[key] = props[key];}}if(create && typeof __STATE__ == 'object' && props.serverStateId){Object.assign(state,__STATE__[props.serverStateId]);}return state;};
-export const MyComponent_onMount = (__props__) => {
-  const __state__ = createStore({});
-  const state = __merge(__state__, __props__,true);
-  ;withScopedStyles(qrl("./low.js", "MyComponent_styles", []))
-  return qrl("./low.js", "MyComponent_onRender", [__props__,__state__]);
-};
-export const MyComponent = component(qrl("./med.js", "MyComponent_onMount", []));
-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,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,};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),]),];}else{jsx = [h('img',imgProps,jsx)];}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"),});jsx.push(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);}};
+import {
+  Fragment,
+  componentQrl,
+  h,
+  qrl,
+  useLexicalScope,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
+export const MyComponent_onMount = (state) => {
+  if (state.myState === undefined) state.myState = "initialValue";
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
+  return qrl("./med.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
+export const MyComponent_onRender = () => {
+  const state = useLexicalScope()[0];
+  return h(
+    Fragment,
+    null,
+    h(Image, {
+      image:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      srcset:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
+      sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
+      class: "cvk52jt",
+      onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      lazy: false,
+      fitContent: true,
+      aspectRatio: 1,
+      height: 1300,
+      width: 1300,
+    }),
+    h(
+      "div",
+      { class: "cjrqfb1" },
+      h("div", {
+        class: "builder-text",
+        innerHTML: (() => {
+          try {
+            var _virtual_index = state.myState;
+            return _virtual_index;
+          } catch (err) {
+            console.warn("Builder code error", err);
+          }
+        })(),
+      })
+    )
+  );
+};
+export const Image = function Image(props) {
+  var _a;
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || "").match(/\.builder\.io/);
+    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"
+          : ""),
+      sizes: props.sizes,
+      alt: props.altText,
+      role: !props.altText ? "presentation" : undefined,
+      loading: isPixel ? "eager" : "lazy",
+      srcset: undefined,
+    };
+    if (isBuilderIoImage) {
+      image = 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";
+        })
+        .join(",");
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h("picture", {}, [
+          h("source", { type: "image/webp", srcset: srcset }),
+          h("img", imgProps, jsx),
+        ]),
+      ];
+    } else {
+      jsx = [h("img", imgProps, jsx)];
+    }
+    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"
+        ),
+      });
+      jsx.push(sizingDiv);
+    }
+  }
+  var children = props.children ? [jsx].concat(props.children) : [jsx];
+  return h(
+    props.href ? "a" : "div",
+    __passThroughProps__({ href: props.href, class: props.class }, props),
+    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);
+  }
+};
+export const __passThroughProps__ = function __passThroughProps__(
+  dstProps,
+  srcProps
+) {
+  for (var key in srcProps) {
+    if (
+      Object.prototype.hasOwnProperty.call(srcProps, key) &&
+      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+    ) {
+      dstProps[key] = srcProps[key];
+    }
+  }
+  return dstProps;
+};

package/dist/test/qwik/Image.slow/high.js

@@ -1 +1,9 @@
-
+import { useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_onClick_0 = () => {
+  const state = useLexicalScope()[0];
+  try {
+    return (state.myState = "changed value");
+  } catch (err) {
+    console.warn("Builder code error", err);
+  }
+};