@builder.io/sdk-svelte 0.0.1-1 → 0.0.1-12

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,12 +1,24 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.1-1",
-  "dependencies": {
-    "node-fetch": "^2.6.1"
+  "version": "0.0.1-12",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "svelte": "./src/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    }
   },
-  "main": "src/index.js",
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
+  },
+  "dependencies": {
+    "node-fetch": "^2.6.1"
   }
 }

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/form/form.svelte

@@ -4,7 +4,7 @@
     
     
   import  RenderBlock,  {  }  from '../../components/render-block/render-block.svelte';
-import  {  isEditing  }  from '../../functions/is-editing';
+import  {  isEditing  }  from '../../functions/is-editing.js';
 
   
 

package/src/blocks/image/image.svelte

@@ -38,10 +38,10 @@ 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}  />
+}}  class={'builder-image' + (className ? ' ' + className : '')}  src={image}  srcSet={srcset}  sizes={sizes}  />
 
       
 <source  srcSet={srcset}  />

package/src/blocks/img/img.svelte

@@ -3,7 +3,7 @@
     
     
     
-  import  {  isEditing  }  from '../../functions/is-editing';
+  import  {  isEditing  }  from '../../functions/is-editing.js';
 
   
 

package/src/blocks/input/input.svelte

@@ -3,7 +3,7 @@
   
   
   
-import  {  isEditing  }  from '../../functions/is-editing';
+import  {  isEditing  }  from '../../functions/is-editing.js';
 
 
 

package/src/blocks/select/select.svelte

@@ -3,7 +3,7 @@
   
   
   
-import  {  isEditing  }  from '../../functions/is-editing';
+import  {  isEditing  }  from '../../functions/is-editing.js';
 
 
 

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

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.svelte

@@ -5,7 +5,7 @@
     
   import  RenderContent,  {  }  from '../../components/render-content/render-content.svelte';
 import  BuilderContext,  {  }  from '../../context/builder.context';
-import  {  getContent  }  from '../../functions/get-content';
+import  {  getContent  }  from '../../functions/get-content/index.js';
 
   
 

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

@@ -3,16 +3,15 @@
     
     
     
-  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  {  isEmptyHtmlElement  }  from './render-block.helpers.js';
+import  RenderComponentAndStyles,  {  }  from './render-component-and-styles.svelte';
 
   
 
@@ -29,20 +28,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 +69,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 +106,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 +125,21 @@ return componentRef() ? [] : children();
   </script>
 
   
+{#if shouldWrap() }
+
     
 
-{#if !componentInfo?.()?.noWrap }
+{#if !isEmptyHtmlElement(tagName()) }
 
       
-<svelte:element {...propertiesAndActions()} style={css()}  this={tagName()} >
-        
-
-{#if TARGET === 'vue' || TARGET === 'svelte' }
-
-          
-<BlockStyles  block={useBlock()} ></BlockStyles>
-
-        
-
-
-{/if}
-
+<svelte:element {...attributes()} this={tagName()} >
         
-
-{#if componentRef() }
-<svelte:component {...componentOptions()} builderBlock={useBlock()}  this={componentRef()} >
-            
-
-{#each children() as child, index }
-<svelte:self  block={child} ></svelte:self>
-{/each}
-
-
-          </svelte:component>
-
-
-{/if}
+<RenderComponentAndStyles  block={useBlock()}  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponentAndStyles>
 
         
 
 {#each noCompRefChildren() as child, index }
-<svelte:self  block={child} ></svelte:self>
+<svelte:self  key={child.id}  block={child} ></svelte:self>
 {/each}
 
 
@@ -150,14 +149,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}
+<RenderComponentAndStyles  block={useBlock()}  blockChildren={children()}  componentRef={componentRef()}  componentOptions={componentOptions()} ></RenderComponentAndStyles>
 
 {/if}

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

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

package/src/components/render-blocks.svelte

@@ -3,7 +3,7 @@
     
     
     
-  import  {  isEditing  }  from '../functions/is-editing';
+  import  {  isEditing  }  from '../functions/is-editing.js';
 import  RenderBlock,  {  }  from './render-block/render-block.svelte';
 
   

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,17 +3,19 @@
     import { afterUpdate } from 'svelte'
     import { onDestroy } from 'svelte'
     
-  import  {  TARGET  }  from '../../constants/target';
+  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';
-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  {  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';
 
@@ -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.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

@@ -3,7 +3,7 @@
     
     
     
-  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/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/evaluate.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,

package/src/functions/fast-clone.js

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

package/src/functions/get-block-actions.js

@@ -1,5 +1,5 @@
-import { evaluate } from "./evaluate";
-import { getEventHandlerName } from "./event-handler-name";
+import { evaluate } from "./evaluate.js";
+import { getEventHandlerName } from "./event-handler-name.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};

package/src/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions

package/src/functions/get-block-styles.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { sizes } from "../constants/device-sizes";
+import { sizes } from "../constants/device-sizes.js";
 function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
   const styles = __spreadValues(__spreadValues({}, (_a = block.responsiveStyles) == null ? void 0 : _a.large), block.styles);

package/src/functions/get-content/index.js

@@ -37,7 +37,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "../get-fetch";
+import { getFetch } from "../get-fetch.js";
 const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {

package/src/functions/get-fetch.js

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getGlobalThis } from "./get-global-this";
+import { getGlobalThis } from "./get-global-this.js";
 function getFetch() {
   return __async(this, null, function* () {
     const globalFetch = getGlobalThis().fetch;

package/src/functions/get-processed-block.js

@@ -17,9 +17,9 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { evaluate } from "./evaluate";
-import { set } from "./set";
-import { transformBlock } from "./transform-block";
+import { evaluate } from "./evaluate.js";
+import { set } from "./set.js";
+import { transformBlock } from "./transform-block.js";
 function getProcessedBlock(options) {
   const { state, context } = options;
   const block = transformBlock(options.block);

package/src/functions/get-processed-block.test.js

@@ -1,4 +1,4 @@
-import { getProcessedBlock } from "./get-processed-block";
+import { getProcessedBlock } from "./get-processed-block.js";
 test("Can process bindings", () => {
   var _a, _b, _c, _d, _e, _f;
   const block = {

package/src/functions/if-target.js

@@ -1,4 +1,4 @@
-import { TARGET } from "../constants/target";
+import { TARGET } from "../constants/target.js";
 function ifTarget({
   targets,
   doThing,

package/src/functions/is-editing.js

@@ -1,4 +1,4 @@
-import { isIframe } from "./is-iframe";
+import { isIframe } from "./is-iframe.js";
 function isEditing() {
   return isIframe() && window.location.search.indexOf("builder.frameEditing=") !== -1;
 }

package/src/functions/is-iframe.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 function isIframe() {
   return isBrowser() && window.self !== window.top;
 }

package/src/functions/is-previewing.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function isPreviewing() {
   if (!isBrowser()) {
     return false;

package/src/functions/on-change.test.js

@@ -1,4 +1,4 @@
-import { onChange } from "./on-change";
+import { onChange } from "./on-change.js";
 test("onChange can observe a shallow change", () => {
   let changeHappend = false;
   const obj = onChange({ foo: "hi" }, () => changeHappend = true);

package/src/functions/previewing-model-name.js

@@ -1,4 +1,4 @@
-import { isPreviewing } from "./is-previewing";
+import { isPreviewing } from "./is-previewing.js";
 function previewingModelName() {
   if (!isPreviewing()) {
     return null;

package/src/functions/register-component.js

@@ -17,27 +17,43 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser";
-const components = {};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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(__spreadValues({ 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 = (_a) => {
+  var _b = _a, {
+    component
+  } = _b, info = __objRest(_b, [
+    "component"
+  ]);
+  return {
+    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 +65,6 @@ function prepareComponentInfoToSend(info) {
 }
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

package/src/functions/register.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const registry = {};
 function register(type, info) {
   let typeList = registry[type];

package/src/functions/set-editor-settings.js

@@ -1,4 +1,4 @@
-import { isBrowser } from "./is-browser";
+import { isBrowser } from "./is-browser.js";
 const settings = {};
 function setEditorSettings(newSettings) {
   if (isBrowser()) {

package/src/functions/set.test.js

@@ -1,4 +1,4 @@
-import { set } from "./set";
+import { set } from "./set.js";
 test("can shallow set a property", () => {
   const obj = { foo: "bar" };
   set(obj, "foo", "baz");

package/src/functions/track.js

@@ -1,6 +1,6 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function track(event, properties) {
   if (isEditing()) {
     return;

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

@@ -1,11 +1,11 @@
-import { default as default2 } from "../blocks/columns";
-import { default as default3 } from "../blocks/image";
-import { default as default4 } from "../blocks/text";
-import { default as default5 } from "../blocks/video";
-import { default as default6 } from "../blocks/symbol";
-import { default as default7 } from "../blocks/button";
-import { default as default8 } from "../blocks/section";
-import { default as default9 } from "../blocks/fragment";
+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/index.js

@@ -1,10 +1,10 @@
-import "./index-helpers/top-of-file";
-import "./scripts/init-editing";
-export * from "./index-helpers/blocks-exports";
-export * from "./functions/is-editing";
-export * from "./functions/is-previewing";
-export * from "./functions/register-component";
-export * from "./functions/register";
-export * from "./functions/set-editor-settings";
-export * from "./functions/get-content";
-export * from "./functions/get-builder-search-params";
+import "./index-helpers/top-of-file.js";
+import "./scripts/init-editing.js";
+export * from "./index-helpers/blocks-exports.js";
+export * from "./functions/is-editing.js";
+export * from "./functions/is-previewing.js";
+export * from "./functions/register-component.js";
+export * from "./functions/register.js";
+export * from "./functions/set-editor-settings.js";
+export * from "./functions/get-content/index.js";
+export * from "./functions/get-builder-search-params/index.js";

package/src/scripts/init-editing.js

@@ -1,7 +1,7 @@
-import { TARGET } from "../constants/target";
-import { isBrowser } from "../functions/is-browser";
-import { isEditing } from "../functions/is-editing";
-import { register } from "../functions/register";
+import { TARGET } from "../constants/target.js";
+import { isBrowser } from "../functions/is-browser.js";
+import { isEditing } from "../functions/is-editing.js";
+import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
     name: "_default",

package/src/blocks/button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component";
-import component from "./button.svelte";
-import { componentInfo } from "./component-info";
-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";
-import component from "./columns.svelte";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-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";
-import { componentInfo } from "./component-info";
-import component from "./video.svelte";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/functions/macro-eval.js

@@ -1,5 +0,0 @@
-function macroEval(items, string) {
-}
-export {
-  macroEval
-};