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

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

@@ -1,228 +1,278 @@
 <script>
-    import { onMount } from 'svelte'
-    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 { getContext, setContext } from "svelte";
-
-    
-    export let content;
-export let data;
-export let model;
-export let apiKey;
-    
-    function processMessage(event) {
-const {
-  data
-} = event;
-
-if (data) {
-  switch (data.type) {
-    case 'builder.contentUpdate':
-      {
-        const messageContent = data.data;
-        const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
-        const contentData = messageContent.data;
-
-        if (key === model) {
-          overrideContent = contentData;
+  import { onMount } from "svelte";
+  import { afterUpdate } from "svelte";
+  import { onDestroy } from "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";
+
+  export let content;
+  export let data;
+  export let context;
+  export let customComponents;
+  export let model;
+  export let apiKey;
+
+  const processMessage = function processMessage(event) {
+    const { data } = event;
+
+    if (data) {
+      switch (data.type) {
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key =
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
+          const contentData = messageContent.data;
+
+          if (key === model) {
+            overrideContent = contentData;
+          }
+
+          break;
         }
 
-        break;
-      }
-
-    case 'builder.patchUpdates':
-      {
-        // TODO
-        break;
+        case "builder.patchUpdates": {
+          // TODO
+          break;
+        }
       }
-  }
-}
-}
-
-function evaluateJsCode() {
-// run any dynamic JS code attached to content
-const jsCode = useContent?.()?.data?.jsCode;
-
-if (jsCode) {
-  evaluate({
-    code: jsCode,
-    context: context(),
-    state: contentState()
-  });
-}
-}
-
-function evalExpression(expression) {
-return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-  code: group,
-  context: context(),
-  state: contentState()
-}));
-}
-
-function handleRequest({
-url,
-key
-}) {
-const fetchAndSetState = async () => {
-  const fetch = await getFetch();
-  const response = await fetch(url);
-  const json = await response.json();
-  const newOverrideState = { ...overrideState,
-    [key]: json
-  };
-  overrideState = newOverrideState;
-};
-
-fetchAndSetState();
-}
-
-function runHttpRequests() {
-const requests = useContent?.()?.data?.httpRequests ?? {};
-Object.entries(requests).forEach(([key, url]) => {
-  if (url && (!httpReqsData()[key] || isEditing())) {
-    const evaluatedUrl = evalExpression(url);
-    handleRequest({
-      url: evaluatedUrl,
-      key
-    });
-  }
-});
-}
-
-function emitStateUpdate() {
-window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
-  detail: {
-    state: contentState(),
-    ref: {
-      name: model
     }
-  }
-}));
-}
-    $: useContent = () => {
-const mergedContent = { ...content,
-  ...overrideContent,
-  data: { ...content?.data,
-    ...data,
-    ...overrideContent?.data
-  }
-};
-return mergedContent;
-};
-
-$: contentState = () => {
-return { ...content?.data?.state,
-  ...data,
-  ...overrideState
-};
-};
-
-$: context = () => {
-return {};
-};
-
-$: httpReqsData = () => {
-return {};
-};
-
-    
-    setContext(BuilderContext.key, { get content() {
-return useContent();
-}, get state() {
-return contentState();
-}, get context() {
-return context();
-}, get apiKey() {
-return apiKey;
-},});
-    let overrideContent = null;
-let update = 0;
-let overrideState = {};
-
-    onMount(() => { if (isBrowser()) {
-if (isEditing()) {
-  window.addEventListener('message', processMessage);
-  window.addEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
-}
-
-if (useContent()) {
-  track('impression', {
-    contentId: useContent().id
-  });
-} // override normal content in preview mode
-
-
-if (isPreviewing()) {
-  if (model && previewingModelName() === model) {
-    const currentUrl = new URL(location.href);
-    const previewApiKey = currentUrl.searchParams.get('apiKey');
-
-    if (previewApiKey) {
-      getContent({
-        model: model,
-        apiKey: previewApiKey,
-        options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
-      }).then(content => {
-        if (content) {
-          overrideContent = content;
-        }
+  };
+
+  const evaluateJsCode = function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
+
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState(),
       });
     }
-  }
-}
+  };
 
-evaluateJsCode();
-runHttpRequests();
-emitStateUpdate();
-} });
+  const evalExpression = function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: contextContext(),
+        state: contentState(),
+      })
+    );
+  };
+
+  const handleRequest = function handleRequest({ url, key }) {
+    const fetchAndSetState = async () => {
+      const fetch = await getFetch();
+      const response = await fetch(url);
+      const json = await response.json();
+      const newOverrideState = { ...overrideState, [key]: json };
+      overrideState = newOverrideState;
+    };
 
-    afterUpdate(() => { evaluateJsCode(); });afterUpdate(() => { runHttpRequests(); });afterUpdate(() => { emitStateUpdate(); })
+    fetchAndSetState();
+  };
 
-    onDestroy(() => { if (isBrowser()) {
-window.removeEventListener('message', processMessage);
-window.removeEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
-} });
-  </script>
+  const runHttpRequests = function runHttpRequests() {
+    const requests = useContent?.()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key,
+        });
+      }
+    });
+  };
 
-  
-{#if useContent() }
+  const emitStateUpdate = function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(
+        new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: contentState(),
+            ref: {
+              name: model,
+            },
+          },
+        })
+      );
+    }
+  };
+  $: useContent = () => {
+    const mergedContent = {
+      ...content,
+      ...overrideContent,
+      data: { ...content?.data, ...data, ...overrideContent?.data },
+    };
+    return mergedContent;
+  };
 
-    
-<div  on:click="{event => track('click', {
-contentId: useContent().id
-})}"  data-builder-content-id={useContent?.()?.id} >
-      
+  $: contentState = () => {
+    return { ...content?.data?.state, ...data, ...overrideState };
+  };
 
-{#if (useContent?.()?.data?.cssCode || useContent?.()?.data?.customFonts?.length) && TARGET !== 'reactNative' }
-<RenderContentStyles  cssCode={useContent().data.cssCode}  customFonts={useContent().data.customFonts} ></RenderContentStyles>
+  $: contextContext = () => {
+    return context || {};
+  };
 
+  $: 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;
+  };
 
-{/if}
+  $: httpReqsData = () => {
+    return {};
+  };
 
-      
-<RenderBlocks  blocks={useContent?.()?.data?.blocks} ></RenderBlocks>
+  setContext(BuilderContext.key, {
+    get content() {
+      return useContent();
+    },
+    get state() {
+      return contentState();
+    },
+    get context() {
+      return contextContext();
+    },
+    get apiKey() {
+      return apiKey;
+    },
+    get registeredComponents() {
+      return allRegisteredComponents();
+    },
+  });
+  let overrideContent = null;
+  let update = 0;
+  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
+        );
+      }
 
-    </div>
+      if (useContent()) {
+        track("impression", {
+          contentId: useContent().id,
+        });
+      } // override normal content in preview mode
+
+      if (isPreviewing()) {
+        if (model && previewingModelName() === model) {
+          const currentUrl = new URL(location.href);
+          const previewApiKey = currentUrl.searchParams.get("apiKey");
+
+          if (previewApiKey) {
+            getContent({
+              model: model,
+              apiKey: previewApiKey,
+              options: getBuilderSearchParams(
+                convertSearchParamsToQueryObject(currentUrl.searchParams)
+              ),
+            }).then((content) => {
+              if (content) {
+                overrideContent = content;
+              }
+            });
+          }
+        }
+      }
 
-  
+      evaluateJsCode();
+      runHttpRequests();
+      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);
+      window.removeEventListener(
+        "builder:component:stateChangeListenerActivated",
+        emitStateUpdate
+      );
+    }
+  });
+</script>
 
-{/if}
+{#if useContent()}
+  <div
+    on:click={(event) => {
+      track("click", {
+        contentId: useContent().id,
+      });
+    }}
+    data-builder-content-id={useContent?.()?.id}
+  >
+    {#if (useContent?.()?.data?.cssCode || useContent?.()?.data?.customFonts?.length) && TARGET !== "reactNative"}
+      <RenderContentStyles
+        cssCode={useContent().data.cssCode}
+        customFonts={useContent().data.customFonts}
+      />
+    {/if}
+
+    <RenderBlocks blocks={useContent?.()?.data?.blocks} />
+  </div>
+{/if}

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

@@ -1,49 +1,21 @@
 <script>
-    
-    
-    
-    
-  import  {  TARGET  }  from '../constants/target';
+  import { TARGET } from "../constants/target.js";
 
-  
+  export let styles;
 
-    
-
-    
-    export let styles;
-    
-    
-    $: injectedStyleScript = () => {
-return `<${tagName()}>${styles}</${tagName()}>`;
-};
-
-$: tagName = () => {
-// NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
-// https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-return 'sty' + 'le';
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  
-{#if TARGET === 'svelte' }
-
-    
-{@html injectedStyleScript()}
-
-  
+  $: injectedStyleScript = () => {
+    return `<${tagName()}>${styles}</${tagName()}>`;
+  };
 
+  $: tagName = () => {
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "sty" + "le";
+  };
+</script>
 
+{#if TARGET === "svelte"}
+  {@html injectedStyleScript()}
 {:else}
-<svelte:component  this={tagName()} >{styles}</svelte:component>
-
-{/if}
+  <svelte:component this={tagName()}>{styles}</svelte:component>
+{/if}

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

@@ -0,0 +1,48 @@
+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";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
+import { default as embed } from "../blocks/embed/embed.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),
+  __spreadValues({ component: embed }, embedComponentInfo)
+];
+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,12 @@
 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
+};

package/src/functions/convert-style-object.js

@@ -0,0 +1,6 @@
+const convertStyleObject = (obj) => {
+  return obj;
+};
+export {
+  convertStyleObject
+};

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/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 = {};