@builder.io/sdk-qwik 0.0.16 → 0.0.17

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

@@ -1,43 +0,0 @@
-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

@@ -1,78 +0,0 @@
-// 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 { markMutable } from "../../functions/mark-mutable";
-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 && track(props, "symbol");
-    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={markMutable(
-          Object.values(builderContext.registeredComponents)
-        )}
-        data={markMutable({
-          ...props.symbol?.data,
-          ...builderContext.state,
-          ...props.symbol?.content?.data?.state,
-        })}
-        model={props.symbol?.model}
-        content={markMutable(state.content)}
-      ></RenderContent>
-    </div>
-  );
-});
-export default Symbol;

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

@@ -1,24 +0,0 @@
-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

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

@@ -1,47 +0,0 @@
-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

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

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

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

@@ -1,106 +0,0 @@
-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

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

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

@@ -1,23 +0,0 @@
-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

@@ -1,220 +0,0 @@
-// 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,
-    shouldEvaluateBindings: 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,
-        shouldEvaluateBindings: 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}
-                    ></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;