@builder.io/mitosis 0.0.49 → 0.0.50-2

package/dist/src/generators/react-native.js

@@ -67,25 +67,46 @@ var collectReactNativeStyles = function (json) {
     return styleMap;
 };
 exports.collectReactNativeStyles = collectReactNativeStyles;
+// Plugin to convert DOM tags to <View /> and <Text />
+function processReactNative() {
+    return function () { return ({
+        json: {
+            pre: function (json) {
+                (0, traverse_1.default)(json).forEach(function (node) {
+                    var _a, _b, _c;
+                    if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
+                        // TODO: handle TextInput, Image, etc
+                        if (node.name.toLowerCase() === node.name) {
+                            node.name = 'View';
+                        }
+                        if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
+                            ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
+                            node.name = 'Text';
+                        }
+                        if (node.properties.class) {
+                            delete node.properties.class;
+                        }
+                        if (node.properties.className) {
+                            delete node.properties.className;
+                        }
+                        if (node.bindings.class) {
+                            delete node.bindings.class;
+                        }
+                        if (node.bindings.className) {
+                            delete node.bindings.className;
+                        }
+                    }
+                });
+            },
+        },
+    }); };
+}
 var componentToReactNative = function (options) {
     if (options === void 0) { options = {}; }
     return function (_a) {
         var component = _a.component, path = _a.path;
         var json = (0, fast_clone_1.fastClone)(component);
-        (0, traverse_1.default)(json).forEach(function (node) {
-            var _a, _b, _c;
-            if ((0, is_mitosis_node_1.isMitosisNode)(node)) {
-                // TODO: handle TextInput, Image, etc
-                if (node.name.toLowerCase() === node.name) {
-                    node.name = 'View';
-                }
-                if (((_a = node.properties._text) === null || _a === void 0 ? void 0 : _a.trim().length) ||
-                    ((_c = (_b = node.bindings._text) === null || _b === void 0 ? void 0 : _b.trim()) === null || _c === void 0 ? void 0 : _c.length)) {
-                    node.name = 'Text';
-                }
-            }
-        });
-        return (0, react_1.componentToReact)(__assign(__assign({}, options), { stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
+        return (0, react_1.componentToReact)(__assign(__assign({}, options), { plugins: (options.plugins || []).concat([processReactNative()]), stylesType: options.stylesType || 'react-native', type: 'native' }))({ component: json, path: path });
     };
 };
 exports.componentToReactNative = componentToReactNative;

package/dist/src/plugins/compile-away-builder-components.js

@@ -475,7 +475,7 @@ var compileAwayBuilderComponents = function (pluginOptions) {
     return function (options) { return ({
         json: {
             pre: function (json) {
-                (0, exports.compileAwayBuilderComponentsFromTree)(json, exports.components);
+                (0, exports.compileAwayBuilderComponentsFromTree)(json, obj);
             },
         },
     }); };

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/high.jsx

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,63 @@
+import { __merge } from "./med";
+
+import { h, qHook } 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_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>
+          );
+        }).bind(state))
+        }
+      </section>
+    </div>
+  );
+});

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

@@ -0,0 +1,10 @@
+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"),
+  onRender: qHook("./low#MyComponent_onRender"),
+  styles: "./low#MyComponent_styles"
+});

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

@@ -3,57 +3,62 @@ 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) => (
-  h(
-    "li",
-    {
-      class: `${props.todo.completed ? 'completed' : ''} ${state.editing ? 'editing' : ''}`
-    },
+exports.Todo_onRender = qHook((__props__, __state__) => {
+  const state = exports.__merge(__state__, __props__);
+  ;
+  return (
     h(
-      "div",
+      "li",
       {
-        class: "view"
+        class: `${props.todo.completed ? 'completed' : ''} ${state.editing ? 'editing' : ''}`
       },
       h(
-        "input",
+        "div",
         {
-          type: "checkbox",
-          class: "toggle",
-          checked: props.todo.completed,
-          "on:click": qHook("./high#Todo_onClick_0")
-        }
-      ),
-      h(
-        "label",
-        {
-          "on:dblclick": qHook("./high#Todo_onDblClick_1")
+          class: "view"
         },
-        props.todo.text
+        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")
+          }
+        )
       ),
-      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
-  )
-));
+      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

@@ -1 +1 @@
-import{h,qComponent,qHook}from"@builder.io/qwik";export const onMountCreateEmptyState=qHook(()=>({}));export const Todo=qComponent({onMount:qHook("./med#onMountCreateEmptyState"),onRender:qHook("./med#Todo_onRender")});export const Todo_onRender=qHook((props,state)=>(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)));
+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

@@ -1,34 +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) => (
-  <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>
-));
+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>
+  );
+});