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

package/dist/src/types/mitosis-node.d.ts

@@ -4,31 +4,37 @@ export declare type MitosisNode = {
     name: string;
     meta: JSONObject;
     /**
-     * Key-value store of static values for DOM attributes.
+     * Key-value store of string values for DOM attributes.
      * ```js
      * {
-     *   disabled: false,
-     *   defaultValue: 'initial text`,
-     *   width: 100,
+     *   defaultValue: 'initial text',
+     *   width: '100px',
      * }
      * ```
      */
+    scope: {
+        [key: string]: Array<string>;
+    };
     properties: {
         [key: string]: string | undefined;
     };
     /**
-     * Key-value store of _dynamic_ values for DOM attributes.
+     * Key-value store of expression values for DOM attributes. These are always represented as strings.
      *
      * ```js
      * {
-     *   disabled: state.isDisabled,
-     *   defaultValue: `${props.text} + ' initial'`,
-     *   width: props.width * 10,
+     *   disabled: "state.isDisabled",
+     *   defaultValue: "`${props.text} + ' initial'`",
+     *   width: "props.width * 10",
+     *   height: "100",
      * }
      * ```
      */
     bindings: {
-        [key: string]: string | undefined;
+        [key: string]: {
+            code: string;
+            arguments?: string[];
+        } | undefined;
     };
     children: MitosisNode[];
 };

package/dist/src/types/transpiler.d.ts

@@ -0,0 +1,14 @@
+import { MitosisComponent } from './mitosis-component';
+import { Plugin } from './plugins';
+export interface TranspilerArgs {
+    path?: string;
+    component: MitosisComponent;
+}
+export declare type Transpiler = (args: TranspilerArgs) => string;
+export interface BaseTranspilerOptions {
+    experimental?: {
+        [key: string]: any;
+    };
+    prettier?: boolean;
+    plugins?: Plugin[];
+}

package/dist/src/types/transpiler.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,7 +1,13 @@
-import { h, qrl, useLexicalScope } from "@builder.io/qwik";
+import { Fragment, h, qrl, withScopedStylesQrl } 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_onRender = () => {
-  const state = useLexicalScope()[0];
+export const MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <div
       gridRowWidth="25%"

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

@@ -1,10 +1,4 @@
-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]);
-};
+import { componentQrl, qrl } from "@builder.io/qwik";
 export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponent_onMount", [])
+  qrl("./low.js", "MyComponent_onMount", [])
 );

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

@@ -1,32 +1,36 @@
-import { h, qrl, useLexicalScope } from "@builder.io/qwik";
+import { Fragment, h, qrl, withScopedStylesQrl } 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 = () => {
-  const state = useLexicalScope()[0];
+export const MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   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)
-        )}
+        {(state.simpleList.results || []).map((item) => {
+          var state = Object.assign({}, this, {
+            resultsItem: item == null ? {} : item,
+          });
+          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>
+          );
+        })}
       </section>
     </div>
   );

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

@@ -1,10 +1,4 @@
-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]);
-};
+import { componentQrl, qrl } from "@builder.io/qwik";
 export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponent_onMount", [])
+  qrl("./low.js", "MyComponent_onMount", [])
 );

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

@@ -1,5 +1,5 @@
 import { useLexicalScope } from "@builder.io/qwik";
-export const MyComponent_onClick_0 = () => {
+export const MyComponent_onClick_0 = (event) => {
   const state = useLexicalScope()[0];
   try {
     return (state.myState = "changed value");

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

@@ -3,22 +3,18 @@ import {
   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]);
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
   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,
@@ -55,6 +51,9 @@ export const MyComponent_onRender = () => {
     )
   );
 };
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
 export const Image = function Image(props) {
   var _a;
   var jsx = props.children || [];
@@ -81,12 +80,15 @@ export const Image = function Image(props) {
       srcset: undefined,
     };
     if (isBuilderIoImage) {
-      image = updateQueryParam(image, "format", "webp");
+      var webpImage_1 = updateQueryParam(image, "format", "webp");
       var srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
         .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
         .map(function (size) {
-          return updateQueryParam(image, "width", size) + " " + size + "w";
+          return (
+            updateQueryParam(webpImage_1, "width", size) + " " + size + "w"
+          );
         })
+        .concat([image])
         .join(",");
       imgProps.srcset = srcset;
       jsx = jsx = [

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

@@ -1,5 +1,5 @@
 import { useLexicalScope } from "@builder.io/qwik";
-export const MyComponent_onClick_0 = () => {
+export const MyComponent_onClick_0 = (event) => {
   const state = useLexicalScope()[0];
   try {
     return (state.myState = "changed value");

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

@@ -3,22 +3,18 @@ import {
   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]);
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
   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,
@@ -55,6 +51,9 @@ export const MyComponent_onRender = () => {
     )
   );
 };
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
 export const Image = function Image(props) {
   var _a;
   var jsx = props.children || [];
@@ -81,12 +80,15 @@ export const Image = function Image(props) {
       srcset: undefined,
     };
     if (isBuilderIoImage) {
-      image = updateQueryParam(image, "format", "webp");
+      var webpImage_1 = updateQueryParam(image, "format", "webp");
       var srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
         .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
         .map(function (size) {
-          return updateQueryParam(image, "width", size) + " " + size + "w";
+          return (
+            updateQueryParam(webpImage_1, "width", size) + " " + size + "w"
+          );
         })
+        .concat([image])
         .join(",");
       imgProps.srcset = srcset;
       jsx = jsx = [

package/dist/test/qwik/bindings/low.cjs

@@ -1,9 +1,18 @@
+const Fragment = require("@builder.io/qwik").Fragment;
 const h = require("@builder.io/qwik").h;
 const qrl = require("@builder.io/qwik").qrl;
-const useLexicalScope = require("@builder.io/qwik").useLexicalScope;
+const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
 exports.MyComponent_styles = `.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}`;
-exports.MyComponent_onRender = () => {
-  const state = useLexicalScope()[0];
+exports.MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("title")) state.title = '"Default title value"';
+    if (!state.hasOwnProperty("hiliteTitle")) state.hiliteTitle = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(
     "div",
     {

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

@@ -1,12 +1,3 @@
 const componentQrl = require("@builder.io/qwik").componentQrl;
 const qrl = require("@builder.io/qwik").qrl;
-const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
-exports.MyComponent_onMount = (state) => {
-  if (state.title === undefined) state.title = '"Default title value"';
-  if (state.hiliteTitle === undefined) state.hiliteTitle = true;
-  typeof __STATE__ === "object" &&
-    Object.assign(state, __STATE__[state.serverStateId]);
-  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
-  return qrl("./low.js", "MyComponent_onRender", [state]);
-};
-exports.MyComponent = componentQrl(qrl("./med.js", "MyComponent_onMount", []));
+exports.MyComponent = componentQrl(qrl("./low.js", "MyComponent_onMount", []));

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

@@ -1,3 +1,3 @@
-export const MyComponent_onClick_0 = () => {
+export const MyComponent_onClick_0 = (event) => {
   alert("WORKS!");
 };

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

@@ -1,8 +1,14 @@
 import { CoreButton } from "./med.js";
-import { h, qrl, useLexicalScope } from "@builder.io/qwik";
+import { Fragment, h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
 export const MyComponent_styles = `.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}`;
-export const MyComponent_onRender = () => {
-  const state = useLexicalScope()[0];
+export const MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return h(CoreButton, {
     text: "Click me!",
     class: "c9nzze9",

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

@@ -1,12 +1,6 @@
-import { componentQrl, h, 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]);
-};
+import { componentQrl, h, qrl } from "@builder.io/qwik";
 export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponent_onMount", [])
+  qrl("./low.js", "MyComponent_onMount", [])
 );
 export const CoreButton = function CoreButton(props) {
   var hasLink = !!props.link;

package/dist/test/qwik/component/bindings/low.jsx

@@ -1,8 +1,17 @@
 import { ComponentD187055AF171488FAD843ACF045D6BF7 } from "./med.js";
-import { Fragment, h, qrl, useLexicalScope } from "@builder.io/qwik";
+import { Fragment, h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
 export const ComponentD187055AF171488FAD843ACF045D6BF7_styles = `.cj49hqu{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;height:auto;background-color:rgba(227, 227, 227, 1);border-radius:5px;border-style:solid;border-color:rgb(0, 0, 0);border-width:1px;padding-bottom:30px}.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 ComponentD187055AF171488FAD843ACF045D6BF7_onRender = () => {
-  const state = useLexicalScope()[0];
+export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("title")) state.title = "default-title";
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(
+    qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_styles", [])
+  );
   return (
     <div class="cj49hqu">
       <div class="cjrqfb1">
@@ -22,8 +31,42 @@ export const ComponentD187055AF171488FAD843ACF045D6BF7_onRender = () => {
   );
 };
 export const MyComponent_styles = `.c713ty2{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px}`;
-export const MyComponent_onRender = () => {
-  const state = useLexicalScope()[0];
+export const MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    (() => {
+      /*
+       * Global objects available:
+       *
+       * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
+       * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
+       * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
+       * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
+       *
+       * visit https://www.builder.io/c/docs/guides/custom-code
+       * for more information on writing custom code
+       */
+      async function main() {
+        if (Builder.isServer) {
+          // Place any code here you want to only run on the server. Any
+          // data fetched on the server will be available to re-hydrate on the client
+          // if added to the state object
+        }
+
+        if (Builder.isBrowser) {
+          // Place code that you only want to run in the browser (client side only) here
+          // For example, anything that uses document/window access or DOM manipulation
+        }
+
+        state.something = "works!";
+      }
+
+      return main();
+    })();
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <>
       <div class="c713ty2">

package/dist/test/qwik/component/bindings/med.jsx

@@ -1,53 +1,7 @@
-import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
-export const ComponentD187055AF171488FAD843ACF045D6BF7_onMount = (state) => {
-  if (state.title === undefined) state.title = "default-title";
-  typeof __STATE__ === "object" &&
-    Object.assign(state, __STATE__[state.serverStateId]);
-  withScopedStylesQrl(
-    qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_styles", [])
-  );
-  return qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_onRender", [
-    state,
-  ]);
-};
+import { componentQrl, qrl } from "@builder.io/qwik";
 export const ComponentD187055AF171488FAD843ACF045D6BF7 = componentQrl(
-  qrl("./med.js", "ComponentD187055AF171488FAD843ACF045D6BF7_onMount", [])
+  qrl("./low.js", "ComponentD187055AF171488FAD843ACF045D6BF7_onMount", [])
 );
-export const MyComponent_onMount = (state) => {
-  typeof __STATE__ === "object" &&
-    Object.assign(state, __STATE__[state.serverStateId]);
-  (() => {
-    /*
-     * Global objects available:
-     *
-     * state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
-     * context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
-     * fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
-     * Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
-     *
-     * visit https://www.builder.io/c/docs/guides/custom-code
-     * for more information on writing custom code
-     */
-    async function main() {
-      if (Builder.isServer) {
-        // Place any code here you want to only run on the server. Any
-        // data fetched on the server will be available to re-hydrate on the client
-        // if added to the state object
-      }
-
-      if (Builder.isBrowser) {
-        // Place code that you only want to run in the browser (client side only) here
-        // For example, anything that uses document/window access or DOM manipulation
-      }
-
-      state.something = "works!";
-    }
-
-    return main();
-  })();
-  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
-  return qrl("./low.js", "MyComponent_onRender", [state]);
-};
 export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponent_onMount", [])
+  qrl("./low.js", "MyComponent_onMount", [])
 );

package/dist/test/qwik/component/component/inputs/high.cjsx

@@ -1,5 +1,5 @@
 const useLexicalScope = require("@builder.io/qwik").useLexicalScope;
-exports.MyComponent_onClick_0 = () => {
+exports.MyComponent_onClick_0 = (event) => {
   const state = useLexicalScope()[0];
   try {
     return (state.data = state.data + 1);

package/dist/test/qwik/component/component/inputs/med.cjsx

@@ -2,19 +2,17 @@ const Fragment = require("@builder.io/qwik").Fragment;
 const componentQrl = require("@builder.io/qwik").componentQrl;
 const h = require("@builder.io/qwik").h;
 const qrl = require("@builder.io/qwik").qrl;
-const useLexicalScope = require("@builder.io/qwik").useLexicalScope;
 const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
 exports.MyComponent_styles = `.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}.c9nzze9{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;appearance:none;padding-top:15px;padding-bottom:15px;padding-left:25px;padding-right:25px;background-color:#3898EC;color:white;border-radius:4px;text-align:center;cursor:pointer}`;
 exports.MyComponent_onMount = (state) => {
-  if (state.data === undefined) state.data = 0;
-  typeof __STATE__ === "object" &&
-    Object.assign(state, __STATE__[state.serverStateId]);
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("data")) state.data = 0;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
   withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
-  return qrl("./med.js", "MyComponent_onRender", [state]);
-};
-exports.MyComponent = componentQrl(qrl("./med.js", "MyComponent_onMount", []));
-exports.MyComponent_onRender = () => {
-  const state = useLexicalScope()[0];
   return (
     <>
       <div class="cjrqfb1">
@@ -38,6 +36,7 @@ exports.MyComponent_onRender = () => {
     </>
   );
 };
+exports.MyComponent = componentQrl(qrl("./med.js", "MyComponent_onMount", []));
 const CoreButton = (exports.CoreButton = function CoreButton(props) {
   var hasLink = !!props.link;
   var hProps = {

package/dist/test/qwik/for-loop.bindings/low.cjs

@@ -0,0 +1,46 @@
+const Component000013 = require("./med.js").Component000013;
+const Fragment = require("@builder.io/qwik").Fragment;
+const h = require("@builder.io/qwik").h;
+const qrl = require("@builder.io/qwik").qrl;
+const withScopedStylesQrl = require("@builder.io/qwik").withScopedStylesQrl;
+exports.Component000012_styles = `.cv6ku2d{display:flex;flex-direction:row;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;padding-bottom:30px;flex-wrap:wrap;width:calc(100%+3vw);height:100%;min-height:100%;margin-left:-1.5vw;margin-right:-1.5vw}.c3j7e6c{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;width:33.3%}@media (max-width: 991px){.cv6ku2d{width:100%;margin-left:auto;margin-right:auto}}@media (max-width: 640px){.cv6ku2d{display:flex;flex-direction:column;align-items:stretch}}@media (max-width: 640px){.c3j7e6c{width:98%;margin-left:auto;margin-right:auto;margin-top:-10px}}`;
+exports.Component000012_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    if (!state.hasOwnProperty("offset")) state.offset = "0";
+    if (!state.hasOwnProperty("limit")) state.limit = 3;
+    if (!state.hasOwnProperty("blogCategory"))
+      state.blogCategory = {
+        "@type": "@builder.io/core:Reference",
+        id: "",
+        model: "",
+      };
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "Component000012_styles", []));
+  return h(
+    "div",
+    { class: "cv6ku2d" },
+    (state.hits || []).map((item) => {
+      var state = Object.assign({}, this, {
+        hitsItem: item == null ? {} : item,
+      });
+      return h(
+        "div",
+        { class: "c3j7e6c" },
+        h(Component000013, {
+          altText: "",
+          serverStateId: "woo8b6",
+          title: state.hitsItem.name,
+          linkUrl: state.hitsItem.url,
+          subCategory: state.hitsItem.blogSubcategory,
+          imageUrl: state.hitsItem.heroImage,
+          publicationDate: state.hitsItem.createdDate,
+          heroImageAltText: state.hitsItem.heroImageAltText,
+        })
+      );
+    })
+  );
+};

package/dist/test/qwik/for-loop.bindings/med.cjs

@@ -0,0 +1,5 @@
+const componentQrl = require("@builder.io/qwik").componentQrl;
+const qrl = require("@builder.io/qwik").qrl;
+exports.Component000012 = componentQrl(
+  qrl("./low.js", "Component000012_onMount", [])
+);

package/dist/test/qwik/hello_world/stylesheet/low.jsx

@@ -1,7 +1,13 @@
-import { h, qrl, useLexicalScope } from "@builder.io/qwik";
+import { Fragment, h, qrl, withScopedStylesQrl } from "@builder.io/qwik";
 export const MyComponent_styles = `.crt27f8{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:123px;line-height:normal;height:auto;text-align:center;margin-left:auto;margin-right:auto}`;
-export const MyComponent_onRender = () => {
-  const state = useLexicalScope()[0];
+export const MyComponent_onMount = (state) => {
+  if (!state.__INIT__) {
+    state.__INIT__ = true;
+    typeof __STATE__ === "object" &&
+      Object.assign(state, __STATE__[state.serverStateId]);
+    undefined;
+  }
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
   return (
     <div class="crt27f8">
       <p>

package/dist/test/qwik/hello_world/stylesheet/med.jsx

@@ -1,10 +1,4 @@
-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]);
-};
+import { componentQrl, qrl } from "@builder.io/qwik";
 export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponent_onMount", [])
+  qrl("./low.js", "MyComponent_onMount", [])
 );