@builder.io/sdk-qwik 0.0.8 → 0.0.11

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

@@ -0,0 +1,43 @@
+const componentInfo = {
+  name: "Symbol",
+  noWrap: true,
+  static: true,
+  builtIn: true,
+  inputs: [
+    {
+      name: "symbol",
+      type: "uiSymbol"
+    },
+    {
+      name: "dataOnly",
+      helperText: "Make this a data symbol that doesn't display any UI",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "inheritState",
+      helperText: "Inherit the parent component state and data",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true
+    },
+    {
+      name: "renderToLiquid",
+      helperText: "Render this symbols contents to liquid. Turn off to fetch with javascript and use custom targeting",
+      type: "boolean",
+      defaultValue: false,
+      advanced: true,
+      hideFromUI: true
+    },
+    {
+      name: "useChildren",
+      hideFromUI: true,
+      type: "boolean"
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/symbol/symbol.jsx

@@ -0,0 +1,77 @@
+// GENERATED BY MITOSIS
+
+import RenderContent from "../../components/render-content/render-content";
+import BuilderContext from "../../context/builder.context";
+import { getContent } from "../../functions/get-content/index.js";
+import {
+  Fragment,
+  component$,
+  h,
+  useClientEffect$,
+  useContext,
+  useStore,
+  useWatch$,
+} from "@builder.io/qwik";
+export const Symbol = component$((props) => {
+  const builderContext = useContext(BuilderContext);
+  const state = useStore({ className: "builder-symbol", content: null });
+  useClientEffect$(() => {
+    state.content = props.symbol?.content;
+  });
+  useWatch$(({ track }) => {
+    props.symbol && track(props.symbol, "content");
+    props.symbol && track(props.symbol, "model");
+    props.symbol && track(props.symbol, "entry");
+    state && track(state, "content");
+    const symbolToUse = props.symbol;
+    /**
+     * If:
+     * - we have a symbol prop
+     * - yet it does not have any content
+     * - and we have not already stored content from before
+     * - and it has a model name
+     *
+     * then we want to re-fetch the symbol content.
+     */
+
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !state.content &&
+      symbolToUse.model
+    ) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry,
+        },
+      }).then((response) => {
+        state.content = response;
+      });
+    }
+  });
+  return (
+    <div
+      {...props.attributes}
+      dataSet={{
+        class: state.className,
+      }}
+      class={state.className}
+    >
+      <RenderContent
+        apiKey={builderContext.apiKey}
+        context={builderContext.context}
+        customComponents={Object.values(builderContext.registeredComponents)}
+        data={{
+          ...props.symbol?.data,
+          ...builderContext.state,
+          ...props.symbol?.content?.data?.state,
+        }}
+        model={props.symbol?.model}
+        content={state.content}
+      ></RenderContent>
+    </div>
+  );
+});
+export default Symbol;

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

@@ -0,0 +1,24 @@
+const componentInfo = {
+  name: "Text",
+  static: true,
+  builtIn: true,
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
+  inputs: [
+    {
+      name: "text",
+      type: "html",
+      required: true,
+      autoFocus: true,
+      bubble: true,
+      defaultValue: "Enter some text..."
+    }
+  ],
+  defaultStyles: {
+    lineHeight: "normal",
+    height: "auto",
+    textAlign: "center"
+  }
+};
+export {
+  componentInfo
+};

package/src/blocks/text/text.jsx

@@ -0,0 +1,7 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const Text = component$((props) => {
+  return <div class="builder-text" dangerouslySetInnerHTML={props.text}></div>;
+});
+export default Text;

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

@@ -0,0 +1,47 @@
+const componentInfo = {
+  name: "Form:TextArea",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3",
+  inputs: [
+    {
+      advanced: true,
+      name: "value",
+      type: "string"
+    },
+    {
+      name: "name",
+      type: "string",
+      required: true,
+      helperText: 'Every input in a form needs a unique name describing what it gets, e.g. "email"'
+    },
+    {
+      name: "defaultValue",
+      type: "string"
+    },
+    {
+      name: "placeholder",
+      type: "string",
+      defaultValue: "Hello there"
+    },
+    {
+      name: "required",
+      type: "boolean",
+      defaultValue: false
+    }
+  ],
+  defaultStyles: {
+    paddingTop: "10px",
+    paddingBottom: "10px",
+    paddingLeft: "10px",
+    paddingRight: "10px",
+    borderRadius: "3px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#ccc"
+  },
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/src/blocks/textarea/textarea.jsx

@@ -0,0 +1,15 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const Textarea = component$((props) => {
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    ></textarea>
+  );
+});
+export default Textarea;

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

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

@@ -0,0 +1,106 @@
+const componentInfo = {
+  name: "Video",
+  canHaveChildren: true,
+  builtIn: true,
+  defaultStyles: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+  inputs: [
+    {
+      name: "video",
+      type: "file",
+      allowedFileTypes: ["mp4"],
+      bubble: true,
+      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+      required: true
+    },
+    {
+      name: "posterImage",
+      type: "file",
+      allowedFileTypes: ["jpeg", "png"],
+      helperText: "Image to show before the video plays"
+    },
+    {
+      name: "autoPlay",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "controls",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "muted",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "loop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "fill", "auto"]
+    },
+    {
+      name: "fitContent",
+      type: "boolean",
+      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+      defaultValue: true,
+      advanced: true
+    },
+    {
+      name: "position",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "height",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "width",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    },
+    {
+      name: "lazyLoad",
+      type: "boolean",
+      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+      defaultValue: true,
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/video/video.jsx

@@ -0,0 +1,53 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, component$, h } from "@builder.io/qwik";
+export const videoProps = function videoProps(props, state) {
+  return {
+    ...(props.autoPlay === true
+      ? {
+          autoPlay: true,
+        }
+      : {}),
+    ...(props.muted === true
+      ? {
+          muted: true,
+        }
+      : {}),
+    ...(props.controls === true
+      ? {
+          controls: true,
+        }
+      : {}),
+    ...(props.loop === true
+      ? {
+          loop: true,
+        }
+      : {}),
+    ...(props.playsInline === true
+      ? {
+          playsInline: true,
+        }
+      : {}),
+  };
+};
+export const Video = component$((props) => {
+  const state = {};
+  return (
+    <video
+      {...videoProps(props, state)}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        objectFit: props.fit,
+        objectPosition: props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        borderRadius: 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    ></video>
+  );
+});
+export default Video;

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

@@ -0,0 +1,60 @@
+// 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;

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
+};

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

@@ -0,0 +1,221 @@
+// GENERATED BY MITOSIS
+
+import { evaluate } from "../../functions/evaluate.js";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getBlockStyles } from "../../functions/get-block-styles.js";
+import { getBlockTag } from "../../functions/get-block-tag.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./block-styles";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component";
+import RenderRepeatedBlock from "./render-repeated-block";
+import { Fragment, h } from "@builder.io/qwik";
+export const component = function component(props, state) {
+  const componentName = getProcessedBlock({
+    block: props.block,
+    state: props.context.state,
+    context: props.context.context,
+    evaluateBindings: false,
+  }).component?.name;
+
+  if (!componentName) {
+    return null;
+  }
+
+  const ref = props.context.registeredComponents[componentName];
+
+  if (!ref) {
+    // TODO: Public doc page with more info about this message
+    console.warn(`
+          Could not find a registered component named "${componentName}". 
+          If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    return undefined;
+  } else {
+    return ref;
+  }
+};
+export const componentInfo = function componentInfo(props, state) {
+  if (component(props, state)) {
+    const { component: _, ...info } = component(props, state);
+    return info;
+  } else {
+    return undefined;
+  }
+};
+export const componentRef = function componentRef(props, state) {
+  return component(props, state)?.component;
+};
+export const tagName = function tagName(props, state) {
+  return getBlockTag(useBlock(props, state));
+};
+export const useBlock = function useBlock(props, state) {
+  return repeatItemData(props, state)
+    ? props.block
+    : getProcessedBlock({
+        block: props.block,
+        state: props.context.state,
+        context: props.context.context,
+        evaluateBindings: true,
+      });
+};
+export const attributes = function attributes(props, state) {
+  return {
+    ...getBlockProperties(useBlock(props, state)),
+    ...getBlockActions({
+      block: useBlock(props, state),
+      state: props.context.state,
+      context: props.context.context,
+    }),
+    style: getBlockStyles(useBlock(props, state)),
+  };
+};
+export const shouldWrap = function shouldWrap(props, state) {
+  return !componentInfo(props, state)?.noWrap;
+};
+export const componentOptions = function componentOptions(props, state) {
+  return {
+    ...getBlockComponentOptions(useBlock(props, state)),
+
+    /**
+     * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+     * they are provided to the component itself directly.
+     */
+    ...(shouldWrap(props, state)
+      ? {}
+      : {
+          attributes: attributes(props, state),
+        }),
+  };
+};
+export const renderComponentProps = function renderComponentProps(
+  props,
+  state
+) {
+  return {
+    blockChildren: children(props, state),
+    componentRef: componentRef(props, state),
+    componentOptions: componentOptions(props, state),
+    context: props.context,
+  };
+};
+export const children = function children(props, state) {
+  // TO-DO: When should `canHaveChildren` dictate rendering?
+  // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
+  // but still receive and need to render children.
+  // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
+  return useBlock(props, state).children ?? [];
+};
+export const childrenWithoutParentComponent =
+  function childrenWithoutParentComponent(props, state) {
+    /**
+     * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+     * we render them outside of `componentRef`.
+     * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+     * blocks, and the children will be repeated within those blocks.
+     */
+    const shouldRenderChildrenOutsideRef =
+      !componentRef(props, state) && !repeatItemData(props, state);
+    return shouldRenderChildrenOutsideRef ? children(props, state) : [];
+  };
+export const repeatItemData = function repeatItemData(props, state) {
+  /**
+   * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+   * which will not work if there is a repeat.
+   */
+  const { repeat, ...blockWithoutRepeat } = props.block;
+
+  if (!repeat?.collection) {
+    return undefined;
+  }
+
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: props.context.state,
+    context: props.context.context,
+  });
+
+  if (!Array.isArray(itemsArray)) {
+    return undefined;
+  }
+
+  const collectionName = repeat.collection.split(".").pop();
+  const itemNameToUse =
+    repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+  const repeatArray = itemsArray.map((item, index) => ({
+    context: {
+      ...props.context,
+      state: {
+        ...props.context.state,
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index,
+      },
+    },
+    block: blockWithoutRepeat,
+  }));
+  return repeatArray;
+};
+export const RenderBlock = (props) => {
+  const state = {};
+  state.tagName = tagName(props, state);
+  return (
+    <>
+      {shouldWrap(props, state) ? (
+        !isEmptyHtmlElement(tagName(props, state)) ? (
+          <state.tagName {...attributes(props, state)}>
+            {repeatItemData(props, state)
+              ? (repeatItemData(props, state) || []).map((data, index) => {
+                  return (
+                    <RenderRepeatedBlock
+                      key={index}
+                      repeatContext={data.context}
+                      block={data.block}
+                      context={props.context}
+                    ></RenderRepeatedBlock>
+                  );
+                })
+              : null}
+            {!repeatItemData(props, state) ? (
+              <RenderComponent
+                {...renderComponentProps(props, state)}
+              ></RenderComponent>
+            ) : null}
+            {(childrenWithoutParentComponent(props, state) || []).map(
+              (child) => {
+                return (
+                  <RenderBlock
+                    key={"render-block-" + child.id}
+                    block={child}
+                    context={props.context}
+                  ></RenderBlock>
+                );
+              }
+            )}
+            {(childrenWithoutParentComponent(props, state) || []).map(
+              (child) => {
+                return (
+                  <BlockStyles
+                    key={"block-style-" + child.id}
+                    block={child}
+                    context={props.context}
+                  ></BlockStyles>
+                );
+              }
+            )}
+          </state.tagName>
+        ) : (
+          <state.tagName {...attributes(props, state)}></state.tagName>
+        )
+      ) : (
+        <RenderComponent
+          {...renderComponentProps(props, state)}
+          context={props.context}
+        ></RenderComponent>
+      )}
+    </>
+  );
+};
+export default RenderBlock;