@builder.io/sdk-svelte 0.0.1-9 → 0.0.2

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

@@ -0,0 +1,91 @@
+<script context="module" lang="ts">
+  export type RenderBlockProps = {
+    blocks?: BuilderBlock[];
+    parent?: string;
+    path?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+
+  import BuilderContext from "../context/builder.context.js";
+  import { isEditing } from "../functions/is-editing.js";
+  import { BuilderBlock } from "../types/builder-block.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"];
+
+  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
+  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/package/components/render-blocks.svelte

@@ -0,0 +1,73 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BuilderContext from "../context/builder.context.js";
+import { isEditing } from "../functions/is-editing.js";
+import "../types/builder-block.js";
+import BlockStyles from "./render-block/block-styles.svelte";
+import RenderBlock from "./render-block/render-block.svelte";
+export let blocks;
+export let parent;
+export let path;
+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
+  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/package/components/render-blocks.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+export declare type RenderBlockProps = {
+    blocks?: BuilderBlock[];
+    parent?: string;
+    path?: string;
+};
+import { BuilderBlock } from "../types/builder-block.js";
+declare const __propDef: {
+    props: {
+        blocks: RenderBlockProps["blocks"];
+        parent: RenderBlockProps["parent"];
+        path: RenderBlockProps["path"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderBlocksProps = typeof __propDef.props;
+export declare type RenderBlocksEvents = typeof __propDef.events;
+export declare type RenderBlocksSlots = typeof __propDef.slots;
+export default class RenderBlocks extends SvelteComponentTyped<RenderBlocksProps, RenderBlocksEvents, RenderBlocksSlots> {
+}
+export {};

package/package/components/render-content/components/render-styles.lite.tsx

@@ -0,0 +1,86 @@
+<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/package/components/render-content/components/render-styles.svelte

@@ -0,0 +1,61 @@
+<script context="module"></script>
+
+<script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+export let cssCode;
+export let 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/package/components/render-content/components/render-styles.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+        [key: string]: string;
+    };
+}
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+}
+declare const __propDef: {
+    props: {
+        cssCode: Props["cssCode"];
+        customFonts: Props["customFonts"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderStylesProps = typeof __propDef.props;
+export declare type RenderStylesEvents = typeof __propDef.events;
+export declare type RenderStylesSlots = typeof __propDef.slots;
+export default class RenderStyles extends SvelteComponentTyped<RenderStylesProps, RenderStylesEvents, RenderStylesSlots> {
+}
+export {};

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

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

package/package/components/render-content/index.js

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