@builder.io/sdk-svelte 0.0.1-4 → 0.0.1-7

package/README.md

@@ -0,0 +1,15 @@
+# Builder.io Svelte SDK (BETA)
+
+This is the Svelte SDK. It is currently in beta.
+
+## Feature Support
+
+To check the status of the SDK, look at [these tables](../../README.md#feature-implementation).
+
+## Getting Started
+
+```
+npm install @builder.io/sdk-svelte@dev
+```
+
+Take a look at [our example repo](/examples/svelte/sveltekit) for how to use this SDK.

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-4",
+  "version": "0.0.1-7",
   "type": "module",
   "files": [
     "src"
   ],
   "main": "./src/index.js",
   "module": "./src/index.js",
+  "svelte": "./src/index.js",
   "exports": {
     ".": {
       "import": "./src/index.js",

package/src/blocks/columns/columns.svelte

@@ -78,7 +78,7 @@ return {
 width: getColumnCssWidth(index),
 marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
 ...columnCssVars()
-}} >
+}}  key={index} >
           
 <RenderBlocks  blocks={column.blocks} ></RenderBlocks>
 

package/src/blocks/image/image.svelte

@@ -38,7 +38,7 @@ export let builderBlock;
     
 <picture >
       
-<img  loading="lazy"    alt={altText}  aria-role={altText ? 'presentation' : undefined}  style={{
+<img  loading="lazy"    alt={altText}  role={altText ? 'presentation' : undefined}  style={{
 objectPosition: backgroundSize || 'center',
 objectFit: backgroundSize || 'cover'
 }}  class={'builder-image' + (className ? ' ' + className : '')}  src={image}  srcset={srcset}  sizes={sizes}  />

package/src/components/render-block/render-block.helpers.js

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

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

@@ -11,8 +11,8 @@ 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  {  isEmptyHtmlElement  }  from './render-block.helpers.js';
 
   
 
@@ -29,16 +29,17 @@ 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 = () => {
@@ -103,9 +104,11 @@ return componentRef() ? [] : children();
   </script>
 
   
+{#if !componentInfo?.()?.noWrap }
+
     
 
-{#if !componentInfo?.()?.noWrap }
+{#if !isEmptyHtmlElement(tagName()) }
 
       
 <svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
@@ -128,7 +131,7 @@ return componentRef() ? [] : children();
             
 
 {#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
@@ -140,7 +143,7 @@ return componentRef() ? [] : children();
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
@@ -149,15 +152,23 @@ return componentRef() ? [] : children();
     
 
 
+{: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  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
-        </svelte:component>
+      </svelte:component>
 
 {/if}

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,7 +3,8 @@
     import { afterUpdate } from 'svelte'
     import { onDestroy } from 'svelte'
     
-  import  {  TARGET  }  from '../../constants/target.js';
+  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';
@@ -13,6 +14,7 @@ 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';
@@ -24,6 +26,7 @@ import  RenderContentStyles,  {  }  from './components/render-styles.svelte';
     
     export let content;
 export let data;
+export let customComponents;
 export let model;
 export let apiKey;
     
@@ -108,14 +111,16 @@ Object.entries(requests).forEach(([key, url]) => {
 }
 
 function emitStateUpdate() {
-window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
-  detail: {
-    state: contentState(),
-    ref: {
-      name: model
+if (isEditing()) {
+  window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
+    detail: {
+      state: contentState(),
+      ref: {
+        name: model
+      }
     }
-  }
-}));
+  }));
+}
 }
     $: useContent = () => {
 const mergedContent = { ...content,
@@ -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.info.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);
 }

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

@@ -38,6 +38,8 @@ return 'sty' + 'le';
 {#if TARGET === 'svelte' }
 
     
+
+    
 {@html injectedStyleScript()}
 
   

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

@@ -0,0 +1,29 @@
+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 = () => [
+  { component: Columns, info: columnsComponentInfo },
+  { component: Image, info: imageComponentInfo },
+  { component: Text, info: textComponentInfo },
+  { component: Video, info: videoComponentInfo },
+  { component: Symbol, info: symbolComponentInfo },
+  { component: Button, info: buttonComponentInfo },
+  { component: Section, info: sectionComponentInfo },
+  { component: Fragment, info: fragmentComponentInfo }
+];
+export {
+  getDefaultRegisteredComponents
+};

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/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/src/functions/get-content/fn.test.js

@@ -1,4 +1,4 @@
-import { generateContentUrl } from "..js";
+import { generateContentUrl } from ".";
 const testKey = "YJIGb4i01jvw0SRdL5Bt";
 const testModel = "page";
 const testId = "c1b81bab59704599b997574eb0736def";

package/src/functions/register-component.js

@@ -17,27 +17,26 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser.js";
-const components = {};
+import { fastClone } from "./fast-clone.js";
+const components = [];
 function registerComponent(component, info) {
-  var _a;
-  components[info.name] = { component, info };
-  if (isBrowser()) {
-    const sendInfo = prepareComponentInfoToSend(info);
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.registerComponent",
-      data: sendInfo
-    }, "*");
-  }
+  components.push({ component, info });
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component;
 }
+const createRegisterComponentMessage = ({
+  info
+}) => ({
+  type: "builder.registerComponent",
+  data: prepareComponentInfoToSend(fastClone(info))
+});
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {
     inputs: info.inputs.map((input) => {
       const keysToConvertFnToString = ["onChange", "showIf"];
       for (const key of keysToConvertFnToString) {
-        if (input[key] && typeof input[key] === "function") {
-          const fn = input[key];
+        const fn = input[key];
+        if (fn && typeof fn === "function") {
           input = __spreadProps(__spreadValues({}, input), {
             [key]: `return (${fn.toString()}).apply(this, arguments)`
           });
@@ -49,5 +48,6 @@ function prepareComponentInfoToSend(info) {
 }
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

package/src/index-helpers/blocks-exports.js

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns/index.js";
-import { default as default3 } from "../blocks/image/index.js";
-import { default as default4 } from "../blocks/text/index.js";
-import { default as default5 } from "../blocks/video/index.js";
-import { default as default6 } from "../blocks/symbol/index.js";
-import { default as default7 } from "../blocks/button/index.js";
-import { default as default8 } from "../blocks/section/index.js";
-import { default as default9 } from "../blocks/fragment/index.js";
+import { default as default2 } from "../blocks/columns/columns.svelte";
+import { default as default3 } from "../blocks/image/image.svelte";
+import { default as default4 } from "../blocks/text/text.svelte";
+import { default as default5 } from "../blocks/video/video.svelte";
+import { default as default6 } from "../blocks/symbol/symbol.svelte";
+import { default as default7 } from "../blocks/button/button.svelte";
+import { default as default8 } from "../blocks/section/section.svelte";
+import { default as default9 } from "../blocks/fragment/fragment.svelte";
 import { default as default10 } from "../components/render-content/render-content.svelte";
 export {
   default7 as Button,

package/src/blocks/button/index.js

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

package/src/blocks/columns/index.js

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

package/src/blocks/custom-code/index.js

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

package/src/blocks/embed/index.js

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

package/src/blocks/form/index.js

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

package/src/blocks/fragment/index.js

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

package/src/blocks/image/index.js

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

package/src/blocks/img/index.js

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

package/src/blocks/input/index.js

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

package/src/blocks/raw-text/index.js

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

package/src/blocks/section/index.js

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

package/src/blocks/select/index.js

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

package/src/blocks/submit-button/index.js

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

package/src/blocks/symbol/index.js

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

package/src/blocks/text/index.js

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

package/src/blocks/textarea/index.js

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

package/src/blocks/video/index.js

@@ -1,7 +0,0 @@
-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
-};