@builder.io/sdk-svelte 0.0.1-9 → 0.0.2

package/src/components/render-blocks.svelte

@@ -1,82 +0,0 @@
-<script>
-    
-    
-    
-    
-  import  {  isEditing  }  from '../functions/is-editing.js';
-import  RenderBlock,  {  }  from './render-block/render-block.svelte';
-
-  
-
-    
-
-    
-    export let blocks;
-export let parent;
-export let path;
-    
-    function onClick() {
-if (isEditing() && !blocks?.length) {
-  window.parent?.postMessage({
-    type: 'builder.clickEmptyBlocks',
-    data: {
-      parentElementId: parent,
-      dataPath: path
-    }
-  }, '*');
-}
-}
-
-function onMouseEnter() {
-if (isEditing() && !blocks?.length) {
-  window.parent?.postMessage({
-    type: 'builder.hoverEmptyBlocks',
-    data: {
-      parentElementId: parent,
-      dataPath: path
-    }
-  }, '*');
-}
-}
-    $: className = () => {
-return 'builder-blocks' + (!blocks?.length ? ' no-blocks' : '');
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <div    builder-path={path}  builder-parent-id={parent}  dataSet={{
-class: className()
-}}  on:click="{event => onClick()}"  on:mouseenter="{event => onMouseEnter()}"  class={className()} >
-    
-
-{#if blocks }
-
-      
-
-{#each blocks as block, index }
-<RenderBlock  key={block.id}  block={block} ></RenderBlock>
-{/each}
-
-
-    
-
-
-{/if}
-
-  </div>
-
-  <style>
-    .div { 
-display: flex;
-flex-direction: column;
-align-items: stretch; }
-  </style>

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

@@ -1,90 +0,0 @@
-<script>
-    
-    
-    
-    
-  import  RenderInlinedStyles,  {  }  from '../../render-inlined-styles.svelte';
-
-  
-
-    
-
-    
-    export let cssCode;
-export let customFonts;
-    
-    function getCssFromFont(font) {
-// TODO: compute what font sizes are used and only load those.......
-const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-const name = family.split(',')[0];
-const url = font.fileUrl ?? font?.files?.regular;
-let str = '';
-
-if (url && family && name) {
-  str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-}
-
-if (font.files) {
-  for (const weight in font.files) {
-    const isNumber = String(Number(weight)) === weight;
-
-    if (!isNumber) {
-      continue;
-    } // TODO: maybe limit number loaded
-
-
-    const weightUrl = font.files[weight];
-
-    if (weightUrl && weightUrl !== url) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-    }
-  }
-}
-
-return str;
-}
-
-function getFontCss({
-customFonts
-}) {
-// TODO: flag for this
-// if (!builder.allowCustomFonts) {
-//   return '';
-// }
-// TODO: separate internal data from external
-return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
-}
-    $: injectedStyles = () => {
-return `
-${cssCode || ''}
-${getFontCss({
-  customFonts: customFonts
-})}`;
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
-
-  <RenderInlinedStyles  styles={injectedStyles()} ></RenderInlinedStyles>

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

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

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

@@ -1,252 +0,0 @@
-<script>
-    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 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() {
-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;
-};
-
-$: contentState = () => {
-return { ...content?.data?.state,
-  ...data,
-  ...overrideState
-};
-};
-
-$: 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 {};
-};
-
-    
-    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()) {
-  Object.values(allRegisteredComponents()).forEach(registeredComponent => {
-    const message = createRegisterComponentMessage(registeredComponent);
-    window.parent?.postMessage(message, '*');
-  });
-  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();
-} });
-
-    afterUpdate(() => { evaluateJsCode(); });afterUpdate(() => { runHttpRequests(); });afterUpdate(() => { emitStateUpdate(); })
-
-    onDestroy(() => { if (isBrowser()) {
-window.removeEventListener('message', processMessage);
-window.removeEventListener('builder:component:stateChangeListenerActivated', emitStateUpdate);
-} });
-  </script>
-
-  
-{#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} ></RenderContentStyles>
-
-
-{/if}
-
-      
-<RenderBlocks  blocks={useContent?.()?.data?.blocks} ></RenderBlocks>
-
-    </div>
-
-  
-
-
-{/if}

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

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

@@ -1,45 +0,0 @@
-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,39 +0,0 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
-  small: {
-    min: 320,
-    default: 321,
-    max: 640
-  },
-  medium: {
-    min: 641,
-    default: 642,
-    max: 991
-  },
-  large: {
-    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";
-  }
-};
-export {
-  sizeNames,
-  sizes
-};

package/src/constants/target.js

@@ -1,4 +0,0 @@
-const TARGET = "svelte";
-export {
-  TARGET
-};

package/src/context/builder.context.js

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

package/src/functions/evaluate.js

@@ -1,28 +0,0 @@
-import { isBrowser } from "./is-browser.js";
-import { isEditing } from "./is-editing.js";
-function evaluate({
-  code,
-  context,
-  state,
-  event
-}) {
-  if (code === "") {
-    console.warn("Skipping evaluation of empty code block.");
-    return;
-  }
-  const builder = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser()
-  };
-  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = useReturn ? `return (${code});` : code;
-  try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
-  } catch (e) {
-    console.warn("Builder custom code error: ", e);
-  }
-}
-export {
-  evaluate
-};

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

@@ -1,7 +0,0 @@
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
-export {
-  getEventHandlerName
-};

package/src/functions/fast-clone.js

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

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

@@ -1,23 +0,0 @@
-import { evaluate } from "./evaluate.js";
-import { getEventHandlerName } from "./event-handler-name.js";
-function getBlockActions(options) {
-  var _a;
-  const obj = {};
-  const optionActions = (_a = options.block.actions) != null ? _a : {};
-  for (const key in optionActions) {
-    if (!optionActions.hasOwnProperty(key)) {
-      continue;
-    }
-    const value = optionActions[key];
-    obj[getEventHandlerName(key)] = (event) => evaluate({
-      code: value,
-      context: options.context,
-      state: options.state,
-      event
-    });
-  }
-  return obj;
-}
-export {
-  getBlockActions
-};

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

@@ -1,23 +0,0 @@
-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;
-};
-function getBlockComponentOptions(block) {
-  var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
-}
-export {
-  getBlockComponentOptions
-};

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

@@ -1,29 +0,0 @@
-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;
-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;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function getBlockProperties(block) {
-  var _a;
-  return __spreadProps(__spreadValues({}, block.properties), {
-    "builder-id": block.id,
-    class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
-  });
-}
-export {
-  getBlockProperties
-};