@builder.io/sdk-svelte 0.12.5 → 0.12.7

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

@@ -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,
@@ -114,6 +115,10 @@
           forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
           break;
         }
+        case "builder.triggerAnimation": {
+          triggerAnimation(data.data);
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key =
@@ -343,31 +348,37 @@
       mergeNewContent(content);
     }
   }
+
   $: onUpdateFn_0(...[content]);
   function onUpdateFn_1(..._args: any[]) {}
+
   $: onUpdateFn_1(...[shouldSendResetCookie]);
   function onUpdateFn_2(..._args: any[]) {
     evaluateJsCode();
   }
-  $: onUpdateFn_2(
-    ...[
-      $builderContextSignal.content?.data?.jsCode,
-      $builderContextSignal.rootState,
-    ]
-  );
+  $: onUpdateFn_2_builderContextSignal_content__data__jsCode =
+    $builderContextSignal.content?.data?.jsCode;
+  $: onUpdateFn_2(...[onUpdateFn_2_builderContextSignal_content__data__jsCode]);
   function onUpdateFn_3(..._args: any[]) {
     runHttpRequests();
   }
-  $: onUpdateFn_3(...[$builderContextSignal.content?.data?.httpRequests]);
+  $: onUpdateFn_3_builderContextSignal_content__data__httpRequests =
+    $builderContextSignal.content?.data?.httpRequests;
+  $: onUpdateFn_3(
+    ...[onUpdateFn_3_builderContextSignal_content__data__httpRequests]
+  );
   function onUpdateFn_4(..._args: any[]) {
     emitStateUpdate();
   }
-  $: onUpdateFn_4(...[$builderContextSignal.rootState]);
+  $: onUpdateFn_4_builderContextSignal_rootState =
+    $builderContextSignal.rootState;
+  $: onUpdateFn_4(...[onUpdateFn_4_builderContextSignal_rootState]);
   function onUpdateFn_5(..._args: any[]) {
     if (data) {
       mergeNewRootState(data);
     }
   }
+
   $: onUpdateFn_5(...[data]);
   function onUpdateFn_6(..._args: any[]) {
     if (locale) {
@@ -376,6 +387,7 @@
       });
     }
   }
+
   $: onUpdateFn_6(...[locale]);
 
   setContext(builderContext.key, builderContextSignal);

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.5"
+export const SDK_VERSION = "0.12.7"

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -14,27 +14,47 @@ export const runInBrowser = ({
     builder,
     context,
     event,
-    state: flattenState(rootState, localState, rootSetState)
+    state: flattenState({
+      rootState,
+      localState,
+      rootSetState
+    })
   });
   return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
 };
-export function flattenState(rootState: Record<string | symbol, any>, localState: Record<string | symbol, any> | undefined, rootSetState: ((rootState: BuilderRenderState) => void) | undefined): BuilderRenderState {
-  if (rootState === localState) {
-    throw new Error('rootState === localState');
-  }
+export function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}: {
+  rootState: Record<string | symbol, any>;
+  localState: Record<string | symbol, any> | undefined;
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState {
   return new Proxy(rootState, {
-    get: (_, prop) => {
+    get: (target, prop) => {
       if (localState && prop in localState) {
         return localState[prop];
       }
-      return rootState[(prop as string)];
+      const val = target[prop];
+      if (typeof val === 'object') {
+        return flattenState({
+          rootState: val,
+          localState: undefined,
+          rootSetState: rootSetState ? subState => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : undefined
+        });
+      }
+      return val;
     },
-    set: (_, prop, value) => {
+    set: (target, prop, value) => {
       if (localState && prop in localState) {
         throw new Error('Writing to local state is not allowed as it is read-only.');
       }
-      rootState[(prop as string)] = value;
-      rootSetState?.(rootState);
+      target[prop] = value;
+      rootSetState?.(target);
       return true;
     }
   });

package/src/functions/evaluate/should-force-browser-runtime-in-node.ts

@@ -4,13 +4,7 @@ export const shouldForceBrowserRuntimeInNode = () => {
   if (!isNodeRuntime()) return false;
   const isArm64 = process.arch === 'arm64';
   const isNode20 = process.version.startsWith('v20');
-
-  // if the user passed this node option, then the `isolated-vm` package will work
   const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
-
-  /**
-   * https://github.com/laverdet/isolated-vm/issues/424
-   */
   if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
     logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.

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;