@builder.io/sdk-qwik 0.0.8 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",
@@ -14,15 +14,15 @@
   },
   "scripts": {
     "build.lib": "vite build --mode lib",
-    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+    "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag latest --access public"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.40-0-dev20220808233008",
+    "@builder.io/qwik": "0.0.100",
     "@types/node": "latest",
     "typescript": "4.7.4",
     "vite": "3.0.2"
   },
   "peerDependencies": {
-    "@builder.io/qwik": "^0.0.25"
+    "@builder.io/qwik": "^0.0.100"
   }
 }

package/src/blocks/button/button.jsx

@@ -0,0 +1,22 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const Button = component$((props) => {
+  return (
+    <Fragment>
+      {props.link ? (
+        <a
+          role="button"
+          {...props.attributes}
+          href={props.link}
+          target={props.openLinkInNewTab ? "_blank" : undefined}
+        >
+          {props.text}
+        </a>
+      ) : (
+        <span {...props.attributes}>{props.text}</span>
+      )}
+    </Fragment>
+  );
+});
+export default Button;

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

@@ -0,0 +1,41 @@
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/columns/columns.jsx

@@ -0,0 +1,97 @@
+// GENERATED BY MITOSIS
+
+import RenderBlocks from "../../components/render-blocks";
+import { Fragment, 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 (
+    <div
+      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>
+        );
+      })}
+    </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; } }`;

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,71 @@
+// GENERATED BY MITOSIS
+
+import {
+  Fragment,
+  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 (
+    <div
+      ref={elem}
+      class={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      dangerouslySetInnerHTML={props.code}
+    ></div>
+  );
+});
+export default CustomCode;

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

@@ -0,0 +1,44 @@
+import { markSerializable } from "../util";
+const componentInfo = {
+  name: "Embed",
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "url",
+      type: "url",
+      required: true,
+      defaultValue: "",
+      helperText: "e.g. enter a youtube url, google map, etc",
+      onChange: markSerializable((options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      })
+    },
+    {
+      name: "content",
+      type: "html",
+      defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+      hideFromUI: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/embed/embed.jsx

@@ -0,0 +1,63 @@
+// GENERATED BY MITOSIS
+
+import { isJsScript } from "./helpers";
+import {
+  Fragment,
+  component$,
+  h,
+  useRef,
+  useStore,
+  useWatch$,
+} from "@builder.io/qwik";
+export const findAndRunScripts = function findAndRunScripts(
+  props,
+  state,
+  elem
+) {
+  const scripts = elem.getElementsByTagName("script");
+
+  for (let i = 0; i < scripts.length; i++) {
+    const script = scripts[i];
+
+    if (script.src && !state.scriptsInserted.includes(script.src)) {
+      state.scriptsInserted.push(script.src);
+      const newScript = document.createElement("script");
+      newScript.async = true;
+      newScript.src = script.src;
+      document.head.appendChild(newScript);
+    } else if (
+      isJsScript(script) &&
+      !state.scriptsRun.includes(script.innerText)
+    ) {
+      try {
+        state.scriptsRun.push(script.innerText);
+        new Function(script.innerText)();
+      } catch (error) {
+        console.warn("`Embed`: Error running script:", error);
+      }
+    }
+  }
+};
+export const Embed = component$((props) => {
+  const elem = useRef();
+  const state = useStore({
+    scriptsInserted: [],
+    scriptsRun: [],
+    ranInitFn: false,
+  });
+  useWatch$(({ track }) => {
+    state && track(state, "ranInitFn");
+    if (elem && !state.ranInitFn) {
+      state.ranInitFn = true;
+      findAndRunScripts(props, state, elem);
+    }
+  });
+  return (
+    <div
+      class="builder-embed"
+      ref={elem}
+      dangerouslySetInnerHTML={props.content}
+    ></div>
+  );
+});
+export default Embed;

package/src/blocks/embed/helpers.js

@@ -0,0 +1,9 @@
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};

package/src/blocks/form/builder-blocks.jsx

@@ -0,0 +1,11 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const BuilderBlocks = component$((props) => {
+  return (
+    <Fragment>
+      NOT YET IMPLEMENTED: <code>BuilderBlocks</code>
+    </Fragment>
+  );
+});
+export default BuilderBlocks;