@builder.io/sdk-svelte 0.0.4 → 0.0.5

package/src/blocks/select/component-info.ts

@@ -0,0 +1,61 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:Select',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
+  defaultStyles: {
+    alignSelf: 'flex-start',
+  },
+  inputs: [
+    {
+      name: 'options',
+      type: 'list',
+      required: true,
+      subFields: [
+        {
+          name: 'value',
+          type: 'text',
+          required: true,
+        },
+        {
+          name: 'name',
+          type: 'text',
+        },
+      ],
+      defaultValue: [
+        {
+          value: 'option 1',
+        },
+        {
+          value: 'option 2',
+        },
+      ],
+    },
+    {
+      name: 'name',
+      type: 'string',
+      required: true,
+      helperText:
+        'Every select in a form needs a unique name describing what it gets, e.g. "email"',
+    },
+    {
+      name: 'defaultValue',
+      type: 'string',
+    },
+    {
+      name: 'value',
+      type: 'string',
+      advanced: true,
+    },
+
+    {
+      name: 'required',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ],
+  static: true,
+  noWrap: true,
+};

package/src/blocks/select/select.svelte

@@ -0,0 +1,34 @@
+<script context="module" lang="ts">
+  export interface FormSelectProps {
+    options?: {
+      name?: string;
+      value: string;
+    }[];
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { isEditing } from "../../functions/is-editing.js";
+
+  export let attributes: FormSelectProps["attributes"];
+  export let value: FormSelectProps["value"];
+  export let defaultValue: FormSelectProps["defaultValue"];
+  export let name: FormSelectProps["name"];
+  export let options: FormSelectProps["options"];
+</script>
+
+<select
+  {...attributes}
+  {value}
+  key={isEditing() && defaultValue ? defaultValue : "default-key"}
+  {defaultValue}
+  {name}
+>
+  {#each options as option}
+    <option value={option.value}>{option.name || option.value}</option>
+  {/each}
+</select>

package/src/blocks/submit-button/component-info.ts

@@ -0,0 +1,32 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: ComponentInfo = {
+  name: 'Form:SubmitButton',
+  builtIn: true,
+  image:
+    'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
+  defaultStyles: {
+    appearance: 'none',
+    paddingTop: '15px',
+    paddingBottom: '15px',
+    paddingLeft: '25px',
+    paddingRight: '25px',
+    backgroundColor: '#3898EC',
+    color: 'white',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
+  inputs: [
+    {
+      name: 'text',
+      type: 'text',
+      defaultValue: 'Click me',
+    },
+  ],
+  static: true,
+  noWrap: true,
+  // TODO: optional children? maybe as optional form input
+  // that only shows if advanced setting is flipped
+  // TODO: defaultChildren
+  // canHaveChildren: true,
+};

package/src/blocks/submit-button/submit-button.svelte

@@ -0,0 +1,15 @@
+<script context="module" lang="ts">
+  export interface ButtonProps {
+    attributes?: any;
+    text?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: ButtonProps["attributes"];
+  export let text: ButtonProps["text"];
+</script>
+
+<button {...attributes} type="submit">
+  {text}
+</button>

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

@@ -0,0 +1,43 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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',
+    },
+  ],
+};

package/src/blocks/symbol/symbol.svelte

@@ -0,0 +1,100 @@
+<script context="module" lang="ts">
+  import type { BuilderContent } from "../../types/builder-content.js";
+
+  import type { Nullable } from "../../types/typescript.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  export interface SymbolInfo {
+    model?: string;
+    entry?: string;
+    data?: any;
+    content?: BuilderContent;
+    inline?: boolean;
+    dynamic?: boolean;
+  }
+
+  export interface SymbolProps {
+    symbol?: SymbolInfo;
+    dataOnly?: boolean;
+    dynamic?: boolean;
+    builderBlock?: BuilderBlock;
+    attributes?: any;
+    inheritState?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import { afterUpdate, getContext, setContext } from "svelte";
+
+  import RenderContent from "../../components/render-content/render-content.svelte";
+  import BuilderContext from "../../context/builder.context.js";
+  import { getContent } from "../../functions/get-content/index.js";
+  import { markMutable } from "../../functions/mark-mutable";
+
+  export let symbol: SymbolProps["symbol"];
+  export let attributes: SymbolProps["attributes"];
+
+  let builderContext = getContext(BuilderContext.key);
+
+  $: contentToUse = () => {
+    return symbol?.content || fetchedContent;
+  };
+
+  let className = "builder-symbol";
+  let fetchedContent = null;
+
+  function onUpdateFn_0() {
+    const symbolToUse = 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 &&
+      !fetchedContent &&
+      symbolToUse.model
+    ) {
+      getContent({
+        model: symbolToUse.model,
+        apiKey: builderContext.apiKey,
+        query: {
+          id: symbolToUse.entry,
+        },
+      }).then((response) => {
+        fetchedContent = response;
+      });
+    }
+  }
+  $: onUpdateFn_0(...[symbol, fetchedContent]);
+</script>
+
+<div
+  {...attributes}
+  dataSet={{
+    class: className,
+  }}
+  class={className}
+>
+  <RenderContent
+    apiKey={builderContext.apiKey}
+    context={builderContext.context}
+    customComponents={markMutable(
+      Object.values(builderContext.registeredComponents)
+    )}
+    data={markMutable({
+      ...symbol?.data,
+      ...builderContext.state,
+      ...symbol?.content?.data?.state,
+    })}
+    model={symbol?.model}
+    content={markMutable(contentToUse())}
+  />
+</div>

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

@@ -0,0 +1,24 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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',
+  },
+};

package/src/blocks/text/text.svelte

@@ -0,0 +1,11 @@
+<script context="module" lang="ts">
+  export interface TextProps {
+    text: string;
+  }
+</script>
+
+<script lang="ts">
+  export let text: TextProps["text"];
+</script>
+
+<span class="builder-text">{@html text}</span>

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

@@ -0,0 +1,48 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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,
+};

package/src/blocks/textarea/textarea.svelte

@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+  export interface TextareaProps {
+    attributes?: any;
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+  }
+</script>
+
+<script lang="ts">
+  export let attributes: TextareaProps["attributes"];
+  export let placeholder: TextareaProps["placeholder"];
+  export let name: TextareaProps["name"];
+  export let value: TextareaProps["value"];
+  export let defaultValue: TextareaProps["defaultValue"];
+</script>
+
+<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />

package/src/blocks/util.ts

@@ -0,0 +1,6 @@
+export function markSerializable<FN extends (...args: any[]) => any>(
+  fn: FN
+): FN {
+  (fn as any).__qwik_serializable__ = true;
+  return fn;
+}

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

@@ -0,0 +1,109 @@
+import type { ComponentInfo } from '../../types/components';
+
+export const componentInfo: 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,
+    },
+  ],
+};

package/src/blocks/video/video.svelte

@@ -0,0 +1,102 @@
+<script context="module" lang="ts">
+  export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    position?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let autoPlay: VideoProps["autoPlay"];
+  export let muted: VideoProps["muted"];
+  export let controls: VideoProps["controls"];
+  export let loop: VideoProps["loop"];
+  export let playsInline: VideoProps["playsInline"];
+  export let attributes: VideoProps["attributes"];
+  export let fit: VideoProps["fit"];
+  export let position: VideoProps["position"];
+  export let video: VideoProps["video"];
+  export let posterImage: VideoProps["posterImage"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+
+  $: videoProps = () => {
+    return {
+      ...(autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
+    };
+  };
+  $: spreadProps = () => {
+    return {
+      ...attributes,
+      ...videoProps(),
+    };
+  };
+</script>
+
+<video
+  {...spreadProps()}
+  use:mitosis_styling={{
+    width: "100%",
+    height: "100%",
+    ...attributes?.style,
+    objectFit: fit,
+    objectPosition: position,
+    // Hack to get object fit to work as expected and
+    // not have the video overflow
+    borderRadius: 1,
+  }}
+  src={video || "no-src"}
+  poster={posterImage}
+/>

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

@@ -0,0 +1,62 @@
+<script context="module" lang="ts">
+  import type { BuilderContextInterface } from "../../context/types.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
+  import { TARGET } from "../../constants/target.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { createCssClass } from "../../helpers/css.js";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
+
+  export let block: BlockStylesProps["block"];
+  export let context: BlockStylesProps["context"];
+
+  $: useBlock = () => {
+    return getProcessedBlock({
+      block: block,
+      state: context.state,
+      context: context.context,
+      shouldEvaluateBindings: true,
+    });
+  };
+  $: css = () => {
+    const styles = useBlock().responsiveStyles;
+    const largeStyles = styles?.large;
+    const mediumStyles = styles?.medium;
+    const smallStyles = styles?.small;
+    const className = useBlock().id;
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize("medium"),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize("small"),
+        })
+      : "";
+    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+  };
+</script>
+
+{#if TARGET !== "reactNative" && css()}
+  <RenderInlinedStyles styles={css()} />
+{/if}