@builder.io/sdk-svelte 0.0.1-0

package/src/blocks/img.svelte

@@ -0,0 +1,33 @@
+<script>
+    
+    
+    
+    
+  import  {  isEditing  }  from '../functions/is-editing';
+
+  
+
+
+    
+    export let backgroundSize;
+export let backgroundPosition;
+export let attributes;
+export let imgSrc;
+export let altText;
+
+    
+    
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <img {...attributes} style={{
+objectFit: backgroundSize || 'cover',
+objectPosition: backgroundPosition || 'center'
+}}  key={isEditing() && imgSrc || 'default-key'}  alt={altText}  src={imgSrc}  />

package/src/blocks/input.svelte

@@ -0,0 +1,32 @@
+<script>
+  
+  
+  
+  
+import  {  isEditing  }  from '../functions/is-editing';
+
+
+
+
+  
+  export let attributes;
+export let defaultValue;
+export let placeholder;
+export let type;
+export let name;
+export let value;
+export let required;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<input {...attributes} key={isEditing() && defaultValue ? defaultValue : 'default-key'}  placeholder={placeholder}  type={type}  name={name}  value={value}  defaultValue={defaultValue}  required={required}  />

package/src/blocks/raw-text.svelte

@@ -0,0 +1,26 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let attributes;
+export let text;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<span  class={attributes?.class || attributes?.className} >{@html text || ''}</span>

package/src/blocks/section.svelte

@@ -0,0 +1,33 @@
+<script>
+    
+    
+    
+    
+  
+  
+
+
+    
+    export let attributes;
+export let maxWidth;
+export let children;
+
+    
+    
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <section {...attributes} style={maxWidth && typeof maxWidth === 'number' ? {
+maxWidth: maxWidth
+} : undefined} >
+    
+<slot></slot>
+
+  </section>

package/src/blocks/select.svelte

@@ -0,0 +1,34 @@
+<script>
+  
+  
+  
+  
+import  {  isEditing  }  from '../functions/is-editing';
+
+
+
+
+  
+  export let attributes;
+export let value;
+export let defaultValue;
+export let name;
+export let options;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<select {...attributes} value={value}  key={isEditing() && defaultValue ? defaultValue : 'default-key'}  defaultValue={defaultValue}  name={name} >
+  
+{#each options as option }<option  value={option.value} >{option.name || option.value}</option>{/each}
+
+</select>

package/src/blocks/submit-button.svelte

@@ -0,0 +1,30 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let attributes;
+export let text;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<button {...attributes} type="submit" >
+  
+{text}
+
+</button>

package/src/blocks/symbol.svelte

@@ -0,0 +1,55 @@
+<script>
+     import { onMount } from 'svelte'
+     import { afterUpdate } from 'svelte'
+     
+     
+   import  RenderContent,  {  }  from '../components/render-content/render-content.lite';
+import  BuilderContext,  {  }  from '../context/builder.context.lite';
+import  {  getContent  }  from '../functions/get-content';
+
+   
+ 
+
+     
+     export let attributes;
+export let symbol;
+
+     
+     
+
+     let className = 'builder-symbol';
+let content = null;
+
+     onMount(() => { 
+ content = symbol?.content;
+});
+
+     afterUpdate(() => { 
+ const symbol = symbol;
+
+ if (symbol && !symbol.content && !content && symbol.model) {
+   getContent({
+     model: symbol.model,
+     apiKey: builderContext.apiKey!,
+     options: {
+       entry: symbol.entry
+     }
+   }).then(response => {
+     content = response;
+   });
+ }
+})
+
+     
+   </script>
+
+   <div {...attributes} dataSet={{
+ class: className
+}}  class={className} >
+     
+<RenderContent  apiKey={builderContext.apiKey}  context={builderContext.context}  data={{ ...symbol?.data,
+ ...builderContext.state,
+ ...symbol?.content?.data?.state
+}}  model={symbol?.model}  content={content} ></RenderContent>
+
+   </div>

package/src/blocks/text.svelte

@@ -0,0 +1,25 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let text;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<div  class="builder-text" >{@html text}</div>

package/src/blocks/textarea.svelte

@@ -0,0 +1,29 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  export let attributes;
+export let placeholder;
+export let name;
+export let value;
+export let defaultValue;
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>
+
+<textarea {...attributes} placeholder={placeholder}  name={name}  value={value}  defaultValue={defaultValue} ></textarea>

package/src/blocks/video.svelte

@@ -0,0 +1,42 @@
+<script>
+    
+    
+    
+    
+  
+  
+
+
+    
+    export let attributes;
+export let fit;
+export let position;
+export let video;
+export let posterImage;
+export let autoPlay;
+export let muted;
+export let controls;
+export let loop;
+
+    
+    
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <video {...attributes} preload="none"  style={{
+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
+}}  key={video || 'no-src'}  poster={posterImage}  autoPlay={autoPlay}  muted={muted}  controls={controls}  loop={loop} ></video>

package/src/components/block-styles.svelte

@@ -0,0 +1,23 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>

package/src/components/error-boundary.svelte

@@ -0,0 +1,23 @@
+<script>
+  
+  
+  
+  
+
+
+
+
+  
+  
+
+  
+  
+
+  
+
+  
+
+  
+
+  
+</script>

package/src/components/render-block.svelte

@@ -0,0 +1,121 @@
+<script>
+    
+    
+    
+    
+  import  {  getBlockComponentOptions  }  from '../functions/get-block-component-options';
+import  {  getBlockProperties  }  from '../functions/get-block-properties';
+import  {  getBlockStyles  }  from '../functions/get-block-styles';
+import  {  getBlockTag  }  from '../functions/get-block-tag';
+import  {  components  }  from '../functions/register-component';
+import  BuilderContext,  {  }  from '../context/builder.context.lite';
+import  {  getBlockActions  }  from '../functions/get-block-actions';
+import  {  getProcessedBlock  }  from '../functions/get-processed-block';
+import  BlockStyles,  {  }  from './block-styles.lite';
+
+  
+
+
+    
+    export let block;
+
+    
+    $: component = () => {
+const componentName = useBlock().component?.name;
+
+if (!componentName) {
+  return null;
+}
+
+const ref = components[useBlock().component?.name];
+
+if (componentName && !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 ref;
+};
+
+$: componentInfo = () => {
+return component?.()?.info;
+};
+
+$: componentRef = () => {
+return component?.()?.component;
+};
+
+$: tagName = () => {
+return getBlockTag(useBlock());
+};
+
+$: useBlock = () => {
+return getProcessedBlock({
+  block: block,
+  state: builderContext.state,
+  context: builderContext.context
+});
+};
+
+$: propertiesAndActions = () => {
+return { ...getBlockProperties(useBlock()),
+  ...getBlockActions({
+    block: useBlock(),
+    state: builderContext.state,
+    context: builderContext.context
+  })
+};
+};
+
+$: css = () => {
+return getBlockStyles(useBlock());
+};
+
+$: componentOptions = () => {
+return getBlockComponentOptions(useBlock());
+};
+
+$: 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 ?? [];
+};
+
+$: noCompRefChildren = () => {
+return componentRef() ? [] : children();
+};
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  
+    
+{#if !componentInfo?.()?.noWrap }
+      
+<tagName() {...propertiesAndActions()} style={css()} >
+        
+<BlockStyles  block={useBlock()} ></BlockStyles>
+
+        
+{#if componentRef() }<componentRef() {...componentOptions()} builderBlock={useBlock()} >
+            
+{#each children() as child }<RenderBlock  block={child} ></RenderBlock>{/each}
+
+          </componentRef()>{/if}
+
+        
+{#each noCompRefChildren() as child }<RenderBlock  block={child} ></RenderBlock>{/each}
+
+      </tagName()>
+
+    {/if}

package/src/components/render-blocks.svelte

@@ -0,0 +1,70 @@
+<script>
+    
+    
+    
+    
+  import  {  isEditing  }  from '../functions/is-editing';
+import  RenderBlock,  {  }  from './render-block.lite';
+
+  
+
+
+    
+    export let blocks;
+export let parent;
+export let path;
+
+    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="div"  builder-path={path}  builder-parent-id={parent}  dataSet={{
+class: className()
+}}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}"  class={className()} >
+    
+{#if blocks }
+      
+{#each blocks as block }<RenderBlock  key={block.id}  block={block} ></RenderBlock>{/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,95 @@
+<script>
+    
+    
+    
+    
+  import  {  TARGET  }  from '../../../constants/target';
+
+  
+
+
+    
+    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 (!this.builder.allowCustomFonts) {
+//   return '';
+// }
+// TODO: separate internal data from external
+return customFonts?.map(font => this.getCssFromFont(font))?.join(' ') || '';
+}
+    $: injectedStyles = () => {
+return `
+${cssCode || ''}
+${getFontCss({
+  customFonts: customFonts
+})}`;
+};
+
+$: injectedStyleScript = () => {
+return `<style>${injectedStyles()}</style>`;
+};
+
+    
+
+    
+
+    
+
+    
+  </script>
+
+  {#if TARGET === 'svelte' }
+    
+{@html injectedStyleScript()}
+
+  {/if}