@builder.io/sdk-svelte 0.0.1-20 → 0.0.1-21

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

@@ -0,0 +1,29 @@
+<script>
+  import BuilderContext from "../../context/builder.context";
+  import RenderBlock from "./render-block.svelte";
+
+  import { getContext, setContext } from "svelte";
+
+  export let block;
+  export let 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} />

package/src/components/render-blocks.svelte

@@ -1,101 +1,77 @@
 <script>
-    
-    
-    
-    
-  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;
-export let parent;
-export let path;
-    
-    const onClick = function onClick() {
-if (isEditing() && !blocks?.length) {
-  window.parent?.postMessage({
-    type: 'builder.clickEmptyBlocks',
-    data: {
-      parentElementId: parent,
-      dataPath: path
+  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;
+  export let parent;
+  export let path;
+
+  const onClick = function onClick() {
+    if (isEditing() && !blocks?.length) {
+      window.parent?.postMessage(
+        {
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: parent,
+            dataPath: path,
+          },
+        },
+        "*"
+      );
     }
-  }, '*');
-}
-};
-
-const onMouseEnter = function onMouseEnter() {
-if (isEditing() && !blocks?.length) {
-  window.parent?.postMessage({
-    type: 'builder.hoverEmptyBlocks',
-    data: {
-      parentElementId: parent,
-      dataPath: path
+  };
+
+  const onMouseEnter = 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, index }
-<RenderBlock  key={'render-block-' + block.id}  block={block} ></RenderBlock>
-{/each}
-
-
-    
-
-
-{/if}
-
-    
-
-{#if blocks }
-
-      
-
-{#each blocks as block, index }
-<BlockStyles  key={'block-style-' + block.id}  block={block} ></BlockStyles>
-{/each}
-
-
-    
-
-
-{/if}
-
-  </div>
-
-  <style>
-    .div { 
-display: flex;
-flex-direction: column;
-align-items: stretch; }
-  </style>
+  };
+  $: 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, undefined ("render-block-" + block.id)}
+      <RenderBlock {block} />
+    {/each}
+  {/if}
+
+  {#if blocks}
+    {#each blocks as block, undefined ("block-style-" + block.id)}
+      <BlockStyles {block} />
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .div {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+</style>

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

@@ -1,27 +1,20 @@
 <script>
-    
-    
-    
-    
-  import RenderInlinedStyles from '../../render-inlined-styles.svelte';
-  
-  
+  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
 
-    
+  export let cssCode;
+  export let customFonts;
 
-    
-    export let cssCode;
-export let customFonts;
-    
-    const getCssFromFont = 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 = '';
+  const getCssFromFont = 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 += `
+    if (url && family && name) {
+      str += `
 @font-face {
   font-family: "${family}";
   src: local("${name}"), url('${url}') format('woff2');
@@ -29,21 +22,20 @@ if (url && family && name) {
   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
+    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];
+        const weightUrl = font.files[weight];
 
-    if (weightUrl && weightUrl !== url) {
-      str += `
+        if (weightUrl && weightUrl !== url) {
+          str += `
 @font-face {
   font-family: "${family}";
   src: url('${weightUrl}') format('woff2');
@@ -51,40 +43,28 @@ if (font.files) {
   font-weight: ${weight};
 }
           `.trim();
+        }
+      }
     }
-  }
-}
 
-return str;
-};
+    return str;
+  };
 
-const getFontCss = 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 || ''}
+  const getFontCss = 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
+  customFonts: customFonts,
 })}`;
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
+  };
+</script>
 
-  <RenderInlinedStyles  styles={injectedStyles()} ></RenderInlinedStyles>
+<RenderInlinedStyles styles={injectedStyles()} />