@builder.io/sdk-svelte 0.12.6 → 0.12.8

package/src/components/block/animator.ts

@@ -0,0 +1,254 @@
+import type { BuilderAnimation } from '../../types/builder-block.js';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+function throttle(func: Function, wait: number, options: any = {}) {
+  let context: any;
+  let args: any;
+  let result: any;
+  let timeout = (null as any);
+  let previous = 0;
+  const later = function () {
+    previous = options.leading === false ? 0 : Date.now();
+    timeout = null;
+    result = func.apply(context, args);
+    if (!timeout) context = args = null;
+  };
+  return function (this: any) {
+    const now = Date.now();
+    if (!previous && options.leading === false) previous = now;
+    const remaining = wait - (now - previous);
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    context = this;
+    // eslint-disable-next-line prefer-rest-params
+    args = arguments;
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      previous = now;
+      result = func.apply(context, args);
+      if (!timeout) context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+}
+function assign(target: object, ..._args: any[]) {
+  const to = Object(target);
+  for (let index = 1; index < arguments.length; index++) {
+    // eslint-disable-next-line prefer-rest-params
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      // Skip over if undefined or null
+      for (const nextKey in nextSource) {
+        // Avoid bugs when hasOwnProperty is shadowed
+        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+          to[nextKey] = nextSource[nextKey];
+        }
+      }
+    }
+  }
+  return to;
+}
+const camelCaseToKebabCase = (str?: string) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export function bindAnimations(animations: BuilderAnimation[]) {
+  for (const animation of animations) {
+    switch (animation.trigger) {
+      case 'pageLoad':
+        triggerAnimation(animation);
+        break;
+      case 'hover':
+        bindHoverAnimation(animation);
+        break;
+      case 'scrollInView':
+        bindScrollInViewAnimation(animation);
+        break;
+    }
+  }
+}
+function warnElementNotPresent(id: string) {
+  console.warn(`Cannot animate element: element with ID ${id} not found!`);
+}
+function augmentAnimation(animation: BuilderAnimation, element: HTMLElement) {
+  const stylesUsed = getAllStylesUsed(animation);
+  const computedStyle: any = getComputedStyle(element);
+  // const computedStyle = getComputedStyle(element);
+  // // FIXME: this will break if original load is in one reponsive size then resize to another hmmm
+  // Need to use transform instead of left since left can change on screen sizes
+  const firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1]!.styles;
+  const bothStyles = [firstStyles, lastStyles];
+
+  // FIXME: this won't work as expected for augmented animations - may need the editor itself to manage this
+  for (const styles of bothStyles) {
+    for (const style of stylesUsed) {
+      if (!(style in styles)) {
+        styles[(style as any)] = computedStyle[style];
+      }
+    }
+  }
+}
+function getAllStylesUsed(animation: BuilderAnimation) {
+  const properties: (keyof CSSStyleDeclaration)[] = [];
+  for (const step of animation.steps) {
+    for (const key in step.styles) {
+      if (properties.indexOf((key as any)) === -1) {
+        properties.push((key as any));
+      }
+    }
+  }
+  return properties;
+}
+export function triggerAnimation(animation: BuilderAnimation) {
+  // TODO: do for ALL elements
+  const elements = (Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || '')) as HTMLElement[]);
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || '');
+    return;
+  }
+  Array.from(elements).forEach(element => {
+    augmentAnimation(animation, element);
+    // TODO: do this properly, may have other animations of different properties
+
+    // TODO: only override the properties
+    // TODO: if there is an entrance and hover animation, the transition duration will get effed
+    // element.setAttribute('style', '');
+
+    // const styledUsed = this.getAllStylesUsed(animation);
+    element.style.transition = 'none';
+    element.style.transitionDelay = '0';
+    assign(element.style, animation.steps[0].styles);
+    // TODO: queue/batch these timeouts
+    // TODO: only include properties explicitly set in the animation
+    // using Object.keys(styles)
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + 's';
+      }
+      assign(element.style, animation.steps[1].styles);
+      // TODO: maybe remove/reset transitoin property after animation duration
+
+      // TODO: queue timers
+      setTimeout(() => {
+        // TODO: what if has other transition (reset back to what it was)
+        element.style.transition = '';
+        element.style.transitionDelay = '';
+      }, (animation.delay || 0) * 1000 + animation.duration * 1000 + 100);
+    });
+  });
+}
+export function bindHoverAnimation(animation: BuilderAnimation) {
+  // TODO: is it multiple binding when editing...?
+  // TODO: unbind on element remove
+  // TODO: apply to ALL elements
+  const elements = (Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || '')) as HTMLElement[]);
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || '');
+    return;
+  }
+  Array.from(elements).forEach(element => {
+    augmentAnimation(animation, element);
+    const defaultState = animation.steps[0].styles;
+    const hoverState = animation.steps[1].styles;
+    function attachDefaultState() {
+      assign(element!.style, defaultState);
+    }
+    function attachHoverState() {
+      assign(element!.style, hoverState);
+    }
+    attachDefaultState();
+    element.addEventListener('mouseenter', attachHoverState);
+    element.addEventListener('mouseleave', attachDefaultState);
+    // TODO: queue/batch these timeouts
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + 's';
+      }
+    });
+  });
+}
+
+// TODO: unbind on element remove
+export function bindScrollInViewAnimation(animation: BuilderAnimation) {
+  // TODO: apply to ALL matching elements
+  const elements = (Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || '')) as HTMLElement[]);
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || '');
+    return;
+  }
+
+  // TODO: if server side rendered and scrolled into view don't animate...
+  Array.from(elements).forEach(element => {
+    augmentAnimation(animation, element);
+    let triggered = false;
+    let pendingAnimation = false;
+    function immediateOnScroll() {
+      if (!triggered && isScrolledIntoView(element)) {
+        triggered = true;
+        pendingAnimation = true;
+        setTimeout(() => {
+          assign(element!.style, animation.steps[1].styles);
+          if (!animation.repeat) {
+            document.removeEventListener('scroll', onScroll);
+          }
+          setTimeout(() => {
+            pendingAnimation = false;
+            if (!animation.repeat) {
+              element.style.transition = '';
+              element.style.transitionDelay = '';
+            }
+          }, (animation.duration + (animation.delay || 0)) * 1000 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        // we want to repeat the animation every time the the element is out of view and back again
+        triggered = false;
+        assign(element!.style, animation.steps[0].styles);
+      }
+    }
+
+    // TODO: roll all of these in one for more efficiency of checking all the rects
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+
+    // TODO: fully in view or partially
+    function isScrolledIntoView(elem: HTMLElement) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+
+      // TODO: partial in view? or what if element is larger than screen itself
+      return rect.bottom > threshold && rect.top < windowHeight - threshold // Element is peeking top or bottom
+      // (rect.top > 0 && rect.bottom < window.innerHeight) || // element fits within the screen and is fully on screen (not hanging off at all)
+      // (rect.top < 0 && rect.bottom > window.innerHeight) // element is larger than the screen and hangs over the top and bottom
+      ;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element!.style, defaultState);
+    }
+    attachDefaultState();
+
+    // TODO: queue/batch these timeouts!
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + 's';
+      }
+    });
+
+    // TODO: one listener for everything
+    document.addEventListener('scroll', onScroll, ({
+      capture: true,
+      passive: true
+    } as any));
+
+    // Do an initial check
+    immediateOnScroll();
+  });
+}

package/src/components/block/block.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">
+  import { onMount } from "svelte";
   import { writable } from "svelte/store";
 
   import type {
@@ -19,6 +20,7 @@
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
   import { getStyle } from "../../functions/get-style.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
+  import { bindAnimations } from "./animator.js";
   import { getComponent, getRepeatItemData } from "./block.helpers.js";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
@@ -122,6 +124,21 @@
   };
 
   let childrenContext = writable($context);
+
+  onMount(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+      bindAnimations(
+        animations
+          .filter((item) => item.trigger !== "hover")
+          .map((animation) => ({
+            ...animation,
+            elementId: blockId,
+          }))
+      );
+    }
+  });
 </script>
 
 {#if canShowBlock()}

package/src/components/content/components/enable-editor.svelte

@@ -24,7 +24,6 @@
   import { fetch } from "../../../functions/get-fetch.js";
   import { isBrowser } from "../../../functions/is-browser.js";
   import { isEditing } from "../../../functions/is-editing.js";
-  import { isFromTrustedHost } from "../../../functions/is-from-trusted-host.js";
   import { isPreviewing } from "../../../functions/is-previewing.js";
   import { createRegisterComponentMessage } from "../../../functions/register-component.js";
   import { _track } from "../../../functions/track/index.js";
@@ -32,6 +31,7 @@
   import { getDefaultCanTrack } from "../../../helpers/canTrack.js";
   import { logger } from "../../../helpers/logger.js";
   import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
+  import { createEditorListener } from "../../../helpers/subscribe-to-editor.js";
   import {
     registerInsertMenu,
     setupBrowserForEditing,
@@ -39,6 +39,7 @@
   import type { BuilderContent } from "../../../types/builder-content.js";
   import type { ComponentInfo } from "../../../types/components.js";
   import type { Dictionary } from "../../../types/typescript.js";
+  import { triggerAnimation } from "../../block/animator.js";
   import type {
     BuilderComponentStateChange,
     ContentProps,
@@ -47,8 +48,8 @@
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
-  export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
+  export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
   export let canTrack: BuilderEditorProps["canTrack"] = undefined;
   export let apiKey: BuilderEditorProps["apiKey"];
@@ -92,14 +93,11 @@
     $builderContextSignal.content = newContentValue;
   }
   function processMessage(event: MessageEvent) {
-    if (!isFromTrustedHost(trustedHosts, event)) {
-      return;
-    }
-    const { data } = event;
-    if (data) {
-      switch (data.type) {
-        case "builder.configureSdk": {
-          const messageContent = data.data;
+    return createEditorListener({
+      model: model,
+      trustedHosts: trustedHosts,
+      callbacks: {
+        configureSdk: (messageContent) => {
           const { breakpoints, contentId } = messageContent;
           if (!contentId || contentId !== $builderContextSignal.content?.id) {
             return;
@@ -110,26 +108,18 @@
                 breakpoints,
               },
             });
-          }
-          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
-          break;
-        }
-        case "builder.contentUpdate": {
-          const messageContent = data.data;
-          const key =
-            messageContent.key ||
-            messageContent.alias ||
-            messageContent.entry ||
-            messageContent.modelName;
-          const contentData = messageContent.data;
-          if (key === model) {
-            mergeNewContent(contentData);
             forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
           }
-          break;
-        }
-      }
-    }
+        },
+        animation: (animation) => {
+          triggerAnimation(animation);
+        },
+        contentUpdate: (newContent) => {
+          mergeNewContent(newContent);
+          forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+        },
+      },
+    })(event);
   }
   function evaluateJsCode() {
     // run any dynamic JS code attached to content

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.6"
+export const SDK_VERSION = "0.12.8"

package/src/helpers/subscribe-to-editor.ts

@@ -0,0 +1,95 @@
+import type { ContentProps } from '../components/content/content.types.js';
+import { isBrowser } from '../functions/is-browser.js';
+import { isFromTrustedHost } from '../functions/is-from-trusted-host.js';
+import { setupBrowserForEditing } from '../scripts/init-editing.js';
+import type { BuilderAnimation } from '../types/builder-block.js';
+import type { BuilderContent } from '../types/builder-content.js';
+import { logger } from './logger.js';
+type ContentListener = Required<Pick<ContentProps, 'model' | 'trustedHosts'>> & {
+  callbacks: {
+    contentUpdate: (updatedContent: BuilderContent) => void;
+    animation: (updatedContent: BuilderAnimation) => void;
+    configureSdk: (updatedContent: any) => void;
+  };
+};
+export const createEditorListener = ({
+  model,
+  trustedHosts,
+  callbacks
+}: ContentListener) => {
+  return (event: MessageEvent<any>): void => {
+    if (!isFromTrustedHost(trustedHosts, event)) {
+      return;
+    }
+    const {
+      data
+    } = event;
+    if (data) {
+      switch (data.type) {
+        case 'builder.configureSdk':
+          {
+            callbacks.configureSdk(data.data);
+            break;
+          }
+        case 'builder.triggerAnimation':
+          {
+            callbacks.animation(data.data);
+            break;
+          }
+        case 'builder.contentUpdate':
+          {
+            const messageContent = data.data;
+            const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+            const contentData = messageContent.data;
+            if (key === model) {
+              callbacks.contentUpdate(contentData);
+            }
+            break;
+          }
+      }
+    }
+  };
+};
+type SubscribeToEditor = (
+/**
+ * The Builder `model` to subscribe to
+ */
+model: string,
+/**
+ * The callback function to call when the content is updated.
+ */
+callback: (updatedContent: BuilderContent) => void,
+/**
+ * Extra options for the listener.
+ */
+options?: {
+  /**
+   * List of hosts to allow editing content from.
+   */
+  trustedHosts?: string[] | undefined;
+}) => () => void;
+
+/**
+ * Subscribes to the Builder editor and listens to `content` updates of a certain `model`.
+ * Sends the updated `content` to the `callback` function.
+ */
+export const subscribeToEditor: SubscribeToEditor = (model, callback, options) => {
+  if (!isBrowser) {
+    logger.warn('`subscribeToEditor` only works in the browser. It currently seems to be running on the server.');
+    return () => {};
+  }
+  setupBrowserForEditing();
+  const listener = createEditorListener({
+    callbacks: {
+      contentUpdate: callback,
+      animation: () => {},
+      configureSdk: () => {}
+    },
+    model,
+    trustedHosts: options?.trustedHosts
+  });
+  window.addEventListener('message', listener);
+  return () => {
+    window.removeEventListener('message', listener);
+  };
+}

package/src/server-index.ts

@@ -1,4 +1,8 @@
 export * from './index-helpers/top-of-file.js';
+
+/**
+ * Component Prop types
+ */
 export type { ButtonProps } from './blocks/button/button.types.js';
 export type { ColumnProps } from './blocks/columns/columns.types.js';
 export type { FragmentProps } from './blocks/fragment/fragment.types.js';
@@ -9,6 +13,18 @@ export type { TextProps } from './blocks/text/text.types.js';
 export type { VideoProps } from './blocks/video/video.types.js';
 export type { BlocksProps } from './components/blocks/blocks.types.js';
 export type { ContentVariantsPrps as ContentProps } from './components/content-variants/content-variants.types.js';
+
+/**
+ * General Builder types
+ */
+export type { RegisteredComponent } from './context/types.js';
+export type { BuilderBlock } from './types/builder-block.js';
+export type { BuilderContent } from './types/builder-content.js';
+export type { ComponentInfo } from './types/components.js';
+
+/**
+ * Helper functions
+ */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
 export { createRegisterComponentMessage } from './functions/register-component.js';
@@ -16,9 +32,12 @@ export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';
 export { setEditorSettings } from './functions/set-editor-settings.js';
 export type { Settings } from './functions/set-editor-settings.js';
-export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js';
 export { getBuilderSearchParams } from './functions/get-builder-search-params/index.js';
 export { track } from './functions/track/index.js';
-export type { RegisteredComponent } from './context/types.js';
-export type { ComponentInfo } from './types/components.js';
-export { fetchBuilderProps } from './functions/fetch-builder-props.js'
+export { subscribeToEditor } from './helpers/subscribe-to-editor.js';
+
+/**
+ * Content fetching
+ */
+export { fetchBuilderProps } from './functions/fetch-builder-props.js';
+export { _processContentResult, fetchEntries, fetchOneEntry, getAllContent, getContent } from './functions/get-content/index.js'

package/src/types/builder-block.ts

@@ -3,7 +3,28 @@ interface JSONObject {
   [x: string]: JSONValue;
 }
 interface JSONArray extends Array<JSONValue> {}
-
+export interface AnimationStep {
+  // First one is always start state
+  // isStartState?: boolean;
+  styles: {
+    [key: string]: string;
+  };
+  delay?: number;
+}
+export interface BuilderAnimation {
+  elementId: string;
+  trigger: string;
+  steps: AnimationStep[];
+  duration: number;
+  delay?: number;
+  easing?: string;
+  // TODO: deprecate - only here because of an API bug
+  id?: string;
+  // only apply in scrollInView
+  repeat?: boolean;
+  // only apply in scrollInView, number from -1 to 1
+  thresholdPercent?: number;
+}
 /** @todo typedoc this */
 export interface BuilderBlock {
   '@type': '@builder.io/sdk:Element';
@@ -52,7 +73,7 @@ export interface BuilderBlock {
     collection: string;
     itemName?: string;
   } | null;
-  animations?: any[]; // TODO: type the animation spec
+  animations?: BuilderAnimation[];
   style?: Partial<CSSStyleDeclaration>;
   href?: string;