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

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

@@ -3,17 +3,17 @@
     
     
     
-  import  {  TARGET  }  from '../../constants/target';
-import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  getBlockActions  }  from '../../functions/get-block-actions';
-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  {  getProcessedBlock  }  from '../../functions/get-processed-block';
-import  {  components  }  from '../../functions/register-component';
-import  BlockStyles,  {  }  from './block-styles.svelte';
-
+  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 RenderComponent from './render-component.svelte';
+  
   
 
     import { getContext, setContext } from "svelte";
@@ -29,20 +29,29 @@ if (!componentName) {
   return null;
 }
 
-const ref = components[componentName];
+const ref = builderContext.registeredComponents[componentName];
 
-if (componentName && !ref) {
+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;
 }
-
-return ref;
 };
 
 $: componentInfo = () => {
-return component?.()?.info;
+if (component()) {
+  const {
+    component: _,
+    ...info
+  } = component();
+  return info;
+} else {
+  return undefined;
+}
 };
 
 $: componentRef = () => {
@@ -61,22 +70,32 @@ return getProcessedBlock({
 });
 };
 
-$: propertiesAndActions = () => {
+$: attributes = () => {
 return { ...getBlockProperties(useBlock()),
   ...getBlockActions({
     block: useBlock(),
     state: builderContext.state,
     context: builderContext.context
-  })
+  }),
+  style: getBlockStyles(useBlock())
 };
 };
 
-$: css = () => {
-return getBlockStyles(useBlock());
+$: shouldWrap = () => {
+return !componentInfo?.()?.noWrap;
 };
 
 $: componentOptions = () => {
-return getBlockComponentOptions(useBlock());
+return { ...getBlockComponentOptions(useBlock()),
+
+  /**
+   * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+   * they are provided to the component itself directly.
+   */
+  ...(shouldWrap() ? {} : {
+    attributes: attributes()
+  })
+};
 };
 
 $: children = () => {
@@ -88,6 +107,10 @@ return useBlock().children ?? [];
 };
 
 $: noCompRefChildren = () => {
+/**
+ * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+ * we render them outside of `componentRef`
+ */
 return componentRef() ? [] : children();
 };
 
@@ -103,44 +126,30 @@ return componentRef() ? [] : children();
   </script>
 
   
+{#if shouldWrap() }
+
     
 
-{#if !componentInfo?.()?.noWrap }
+{#if !isEmptyHtmlElement(tagName()) }
 
       
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
+<svelte:element {...attributes()} this={tagName()} >
         
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-          
-<BlockStyles  block={useBlock()} ></BlockStyles>
+<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
 
         
 
-
-{/if}
-
         
 
-{#if componentRef() }
-<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
-            
-
-{#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
+{#each noCompRefChildren() as child, index }
+<svelte:self  key={'render-block-' + child.id}  block={child} ></svelte:self>
 {/each}
 
 
-          </svelte:component>
-
-
-{/if}
-
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
 {/each}
 
 
@@ -150,14 +159,14 @@ return componentRef() ? [] : children();
 
 
 {:else}
-<svelte:component {...componentOptions()} attributes={propertiesAndActions()}  builderBlock={useBlock()}  style={css()}  this={componentRef()} >
-          
+<svelte:element {...attributes()} this={tagName()} ></svelte:element>
 
-{#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
-{/each}
+{/if}
+
+  
 
 
-        </svelte:component>
+{:else}
+<RenderComponent  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponent>
 
 {/if}

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

@@ -0,0 +1,58 @@
+<script>
+  
+  
+  
+  
+import BlockStyles from './block-styles.svelte';
+import RenderBlock from './render-block.svelte';
+
+
+
+  
+
+  
+  export let componentRef;
+export let componentOptions;
+export let blockChildren;
+  
+  
+  
+
+  
+  
+  
+
+  
+
+  
+
+  
+</script>
+
+
+{#if componentRef }
+
+  
+<svelte:component {...componentOptions} this={componentRef} >
+    
+
+    
+
+{#each blockChildren as child, index }
+<RenderBlock  key={'render-block-' + child.id}  block={child} ></RenderBlock>
+{/each}
+
+
+    
+
+{#each blockChildren as child, index }
+<BlockStyles  key={'block-style-' + child.id}  block={child} ></BlockStyles>
+{/each}
+
+
+  </svelte:component>
+
+
+
+
+{/if}

package/src/components/render-blocks.svelte

@@ -3,9 +3,10 @@
     
     
     
-  import  {  isEditing  }  from '../functions/is-editing';
-import  RenderBlock,  {  }  from './render-block/render-block.svelte';
-
+  import { isEditing } from '../functions/is-editing.js';
+import BlockStyles from './render-block/block-styles.svelte';
+import RenderBlock from './render-block/render-block.svelte';
+  
   
 
     
@@ -15,7 +16,7 @@ import  RenderBlock,  {  }  from './render-block/render-block.svelte';
 export let parent;
 export let path;
     
-    function onClick() {
+    const onClick = function onClick() {
 if (isEditing() && !blocks?.length) {
   window.parent?.postMessage({
     type: 'builder.clickEmptyBlocks',
@@ -25,9 +26,9 @@ if (isEditing() && !blocks?.length) {
     }
   }, '*');
 }
-}
+};
 
-function onMouseEnter() {
+const onMouseEnter = function onMouseEnter() {
 if (isEditing() && !blocks?.length) {
   window.parent?.postMessage({
     type: 'builder.hoverEmptyBlocks',
@@ -37,7 +38,7 @@ if (isEditing() && !blocks?.length) {
     }
   }, '*');
 }
-}
+};
     $: className = () => {
 return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
 };
@@ -53,9 +54,27 @@ return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
     
   </script>
 
-  <div    builder-path={path}  builder-parent-id={parent}  dataSet={{
+  <div  class={className() + 'div'}  builder-path={path}  builder-parent-id={parent}  dataSet={{
 class: className()
-}}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}"  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 }
@@ -63,7 +82,7 @@ class: className()
       
 
 {#each blocks as block, index }
-<RenderBlock  key={block.id}  block={block} ></RenderBlock>
+<BlockStyles  key={'block-style-' + block.id}  block={block} ></BlockStyles>
 {/each}
 
 

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

@@ -3,8 +3,8 @@
     
     
     
-  import  RenderInlinedStyles,  {  }  from '../../render-inlined-styles.svelte';
-
+  import RenderInlinedStyles from '../../render-inlined-styles.svelte';
+  
   
 
     
@@ -13,7 +13,7 @@
     export let cssCode;
 export let customFonts;
     
-    function getCssFromFont(font) {
+    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];
@@ -56,9 +56,9 @@ if (font.files) {
 }
 
 return str;
-}
+};
 
-function getFontCss({
+const getFontCss = function getFontCss({
 customFonts
 }) {
 // TODO: flag for this
@@ -67,7 +67,7 @@ customFonts
 // }
 // TODO: separate internal data from external
 return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
-}
+};
     $: injectedStyles = () => {
 return `
 ${cssCode || ''}

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

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

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

@@ -3,20 +3,22 @@
     import { afterUpdate } from 'svelte'
     import { onDestroy } from 'svelte'
     
-  import  {  TARGET  }  from '../../constants/target';
-import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  evaluate  }  from '../../functions/evaluate';
-import  {  convertSearchParamsToQueryObject  ,  getBuilderSearchParams  }  from '../../functions/get-builder-search-params';
-import  {  getContent  }  from '../../functions/get-content';
-import  {  getFetch  }  from '../../functions/get-fetch';
-import  {  isBrowser  }  from '../../functions/is-browser';
-import  {  isEditing  }  from '../../functions/is-editing';
-import  {  isPreviewing  }  from '../../functions/is-previewing';
-import  {  previewingModelName  }  from '../../functions/previewing-model-name';
-import  {  track  }  from '../../functions/track';
-import  RenderBlocks,  {  }  from '../render-blocks.svelte';
-import  RenderContentStyles,  {  }  from './components/render-styles.svelte';
-
+  import { getDefaultRegisteredComponents } from '../../constants/builder-registered-components.js';
+import { TARGET } from '../../constants/target.js';
+import BuilderContext from '../../context/builder.context';
+import { evaluate } from '../../functions/evaluate.js';
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from '../../functions/get-builder-search-params/index.js';
+import { getContent } from '../../functions/get-content/index.js';
+import { getFetch } from '../../functions/get-fetch.js';
+import { isBrowser } from '../../functions/is-browser.js';
+import { isEditing } from '../../functions/is-editing.js';
+import { isPreviewing } from '../../functions/is-previewing.js';
+import { previewingModelName } from '../../functions/previewing-model-name.js';
+import { components, createRegisterComponentMessage } from '../../functions/register-component.js';
+import { track } from '../../functions/track.js';
+import RenderBlocks from '../render-blocks.svelte';
+import RenderContentStyles from './components/render-styles.svelte';
+  
   
 
     import { getContext, setContext } from "svelte";
@@ -24,10 +26,11 @@ import  RenderContentStyles,  {  }  from './components/render-styles.svelte';
     
     export let content;
 export let data;
+export let customComponents;
 export let model;
 export let apiKey;
     
-    function processMessage(event) {
+    const processMessage = function processMessage(event) {
 const {
   data
 } = event;
@@ -54,9 +57,9 @@ if (data) {
       }
   }
 }
-}
+};
 
-function evaluateJsCode() {
+const evaluateJsCode = function evaluateJsCode() {
 // run any dynamic JS code attached to content
 const jsCode = useContent?.()?.data?.jsCode;
 
@@ -67,17 +70,17 @@ if (jsCode) {
     state: contentState()
   });
 }
-}
+};
 
-function evalExpression(expression) {
+const evalExpression = function evalExpression(expression) {
 return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
   code: group,
   context: context(),
   state: contentState()
 }));
-}
+};
 
-function handleRequest({
+const handleRequest = function handleRequest({
 url,
 key
 }) {
@@ -92,9 +95,9 @@ const fetchAndSetState = async () => {
 };
 
 fetchAndSetState();
-}
+};
 
-function runHttpRequests() {
+const runHttpRequests = function runHttpRequests() {
 const requests = useContent?.()?.data?.httpRequests ?? {};
 Object.entries(requests).forEach(([key, url]) => {
   if (url && (!httpReqsData()[key] || isEditing())) {
@@ -105,18 +108,20 @@ Object.entries(requests).forEach(([key, url]) => {
     });
   }
 });
-}
+};
 
-function emitStateUpdate() {
-window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
-  detail: {
-    state: contentState(),
-    ref: {
-      name: model
+const emitStateUpdate = function emitStateUpdate() {
+if (isEditing()) {
+  window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
+    detail: {
+      state: contentState(),
+      ref: {
+        name: model
+      }
     }
-  }
-}));
+  }));
 }
+};
     $: useContent = () => {
 const mergedContent = { ...content,
   ...overrideContent,
@@ -139,6 +144,19 @@ $: context = () => {
 return {};
 };
 
+$: allRegisteredComponents = () => {
+const allComponentsArray = [...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+// Since users are able to override our default components, we need to make sure that we do not break such
+// existing usage.
+// This is why we spread `components` after the default Builder.io components, but before the `customComponents`,
+// which is the new standard way of providing custom components, and must therefore take precedence.
+...components, ...(customComponents || [])];
+const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc,
+  [curr.name]: curr
+}), {});
+return allComponents;
+};
+
 $: httpReqsData = () => {
 return {};
 };
@@ -152,6 +170,8 @@ return contentState();
 return context();
 }, get apiKey() {
 return apiKey;
+}, get registeredComponents() {
+return allRegisteredComponents();
 },});
     let overrideContent = null;
 let update = 0;
@@ -159,6 +179,10 @@ let overrideState = {};
 
     onMount(() => { if (isBrowser()) {
 if (isEditing()) {
+  Object.values(allRegisteredComponents()).forEach(registeredComponent => {
+    const message = createRegisterComponentMessage(registeredComponent);
+    window.parent?.postMessage(message, '*');
+  });
   window.addEventListener('message', processMessage);
   window.addEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
 }
@@ -194,7 +218,22 @@ runHttpRequests();
 emitStateUpdate();
 } });
 
-    afterUpdate(() => { evaluateJsCode(); });afterUpdate(() => { runHttpRequests(); });afterUpdate(() => { emitStateUpdate(); })
+    
+                  function onUpdateFn_0() {
+                    evaluateJsCode();
+                  }
+                  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode])
+                  ;
+                  function onUpdateFn_1() {
+                    runHttpRequests();
+                  }
+                  $: onUpdateFn_1(...[useContent?.()?.data?.httpRequests])
+                  ;
+                  function onUpdateFn_2() {
+                    emitStateUpdate();
+                  }
+                  $: onUpdateFn_2(...[contentState()])
+                  
 
     onDestroy(() => { if (isBrowser()) {
 window.removeEventListener('message', processMessage);

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

@@ -3,8 +3,8 @@
     
     
     
-  import  {  TARGET  }  from '../constants/target';
-
+  import { TARGET } from '../constants/target.js';
+  
   
 
     
@@ -38,6 +38,8 @@ return 'sty' + 'le';
 {#if TARGET === 'svelte' }
 
     
+
+    
 {@html injectedStyleScript()}
 
   

package/src/constants/builder-registered-components.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { default as Button } from "../blocks/button/button.svelte";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.svelte";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.svelte";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.svelte";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.svelte";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.svelte";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.svelte";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { default as Video } from "../blocks/video/video.svelte";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/constants/device-sizes.js

@@ -1,10 +1,4 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -19,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/context/builder.context.js

@@ -1,6 +1,6 @@
 const key = Symbol();
 var stdin_default = {
-  Builder: { content: null, context: {}, state: {}, apiKey: null },
+  Builder: { content: null, context: {}, state: {}, apiKey: null, registeredComponents: {} },
   key
 };
 export {

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};