@builder.io/sdk-qwik 0.0.8 → 0.0.9

package/src/blocks/columns/columns.jsx

@@ -0,0 +1,267 @@
+// GENERATED BY MITOSIS
+
+import RenderBlocks from "../../components/render-blocks";
+import {
+  Fragment,
+  Host,
+  component$,
+  h,
+  useStylesScoped$,
+} from "@builder.io/qwik";
+export const getGutterSize = function getGutterSize(props, state) {
+  return typeof props.space === "number" ? props.space || 0 : 20;
+};
+export const getColumns = function getColumns(props, state) {
+  return props.columns || [];
+};
+export const getWidth = function getWidth(props, state, index) {
+  const columns = getColumns(props, state);
+  return columns[index]?.width || 100 / columns.length;
+};
+export const getColumnCssWidth = function getColumnCssWidth(
+  props,
+  state,
+  index
+) {
+  const columns = getColumns(props, state);
+  const gutterSize = getGutterSize(props, state);
+  const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+};
+export const maybeApplyForTablet = function maybeApplyForTablet(
+  props,
+  state,
+  prop
+) {
+  const _stackColumnsAt = props.stackColumnsAt || "tablet";
+
+  return _stackColumnsAt === "tablet" ? prop : "inherit";
+};
+export const columnsCssVars = function columnsCssVars(props, state) {
+  const flexDir =
+    props.stackColumnsAt === "never"
+      ? "inherit"
+      : props.reverseColumnsWhenStacked
+      ? "column-reverse"
+      : "column";
+  return {
+    "--flex-dir": flexDir,
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir),
+  };
+};
+export const columnCssVars = function columnCssVars(props, state) {
+  const width = "100%";
+  const marginLeft = "0";
+  return {
+    "--column-width": width,
+    "--column-margin-left": marginLeft,
+    "--column-width-tablet": maybeApplyForTablet(props, state, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(
+      props,
+      state,
+      marginLeft
+    ),
+  };
+};
+export const Columns = component$(
+  (props) => {
+    useStylesScoped$(STYLES);
+    const state = {};
+    return (
+      <Host
+        class="builder-columns div-Columns"
+        style={columnsCssVars(props, state)}
+      >
+        {(props.columns || []).map((column, index) => {
+          return (
+            <div
+              class="builder-column div-Columns-2"
+              style={{
+                width: getColumnCssWidth(props, state, index),
+                marginLeft: `${
+                  index === 0 ? 0 : getGutterSize(props, state)
+                }px`,
+                ...columnCssVars(props, state),
+              }}
+              key={index}
+            >
+              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+            </div>
+          );
+        })}
+      </Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default Columns;
+export const STYLES = `.div-Columns { 
+display: flex;
+align-items: stretch;
+line-height: normal; }@media (max-width: 999px) { .div-Columns { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-Columns { 
+flex-direction: var(--flex-dir); } }.div-Columns-2 { 
+flex-grow: 1; }@media (max-width: 999px) { .div-Columns-2 { 
+width: var(--column-width-tablet) !important;
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-Columns-2 { 
+width: var(--column-width) !important;
+margin-left: var(--column-margin-left) !important; } }`;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [
+    {
+      imports: {
+        RenderBlocks: "default",
+      },
+      path: "../../components/render-blocks.lite",
+    },
+  ],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {
+    getGutterSize:
+      "@builder.io/mitosis/method:getGutterSize() {\n  return typeof props.space === 'number' ? props.space || 0 : 20;\n}",
+    getColumns:
+      "@builder.io/mitosis/method:getColumns() {\n  return props.columns || [];\n}",
+    getWidth:
+      "@builder.io/mitosis/method:getWidth(index: number) {\n  const columns = getColumns(props,state,);\n  return columns[index]?.width || 100 / columns.length;\n}",
+    getColumnCssWidth:
+      "@builder.io/mitosis/method:getColumnCssWidth(index: number) {\n  const columns = getColumns(props,state,);\n  const gutterSize = getGutterSize(props,state,);\n  const subtractWidth = gutterSize * (columns.length - 1) / columns.length;\n  return `calc(${getWidth(props,state,index)}% - ${subtractWidth}px)`;\n}",
+    maybeApplyForTablet:
+      "@builder.io/mitosis/method:maybeApplyForTablet(prop: JSX.CSS['flexDirection']) {\n  const _stackColumnsAt = props.stackColumnsAt || 'tablet';\n\n  return _stackColumnsAt === 'tablet' ? prop : 'inherit';\n}",
+    columnsCssVars:
+      "@builder.io/mitosis/method:get columnsCssVars() {\n  const flexDir = props.stackColumnsAt === 'never' ? 'inherit' : props.reverseColumnsWhenStacked ? 'column-reverse' : 'column';\n  return {\n    '--flex-dir': flexDir,\n    '--flex-dir-tablet': maybeApplyForTablet(props,state,flexDir)\n  };\n}",
+    columnCssVars:
+      "@builder.io/mitosis/method:get columnCssVars() {\n  const width = '100%';\n  const marginLeft = '0';\n  return {\n    '--column-width': width,\n    '--column-margin-left': marginLeft,\n    '--column-width-tablet': maybeApplyForTablet(props,state,width),\n    '--column-margin-left-tablet': maybeApplyForTablet(props,state,marginLeft)\n  };\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {
+        class: "builder-columns div-Columns",
+      },
+      bindings: {
+        style: {
+          code: "columnsCssVars(props,state)",
+        },
+      },
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "For",
+          meta: {},
+          scope: {
+            For: ["column", "index"],
+          },
+          properties: {
+            _forName: "column",
+            _indexName: "index",
+          },
+          bindings: {
+            each: {
+              code: "props.columns",
+            },
+          },
+          children: [
+            {
+              "@type": "@builder.io/mitosis/node",
+              name: "div",
+              meta: {},
+              scope: {},
+              properties: {
+                class: "builder-column div-Columns-2",
+              },
+              bindings: {
+                style: {
+                  code: "{\n  width: getColumnCssWidth(props,state,index),\n  marginLeft: `${index === 0 ? 0 : getGutterSize(props,state,)}px`,\n  ...columnCssVars(props,state)\n}",
+                },
+                key: {
+                  code: "index",
+                },
+              },
+              children: [
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n            ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "RenderBlocks",
+                  meta: {},
+                  scope: {},
+                  properties: {},
+                  bindings: {
+                    blocks: {
+                      code: "column.blocks",
+                    },
+                  },
+                  children: [],
+                },
+                {
+                  "@type": "@builder.io/mitosis/node",
+                  name: "div",
+                  meta: {},
+                  scope: {},
+                  properties: {
+                    _text: "\n          ",
+                  },
+                  bindings: {},
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
+      ],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Columns",
+  subComponents: [],
+  types: [
+    "type Column = {\n  blocks: any; // TODO: Implement this when support for dynamic CSS lands\n\n  width?: number;\n};",
+    "type StackColumnsAt = 'tablet' | 'mobile' | 'never';",
+  ],
+  interfaces: [
+    "export interface ColumnProps {\n  columns?: Column[]; // TODO: Implement this when support for dynamic CSS lands\n\n  space?: number; // TODO: Implement this when support for dynamic CSS lands\n\n  stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands\n\n  reverseColumnsWhenStacked?: boolean;\n}",
+  ],
+  propsTypeRef: "ColumnProps",
+};

package/src/blocks/columns/component-info.js

@@ -0,0 +1,242 @@
+import { markSerializable } from "../util";
+const componentInfo = {
+  name: "Columns",
+  builtIn: true,
+  inputs: [
+    {
+      name: "columns",
+      type: "array",
+      broadcast: true,
+      subFields: [
+        {
+          name: "blocks",
+          type: "array",
+          hideFromUI: true,
+          defaultValue: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "width",
+          type: "number",
+          hideFromUI: true,
+          helperText: "Width %, e.g. set to 50 to fill half of the space"
+        },
+        {
+          name: "link",
+          type: "url",
+          helperText: "Optionally set a url that clicking this column will link to"
+        }
+      ],
+      defaultValue: [
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          blocks: [
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto",
+                  minHeight: "20px",
+                  minWidth: "20px",
+                  overflow: "hidden"
+                }
+              },
+              component: {
+                name: "Image",
+                options: {
+                  image: "https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
+                  backgroundPosition: "center",
+                  backgroundSize: "cover",
+                  aspectRatio: 0.7004048582995948
+                }
+              }
+            },
+            {
+              "@type": "@builder.io/sdk:Element",
+              responsiveStyles: {
+                large: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                  flexShrink: "0",
+                  position: "relative",
+                  marginTop: "30px",
+                  textAlign: "center",
+                  lineHeight: "normal",
+                  height: "auto"
+                }
+              },
+              component: {
+                name: "Text",
+                options: {
+                  text: "<p>Enter some text...</p>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      onChange: markSerializable((options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      })
+    },
+    {
+      name: "space",
+      type: "number",
+      defaultValue: 20,
+      helperText: "Size of gap between columns",
+      advanced: true
+    },
+    {
+      name: "stackColumnsAt",
+      type: "string",
+      defaultValue: "tablet",
+      helperText: "Convert horizontal columns to vertical at what device size",
+      enum: ["tablet", "mobile", "never"],
+      advanced: true
+    },
+    {
+      name: "reverseColumnsWhenStacked",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "When stacking columns for mobile devices, reverse the ordering",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/custom-code/component-info.js

@@ -0,0 +1,31 @@
+const componentInfo = {
+  name: "Custom Code",
+  static: true,
+  builtIn: true,
+  requiredPermissions: ["editCode"],
+  inputs: [
+    {
+      name: "code",
+      type: "html",
+      required: true,
+      defaultValue: "<p>Hello there, I am custom HTML code!</p>",
+      code: true
+    },
+    {
+      name: "replaceNodes",
+      type: "boolean",
+      helperText: "Preserve server rendered dom nodes",
+      advanced: true
+    },
+    {
+      name: "scriptsClientOnly",
+      type: "boolean",
+      defaultValue: false,
+      helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/custom-code/custom-code.jsx

@@ -0,0 +1,130 @@
+// GENERATED BY MITOSIS
+
+import {
+  Fragment,
+  Host,
+  component$,
+  h,
+  useClientEffect$,
+  useRef,
+  useStore,
+} from "@builder.io/qwik";
+export const findAndRunScripts = function findAndRunScripts(
+  props,
+  state,
+  elem
+) {
+  // TODO: Move this function to standalone one in '@builder.io/utils'
+  if (elem && typeof window !== "undefined") {
+    const scripts = elem.getElementsByTagName("script");
+
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+
+      if (script.src) {
+        if (state.scriptsInserted.includes(script.src)) {
+          continue;
+        }
+
+        state.scriptsInserted.push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (
+        !script.type ||
+        [
+          "text/javascript",
+          "application/javascript",
+          "application/ecmascript",
+        ].includes(script.type)
+      ) {
+        if (state.scriptsRun.includes(script.innerText)) {
+          continue;
+        }
+
+        try {
+          state.scriptsRun.push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`CustomCode`: Error running script:", error);
+        }
+      }
+    }
+  }
+};
+export const CustomCode = component$(
+  (props) => {
+    const elem = useRef();
+    const state = useStore({ scriptsInserted: [], scriptsRun: [] });
+    useClientEffect$(() => {
+      findAndRunScripts(props, state, elem);
+    });
+    return (
+      <Host
+        ref={elem}
+        class={
+          "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+        }
+        dangerouslySetInnerHTML={props.code}
+      ></Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default CustomCode;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {
+    elem: {
+      argument: "",
+      typeParameter: "HTMLDivElement",
+    },
+  },
+  state: {
+    scriptsInserted: [],
+    scriptsRun: [],
+    findAndRunScripts:
+      "@builder.io/mitosis/method:findAndRunScripts() {\n  // TODO: Move this function to standalone one in '@builder.io/utils'\n  if (elem && typeof window !== 'undefined') {\n    const scripts = elem.getElementsByTagName('script');\n\n    for (let i = 0; i < scripts.length; i++) {\n      const script = scripts[i];\n\n      if (script.src) {\n        if (state.scriptsInserted.includes(script.src)) {\n          continue;\n        }\n\n        state.scriptsInserted.push(script.src);\n        const newScript = document.createElement('script');\n        newScript.async = true;\n        newScript.src = script.src;\n        document.head.appendChild(newScript);\n      } else if (!script.type || ['text/javascript', 'application/javascript', 'application/ecmascript'].includes(script.type)) {\n        if (state.scriptsRun.includes(script.innerText)) {\n          continue;\n        }\n\n        try {\n          state.scriptsRun.push(script.innerText);\n          new Function(script.innerText)();\n        } catch (error) {\n          console.warn('`CustomCode`: Error running script:', error);\n        }\n      }\n    }\n  }\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {},
+      bindings: {
+        ref: {
+          code: "elem",
+        },
+        class: {
+          code: "'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')",
+        },
+        innerHTML: {
+          code: "props.code",
+        },
+      },
+      children: [],
+    },
+  ],
+  hooks: {
+    onMount: {
+      code: "\n  findAndRunScripts(props,state,elem,);\n",
+    },
+  },
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "CustomCode",
+  subComponents: [],
+  interfaces: [
+    "export interface CustomCodeProps {\n  code: string;\n  replaceNodes?: boolean;\n}",
+  ],
+  propsTypeRef: "CustomCodeProps",
+};