@builder.io/sdk-svelte 0.0.3 → 0.0.4

package/package/blocks/submit-button/submit-button.lite.tsx

@@ -1,15 +0,0 @@
-<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/package/blocks/symbol/symbol.lite.tsx

@@ -1,92 +0,0 @@
-<script context="module" lang="ts">
-  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, onMount, 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 { BuilderContent } from "../../types/builder-content.js";
-  import { Nullable } from "../../types/typescript.js";
-  import { BuilderBlock } from "../../types/builder-block.js";
-  import { markMutable } from "../../functions/mark-mutable";
-
-  export let attributes: SymbolProps["attributes"];
-  export let symbol: SymbolProps["symbol"];
-
-  let builderContext = getContext(BuilderContext.key);
-
-  let className = "builder-symbol";
-  let content = null;
-
-  onMount(() => {
-    content = symbol?.content;
-  });
-
-  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 && !content && symbolToUse.model) {
-      getContent({
-        model: symbolToUse.model,
-        apiKey: builderContext.apiKey,
-        query: {
-          id: symbolToUse.entry,
-        },
-      }).then((response) => {
-        content = response;
-      });
-    }
-  }
-  $: onUpdateFn_0(...[symbol, content]);
-</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(content)}
-  />
-</div>

package/package/blocks/text/text.lite.tsx

@@ -1,11 +0,0 @@
-<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/package/blocks/textarea/textarea.lite.tsx

@@ -1,19 +0,0 @@
-<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/package/blocks/video/video.lite.tsx

@@ -1,92 +0,0 @@
-<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]) => {
-      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,
-          }
-        : {}),
-    };
-  };
-</script>
-
-<video
-  {...videoProps()}
-  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/package/components/render-block/block-styles.lite.tsx

@@ -1,60 +0,0 @@
-<script context="module" lang="ts">
-  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 { BuilderContextInterface } from "../../context/types.js";
-  import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import { convertStyleMaptoCSS } from "../../helpers/css.js";
-  import { BuilderBlock } from "../../types/builder-block.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;
-    return `
-      ${
-        largeStyles
-          ? `.${useBlock().id} {${convertStyleMaptoCSS(largeStyles)}}`
-          : ""
-      }
-      ${
-        mediumStyles
-          ? `${getMaxWidthQueryForSize("medium")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(mediumStyles)}}
-          }`
-          : ""
-      }
-      ${
-        smallStyles
-          ? `${getMaxWidthQueryForSize("small")} {
-            .${useBlock().id} {${convertStyleMaptoCSS(smallStyles)}}
-          }`
-          : ""
-      }
-    }`;
-  };
-</script>
-
-{#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}
-  <RenderInlinedStyles styles={css()} />
-{/if}

package/package/components/render-block/render-block.lite.tsx

@@ -1,216 +0,0 @@
-<script context="module" lang="ts">
-  export type RenderBlockProps = {
-    block: BuilderBlock;
-    context: BuilderContextInterface;
-  }; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
-</script>
-
-<script lang="ts">
-  import {
-    BuilderContextInterface,
-    RegisteredComponent,
-  } from "../../context/types.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 { BuilderBlock } from "../../types/builder-block.js";
-  import { Nullable } from "../../types/typescript.js";
-  import { evaluate } from "../../functions/evaluate.js";
-  import BlockStyles from "./block-styles.svelte";
-  import { isEmptyHtmlElement } from "./render-block.helpers.js";
-  import RenderComponent, {
-    RenderComponentProps,
-  } from "./render-component.svelte";
-  import { RepeatData } from "./types.js";
-  import RenderRepeatedBlock from "./render-repeated-block.svelte";
-
-  export let block: RenderBlockProps["block"];
-  export let context: RenderBlockProps["context"];
-
-  $: component = () => {
-    const componentName = getProcessedBlock({
-      block: block,
-      state: context.state,
-      context: context.context,
-      shouldEvaluateBindings: false,
-    }).component?.name;
-
-    if (!componentName) {
-      return null;
-    }
-
-    const ref = 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;
-    }
-  };
-
-  $: componentInfo = () => {
-    if (component()) {
-      const { component: _, ...info } = component();
-      return info;
-    } else {
-      return undefined;
-    }
-  };
-
-  $: componentRef = () => {
-    return component?.()?.component;
-  };
-
-  $: tagName = () => {
-    return getBlockTag(useBlock());
-  };
-
-  $: useBlock = () => {
-    return repeatItemData()
-      ? block
-      : getProcessedBlock({
-          block: block,
-          state: context.state,
-          context: context.context,
-          shouldEvaluateBindings: true,
-        });
-  };
-
-  $: attributes = () => {
-    return {
-      ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: context.state,
-        context: context.context,
-      }),
-      style: getBlockStyles(useBlock()),
-    };
-  };
-
-  $: shouldWrap = () => {
-    return !componentInfo?.()?.noWrap;
-  };
-
-  $: componentOptions = () => {
-    return {
-      ...getBlockComponentOptions(useBlock()),
-
-      /**
-       * 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()
-        ? {}
-        : {
-            attributes: attributes(),
-          }),
-    };
-  };
-
-  $: renderComponentProps = () => {
-    return {
-      blockChildren: children(),
-      componentRef: componentRef(),
-      componentOptions: componentOptions(),
-      context: context,
-    };
-  };
-
-  $: children = () => {
-    // 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 componentInfo?.()?.canHaveChildren ? useBlock().children : [];
-    return useBlock().children ?? [];
-  };
-
-  $: childrenWithoutParentComponent = () => {
-    /**
-     * 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() && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
-  };
-
-  $: repeatItemData = () => {
-    /**
-     * we don't use `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 } = block;
-
-    if (!repeat?.collection) {
-      return undefined;
-    }
-
-    const itemsArray = evaluate({
-      code: repeat.collection,
-      state: context.state,
-      context: 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: {
-        ...context,
-        state: {
-          ...context.state,
-          $index: index,
-          $item: item,
-          [itemNameToUse]: item,
-          [`$${itemNameToUse}Index`]: index,
-        },
-      },
-      block: blockWithoutRepeat,
-    }));
-    return repeatArray;
-  };
-</script>
-
-{#if shouldWrap()}
-  {#if !isEmptyHtmlElement(tagName())}
-    <svelte:element this={tagName()} {...attributes()}>
-      {#if repeatItemData()}
-        {#each repeatItemData() as data, index (index)}
-          <RenderRepeatedBlock
-            repeatContext={data.context}
-            block={data.block}
-          />
-        {/each}
-      {/if}
-
-      {#if !repeatItemData()}
-        <RenderComponent {...renderComponentProps()} />
-      {/if}
-
-      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
-        <svelte:self block={child} {context} />
-      {/each}
-
-      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
-        <BlockStyles block={child} {context} />
-      {/each}
-    </svelte:element>
-  {:else}
-    <svelte:element this={tagName()} {...attributes()} />
-  {/if}
-{:else}
-  <RenderComponent {...renderComponentProps()} {context} />
-{/if}

package/package/components/render-block/render-component.lite.tsx

@@ -1,33 +0,0 @@
-<script context="module" lang="ts">
-  export interface RenderComponentProps {
-    componentRef: any;
-    componentOptions: any;
-    blockChildren: BuilderBlock[];
-    context: BuilderContextInterface;
-  } // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
-</script>
-
-<script lang="ts">
-  import { BuilderBlock } from "../../types/builder-block.js";
-  import BlockStyles from "./block-styles.svelte";
-  import RenderBlock from "./render-block.svelte";
-  import { BuilderContextInterface } from "../../context/types.js";
-  import { markPropsMutable } from "../../functions/mark-mutable.js";
-
-  export let componentRef: RenderComponentProps["componentRef"];
-  export let componentOptions: RenderComponentProps["componentOptions"];
-  export let blockChildren: RenderComponentProps["blockChildren"];
-  export let context: RenderComponentProps["context"];
-</script>
-
-{#if componentRef}
-  <svelte:component this={componentRef} {...markPropsMutable(componentOptions)}>
-    {#each blockChildren as child ("render-block-" + child.id)}
-      <RenderBlock block={child} {context} />
-    {/each}
-
-    {#each blockChildren as child ("block-style-" + child.id)}
-      <BlockStyles block={child} {context} />
-    {/each}
-  </svelte:component>
-{/if}

package/package/components/render-block/render-repeated-block.lite.tsx

@@ -1,49 +0,0 @@
-<script context="module" lang="ts">
-  import type { BuilderContextInterface } from "../../context/types.js";
-
-  import type { BuilderBlock } from "../../types/builder-block";
-
-  type Props = {
-    block: BuilderBlock;
-    repeatContext: BuilderContextInterface;
-  };
-  /**
-   * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
-   *
-   * ```vue
-   * <template>
-   *  <slot></slot>
-   * </template>
-   * ```
-   */
-</script>
-
-<script lang="ts">
-  import { getContext, setContext } from "svelte";
-
-  import BuilderContext from "../../context/builder.context.js";
-  import RenderBlock from "./render-block.svelte";
-
-  export let block: Props["block"];
-  export let repeatContext: Props["repeatContext"];
-
-  setContext(BuilderContext.key, {
-    get content() {
-      return repeatContext.content;
-    },
-    get state() {
-      return repeatContext.state;
-    },
-    get context() {
-      return repeatContext.context;
-    },
-    get apiKey() {
-      return repeatContext.apiKey;
-    },
-    get registeredComponents() {
-      return repeatContext.registeredComponents;
-    },
-  });
-</script>
-
-<RenderBlock {block} context={repeatContext} />