@builder.io/sdk-svelte 0.0.1-0 → 0.0.1-3

package/src/blocks/video/component-info.js

@@ -0,0 +1,106 @@
+const componentInfo = {
+  name: "Video",
+  canHaveChildren: true,
+  builtIn: true,
+  defaultStyles: {
+    minHeight: "20px",
+    minWidth: "20px"
+  },
+  image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
+  inputs: [
+    {
+      name: "video",
+      type: "file",
+      allowedFileTypes: ["mp4"],
+      bubble: true,
+      defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
+      required: true
+    },
+    {
+      name: "posterImage",
+      type: "file",
+      allowedFileTypes: ["jpeg", "png"],
+      helperText: "Image to show before the video plays"
+    },
+    {
+      name: "autoPlay",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "controls",
+      type: "boolean",
+      defaultValue: false
+    },
+    {
+      name: "muted",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "loop",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "playsInline",
+      type: "boolean",
+      defaultValue: true
+    },
+    {
+      name: "fit",
+      type: "text",
+      defaultValue: "cover",
+      enum: ["contain", "cover", "fill", "auto"]
+    },
+    {
+      name: "fitContent",
+      type: "boolean",
+      helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
+      defaultValue: true,
+      advanced: true
+    },
+    {
+      name: "position",
+      type: "text",
+      defaultValue: "center",
+      enum: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top right",
+        "bottom left",
+        "bottom right"
+      ]
+    },
+    {
+      name: "height",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "width",
+      type: "number",
+      advanced: true
+    },
+    {
+      name: "aspectRatio",
+      type: "number",
+      advanced: true,
+      defaultValue: 0.7004048582995948
+    },
+    {
+      name: "lazyLoad",
+      type: "boolean",
+      helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
+      defaultValue: true,
+      advanced: true
+    }
+  ]
+};
+export {
+  componentInfo
+};

package/src/blocks/video/index.js

@@ -0,0 +1,7 @@
+import { registerComponent } from "../../functions/register-component.js";
+import { componentInfo } from "./component-info.js";
+import component from "./video.svelte";
+var stdin_default = registerComponent(component, componentInfo);
+export {
+  stdin_default as default
+};

package/src/blocks/{video.svelte → video/video.svelte}

@@ -6,6 +6,7 @@
   
   
 
+    
 
     
     export let attributes;
@@ -17,11 +18,13 @@ export let autoPlay;
 export let muted;
 export let controls;
 export let loop;
-
+    
     
     
 
     
+    
+    
 
     
 

package/src/components/error-boundary.svelte

@@ -6,14 +6,17 @@
 
 
 
+  
 
   
   
-
+  
   
   
 
   
+  
+  
 
   
 

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

@@ -0,0 +1,51 @@
+<script>
+    
+    
+    
+    
+  import  RenderInlinedStyles,  {  }  from '../render-inlined-styles.svelte';
+
+  
+
+    
+
+    
+    export let block;
+    
+    function camelToKebabCase(string) {
+return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+}
+    $: css = () => {
+// TODO: media queries
+const styleObject = block.responsiveStyles?.large;
+
+if (!styleObject) {
+  return '';
+}
+
+let str = `.${block.id} {`;
+
+for (const key in styleObject) {
+  const value = styleObject[key];
+
+  if (typeof value === 'string') {
+    str += `${camelToKebabCase(key)}: ${value};`;
+  }
+}
+
+str += '}';
+return str;
+};
+
+    
+    
+    
+
+    
+
+    
+
+    
+  </script>
+
+  <RenderInlinedStyles  styles={css()} ></RenderInlinedStyles>

package/src/components/{render-block.svelte → render-block/render-block.svelte}

@@ -3,22 +3,24 @@
     
     
     
-  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';
+  import  {  TARGET  }  from '../../constants/target.js';
+import  BuilderContext,  {  }  from '../../context/builder.context';
+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  {  components  }  from '../../functions/register-component.js';
+import  BlockStyles,  {  }  from './block-styles.svelte';
 
   
 
+    import { getContext, setContext } from "svelte";
 
     
     export let block;
-
+    
     
     $: component = () => {
 const componentName = useBlock().component?.name;
@@ -27,7 +29,7 @@ if (!componentName) {
   return null;
 }
 
-const ref = components[useBlock().component?.name];
+const ref = components[componentName];
 
 if (componentName && !ref) {
   // TODO: Public doc page with more info about this message
@@ -89,6 +91,8 @@ $: noCompRefChildren = () => {
 return componentRef() ? [] : children();
 };
 
+    let builderContext = getContext(BuilderContext.key);
+    
     
 
     
@@ -100,22 +104,60 @@ return componentRef() ? [] : children();
 
   
     
+
 {#if !componentInfo?.()?.noWrap }
+
       
-<tagName() {...propertiesAndActions()} style={css()} >
+<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
         
+
+{#if TARGET === 'vue' || TARGET === 'svelte' }
+
+          
 <BlockStyles  block={useBlock()} ></BlockStyles>
 
         
-{#if componentRef() }<componentRef() {...componentOptions()} builderBlock={useBlock()} >
+
+
+{/if}
+
+        
+
+{#if componentRef() }
+<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
             
-{#each children() as child }<RenderBlock  block={child} ></RenderBlock>{/each}
 
-          </componentRef()>{/if}
+{#each children() as child, index }
+<svelte:self  block={child} ></svelte:self>
+{/each}
+
+
+          </svelte:component>
+
+
+{/if}
 
         
-{#each noCompRefChildren() as child }<RenderBlock  block={child} ></RenderBlock>{/each}
 
-      </tagName()>
+{#each noCompRefChildren() as child, index }
+<svelte:self  block={child} ></svelte:self>
+{/each}
+
+
+      </svelte:element>
+
+    
+
+
+{:else}
+<svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
+          
+
+{#each children() as child, index }
+<svelte:self  block={child} ></svelte:self>
+{/each}
+
+
+        </svelte:component>
 
-    {/if}
+{/if}

package/src/components/render-blocks.svelte

@@ -3,17 +3,18 @@
     
     
     
-  import  {  isEditing  }  from '../functions/is-editing';
-import  RenderBlock,  {  }  from './render-block.lite';
+  import  {  isEditing  }  from '../functions/is-editing.js';
+import  RenderBlock,  {  }  from './render-block/render-block.svelte';
 
   
 
+    
 
     
     export let blocks;
 export let parent;
 export let path;
-
+    
     function onClick() {
 if (isEditing() && !blocks?.length) {
   window.parent?.postMessage({
@@ -42,6 +43,8 @@ return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
 };
 
     
+    
+    
 
     
 
@@ -50,15 +53,24 @@ return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
     
   </script>
 
-  <div  class="div"  builder-path={path}  builder-parent-id={parent}  dataSet={{
+  <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}
+{#each blocks as block, index }
+<RenderBlock  key={block.id}  block={block} ></RenderBlock>
+{/each}
+
+
+    
+
+
+{/if}
 
   </div>
 

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

@@ -3,15 +3,16 @@
     
     
     
-  import  {  TARGET  }  from '../../../constants/target';
+  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 : '');
@@ -61,11 +62,11 @@ function getFontCss({
 customFonts
 }) {
 // TODO: flag for this
-// if (!this.builder.allowCustomFonts) {
+// if (!builder.allowCustomFonts) {
 //   return '';
 // }
 // TODO: separate internal data from external
-return customFonts?.map(font => this.getCssFromFont(font))?.join(' ') || '';
+return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
 }
     $: injectedStyles = () => {
 return `
@@ -75,21 +76,15 @@ ${getFontCss({
 })}`;
 };
 
-$: injectedStyleScript = () => {
-return `<style>${injectedStyles()}</style>`;
-};
-
     
-
+    
     
 
     
 
     
-  </script>
 
-  {#if TARGET === 'svelte' }
     
-{@html injectedStyleScript()}
+  </script>
 
-  {/if}
+  <RenderInlinedStyles  styles={injectedStyles()} ></RenderInlinedStyles>