@builder.io/mitosis 0.0.47 → 0.0.50-0

package/dist/test/qoot/Todos/public.ts

@@ -0,0 +1,3 @@
+import { jsxDeclareComponent, QRL } from "@builder.io/qwik";
+
+export const Todos = jsxDeclareComponent(QRL`ui:/Todos/template`, "todos");

package/dist/test/qoot/Todos/template.tsx

@@ -0,0 +1,30 @@
+import { injectMethod, QRL, jsxFactory } from "@builder.io/qwik";
+import { TodosComponent } from "./component.js";
+
+import { TodosState as todosState } from "../TodosState/public.js";
+import { Todo } from "../Todo/public.js";
+
+export default injectMethod(TodosComponent, function (this: TodosComponent) {
+  return (
+    <section class="main">
+      {todosState.todos.length ? (
+        <>
+          <input
+            class="toggle-all"
+            type="checkbox"
+            checked={todosState.allCompleted}
+            on:click={QRL`ui:/Todos/onInputClick`}
+          />
+        </>
+      ) : undefined}
+
+      <ul class="todo-list">
+        {todosState.todos.map((todo) => (
+          <>
+            <Todo todo={todo}></Todo>
+          </>
+        ))}
+      </ul>
+    </section>
+  );
+});

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

@@ -1,3 +1,5 @@
+import { __merge } from "./med";
+
 import { h, qHook } from "@builder.io/qwik";
 
 
@@ -41,52 +43,56 @@ export const MyComponent_styles = `
   }
 `;
 
-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>
-      <div builder="accordion">
-        <div builder="accordion-title">
-          <div class="csanagh">
-            <div class="crwdrpw">
-              <div innerHTML="<p>Item 1</p>"
-                  class="builder-text">
+export const MyComponent_onRender = qHook((__props__, __state__) => {
+  const state = __merge(__state__, __props__);
+  ;
+  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>
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div class="csanagh">
+              <div class="crwdrpw">
+                <div innerHTML="<p>Item 1</p>"
+                    class="builder-text">
+                </div>
               </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 builder="accordion-detail">
+            <div class="c4qyc1p">
+              <div class="ctcw2m4">
+                <div innerHTML="<p>Item 1 content</p>"
+                    class="builder-text">
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div builder="accordion">
-        <div builder="accordion-title">
-          <div class="csanagh">
-            <div class="crwdrpw">
-              <div innerHTML="<p>Item 2</p>"
-                  class="builder-text">
+        <div builder="accordion">
+          <div builder="accordion-title">
+            <div class="csanagh">
+              <div class="crwdrpw">
+                <div innerHTML="<p>Item 2</p>"
+                    class="builder-text">
+                </div>
               </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 builder="accordion-detail">
+            <div class="c4qyc1p">
+              <div class="ctcw2m4">
+                <div innerHTML="<p>Item 2 content</p>"
+                    class="builder-text">
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-));
+  );
+});

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

@@ -1,6 +1,7 @@
 import { qComponent, qHook } 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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
 export const onMountCreateEmptyState = qHook(() => ({}));
 export const MyComponent = qComponent({
   onMount: qHook("./med#onMountCreateEmptyState"),

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

@@ -1,3 +1,5 @@
+import { __merge } from "./med";
+
 import { h, qHook } from "@builder.io/qwik";
 
 
@@ -33,23 +35,29 @@ export const MyComponent_styles = `
   }
 `;
 
-export const MyComponent_onRender = qHook((props, state) => (
-  <div class="cvdfnp5"
-      maxWidth={1200}>
-    <section class="cz5wnof">
-      { (state.simpleList.results || []).map(() => (
-        <div class="cdrk993">
-          <div class="builder-text"
-              innerHTML={(() => {
+export const MyComponent_onRender = qHook((__props__, __state__) => {
+  const state = __merge(__state__, __props__);
+  ;
+  return (
+    <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>
-        </div>
-      ))
-      }
-    </section>
-  </div>
-));
+          );
+        }).bind(state))
+        }
+      </section>
+    </div>
+  );
+});

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

@@ -1,6 +1,7 @@
 import { qComponent, qHook } 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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
 export const onMountCreateEmptyState = qHook(() => ({}));
 export const MyComponent = qComponent({
   onMount: qHook("./med#onMountCreateEmptyState"),

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

@@ -1,3 +1,7 @@
+import { __merge } from "./med";
+
+import { Image } from "./med.js";
+
 import { h, qHook } from "@builder.io/qwik";
 
 
@@ -13,56 +17,25 @@ export const MyComponent_styles = `
     min-width: 20px;
     overflow: hidden;
   }
-  .c4vjsfu{
-    width: 100%;
-    padding-top: 100%;
-    pointer-events: none;
-    font-size: 0;
-  }
-  .cffxoir{
-    object-fit: cover;
-    object-position: center;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-  }
 `;
 
-export const MyComponent_onRender = qHook((props, state) => (
-  h(
-    "div",
-    {
-      class: "cvk52jt"
-    },
-    h(
-      "picture",
-      {
-        
-      },
-      h(
-        "source",
-        {
-          srcset: "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b",
-          type: "image/webp"
-        }
-      ),
-      h(
-        "img",
-        {
-          src: "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b",
-          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",
-          class: "cffxoir",
-          loading: "lazy"
-        }
-      )
-    ),
+export const MyComponent_onRender = qHook((__props__, __state__) => {
+  const state = __merge(__state__, __props__);
+  ;
+  return (
     h(
-      "div",
+      Image,
       {
-        class: "c4vjsfu builder-image-sizer"
+        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,9 +1,11 @@
-import { qComponent, qHook } from "@builder.io/qwik";
+import { h, qComponent, qHook } 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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
 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,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);}};

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

@@ -1,3 +1,7 @@
+import { __merge } from "./med";
+
+import { Image } from "./med.js";
+
 import { h, qHook } from "@builder.io/qwik";
 
 
@@ -13,56 +17,25 @@ export const MyComponent_styles = `
     min-width: 20px;
     overflow: hidden;
   }
-  .c4vjsfu{
-    width: 100%;
-    padding-top: 100%;
-    pointer-events: none;
-    font-size: 0;
-  }
-  .cffxoir{
-    object-fit: cover;
-    object-position: center;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-  }
 `;
 
-export const MyComponent_onRender = qHook((props, state) => (
-  h(
-    "div",
-    {
-      class: "cvk52jt"
-    },
-    h(
-      "picture",
-      {
-        
-      },
-      h(
-        "source",
-        {
-          srcset: "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?format=webp&width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b",
-          type: "image/webp"
-        }
-      ),
-      h(
-        "img",
-        {
-          src: "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b",
-          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",
-          class: "cffxoir",
-          loading: "lazy"
-        }
-      )
-    ),
+export const MyComponent_onRender = qHook((__props__, __state__) => {
+  const state = __merge(__state__, __props__);
+  ;
+  return (
     h(
-      "div",
+      Image,
       {
-        class: "c4vjsfu builder-image-sizer"
+        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.slow/med.js

@@ -1,9 +1,11 @@
-import { qComponent, qHook } from "@builder.io/qwik";
+import { h, qComponent, qHook } 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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
 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,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);}};

package/dist/test/qwik/Todo/Todo.cjs/med.cjs

@@ -0,0 +1,64 @@
+const h = require("@builder.io/qwik").h;
+const qComponent = require("@builder.io/qwik").qComponent;
+const qHook = require("@builder.io/qwik").qHook;
+
+
+exports.__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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
+exports.onMountCreateEmptyState = qHook(() => ({}));
+exports.Todo = qComponent({
+  onMount: qHook("./med#onMountCreateEmptyState"),
+  onRender: qHook("./med#Todo_onRender")
+});
+
+exports.Todo_onRender = qHook((__props__, __state__) => {
+  const state = exports.__merge(__state__, __props__);
+  ;
+  return (
+    h(
+      "li",
+      {
+        class: `${props.todo.completed ? 'completed' : ''} ${state.editing ? 'editing' : ''}`
+      },
+      h(
+        "div",
+        {
+          class: "view"
+        },
+        h(
+          "input",
+          {
+            type: "checkbox",
+            class: "toggle",
+            checked: props.todo.completed,
+            "on:click": qHook("./high#Todo_onClick_0")
+          }
+        ),
+        h(
+          "label",
+          {
+            "on:dblclick": qHook("./high#Todo_onDblClick_1")
+          },
+          props.todo.text
+        ),
+        h(
+          "button",
+          {
+            class: "destroy",
+            "on:click": qHook("./high#Todo_onClick_2")
+          }
+        )
+      ),
+      state.editing ?
+        h(
+          "input",
+          {
+            class: "edit",
+            value: props.todo.text,
+            "on:blur": qHook("./high#Todo_onBlur_3"),
+            "on:keyup": qHook("./high#Todo_onKeyUp_4")
+          }
+        )
+        : null
+    )
+  );
+});

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

@@ -0,0 +1 @@
+import{h,qComponent,qHook}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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};export const onMountCreateEmptyState=qHook(()=>({}));export const Todo=qComponent({onMount:qHook("./med#onMountCreateEmptyState"),onRender:qHook("./med#Todo_onRender")});export const Todo_onRender=qHook((__props__,__state__)=>{const state=__merge(__state__,__props__);;return (h("li",{class:`${props.todo.completed ? 'completed' : ''} ${state.editing ? 'editing' : ''}`},h("div",{class:"view"},h("input",{type:"checkbox",class:"toggle",checked:props.todo.completed,"on:click":qHook("./high#Todo_onClick_0")}),h("label",{"on:dblclick":qHook("./high#Todo_onDblClick_1")},props.todo.text),h("button",{class:"destroy","on:click":qHook("./high#Todo_onClick_2")})),state.editing?h("input",{class:"edit",value:props.todo.text,"on:blur":qHook("./high#Todo_onBlur_3"),"on:keyup":qHook("./high#Todo_onKeyUp_4")}):null));});

package/dist/test/qwik/Todo/Todo.tsx/med.tsx

@@ -0,0 +1,39 @@
+import { h, qComponent, qHook } 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){debugger;Object.assign(state,__STATE__[props.serverStateId]);}return state;};
+export const onMountCreateEmptyState = qHook<any, any>(() => ({}));
+export const Todo = qComponent<any, any>({
+  onMount: qHook("./med#onMountCreateEmptyState"),
+  onRender: qHook("./med#Todo_onRender")
+});
+
+export const Todo_onRender = qHook((__props__, __state__) => {
+  const state = __merge(__state__, __props__);
+  ;
+  return (
+    <li class={`${props.todo.completed ? 'completed' : ''} ${state.editing ? 'editing' : ''}`}>
+      <div class="view">
+        <input type="checkbox"
+            class="toggle"
+            checked={props.todo.completed}
+            on:click={qHook("./high#Todo_onClick_0")}>
+        </input>
+        <label on:dblclick={qHook("./high#Todo_onDblClick_1")}>
+          {props.todo.text}
+        </label>
+        <button class="destroy"
+            on:click={qHook("./high#Todo_onClick_2")}>
+        </button>
+      </div>
+      { state.editing ?
+        <input class="edit"
+            value={props.todo.text}
+            on:blur={qHook("./high#Todo_onBlur_3")}
+            on:keyup={qHook("./high#Todo_onKeyUp_4")}>
+        </input>
+        : null
+      }
+    </li>
+  );
+});

package/dist/test/qwik/Todo/bundle.js

@@ -0,0 +1,46 @@
+import { Component, injectMethod, h, QRL } from '@builder.io/qwik';
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+class TodoComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "editing", false);
+  }
+
+  toggle() {
+    this.todo.completed = !this.todo.completed;
+  }
+
+  $newState() {
+    return {}; // TODO
+  }
+
+}
+
+_defineProperty(TodoComponent, "$templateQRL", "ui:/Todo/bundle.template");
+
+const template = injectMethod(TodoComponent, function () {
+  return h("li", {
+    class: `${this.todo.completed ? "completed" : ""} ${this.editing ? "editing" : ""}`
+  }, h("div", {
+    class: "view"
+  }, h("input", {
+    type: "checkbox",
+    class: "toggle",
+    checked: this.todo.completed,
+    "on:click": QRL`ui:/Todo/bundle.onInputClick`
+  }), h("label", {
+    "on:dblclick": QRL`ui:/Todo/bundle.onLabelDblClick`
+  }, this.todo.text), h("button", {
+    class: "destroy",
+    "on:click": QRL`ui:/Todo/bundle.onButtonClick`
+  })), this.editing ? h(null, null, h("input", {
+    class: "edit",
+    value: this.todo.text,
+    "on:blur": QRL`ui:/Todo/bundle.onInput2Blur`,
+    "on:keyup": QRL`ui:/Todo/bundle.onInput2KeyUp`
+  })) : undefined);
+});
+
+export { template };

package/dist/test/qwik/Todo/component.ts

@@ -0,0 +1,17 @@
+import { Component, QRL } from "@builder.io/qwik";
+
+export class TodoComponent extends Component<any, any> {
+  static $templateQRL = "ui:/Todo/template";
+
+  editing = false;
+  toggle() {
+    this.todo.completed = !this.todo.completed;
+  }
+
+  $newState() {
+    return {}; // TODO
+  }
+}
+
+  }
+}

package/dist/test/qwik/Todo/onButtonClick.ts

@@ -0,0 +1,10 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onButtonClick = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    todosState.todos.splice(todosState.todos.indexOf(this.todo));
+  }
+);

package/dist/test/qwik/Todo/onInput2Blur.ts

@@ -0,0 +1,14 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export default injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.editing = false;
+    markDirty(this);
+  }
+);
+his);
+  }
+);

package/dist/test/qwik/Todo/onInput2KeyUp.ts

@@ -0,0 +1,10 @@
+import { injectEventHandler, provideEvent, markDirty } from "@builder.io/qwik";
+import { TodoComponent } from "./component.js";
+
+export const onInput2KeyUp = injectEventHandler(
+  TodoComponent,
+  provideEvent(),
+  async function (this: TodoComponent, event: Event) {
+    this.todo.text = event.target.value;
+  }
+);