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

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/render-block.helpers.js

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};

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

@@ -0,0 +1,182 @@
+<script>
+    
+    
+    
+    
+  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  BlockStyles,  {  }  from './block-styles.svelte';
+import  {  isEmptyHtmlElement  }  from './render-block.helpers.js';
+
+  
+
+    import { getContext, setContext } from "svelte";
+
+    
+    export let block;
+    
+    
+    $: component = () => {
+const componentName = useBlock().component?.name;
+
+if (!componentName) {
+  return null;
+}
+
+const ref = builderContext.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;
+}
+};
+
+$: componentInfo = () => {
+if (component()) {
+  const {
+    component: _,
+    ...info
+  } = component();
+  return info;
+} else {
+  return undefined;
+}
+};
+
+$: 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();
+};
+
+    let builderContext = getContext(BuilderContext.key);
+    
+    
+
+    
+
+    
+
+    
+  </script>
+
+  
+{#if !componentInfo?.()?.noWrap }
+
+    
+
+{#if !isEmptyHtmlElement(tagName()) }
+
+      
+<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
+        
+
+{#if TARGET === 'vue' || TARGET === 'svelte' }
+
+          
+<BlockStyles  block={useBlock()} ></BlockStyles>
+
+        
+
+
+{/if}
+
+        
+
+{#if componentRef() }
+<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
+            
+
+{#each children() as child, index }
+<svelte:self  key={child.id}  block={child} ></svelte:self>
+{/each}
+
+
+          </svelte:component>
+
+
+{/if}
+
+        
+
+{#each noCompRefChildren() as child, index }
+<svelte:self  key={child.id}  block={child} ></svelte:self>
+{/each}
+
+
+      </svelte:element>
+
+    
+
+
+{:else}
+<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} ></svelte:element>
+
+{/if}
+
+  
+
+
+{:else}
+<svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
+        
+
+{#each children() as child, index }
+<svelte:self  key={child.id}  block={child} ></svelte:self>
+{/each}
+
+
+      </svelte:component>
+
+{/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>

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

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.svelte";
+export {
+  default2 as default
+};