@builder.io/mitosis 0.0.50-8 → 0.0.50

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

@@ -0,0 +1,149 @@
+import {
+  Fragment,
+  componentQrl,
+  h,
+  qrl,
+  useLexicalScope,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
+export const MyComponent_onMount = (state) => {
+  if (state.myState === undefined) state.myState = "initialValue";
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
+  return qrl("./med.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
+export const MyComponent_onRender = () => {
+  const state = useLexicalScope()[0];
+  return h(
+    Fragment,
+    null,
+    h(Image, {
+      image:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      srcset:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
+      sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
+      class: "cvk52jt",
+      onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      lazy: false,
+      fitContent: true,
+      aspectRatio: 1,
+      height: 1300,
+      width: 1300,
+    }),
+    h(
+      "div",
+      { class: "cjrqfb1" },
+      h("div", {
+        class: "builder-text",
+        innerHTML: (() => {
+          try {
+            var _virtual_index = state.myState;
+            return _virtual_index;
+          } catch (err) {
+            console.warn("Builder code error", err);
+          }
+        })(),
+      })
+    )
+  );
+};
+export const Image = function Image(props) {
+  var _a;
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || "").match(/\.builder\.io/);
+    var isPixel =
+      (_a = props.builderBlock) === null || _a === void 0
+        ? void 0
+        : _a.id.startsWith("builder-pixel-");
+    var imgProps = {
+      src: props.image,
+      style:
+        "object-fit:"
+          .concat(props.backgroundSize || "cover", ";object-position:")
+          .concat(props.backgroundPosition || "center", ";") +
+        (props.aspectRatio
+          ? "position:absolute;height:100%;width:100%;top:0;left:0"
+          : ""),
+      sizes: props.sizes,
+      alt: props.altText,
+      role: !props.altText ? "presentation" : undefined,
+      loading: isPixel ? "eager" : "lazy",
+      srcset: undefined,
+    };
+    if (isBuilderIoImage) {
+      image = updateQueryParam(image, "format", "webp");
+      var srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
+        .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
+        .map(function (size) {
+          return updateQueryParam(image, "width", size) + " " + size + "w";
+        })
+        .join(",");
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h("picture", {}, [
+          h("source", { type: "image/webp", srcset: srcset }),
+          h("img", imgProps, jsx),
+        ]),
+      ];
+    } else {
+      jsx = [h("img", imgProps, jsx)];
+    }
+    if (
+      props.aspectRatio &&
+      !(props.fitContent && props.children && props.children.length)
+    ) {
+      var sizingDiv = h("div", {
+        class: "builder-image-sizer",
+        style: "width:100%;padding-top:".concat(
+          (props.aspectRatio || 1) * 100,
+          "%;pointer-events:none;font-size:0"
+        ),
+      });
+      jsx.push(sizingDiv);
+    }
+  }
+  var children = props.children ? [jsx].concat(props.children) : [jsx];
+  return h(
+    props.href ? "a" : "div",
+    __passThroughProps__({ href: props.href, class: props.class }, props),
+    children
+  );
+  function updateQueryParam(uri, key, value) {
+    if (uri === void 0) {
+      uri = "";
+    }
+    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+    var separator = uri.indexOf("?") !== -1 ? "&" : "?";
+    if (uri.match(re)) {
+      return uri.replace(
+        re,
+        "$1" + key + "=" + encodeURIComponent(value) + "$2"
+      );
+    }
+    return uri + separator + key + "=" + encodeURIComponent(value);
+  }
+};
+export const __passThroughProps__ = function __passThroughProps__(
+  dstProps,
+  srcProps
+) {
+  for (var key in srcProps) {
+    if (
+      Object.prototype.hasOwnProperty.call(srcProps, key) &&
+      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+    ) {
+      dstProps[key] = srcProps[key];
+    }
+  }
+  return dstProps;
+};

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

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

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

@@ -0,0 +1,149 @@
+import {
+  Fragment,
+  componentQrl,
+  h,
+  qrl,
+  useLexicalScope,
+  withScopedStylesQrl,
+} from "@builder.io/qwik";
+export const MyComponent_styles = `.cvk52jt{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;min-height:20px;min-width:20px;overflow:hidden}.cjrqfb1{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center}`;
+export const MyComponent_onMount = (state) => {
+  if (state.myState === undefined) state.myState = "initialValue";
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./med.js", "MyComponent_styles", []));
+  return qrl("./med.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
+export const MyComponent_onRender = () => {
+  const state = useLexicalScope()[0];
+  return h(
+    Fragment,
+    null,
+    h(Image, {
+      image:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      srcset:
+        "https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=1160 1160w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F23dfd7cef1104af59f281d58ec525923%2F4ecf7b7554464b0183ab8250f67e797b?width=958 958w",
+      sizes: "(max-width: 638px) 94vw, (max-width: 998px) 96vw, 83vw",
+      class: "cvk52jt",
+      onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+      lazy: false,
+      fitContent: true,
+      aspectRatio: 1,
+      height: 1300,
+      width: 1300,
+    }),
+    h(
+      "div",
+      { class: "cjrqfb1" },
+      h("div", {
+        class: "builder-text",
+        innerHTML: (() => {
+          try {
+            var _virtual_index = state.myState;
+            return _virtual_index;
+          } catch (err) {
+            console.warn("Builder code error", err);
+          }
+        })(),
+      })
+    )
+  );
+};
+export const Image = function Image(props) {
+  var _a;
+  var jsx = props.children || [];
+  var image = props.image;
+  if (image) {
+    var isBuilderIoImage = !!(image || "").match(/\.builder\.io/);
+    var isPixel =
+      (_a = props.builderBlock) === null || _a === void 0
+        ? void 0
+        : _a.id.startsWith("builder-pixel-");
+    var imgProps = {
+      src: props.image,
+      style:
+        "object-fit:"
+          .concat(props.backgroundSize || "cover", ";object-position:")
+          .concat(props.backgroundPosition || "center", ";") +
+        (props.aspectRatio
+          ? "position:absolute;height:100%;width:100%;top:0;left:0"
+          : ""),
+      sizes: props.sizes,
+      alt: props.altText,
+      role: !props.altText ? "presentation" : undefined,
+      loading: isPixel ? "eager" : "lazy",
+      srcset: undefined,
+    };
+    if (isBuilderIoImage) {
+      image = updateQueryParam(image, "format", "webp");
+      var srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
+        .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
+        .map(function (size) {
+          return updateQueryParam(image, "width", size) + " " + size + "w";
+        })
+        .join(",");
+      imgProps.srcset = srcset;
+      jsx = jsx = [
+        h("picture", {}, [
+          h("source", { type: "image/webp", srcset: srcset }),
+          h("img", imgProps, jsx),
+        ]),
+      ];
+    } else {
+      jsx = [h("img", imgProps, jsx)];
+    }
+    if (
+      props.aspectRatio &&
+      !(props.fitContent && props.children && props.children.length)
+    ) {
+      var sizingDiv = h("div", {
+        class: "builder-image-sizer",
+        style: "width:100%;padding-top:".concat(
+          (props.aspectRatio || 1) * 100,
+          "%;pointer-events:none;font-size:0"
+        ),
+      });
+      jsx.push(sizingDiv);
+    }
+  }
+  var children = props.children ? [jsx].concat(props.children) : [jsx];
+  return h(
+    props.href ? "a" : "div",
+    __passThroughProps__({ href: props.href, class: props.class }, props),
+    children
+  );
+  function updateQueryParam(uri, key, value) {
+    if (uri === void 0) {
+      uri = "";
+    }
+    var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
+    var separator = uri.indexOf("?") !== -1 ? "&" : "?";
+    if (uri.match(re)) {
+      return uri.replace(
+        re,
+        "$1" + key + "=" + encodeURIComponent(value) + "$2"
+      );
+    }
+    return uri + separator + key + "=" + encodeURIComponent(value);
+  }
+};
+export const __passThroughProps__ = function __passThroughProps__(
+  dstProps,
+  srcProps
+) {
+  for (var key in srcProps) {
+    if (
+      Object.prototype.hasOwnProperty.call(srcProps, key) &&
+      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+    ) {
+      dstProps[key] = srcProps[key];
+    }
+  }
+  return dstProps;
+};

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

@@ -0,0 +1,33 @@
+const h = require("@builder.io/qwik").h;
+const qrl = require("@builder.io/qwik").qrl;
+const useLexicalScope = require("@builder.io/qwik").useLexicalScope;
+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];
+  return h(
+    "div",
+    {
+      class: "cjrqfb1",
+      style: {
+        backgroundColor: (() => {
+          try {
+            return state.hilitTitle ? "red" : "gray";
+          } catch (err) {
+            console.warn("Builder code error", err);
+          }
+        })(),
+      },
+    },
+    h("div", {
+      class: "builder-text",
+      innerHTML: (() => {
+        try {
+          var _virtual_index = state.title;
+          return _virtual_index;
+        } catch (err) {
+          console.warn("Builder code error", err);
+        }
+      })(),
+    })
+  );
+};

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

@@ -0,0 +1,12 @@
+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", []));

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

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

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

@@ -0,0 +1,11 @@
+import { CoreButton } from "./med.js";
+import { h, qrl, useLexicalScope } 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];
+  return h(CoreButton, {
+    text: "Click me!",
+    class: "c9nzze9",
+    onClickQrl: qrl("./high.js", "MyComponent_onClick_0", [state]),
+  });
+};

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

@@ -0,0 +1,37 @@
+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]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);
+export const CoreButton = function CoreButton(props) {
+  var hasLink = !!props.link;
+  var hProps = {
+    innerHTML: props.text || "",
+    href: props.link,
+    target: props.openInNewTab ? "_blank" : "_self",
+    class: props.class,
+  };
+  return h(
+    hasLink ? "a" : props.tagName$ || "span",
+    __passThroughProps__(hProps, props)
+  );
+};
+export const __passThroughProps__ = function __passThroughProps__(
+  dstProps,
+  srcProps
+) {
+  for (var key in srcProps) {
+    if (
+      Object.prototype.hasOwnProperty.call(srcProps, key) &&
+      ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+    ) {
+      dstProps[key] = srcProps[key];
+    }
+  }
+  return dstProps;
+};

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

@@ -0,0 +1,43 @@
+import { ComponentD187055AF171488FAD843ACF045D6BF7 } from "./med.js";
+import { Fragment, h, qrl, useLexicalScope } 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];
+  return (
+    <div class="cj49hqu">
+      <div class="cjrqfb1">
+        <div
+          class="builder-text"
+          innerHTML={(() => {
+            try {
+              var _virtual_index = state.title;
+              return _virtual_index;
+            } catch (err) {
+              console.warn("Builder code error", err);
+            }
+          })()}
+        ></div>
+      </div>
+    </div>
+  );
+};
+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];
+  return (
+    <>
+      <div class="c713ty2">
+        <ComponentD187055AF171488FAD843ACF045D6BF7
+          title="First title from parent"
+          serverStateId="woo8b6"
+        ></ComponentD187055AF171488FAD843ACF045D6BF7>
+      </div>
+      <div class="c713ty2">
+        <ComponentD187055AF171488FAD843ACF045D6BF7
+          title="Second title from parent"
+          serverStateId="woo8b6"
+        ></ComponentD187055AF171488FAD843ACF045D6BF7>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,53 @@
+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,
+  ]);
+};
+export const ComponentD187055AF171488FAD843ACF045D6BF7 = componentQrl(
+  qrl("./med.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", [])
+);

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

@@ -0,0 +1,9 @@
+const useLexicalScope = require("@builder.io/qwik").useLexicalScope;
+exports.MyComponent_onClick_0 = () => {
+  const state = useLexicalScope()[0];
+  try {
+    return (state.data = state.data + 1);
+  } catch (err) {
+    console.warn("Builder code error", err);
+  }
+};

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

@@ -0,0 +1,65 @@
+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]);
+  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">
+        <div
+          class="builder-text"
+          innerHTML={(() => {
+            try {
+              var _virtual_index = state.data;
+              return _virtual_index;
+            } catch (err) {
+              console.warn("Builder code error", err);
+            }
+          })()}
+        ></div>
+      </div>
+      <CoreButton
+        text="Something else"
+        class="c9nzze9"
+        onClickQrl={qrl("./high.js", "MyComponent_onClick_0", [state])}
+      ></CoreButton>
+    </>
+  );
+};
+const CoreButton = (exports.CoreButton = function CoreButton(props) {
+  var hasLink = !!props.link;
+  var hProps = {
+    innerHTML: props.text || "",
+    href: props.link,
+    target: props.openInNewTab ? "_blank" : "_self",
+    class: props.class,
+  };
+  return h(
+    hasLink ? "a" : props.tagName$ || "span",
+    __passThroughProps__(hProps, props)
+  );
+});
+const __passThroughProps__ = (exports.__passThroughProps__ =
+  function __passThroughProps__(dstProps, srcProps) {
+    for (var key in srcProps) {
+      if (
+        Object.prototype.hasOwnProperty.call(srcProps, key) &&
+        ((key.startsWith("on") && key.endsWith("Qrl")) || key == "style")
+      ) {
+        dstProps[key] = srcProps[key];
+      }
+    }
+    return dstProps;
+  });

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

@@ -0,0 +1,12 @@
+import { h, qrl, useLexicalScope } 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];
+  return (
+    <div class="crt27f8">
+      <p>
+        Hello <span class="names">World</span>
+      </p>
+    </div>
+  );
+};

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

@@ -0,0 +1,10 @@
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);

package/dist/test/qwik/page-with-symbol/low.js

@@ -0,0 +1,19 @@
+import { Symbol1 } from "./med.js";
+import { Fragment, h, qrl, useLexicalScope } from "@builder.io/qwik";
+export const MyComponent_styles = `.c713ty2{display:flex;flex-direction:column;position:relative;flex-shrink:0;box-sizing:border-box;margin-top:20px}.cxvcn5v{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;padding-top:1em;padding-bottom:1em;font-weight:700;font-size:24px}`;
+export const MyComponent_onRender = () => {
+  const state = useLexicalScope()[0];
+  return h(
+    Fragment,
+    null,
+    h(Symbol1, {
+      class: "c713ty2",
+      symbol: {
+        model: "page",
+        entry: "36da1052e57e47f084ea8b1fbde248e4",
+        data: {},
+      },
+    }),
+    h("div", { class: "cxvcn5v" }, "<p>Main Text</p>")
+  );
+};

package/dist/test/qwik/page-with-symbol/med.js

@@ -0,0 +1,10 @@
+import { componentQrl, qrl, withScopedStylesQrl } from "@builder.io/qwik";
+export const MyComponent_onMount = (state) => {
+  typeof __STATE__ === "object" &&
+    Object.assign(state, __STATE__[state.serverStateId]);
+  withScopedStylesQrl(qrl("./low.js", "MyComponent_styles", []));
+  return qrl("./low.js", "MyComponent_onRender", [state]);
+};
+export const MyComponent = componentQrl(
+  qrl("./med.js", "MyComponent_onMount", [])
+);