@builder.io/mitosis 0.0.78 → 0.0.79

package/package.json

@@ -25,7 +25,7 @@
   "engines": {
     "npm": "99999999.9.9"
   },
-  "version": "0.0.78",
+  "version": "0.0.79",
   "homepage": "https://github.com/BuilderIO/mitosis",
   "main": "./dist/src/index.js",
   "exports": {
@@ -71,21 +71,28 @@
     "@builder.io/react": "^1.1.50",
     "@marko/compiler": "^5.22.4",
     "@marko/translator-default": "^5.21.4",
+    "astring": "^1.8.3",
     "axios": "^0.21.0",
     "axios-cache-adapter": "^2.5.0",
+    "coffeescript": "^2.7.0",
     "csstype": "^3.0.4",
     "dedent": "^0.7.0",
     "fp-ts": "^2.11.10",
     "globby": "^11.0.2",
     "hash-sum": "^2.0.0",
+    "ignore-loader": "^0.1.2",
     "json5": "^2.1.3",
     "liquidjs": "9.6.0",
     "lodash": "^4.17.20",
     "marko": "^5.21.7",
+    "module": "^1.2.5",
     "object-hash": "^2.0.3",
+    "postcss-load-config": "^4.0.1",
     "prettier-plugin-marko": "^1.2.2",
     "prettier-plugin-svelte": "^2.7.0",
+    "sass": "^1.56.1",
     "svelte": "^3.30.0",
+    "svelte-preprocess": "^4.10.7",
     "traverse": "^0.6.6",
     "typescript": "^4.8.4",
     "vue": "~2.6"
@@ -98,6 +105,7 @@
     "@tootallnate/once": "^1.1.2",
     "@types/babel__core": "7.1.14",
     "@types/dedent": "^0.7.0",
+    "@types/estree": "^1.0.0",
     "@types/fs-extra-promise": "^1.0.10",
     "@types/hash-sum": "^1.0.0",
     "@types/json5": "0.0.30",
@@ -108,8 +116,13 @@
     "@types/rollup__plugin-virtual": "^2.0.1",
     "@types/traverse": "^0.6.32",
     "fs-extra-promise": "^1.0.1",
+    "less": "^4.1.3",
     "lru-cache": "^6.0.0",
+    "postcss": "^8.4.19",
+    "pug": "^3.0.2",
     "rollup": "^2.70.1",
+    "stylus": "^0.59.0",
+    "sugarss": "^4.0.1",
     "ts-node": "^9.1.1",
     "typescript": "^4.8.4",
     "universalify": "^2.0.0",

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mAccordion/low.jsx

@@ -1,240 +0,0 @@
-import {
-  Fragment,
-  h,
-  qrl,
-  useStore,
-  useStylesScopedQrl,
-} from "@builder.io/qwik";
-export const MyComponentStyles = `.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 MyComponentOnMount = (props) => {
-  const state = useStore(() => {
-    const state = Object.assign(
-      {},
-      props,
-      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
-    );
-    return state;
-  });
-  useStylesScopedQrl(qrl("./low.js", "MyComponentStyles", []));
-  return (
-    <div
-      builder-id="builder-bb2f62792e464d73b7cb89258027f356"
-      gridRowWidth="25%"
-      class="csw5022 builder-block"
-      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
-              builder-id="builder-5fed2723c1cc4fb39e9d22b9c54ef179"
-              class="csanagh"
-            >
-              <div class="crwdrpw">
-                <div
-                  dangerouslySetInnerHTML="<p>Item 1</p>"
-                  class="builder-text"
-                ></div>
-              </div>
-            </div>
-          </div>
-          <div builder="accordion-detail">
-            <div
-              builder-id="builder-18279a99b32240f19aa21d3f4b015cc9"
-              class="c4qyc1p"
-            >
-              <div class="ctcw2m4">
-                <div
-                  dangerouslySetInnerHTML="<p>Item 1 content</p>"
-                  class="builder-text"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div builder="accordion">
-          <div builder="accordion-title">
-            <div
-              builder-id="builder-2a93def22a354cf7aa193c20d1ad6def"
-              class="csanagh"
-            >
-              <div class="crwdrpw">
-                <div
-                  dangerouslySetInnerHTML="<p>Item 2</p>"
-                  class="builder-text"
-                ></div>
-              </div>
-            </div>
-          </div>
-          <div builder="accordion-detail">
-            <div
-              builder-id="builder-fd6ef41da6d040328fbd8b0801611fe5"
-              class="c4qyc1p"
-            >
-              <div class="ctcw2m4">
-                <div
-                  dangerouslySetInnerHTML="<p>Item 2 content</p>"
-                  class="builder-text"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mAccordion/med.jsx

@@ -1,4 +0,0 @@
-import { componentQrl, qrl } from "@builder.io/qwik";
-export const MyComponent = componentQrl(
-  qrl("./low.js", "MyComponentOnMount", [])
-);

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mFor/low.jsx

@@ -1,54 +0,0 @@
-import {
-  Fragment,
-  h,
-  qrl,
-  useStore,
-  useStylesScopedQrl,
-} from "@builder.io/qwik";
-export const MyComponentStyles = `.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 MyComponentOnMount = (props) => {
-  const state = useStore(() => {
-    const state = Object.assign(
-      {},
-      props,
-      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
-    );
-    return state;
-  });
-  useStylesScopedQrl(qrl("./low.js", "MyComponentStyles", []));
-  return (
-    <div
-      builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
-      class="cvdfnp5 builder-block"
-      maxWidth={1200}
-    >
-      <section
-        builder-id="builder-a58a66676d9b4ecc826c1b8bc5ad91f1"
-        class="cz5wnof"
-      >
-        {(state.simpleList.results || []).map(
-          function (item) {
-            var state = Object.assign({}, this, {
-              resultsItem: item == null ? {} : item,
-            });
-            return (
-              <div class="cdrk993">
-                <div
-                  class="builder-text"
-                  dangerouslySetInnerHTML={(() => {
-                    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/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mFor/med.jsx

@@ -1,4 +0,0 @@
-import { componentQrl, qrl } from "@builder.io/qwik";
-export const MyComponent = componentQrl(
-  qrl("./low.js", "MyComponentOnMount", [])
-);

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mImage/high.js

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

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mImage/med.js

@@ -1,151 +0,0 @@
-import {
-  Fragment,
-  componentQrl,
-  h,
-  qrl,
-  useStore,
-  useStylesScopedQrl,
-} from "@builder.io/qwik";
-export const MyComponentStyles = `.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 MyComponentOnMount = (props) => {
-  const state = useStore(() => {
-    const state = Object.assign(
-      {},
-      props,
-      typeof __STATE__ === "object" ? __STATE__[props.serverStateId] : undefined
-    );
-    if (!state.hasOwnProperty("myState")) state.myState = "initialValue";
-    return state;
-  });
-  useStylesScopedQrl(qrl("./med.js", "MyComponentStyles", []));
-  return h(
-    Fragment,
-    null,
-    h(Image, {
-      "builder-id": "builder-fa4480d2f48a44a7a2e98cf07c54927b",
-      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 builder-block",
-      onClick$: 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",
-        dangerouslySetInnerHTML: (() => {
-          try {
-            var _virtual_index = state.myState;
-            return _virtual_index;
-          } catch (err) {
-            console.warn("Builder code error", err);
-          }
-        })(),
-      })
-    )
-  );
-};
-export const MyComponent = componentQrl(
-  qrl("./med.js", "MyComponentOnMount", [])
-);
-export const Image = function Image(props) {
-  let jsx = props.children || [];
-  let image = props.image;
-  if (image) {
-    const isBuilderIoImage =
-      !!(image || "").match(/\.builder\.io/) && !props.noWebp;
-    const isPixel = props.builderBlock?.id.startsWith("builder-pixel-");
-    const imgProps = {
-      src: props.image,
-      style:
-        `object-fit:${props.backgroundSize || "cover"};object-position:${
-          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" : void 0,
-      loading: isPixel ? "eager" : "lazy",
-      srcset: void 0,
-    };
-    const qwikBugWorkaround = (imgProps2) =>
-      Object.keys(imgProps2).forEach(
-        (k) => imgProps2[k] === void 0 && delete imgProps2[k]
-      );
-    qwikBugWorkaround(imgProps);
-    if (isBuilderIoImage) {
-      const webpImage = updateQueryParam(image, "format", "webp");
-      const srcset = ["100", "200", "400", "800", "1200", "1600", "2000"]
-        .concat(props.srcsetSizes ? String(props.srcsetSizes).split(" ") : [])
-        .map((size) => {
-          return updateQueryParam(webpImage, "width", size) + " " + size + "w";
-        })
-        .concat([image])
-        .join(",");
-      imgProps.srcset = srcset;
-      jsx = jsx = [
-        h("picture", {}, [
-          h("source", { type: "image/webp", srcset }),
-          h("img", imgProps, jsx),
-        ]),
-      ];
-    } else {
-      jsx = [h("img", imgProps, jsx)];
-    }
-    if (
-      props.aspectRatio &&
-      !(props.fitContent && props.children && props.children.length)
-    ) {
-      const sizingDiv = h("div", {
-        class: "builder-image-sizer",
-        style: `width:100%;padding-top:${
-          (props.aspectRatio || 1) * 100
-        }%;pointer-events:none;font-size:0`,
-      });
-      jsx.push(sizingDiv);
-    }
-  }
-  const 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) {
-    const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
-    const 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 (const key in srcProps) {
-    if (
-      Object.prototype.hasOwnProperty.call(srcProps, key) &&
-      ((key.startsWith("on") && key.endsWith("$")) || key == "style")
-    ) {
-      dstProps[key] = srcProps[key];
-    }
-  }
-  return dstProps;
-};

package/dist/test/src/__tests__/qwik.test.ts/033[2m/>//033[22mqwik/033[2m/>//033[22mImage.slow/high.js

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