@builder.io/sdk-qwik 0.0.8 → 0.0.9

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,211 @@
+// 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,
+  Host,
+  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 (
+      <Host
+        {...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>
+      </Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default Symbol;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [
+    {
+      imports: {
+        RenderContent: "default",
+      },
+      path: "../../components/render-content/render-content.lite",
+    },
+    {
+      imports: {
+        BuilderContext: "default",
+      },
+      path: "../../context/builder.context.lite",
+    },
+    {
+      imports: {
+        getContent: "getContent",
+      },
+      path: "../../functions/get-content/index.js",
+    },
+  ],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {
+    className: "builder-symbol",
+    content: null,
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {},
+      bindings: {
+        _spread: {
+          code: "props.attributes",
+        },
+        dataSet: {
+          code: "{\n  class: state.className\n}",
+        },
+        class: {
+          code: "state.className",
+        },
+      },
+      children: [
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n      ",
+          },
+          bindings: {},
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "RenderContent",
+          meta: {},
+          scope: {},
+          properties: {},
+          bindings: {
+            apiKey: {
+              code: "builderContext.apiKey",
+            },
+            context: {
+              code: "builderContext.context",
+            },
+            customComponents: {
+              code: "Object.values(builderContext.registeredComponents)",
+            },
+            data: {
+              code: "{ ...props.symbol?.data,\n  ...builderContext.state,\n  ...props.symbol?.content?.data?.state\n}",
+            },
+            model: {
+              code: "props.symbol?.model",
+            },
+            content: {
+              code: "state.content",
+            },
+          },
+          children: [],
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          name: "div",
+          meta: {},
+          scope: {},
+          properties: {
+            _text: "\n    ",
+          },
+          bindings: {},
+          children: [],
+        },
+      ],
+    },
+  ],
+  hooks: {
+    onMount: {
+      code: "\n  state.content = props.symbol?.content;\n",
+    },
+    onUpdate: [
+      {
+        code: "\n  const symbolToUse = props.symbol;\n  /**\n   * If:\n   * - we have a symbol prop\n   * - yet it does not have any content\n   * - and we have not already stored content from before\n   * - and it has a model name\n   *\n   * then we want to re-fetch the symbol content.\n   */\n\n  if (symbolToUse && !symbolToUse.content && !state.content && symbolToUse.model) {\n    getContent({\n      model: symbolToUse.model,\n      apiKey: builderContext.apiKey!,\n      query: {\n        id: symbolToUse.entry\n      }\n    }).then(response => {\n      state.content = response;\n    });\n  }\n",
+        deps: "[props.symbol?.content, props.symbol?.model, props.symbol?.entry, state.content]",
+      },
+    ],
+  },
+  context: {
+    get: {
+      builderContext: {
+        name: "BuilderContext",
+        path: "../../context/builder.context.lite:default",
+      },
+    },
+    set: {},
+  },
+  name: "Symbol",
+  subComponents: [],
+  interfaces: [
+    "export interface SymbolInfo {\n  model?: string;\n  entry?: string;\n  data?: any;\n  content?: BuilderContent;\n  inline?: boolean;\n  dynamic?: boolean;\n}",
+    "export interface SymbolProps {\n  symbol?: SymbolInfo;\n  dataOnly?: boolean;\n  dynamic?: boolean;\n  builderBlock?: BuilderBlock;\n  attributes?: any;\n  inheritState?: boolean;\n}",
+  ],
+  propsTypeRef: "SymbolProps",
+};

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,46 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, Host, component$, h } from "@builder.io/qwik";
+export const Text = component$(
+  (props) => {
+    return (
+      <Host class="builder-text" dangerouslySetInnerHTML={props.text}></Host>
+    );
+  },
+  { tagName: "div" }
+);
+export default Text;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {},
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {
+        class: "builder-text",
+      },
+      bindings: {
+        innerHTML: {
+          code: "props.text",
+        },
+      },
+      children: [],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Text",
+  subComponents: [],
+  propsTypeRef: "{\n  text: string\n}",
+};

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,65 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, Host, component$, h } from "@builder.io/qwik";
+export const Textarea = component$(
+  (props) => {
+    return (
+      <Host
+        {...props.attributes}
+        placeholder={props.placeholder}
+        name={props.name}
+        value={props.value}
+        defaultValue={props.defaultValue}
+      ></Host>
+    );
+  },
+  { tagName: "textarea" }
+);
+export default Textarea;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {},
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {},
+      bindings: {
+        _spread: {
+          code: "props.attributes",
+        },
+        placeholder: {
+          code: "props.placeholder",
+        },
+        name: {
+          code: "props.name",
+        },
+        value: {
+          code: "props.value",
+        },
+        defaultValue: {
+          code: "props.defaultValue",
+        },
+      },
+      children: [],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Textarea",
+  subComponents: [],
+  interfaces: [
+    "export interface TextareaProps {\n  attributes?: any;\n  name?: string;\n  value?: string;\n  defaultValue?: string;\n  placeholder?: string;\n}",
+  ],
+  propsTypeRef: "TextareaProps",
+};

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,103 @@
+// GENERATED BY MITOSIS
+
+import { Fragment, Host, 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 (
+      <Host
+        {...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}
+      ></Host>
+    );
+  },
+  { tagName: "video" }
+);
+export default Video;
+export const COMPONENT = {
+  "@type": "@builder.io/mitosis/component",
+  imports: [],
+  exports: {},
+  inputs: [],
+  meta: {},
+  refs: {},
+  state: {
+    videoProps:
+      "@builder.io/mitosis/method:get videoProps() {\n  return { ...(props.autoPlay === true ? {\n      autoPlay: true\n    } : {}),\n    ...(props.muted === true ? {\n      muted: true\n    } : {}),\n    ...(props.controls === true ? {\n      controls: true\n    } : {}),\n    ...(props.loop === true ? {\n      loop: true\n    } : {}),\n    ...(props.playsInline === true ? {\n      playsInline: true\n    } : {})\n  };\n}",
+  },
+  children: [
+    {
+      "@type": "@builder.io/mitosis/node",
+      name: "Host",
+      meta: {},
+      scope: {},
+      properties: {},
+      bindings: {
+        _spread: {
+          code: "videoProps(props,state)",
+        },
+        style: {
+          code: "{\n  width: '100%',\n  height: '100%',\n  ...props.attributes?.style,\n  objectFit: props.fit,\n  objectPosition: props.position,\n  // Hack to get object fit to work as expected and\n  // not have the video overflow\n  borderRadius: 1\n}",
+        },
+        src: {
+          code: "props.video || 'no-src'",
+        },
+        poster: {
+          code: "props.posterImage",
+        },
+      },
+      children: [],
+    },
+  ],
+  hooks: {},
+  context: {
+    get: {},
+    set: {},
+  },
+  name: "Video",
+  subComponents: [],
+  interfaces: [
+    "export interface VideoProps {\n  attributes?: any;\n  video?: string;\n  autoPlay?: boolean;\n  controls?: boolean;\n  muted?: boolean;\n  loop?: boolean;\n  playsInline?: boolean;\n  aspectRatio?: number;\n  width?: number;\n  height?: number;\n  fit?: 'contain' | 'cover' | 'fill';\n  position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';\n  posterImage?: string;\n  lazyLoad?: boolean;\n}",
+  ],
+  propsTypeRef: "VideoProps",
+};