@builder.io/sdk-qwik 0.0.8 → 0.0.9

package/src/components/render-block/block-styles.jsx

@@ -0,0 +1,174 @@
+// GENERATED BY MITOSIS
+
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+import { TARGET } from "../../constants/target.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import RenderInlinedStyles from "../render-inlined-styles";
+import { Fragment, h } from "@builder.io/qwik";
+export const useBlock = function useBlock(props, state) {
+  return getProcessedBlock({
+    block: props.block,
+    state: props.context.state,
+    context: props.context.context,
+    evaluateBindings: true,
+  });
+};
+export const css = function css(props, state) {
+  const styles = useBlock(props, state).responsiveStyles;
+  const largeStyles = styles?.large;
+  const mediumStyles = styles?.medium;
+  const smallStyles = styles?.small;
+  return `
+        ${
+          largeStyles
+            ? `.${useBlock(props, state).id} {${convertStyleMaptoCSS(
+                largeStyles
+              )}}`
+            : ""
+        }
+        ${
+          mediumStyles
+            ? `${getMaxWidthQueryForSize("medium")} {
+              .${useBlock(props, state).id} {${convertStyleMaptoCSS(
+                mediumStyles
+              )}}
+            }`
+            : ""
+        }
+        ${
+          smallStyles
+            ? `${getMaxWidthQueryForSize("small")} {
+              .${useBlock(props, state).id} {${convertStyleMaptoCSS(
+                smallStyles
+              )}}
+            }`
+            : ""
+        }
+      }`;
+};
+export const BlockStyles = (props) => {
+  const state = {};
+  return (
+    <>
+      {TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte" ? (
+        <RenderInlinedStyles styles={css(props, state)}></RenderInlinedStyles>
+      ) : null}
+    </>
+  );
+};
+export default BlockStyles;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [
+    {
+      imports: {
+        getMaxWidthQueryForSize: "getMaxWidthQueryForSize",
+      },
+      path: "../../constants/device-sizes.js",
+    },
+    {
+      imports: {
+        TARGET: "TARGET",
+      },
+      path: "../../constants/target.js",
+    },
+    {
+      imports: {
+        getProcessedBlock: "getProcessedBlock",
+      },
+      path: "../../functions/get-processed-block.js",
+    },
+    {
+      imports: {
+        convertStyleMaptoCSS: "convertStyleMaptoCSS",
+      },
+      path: "../../helpers/css.js",
+    },
+    {
+      imports: {
+        RenderInlinedStyles: "default",
+      },
+      path: "../render-inlined-styles.lite",
+    },
+  ],
+  exports: {},
+  inputs: [],
+  meta: {
+    useMetadata: {
+      qwik: {
+        component: {
+          isLight: true,
+        },
+      },
+    },
+  },
+  refs: {},
+  state: {
+    useBlock:
+      "@builder.io/mitosis/method:get useBlock() {\n  return getProcessedBlock({\n    block: props.block,\n    state: props.context.state,\n    context: props.context.context,\n    evaluateBindings: true\n  });\n}",
+    css: "@builder.io/mitosis/method:get css() {\n  const styles = useBlock(props,state).responsiveStyles;\n  const largeStyles = styles?.large;\n  const mediumStyles = styles?.medium;\n  const smallStyles = styles?.small;\n  return `\n        ${largeStyles ? `.${useBlock(props,state).id} {${convertStyleMaptoCSS(largeStyles)}}` : ''}\n        ${mediumStyles ? `${getMaxWidthQueryForSize('medium')} {\n              .${useBlock(props,state).id} {${convertStyleMaptoCSS(mediumStyles)}}\n            }` : ''}\n        ${smallStyles ? `${getMaxWidthQueryForSize('small')} {\n              .${useBlock(props,state).id} {${convertStyleMaptoCSS(smallStyles)}}\n            }` : ''}\n      }`;\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Show",
+      meta: {},
+      scope: {},
+      properties: {},
+      bindings: {
+        when: {
+          code: "TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte'",
+        },
+      },
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "RenderInlinedStyles",
+          meta: {},
+          scope: {},
+          properties: {},
+          bindings: {
+            styles: {
+              code: "css(props,state)",
+            },
+          },
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
+      ],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "BlockStyles",
+  subComponents: [],
+  types: [
+    "export type BlockStylesProps = {\n  block: BuilderBlock;\n  context: BuilderContextInterface;\n};",
+  ],
+  propsTypeRef: "BlockStylesProps",
+};

package/src/components/render-block/render-block.helpers.js

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};