@builder.io/sdk-svelte 0.0.4 → 0.0.5

package/src/components/render-block/render-block.helpers.ts

@@ -0,0 +1,27 @@
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+export const isEmptyHtmlElement = (tagName: unknown) => {
+  return (
+    typeof tagName === 'string' &&
+    EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase())
+  );
+};

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

@@ -0,0 +1,228 @@
+<script context="module" lang="ts">
+  import type {
+    BuilderContextInterface,
+    RegisteredComponent,
+  } from "../../context/types.js";
+
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  import type { Nullable } from "../../types/typescript.js";
+
+  import type { RenderComponentProps } from "./render-component";
+
+  import type { RepeatData } from "./types.js";
+
+  export type RenderBlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  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 { getBlockTag } from "../../functions/get-block-tag.js";
+  import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { evaluate } from "../../functions/evaluate.js";
+  import BlockStyles from "./block-styles.svelte";
+  import { isEmptyHtmlElement } from "./render-block.helpers.js";
+  import RenderRepeatedBlock from "./render-repeated-block.svelte";
+  import { TARGET } from "../../constants/target.js";
+  import { extractTextStyles } from "../../functions/extract-text-styles.js";
+  import RenderComponentWithContext from "./render-component-with-context.svelte";
+  import RenderComponent from "./render-component.svelte";
+  import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+
+  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;
+    }
+  };
+  $: 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,
+      }),
+      ...(TARGET === "reactNative"
+        ? {
+            style: getReactNativeBlockStyles({
+              block: useBlock(),
+              context: context,
+            }),
+          }
+        : {}),
+    };
+  };
+  $: shouldWrap = () => {
+    return !component?.()?.noWrap;
+  };
+  $: renderComponentProps = () => {
+    return {
+      blockChildren: children(),
+      componentRef: component?.()?.component,
+      componentOptions: {
+        ...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(),
+            }),
+      },
+      context: childrenContext(),
+    };
+  };
+  $: 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 =
+      !component?.()?.component && !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;
+  };
+  $: inheritedTextStyles = () => {
+    if (TARGET !== "reactNative") {
+      return {};
+    }
+    const styles = getReactNativeBlockStyles({
+      block: useBlock(),
+      context: context,
+    });
+    return extractTextStyles(styles);
+  };
+  $: childrenContext = () => {
+    return {
+      apiKey: context.apiKey,
+      state: context.state,
+      content: context.content,
+      context: context.context,
+      registeredComponents: context.registeredComponents,
+      inheritedStyles: inheritedTextStyles(),
+    };
+  };
+  $: renderComponentTag = () => {
+    if (TARGET === "reactNative") {
+      return RenderComponentWithContext;
+    } else if (TARGET === "vue3") {
+      // vue3 expects a string for the component tag
+      return "RenderComponent";
+    } else {
+      return RenderComponent;
+    }
+  };
+</script>
+
+{#if shouldWrap()}
+  {#if isEmptyHtmlElement(tagName())}
+    <svelte:element this={tagName()} {...attributes()} />
+  {/if}
+
+  {#if !isEmptyHtmlElement(tagName()) && repeatItemData()}
+    {#each repeatItemData() as data, index (index)}
+      <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
+    {/each}
+  {/if}
+
+  {#if !isEmptyHtmlElement(tagName()) && !repeatItemData()}
+    <svelte:element this={tagName()} {...attributes()}>
+      <svelte:component
+        this={renderComponentTag()}
+        {...renderComponentProps()}
+      />
+
+      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+        <svelte:self block={child} context={childrenContext()} />
+      {/each}
+
+      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+        <BlockStyles block={child} context={childrenContext()} />
+      {/each}
+    </svelte:element>
+  {/if}
+{:else}
+  <svelte:component this={renderComponentTag()} {...renderComponentProps()} />
+{/if}

package/src/components/render-block/render-component-with-context.svelte

@@ -0,0 +1,38 @@
+<script context="module" lang="ts">
+  import type { RenderComponentProps } from "./render-component";
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../../context/builder.context.js";
+  import RenderComponent from "./render-component.svelte";
+
+  export let componentRef: RenderComponentProps["componentRef"];
+  export let componentOptions: RenderComponentProps["componentOptions"];
+  export let blockChildren: RenderComponentProps["blockChildren"];
+  export let context: RenderComponentProps["context"];
+
+  setContext(BuilderContext.key, {
+    get content() {
+      return context.content;
+    },
+    get state() {
+      return context.state;
+    },
+    get context() {
+      return context.context;
+    },
+    get apiKey() {
+      return context.apiKey;
+    },
+    get registeredComponents() {
+      return context.registeredComponents;
+    },
+    get inheritedStyles() {
+      return context.inheritedStyles;
+    },
+  });
+</script>
+
+<RenderComponent {componentRef} {componentOptions} {blockChildren} {context} />

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

@@ -0,0 +1,35 @@
+<script context="module" lang="ts">
+  import type { BuilderBlock } from "../../types/builder-block.js";
+
+  import type { BuilderContextInterface } from "../../context/types.js";
+
+  export interface RenderComponentProps {
+    componentRef: any;
+    componentOptions: any;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+  }
+</script>
+
+<script lang="ts">
+  import BlockStyles from "./block-styles.svelte";
+  import RenderBlock from "./render-block.svelte";
+  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/src/components/render-block/render-repeated-block.svelte

@@ -0,0 +1,53 @@
+<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;
+    },
+    get inheritedStyles() {
+      return repeatContext.inheritedStyles;
+    },
+  });
+</script>
+
+<RenderBlock {block} context={repeatContext} />

package/src/components/render-block/types.ts

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+
+export interface RepeatData {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}

package/src/components/render-blocks.svelte

@@ -0,0 +1,104 @@
+<script context="module" lang="ts">
+  import type { BuilderBlock } from "../types/builder-block.js";
+
+  export type RenderBlockProps = {
+    blocks?: BuilderBlock[];
+    parent?: string;
+    path?: string;
+    styleProp?: Record<string, any>;
+  };
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../context/builder.context.js";
+  import { isEditing } from "../functions/is-editing.js";
+  import BlockStyles from "./render-block/block-styles.svelte";
+  import RenderBlock from "./render-block/render-block.svelte";
+
+  export let blocks: RenderBlockProps["blocks"];
+  export let parent: RenderBlockProps["parent"];
+  export let path: RenderBlockProps["path"];
+  export let styleProp: RenderBlockProps["styleProp"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+
+  let builderContext = getContext(BuilderContext.key);
+
+  function onClick() {
+    if (isEditing() && !blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: parent,
+            dataPath: path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+  function onMouseEnter() {
+    if (isEditing() && !blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: parent,
+            dataPath: path,
+          },
+        },
+        "*"
+      );
+    }
+  }
+  $: className = () => {
+    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
+  };
+</script>
+
+<div
+  use:mitosis_styling={styleProp}
+  class={className() + " div"}
+  builder-path={path}
+  builder-parent-id={parent}
+  dataSet={{
+    class: className(),
+  }}
+  on:click={(event) => {
+    onClick();
+  }}
+  on:mouseenter={(event) => {
+    onMouseEnter();
+  }}
+>
+  {#if blocks}
+    {#each blocks as block ("render-block-" + block.id)}
+      <RenderBlock {block} context={builderContext} />
+    {/each}
+  {/if}
+
+  {#if blocks}
+    {#each blocks as block ("block-style-" + block.id)}
+      <BlockStyles {block} context={builderContext} />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

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

@@ -0,0 +1,80 @@
+<script context="module" lang="ts">
+  interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+      [key: string]: string;
+    };
+  }
+
+  interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+  }
+</script>
+
+<script lang="ts">
+  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+
+  export let cssCode: Props["cssCode"];
+  export let customFonts: Props["customFonts"];
+
+  function getCssFromFont(font) {
+    // TODO: compute what font sizes are used and only load those.......
+    const family =
+      font.family +
+      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = "";
+    if (url && family && name) {
+      str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+    }
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
+        if (!isNumber) {
+          continue;
+        }
+        // TODO: maybe limit number loaded
+        const weightUrl = font.files[weight];
+        if (weightUrl && weightUrl !== url) {
+          str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+        }
+      }
+    }
+    return str;
+  }
+  function getFontCss({ customFonts }) {
+    // TODO: flag for this
+    // if (!builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+  }
+  $: injectedStyles = () => {
+    return `
+${cssCode || ""}
+${getFontCss({
+  customFonts: customFonts,
+})}`;
+  };
+</script>
+
+<RenderInlinedStyles styles={injectedStyles()} />

package/src/components/render-content/index.ts

@@ -0,0 +1 @@
+export { default } from './render-content.svelte';