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

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

@@ -1,216 +1,252 @@
 <script>
-     import { onMount } from 'svelte'
-     import { afterUpdate } from 'svelte'
-     import { onDestroy } from 'svelte'
-     
-   import  {  isBrowser  }  from '../../functions/is-browser';
-import  BuilderContext,  {  }  from '../../context/builder.context.lite';
-import  {  track  }  from '../../functions/track';
-import  {  isEditing  }  from '../../functions/is-editing';
-import  {  isPreviewing  }  from '../../functions/is-previewing';
-import  {  previewingModelName  }  from '../../functions/previewing-model-name';
-import  {  getContent  }  from '../../functions/get-content';
-import  {  convertSearchParamsToQueryObject  ,  getBuilderSearchParams  }  from '../../functions/get-builder-search-params';
-import  RenderBlocks,  {  }  from '../render-blocks.lite';
-import  {  evaluate  }  from '../../functions/evaluate';
-import  {  getFetch  }  from '../../functions/get-fetch';
-import  {  TARGET  }  from '../../constants/target';
-import  RenderStyles,  {  }  from './components/render-styles.lite';
-
-   
- 
-
-     
-     export let content;
+    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 customComponents;
 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;
-         }
-
-         break;
-       }
-
-     case 'builder.patchUpdates':
-       {
-         // TODO
-         break;
-       }
-   }
- }
+    
+    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;
+      }
+
+    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: state()
-   });
- }
+// 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: state()
- }));
+return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+  code: group,
+  context: context(),
+  state: contentState()
+}));
 }
 
 function handleRequest({
- url,
- key
+url,
+key
 }) {
- const fetchAndSetState = async () => {
-   const response = await getFetch()(url);
-   const json = await response.json();
-   const newOverrideState = { ...overrideState,
-     [key]: json
-   };
-   overrideState = newOverrideState;
- };
-
- fetchAndSetState();
+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
-     });
-   }
- });
+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: state(),
-     ref: {
-       name: model
-     }
-   }
- }));
+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;
+}
+    $: useContent = () => {
+const mergedContent = { ...content,
+  ...overrideContent,
+  data: { ...content?.data,
+    ...data,
+    ...overrideContent?.data
+  }
+};
+return mergedContent;
 };
 
-$: state = () => {
- return { ...content?.data?.state,
-   ...data,
-   ...overrideState
- };
+$: contentState = () => {
+return { ...content?.data?.state,
+  ...data,
+  ...overrideState
+};
 };
 
 $: context = () => {
- return {};
+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 {};
+return {};
 };
 
-     let overrideContent = null;
+    
+    setContext(BuilderContext.key, { get content() {
+return useContent();
+}, get state() {
+return contentState();
+}, get context() {
+return context();
+}, get apiKey() {
+return apiKey;
+}, get registeredComponents() {
+return allRegisteredComponents();
+},});
+    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;
-           }
-         });
-       }
-     }
-   }
-
-   evaluateJsCode();
-   runHttpRequests();
-   emitStateUpdate();
- }
-});
+    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);
+}
 
-     afterUpdate(() => { 
- evaluateJsCode();
-});afterUpdate(() => { 
- runHttpRequests();
-});afterUpdate(() => { 
- emitStateUpdate();
-})
-
-     onDestroy(() => { 
- if (isBrowser()) {
-   window.removeEventListener('message', processMessage);
-   window.removeEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
- }
-});
-   </script>
+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();
+} });
+
+    afterUpdate(() => { evaluateJsCode(); });afterUpdate(() => { runHttpRequests(); });afterUpdate(() => { emitStateUpdate(); })
+
+    onDestroy(() => { if (isBrowser()) {
+window.removeEventListener('message', processMessage);
+window.removeEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
+} });
+  </script>
 
-   {#if useContent() }
-     
+  
+{#if useContent() }
+
+    
 <div  on:click="{event => track('click', {
- contentId: useContent().id
+contentId: useContent().id
 })}"  data-builder-content-id={useContent?.()?.id} >
-       
-{#if (useContent?.()?.data?.cssCode || useContent?.()?.data?.customFonts?.length) && TARGET !== 'reactNative' }<RenderStyles  cssCode={useContent().data.cssCode}  customFonts={useContent().data.customFonts} ></RenderStyles>{/if}
+      
+
+{#if (useContent?.()?.data?.cssCode || useContent?.()?.data?.customFonts?.length) && TARGET !== 'reactNative' }
+<RenderContentStyles  cssCode={useContent().data.cssCode}  customFonts={useContent().data.customFonts} ></RenderContentStyles>
+
 
-       
+{/if}
+
+      
 <RenderBlocks  blocks={useContent?.()?.data?.blocks} ></RenderBlocks>
 
-     </div>
+    </div>
+
+  
+
 
-   {/if}
+{/if}

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

@@ -0,0 +1,51 @@
+<script>
+    
+    
+    
+    
+  import  {  TARGET  }  from '../constants/target.js';
+
+  
+
+    
+
+    
+    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()}
+
+  
+
+
+{:else}
+<svelte:component  this={tagName()} >{styles}</svelte:component>
+
+{/if}

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,14 +1,3 @@
-var __defProp = Object.defineProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-__export(exports, {
-  sizeNames: () => sizeNames,
-  sizes: () => sizes
-});
 const sizeNames = ["xsmall", "small", "medium", "large"];
 const sizes = {
   xsmall: {
@@ -44,3 +33,7 @@ const sizes = {
     return "large";
   }
 };
+export {
+  sizeNames,
+  sizes
+};

package/src/constants/target.js

@@ -1,11 +1,4 @@
-var __defProp = Object.defineProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+const TARGET = "svelte";
+export {
+  TARGET
 };
-__export(exports, {
-  TARGET: () => TARGET
-});
-const TARGET = "reactNative";

package/src/context/builder.context.js

@@ -1,33 +1,8 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+const key = Symbol();
+var stdin_default = {
+  Builder: { content: null, context: {}, state: {}, apiKey: null, registeredComponents: {} },
+  key
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
+export {
+  stdin_default as default
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  default: () => stdin_default
-});
-var import_react = __toModule(require("react"));
-var stdin_default = (0, import_react.createContext)({
-  content: null,
-  context: {},
-  state: {},
-  apiKey: null
-});

package/src/functions/evaluate.js

@@ -1,31 +1,5 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
-  evaluate: () => evaluate
-});
-var import_is_browser = __toModule(require("./is-browser"));
-var import_is_editing = __toModule(require("./is-editing"));
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,
@@ -37,9 +11,9 @@ function evaluate({
     return;
   }
   const builder = {
-    isEditing: (0, import_is_editing.isEditing)(),
-    isBrowser: (0, import_is_browser.isBrowser)(),
-    isServer: !(0, import_is_browser.isBrowser)()
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser()
   };
   const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
@@ -49,3 +23,6 @@ function evaluate({
     console.warn("Builder custom code error: ", e);
   }
 }
+export {
+  evaluate
+};

package/src/functions/event-handler-name.js

@@ -1,14 +1,7 @@
-var __defProp = Object.defineProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-__export(exports, {
-  getEventHandlerName: () => getEventHandlerName
-});
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
+export {
+  getEventHandlerName
+};