@builder.io/sdk-solid 0.12.5 → 0.12.7

package/lib/browser/dev.jsx

@@ -99,7 +99,7 @@ import { createContext as createContext2 } from "solid-js";
 var components_context_default = createContext2({ registeredComponents: {} });
 
 // src/components/block/block.tsx
-import { Show as Show4, For as For2, createSignal as createSignal4 } from "solid-js";
+import { Show as Show4, For as For2, onMount, createSignal as createSignal4 } from "solid-js";
 
 // src/functions/get-block-component-options.ts
 function getBlockComponentOptions(block) {
@@ -231,27 +231,43 @@ var 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));
 };
-function flattenState(rootState, localState, rootSetState) {
-  if (rootState === localState) {
-    throw new Error("rootState === localState");
-  }
+function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}) {
   return new Proxy(rootState, {
-    get: (_, prop) => {
+    get: (target, prop) => {
       if (localState && prop in localState) {
         return localState[prop];
       }
-      return rootState[prop];
+      const val = target[prop];
+      if (typeof val === "object") {
+        return flattenState({
+          rootState: val,
+          localState: void 0,
+          rootSetState: rootSetState ? (subState) => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : void 0
+        });
+      }
+      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] = value;
-      rootSetState?.(rootState);
+      target[prop] = value;
+      rootSetState?.(target);
       return true;
     }
   });
@@ -394,6 +410,212 @@ function getProcessedBlock({
   }
 }
 
+// src/components/block/animator.ts
+function throttle(func, wait, options = {}) {
+  let context;
+  let args;
+  let result;
+  let timeout = null;
+  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() {
+    const now = Date.now();
+    if (!previous && options.leading === false)
+      previous = now;
+    const remaining = wait - (now - previous);
+    context = this;
+    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, ..._args) {
+  const to = Object(target);
+  for (let index = 1; index < arguments.length; index++) {
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      for (const nextKey in nextSource) {
+        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+          to[nextKey] = nextSource[nextKey];
+        }
+      }
+    }
+  }
+  return to;
+}
+var camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : "";
+function bindAnimations(animations) {
+  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) {
+  console.warn(`Cannot animate element: element with ID ${id} not found!`);
+}
+function augmentAnimation(animation, element) {
+  const stylesUsed = getAllStylesUsed(animation);
+  const computedStyle = getComputedStyle(element);
+  const firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1].styles;
+  const bothStyles = [firstStyles, lastStyles];
+  for (const styles of bothStyles) {
+    for (const style of stylesUsed) {
+      if (!(style in styles)) {
+        styles[style] = computedStyle[style];
+      }
+    }
+  }
+}
+function getAllStylesUsed(animation) {
+  const properties = [];
+  for (const step of animation.steps) {
+    for (const key in step.styles) {
+      if (properties.indexOf(key) === -1) {
+        properties.push(key);
+      }
+    }
+  }
+  return properties;
+}
+function triggerAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || "");
+    return;
+  }
+  Array.from(elements).forEach((element) => {
+    augmentAnimation(animation, element);
+    element.style.transition = "none";
+    element.style.transitionDelay = "0";
+    assign(element.style, animation.steps[0].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);
+      setTimeout(() => {
+        element.style.transition = "";
+        element.style.transitionDelay = "";
+      }, (animation.delay || 0) * 1e3 + animation.duration * 1e3 + 100);
+    });
+  });
+}
+function bindHoverAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  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);
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + "s";
+      }
+    });
+  });
+}
+function bindScrollInViewAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || "");
+    return;
+  }
+  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)) * 1e3 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        triggered = false;
+        assign(element.style, animation.steps[0].styles);
+      }
+    }
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+    function isScrolledIntoView(elem) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+      return rect.bottom > threshold && rect.top < windowHeight - threshold;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element.style, defaultState);
+    }
+    attachDefaultState();
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + "s";
+      }
+    });
+    document.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    immediateOnScroll();
+  });
+}
+
 // src/components/block/block.helpers.ts
 var getComponent = ({
   block,
@@ -916,6 +1138,18 @@ function Block(props) {
       isInteractive: !blockComponent()?.isRSC
     };
   }
+  onMount(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+      bindAnimations(
+        animations.filter((item) => item.trigger !== "hover").map((animation) => ({
+          ...animation,
+          elementId: blockId
+        }))
+      );
+    }
+  });
   return <Show4 when={canShowBlock()}>
     <Block_styles_default block={props.block} context={props.context} />
     <Show4
@@ -1364,10 +1598,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount4, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import { Show as Show11, For as For5, onMount as onMount3, createSignal as createSignal13 } from "solid-js";
+import { Show as Show11, For as For5, onMount as onMount4, createSignal as createSignal13 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -1845,12 +2079,12 @@ var componentInfo3 = {
 };
 
 // src/blocks/custom-code/custom-code.tsx
-import { onMount, createSignal as createSignal7 } from "solid-js";
+import { onMount as onMount2, createSignal as createSignal7 } from "solid-js";
 function CustomCode(props) {
   const [scriptsInserted, setScriptsInserted] = createSignal7([]);
   const [scriptsRun, setScriptsRun] = createSignal7([]);
   let elementRef;
-  onMount(() => {
+  onMount2(() => {
     if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
       return;
     }
@@ -2571,7 +2805,7 @@ function InlinedScript(props) {
 var Inlined_script_default = InlinedScript;
 
 // src/components/content/components/enable-editor.tsx
-import { Show as Show9, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
+import { Show as Show9, onMount as onMount3, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
 import { Dynamic as Dynamic5 } from "solid-js/web";
 
 // src/helpers/preview-lru-cache/get.ts
@@ -3066,7 +3300,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.5";
+var SDK_VERSION = "0.12.7";
 
 // src/functions/register.ts
 var registry = {};
@@ -3270,6 +3504,10 @@ function EnableEditor(props) {
           setForceReRenderCount(forceReRenderCount() + 1);
           break;
         }
+        case "builder.triggerAnimation": {
+          triggerAnimation(data.data);
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -3367,7 +3605,7 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
-  onMount2(() => {
+  onMount3(() => {
     if (isBrowser()) {
       if (isEditing() && true) {
         setForceReRenderCount(forceReRenderCount() + 1);
@@ -3432,7 +3670,7 @@ function EnableEditor(props) {
       }
     }
   });
-  onMount2(() => {
+  onMount3(() => {
     if (!props.apiKey) {
       logger.error(
         "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
@@ -3455,13 +3693,7 @@ function EnableEditor(props) {
     evaluateJsCode();
   }
   createEffect2(
-    on2(
-      () => [
-        props.builderContextSignal.content?.data?.jsCode,
-        props.builderContextSignal.rootState
-      ],
-      onUpdateFn_2
-    )
+    on2(() => [props.builderContextSignal.content?.data?.jsCode], onUpdateFn_2)
   );
   function onUpdateFn_3() {
     runHttpRequests();
@@ -3778,7 +4010,7 @@ function ContentVariants(props) {
       canTrack: getDefaultCanTrack(props.canTrack)
     });
   }
-  onMount3(() => {
+  onMount4(() => {
     setShouldRenderVariants(false);
   });
   return <>
@@ -3890,7 +4122,7 @@ function Symbol(props) {
       }
     });
   }
-  onMount4(() => {
+  onMount5(() => {
     setContent();
   });
   function onUpdateFn_0() {

package/lib/browser/index.js

@@ -242,27 +242,43 @@ var 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));
 };
-function flattenState(rootState, localState, rootSetState) {
-  if (rootState === localState) {
-    throw new Error("rootState === localState");
-  }
+function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}) {
   return new Proxy(rootState, {
-    get: (_, prop) => {
+    get: (target, prop) => {
       if (localState && prop in localState) {
         return localState[prop];
       }
-      return rootState[prop];
+      const val = target[prop];
+      if (typeof val === "object") {
+        return flattenState({
+          rootState: val,
+          localState: void 0,
+          rootSetState: rootSetState ? (subState) => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : void 0
+        });
+      }
+      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] = value;
-      rootSetState?.(rootState);
+      target[prop] = value;
+      rootSetState?.(target);
       return true;
     }
   });
@@ -405,6 +421,211 @@ function getProcessedBlock({
   }
 }
 
+// src/components/block/animator.ts
+function throttle(func, wait, options = {}) {
+  let context;
+  let args;
+  let result;
+  let timeout = null;
+  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() {
+    const now = Date.now();
+    if (!previous && options.leading === false)
+      previous = now;
+    const remaining = wait - (now - previous);
+    context = this;
+    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, ..._args) {
+  const to = Object(target);
+  for (let index = 1; index < arguments.length; index++) {
+    const nextSource = arguments[index];
+    if (nextSource != null) {
+      for (const nextKey in nextSource) {
+        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+          to[nextKey] = nextSource[nextKey];
+        }
+      }
+    }
+  }
+  return to;
+}
+var camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) : "";
+function bindAnimations(animations) {
+  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) {
+}
+function augmentAnimation(animation, element) {
+  const stylesUsed = getAllStylesUsed(animation);
+  const computedStyle = getComputedStyle(element);
+  const firstStyles = animation.steps[0].styles;
+  const lastStyles = animation.steps[animation.steps.length - 1].styles;
+  const bothStyles = [firstStyles, lastStyles];
+  for (const styles of bothStyles) {
+    for (const style of stylesUsed) {
+      if (!(style in styles)) {
+        styles[style] = computedStyle[style];
+      }
+    }
+  }
+}
+function getAllStylesUsed(animation) {
+  const properties = [];
+  for (const step of animation.steps) {
+    for (const key in step.styles) {
+      if (properties.indexOf(key) === -1) {
+        properties.push(key);
+      }
+    }
+  }
+  return properties;
+}
+function triggerAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || "");
+    return;
+  }
+  Array.from(elements).forEach((element) => {
+    augmentAnimation(animation, element);
+    element.style.transition = "none";
+    element.style.transitionDelay = "0";
+    assign(element.style, animation.steps[0].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);
+      setTimeout(() => {
+        element.style.transition = "";
+        element.style.transitionDelay = "";
+      }, (animation.delay || 0) * 1e3 + animation.duration * 1e3 + 100);
+    });
+  });
+}
+function bindHoverAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  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);
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + "s";
+      }
+    });
+  });
+}
+function bindScrollInViewAnimation(animation) {
+  const elements = Array.prototype.slice.call(document.getElementsByClassName(animation.elementId || animation.id || ""));
+  if (!elements.length) {
+    warnElementNotPresent(animation.elementId || animation.id || "");
+    return;
+  }
+  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)) * 1e3 + 100);
+        });
+      } else if (animation.repeat && triggered && !pendingAnimation && !isScrolledIntoView(element)) {
+        triggered = false;
+        assign(element.style, animation.steps[0].styles);
+      }
+    }
+    const onScroll = throttle(immediateOnScroll, 200, {
+      leading: false
+    });
+    function isScrolledIntoView(elem) {
+      const rect = elem.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const thresholdPercent = (animation.thresholdPercent || 0) / 100;
+      const threshold = thresholdPercent * windowHeight;
+      return rect.bottom > threshold && rect.top < windowHeight - threshold;
+    }
+    const defaultState = animation.steps[0].styles;
+    function attachDefaultState() {
+      assign(element.style, defaultState);
+    }
+    attachDefaultState();
+    setTimeout(() => {
+      element.style.transition = `all ${animation.duration}s ${camelCaseToKebabCase(animation.easing)}`;
+      if (animation.delay) {
+        element.style.transitionDelay = animation.delay + "s";
+      }
+    });
+    document.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    immediateOnScroll();
+  });
+}
+
 // src/components/block/block.helpers.ts
 var getComponent = ({
   block,
@@ -977,6 +1198,16 @@ function Block(props) {
       isInteractive: !blockComponent()?.isRSC
     };
   }
+  onMount(() => {
+    const blockId = processedBlock().id;
+    const animations = processedBlock().animations;
+    if (animations && blockId) {
+      bindAnimations(animations.filter((item) => item.trigger !== "hover").map((animation) => ({
+        ...animation,
+        elementId: blockId
+      })));
+    }
+  });
   return createComponent(Show, {
     get when() {
       return canShowBlock();
@@ -3380,7 +3611,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.5";
+var SDK_VERSION = "0.12.7";
 
 // src/functions/register.ts
 var registry = {};
@@ -3586,6 +3817,10 @@ function EnableEditor(props) {
           setForceReRenderCount(forceReRenderCount() + 1);
           break;
         }
+        case "builder.triggerAnimation": {
+          triggerAnimation(data.data);
+          break;
+        }
         case "builder.contentUpdate": {
           const messageContent = data.data;
           const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
@@ -3755,7 +3990,7 @@ function EnableEditor(props) {
   function onUpdateFn_2() {
     evaluateJsCode();
   }
-  createEffect(on(() => [props.builderContextSignal.content?.data?.jsCode, props.builderContextSignal.rootState], onUpdateFn_2));
+  createEffect(on(() => [props.builderContextSignal.content?.data?.jsCode], onUpdateFn_2));
   function onUpdateFn_3() {
     runHttpRequests();
   }