@builder.io/sdk-svelte 1.0.21 → 1.0.23

package/lib/browser/components/block/animator.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderAnimation } from '../../types/builder-block';
+export declare const camelCaseToKebabCase: (str?: string) => string;
 export declare function bindAnimations(animations: BuilderAnimation[]): void;
 export declare function triggerAnimation(animation: BuilderAnimation): void;
-export declare function bindHoverAnimation(animation: BuilderAnimation): void;
 export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/browser/components/block/animator.js

@@ -54,16 +54,13 @@ function assign(target, ..._args) {
     }
     return to;
 }
-const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export 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;
@@ -138,37 +135,6 @@ export function triggerAnimation(animation) {
         });
     });
 }
-export function bindHoverAnimation(animation) {
-    // 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 || ''));
-    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) {
     // TODO: apply to ALL matching elements

package/lib/browser/components/block/block.svelte

@@ -104,9 +104,7 @@ onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
     if (animations && blockId) {
-        bindAnimations(animations
-            .filter((item) => item.trigger !== "hover")
-            .map((animation) => ({
+        bindAnimations(animations.map((animation) => ({
             ...animation,
             elementId: blockId,
         })));

package/lib/browser/components/block/components/block-styles.svelte

@@ -6,6 +6,7 @@ import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
+import { camelCaseToKebabCase } from "../animator";
 export let block;
 export let context;
 $: canShowBlock = () => {
@@ -65,7 +66,29 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    const hoverAnimation = processedBlock.animations &&
+        processedBlock.animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+        const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+        hoverStylesClass =
+            createCssClass({
+                className: `${className}:hover`,
+                styles: {
+                    ...hoverStyles,
+                    transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+                    transitionDelay: hoverAnimation.delay
+                        ? `${hoverAnimation.delay}s`
+                        : "0s",
+                },
+            }) || "";
+    }
+    return [
+        largeStylesClass,
+        mediumStylesClass,
+        smallStylesClass,
+        hoverStylesClass,
+    ].join(" ");
 };
 </script>
 

package/lib/browser/components/content/components/enable-editor.svelte

@@ -249,8 +249,11 @@ onMount(() => {
                 variationId: variationId !== contentId ? variationId : undefined,
             });
         }
-        // override normal content in preview mode
-        if (isPreviewing()) {
+        /**
+         * Override normal content in preview mode.
+         * We ignore this when editing, since the edited content is already being sent from the editor via post messages.
+         */
+        if (isPreviewing() && !isEditing()) {
             if (elementRef) {
                 elementRef.dispatchEvent(new CustomEvent("initpreviewingbldr"));
             }

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.21";
+export declare const SDK_VERSION = "1.0.23";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.21";
+export const SDK_VERSION = "1.0.23";

package/lib/browser/functions/evaluate/evaluate.js

@@ -27,7 +27,6 @@ class EvalCache {
 }
 export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
     if (code === '') {
-        logger.warn('Skipping evaluation of empty code block.');
         return undefined;
     }
     const args = {

package/lib/browser/functions/is-editing.js

@@ -2,5 +2,7 @@ import { TARGET } from '../constants/target';
 import { getSearchString } from '../helpers/search/search';
 import { isIframe } from './is-iframe';
 export function isEditing(search) {
-    return isIframe() && (TARGET === 'reactNative' || getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
+    return isIframe() && (TARGET === 'reactNative' ||
+        // accessing window.location.search is safe here because `isIframe()` is only `true` if we're in a browser.
+        getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
 }

package/lib/browser/functions/is-previewing.d.ts

@@ -1,2 +1,2 @@
 import type { Search } from '../helpers/search/search';
-export declare function isPreviewing(search?: Search): boolean;
+export declare function isPreviewing(_search?: Search): boolean;

package/lib/browser/functions/is-previewing.js

@@ -1,13 +1,14 @@
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-import { isEditing } from './is-editing';
-export function isPreviewing(search) {
-    if (!isBrowser()) {
-        return false;
-    }
-    const normalizedSearch = getSearchString(search || window.location.search);
-    if (isEditing(normalizedSearch)) {
+export function isPreviewing(_search) {
+    const search = _search || (isBrowser() ? window.location.search : undefined);
+    /**
+     * If this function is called on the server without an explicit `search` argument,
+     * then it can't check if the user is previewing, and will return `false`.
+     */
+    if (!search) {
         return false;
     }
+    const normalizedSearch = getSearchString(search);
     return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }

package/lib/edge/components/block/animator.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderAnimation } from '../../types/builder-block';
+export declare const camelCaseToKebabCase: (str?: string) => string;
 export declare function bindAnimations(animations: BuilderAnimation[]): void;
 export declare function triggerAnimation(animation: BuilderAnimation): void;
-export declare function bindHoverAnimation(animation: BuilderAnimation): void;
 export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/edge/components/block/animator.js

@@ -54,16 +54,13 @@ function assign(target, ..._args) {
     }
     return to;
 }
-const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export 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;
@@ -138,37 +135,6 @@ export function triggerAnimation(animation) {
         });
     });
 }
-export function bindHoverAnimation(animation) {
-    // 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 || ''));
-    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) {
     // TODO: apply to ALL matching elements

package/lib/edge/components/block/block.svelte

@@ -104,9 +104,7 @@ onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
     if (animations && blockId) {
-        bindAnimations(animations
-            .filter((item) => item.trigger !== "hover")
-            .map((animation) => ({
+        bindAnimations(animations.map((animation) => ({
             ...animation,
             elementId: blockId,
         })));

package/lib/edge/components/block/components/block-styles.svelte

@@ -6,6 +6,7 @@ import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
+import { camelCaseToKebabCase } from "../animator";
 export let block;
 export let context;
 $: canShowBlock = () => {
@@ -65,7 +66,29 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    const hoverAnimation = processedBlock.animations &&
+        processedBlock.animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+        const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+        hoverStylesClass =
+            createCssClass({
+                className: `${className}:hover`,
+                styles: {
+                    ...hoverStyles,
+                    transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+                    transitionDelay: hoverAnimation.delay
+                        ? `${hoverAnimation.delay}s`
+                        : "0s",
+                },
+            }) || "";
+    }
+    return [
+        largeStylesClass,
+        mediumStylesClass,
+        smallStylesClass,
+        hoverStylesClass,
+    ].join(" ");
 };
 </script>
 

package/lib/edge/components/content/components/enable-editor.svelte

@@ -249,8 +249,11 @@ onMount(() => {
                 variationId: variationId !== contentId ? variationId : undefined,
             });
         }
-        // override normal content in preview mode
-        if (isPreviewing()) {
+        /**
+         * Override normal content in preview mode.
+         * We ignore this when editing, since the edited content is already being sent from the editor via post messages.
+         */
+        if (isPreviewing() && !isEditing()) {
             if (elementRef) {
                 elementRef.dispatchEvent(new CustomEvent("initpreviewingbldr"));
             }

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.21";
+export declare const SDK_VERSION = "1.0.23";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.21";
+export const SDK_VERSION = "1.0.23";

package/lib/edge/functions/evaluate/evaluate.js

@@ -27,7 +27,6 @@ class EvalCache {
 }
 export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
     if (code === '') {
-        logger.warn('Skipping evaluation of empty code block.');
         return undefined;
     }
     const args = {

package/lib/edge/functions/is-editing.js

@@ -2,5 +2,7 @@ import { TARGET } from '../constants/target';
 import { getSearchString } from '../helpers/search/search';
 import { isIframe } from './is-iframe';
 export function isEditing(search) {
-    return isIframe() && (TARGET === 'reactNative' || getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
+    return isIframe() && (TARGET === 'reactNative' ||
+        // accessing window.location.search is safe here because `isIframe()` is only `true` if we're in a browser.
+        getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
 }

package/lib/edge/functions/is-previewing.d.ts

@@ -1,2 +1,2 @@
 import type { Search } from '../helpers/search/search';
-export declare function isPreviewing(search?: Search): boolean;
+export declare function isPreviewing(_search?: Search): boolean;

package/lib/edge/functions/is-previewing.js

@@ -1,13 +1,14 @@
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-import { isEditing } from './is-editing';
-export function isPreviewing(search) {
-    if (!isBrowser()) {
-        return false;
-    }
-    const normalizedSearch = getSearchString(search || window.location.search);
-    if (isEditing(normalizedSearch)) {
+export function isPreviewing(_search) {
+    const search = _search || (isBrowser() ? window.location.search : undefined);
+    /**
+     * If this function is called on the server without an explicit `search` argument,
+     * then it can't check if the user is previewing, and will return `false`.
+     */
+    if (!search) {
         return false;
     }
+    const normalizedSearch = getSearchString(search);
     return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }

package/lib/node/components/block/animator.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderAnimation } from '../../types/builder-block';
+export declare const camelCaseToKebabCase: (str?: string) => string;
 export declare function bindAnimations(animations: BuilderAnimation[]): void;
 export declare function triggerAnimation(animation: BuilderAnimation): void;
-export declare function bindHoverAnimation(animation: BuilderAnimation): void;
 export declare function bindScrollInViewAnimation(animation: BuilderAnimation): void;

package/lib/node/components/block/animator.js

@@ -54,16 +54,13 @@ function assign(target, ..._args) {
     }
     return to;
 }
-const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export const camelCaseToKebabCase = (str) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
 export 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;
@@ -138,37 +135,6 @@ export function triggerAnimation(animation) {
         });
     });
 }
-export function bindHoverAnimation(animation) {
-    // 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 || ''));
-    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) {
     // TODO: apply to ALL matching elements

package/lib/node/components/block/block.svelte

@@ -104,9 +104,7 @@ onMount(() => {
     const blockId = processedBlock().id;
     const animations = processedBlock().animations;
     if (animations && blockId) {
-        bindAnimations(animations
-            .filter((item) => item.trigger !== "hover")
-            .map((animation) => ({
+        bindAnimations(animations.map((animation) => ({
             ...animation,
             elementId: blockId,
         })));

package/lib/node/components/block/components/block-styles.svelte

@@ -6,6 +6,7 @@ import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import InlinedStyles from "../../inlined-styles.svelte";
+import { camelCaseToKebabCase } from "../animator";
 export let block;
 export let context;
 $: canShowBlock = () => {
@@ -65,7 +66,29 @@ $: css = () => {
             mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
         })
         : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    const hoverAnimation = processedBlock.animations &&
+        processedBlock.animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+        const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+        hoverStylesClass =
+            createCssClass({
+                className: `${className}:hover`,
+                styles: {
+                    ...hoverStyles,
+                    transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(hoverAnimation.easing)}`,
+                    transitionDelay: hoverAnimation.delay
+                        ? `${hoverAnimation.delay}s`
+                        : "0s",
+                },
+            }) || "";
+    }
+    return [
+        largeStylesClass,
+        mediumStylesClass,
+        smallStylesClass,
+        hoverStylesClass,
+    ].join(" ");
 };
 </script>
 

package/lib/node/components/content/components/enable-editor.svelte

@@ -249,8 +249,11 @@ onMount(() => {
                 variationId: variationId !== contentId ? variationId : undefined,
             });
         }
-        // override normal content in preview mode
-        if (isPreviewing()) {
+        /**
+         * Override normal content in preview mode.
+         * We ignore this when editing, since the edited content is already being sent from the editor via post messages.
+         */
+        if (isPreviewing() && !isEditing()) {
             if (elementRef) {
                 elementRef.dispatchEvent(new CustomEvent("initpreviewingbldr"));
             }

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.21";
+export declare const SDK_VERSION = "1.0.23";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.21";
+export const SDK_VERSION = "1.0.23";

package/lib/node/functions/evaluate/evaluate.js

@@ -27,7 +27,6 @@ class EvalCache {
 }
 export function evaluate({ code, context, localState, rootState, rootSetState, event, isExpression = true, enableCache }) {
     if (code === '') {
-        logger.warn('Skipping evaluation of empty code block.');
         return undefined;
     }
     const args = {

package/lib/node/functions/is-editing.js

@@ -2,5 +2,7 @@ import { TARGET } from '../constants/target';
 import { getSearchString } from '../helpers/search/search';
 import { isIframe } from './is-iframe';
 export function isEditing(search) {
-    return isIframe() && (TARGET === 'reactNative' || getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
+    return isIframe() && (TARGET === 'reactNative' ||
+        // accessing window.location.search is safe here because `isIframe()` is only `true` if we're in a browser.
+        getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
 }

package/lib/node/functions/is-previewing.d.ts

@@ -1,2 +1,2 @@
 import type { Search } from '../helpers/search/search';
-export declare function isPreviewing(search?: Search): boolean;
+export declare function isPreviewing(_search?: Search): boolean;

package/lib/node/functions/is-previewing.js

@@ -1,13 +1,14 @@
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-import { isEditing } from './is-editing';
-export function isPreviewing(search) {
-    if (!isBrowser()) {
-        return false;
-    }
-    const normalizedSearch = getSearchString(search || window.location.search);
-    if (isEditing(normalizedSearch)) {
+export function isPreviewing(_search) {
+    const search = _search || (isBrowser() ? window.location.search : undefined);
+    /**
+     * If this function is called on the server without an explicit `search` argument,
+     * then it can't check if the user is previewing, and will return `false`.
+     */
+    if (!search) {
         return false;
     }
+    const normalizedSearch = getSearchString(search);
     return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "type": "module",
   "files": [
     "lib",

package/src/components/block/animator.ts

@@ -52,16 +52,13 @@ function assign(target: object, ..._args: any[]) {
   }
   return to;
 }
-const camelCaseToKebabCase = (str?: string) => str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
+export 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;
@@ -140,37 +137,6 @@ export function triggerAnimation(animation: BuilderAnimation) {
     });
   });
 }
-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) {

package/src/components/block/block.svelte

@@ -131,12 +131,10 @@
     const animations = processedBlock().animations;
     if (animations && blockId) {
       bindAnimations(
-        animations
-          .filter((item) => item.trigger !== "hover")
-          .map((animation) => ({
-            ...animation,
-            elementId: blockId,
-          }))
+        animations.map((animation) => ({
+          ...animation,
+          elementId: blockId,
+        }))
       );
     }
   });

package/src/components/block/components/block-styles.svelte

@@ -17,6 +17,7 @@
   import { checkIsDefined } from "../../../helpers/nullable";
   import type { BuilderBlock } from "../../../types/builder-block";
   import InlinedStyles from "../../inlined-styles.svelte";
+  import { camelCaseToKebabCase } from "../animator";
 
   export let block: BlockStylesProps["block"];
   export let context: BlockStylesProps["context"];
@@ -86,7 +87,32 @@
           ),
         })
       : "";
-    return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    const hoverAnimation =
+      processedBlock.animations &&
+      processedBlock.animations.find((item) => item.trigger === "hover");
+    let hoverStylesClass = "";
+    if (hoverAnimation) {
+      const hoverStyles = hoverAnimation.steps?.[1]?.styles || {};
+      hoverStylesClass =
+        createCssClass({
+          className: `${className}:hover`,
+          styles: {
+            ...hoverStyles,
+            transition: `all ${hoverAnimation.duration}s ${camelCaseToKebabCase(
+              hoverAnimation.easing
+            )}`,
+            transitionDelay: hoverAnimation.delay
+              ? `${hoverAnimation.delay}s`
+              : "0s",
+          },
+        }) || "";
+    }
+    return [
+      largeStylesClass,
+      mediumStylesClass,
+      smallStylesClass,
+      hoverStylesClass,
+    ].join(" ");
   };
 </script>
 

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

@@ -306,8 +306,11 @@
         });
       }
 
-      // override normal content in preview mode
-      if (isPreviewing()) {
+      /**
+       * Override normal content in preview mode.
+       * We ignore this when editing, since the edited content is already being sent from the editor via post messages.
+       */
+      if (isPreviewing() && !isEditing()) {
         if (elementRef) {
           elementRef.dispatchEvent(new CustomEvent("initpreviewingbldr"));
         }

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.21"
+export const SDK_VERSION = "1.0.23"

package/src/functions/evaluate/evaluate.ts

@@ -40,7 +40,6 @@ export function evaluate({
   enableCache
 }: EvaluatorArgs): EvalValue {
   if (code === '') {
-    logger.warn('Skipping evaluation of empty code block.');
     return undefined;
   }
   const args: ExecutorArgs = {

package/src/functions/is-editing.ts

@@ -2,5 +2,7 @@ import { TARGET } from '../constants/target';
 import { getSearchString, type Search } from '../helpers/search/search';
 import { isIframe } from './is-iframe';
 export function isEditing(search?: Search) {
-  return isIframe() && (TARGET === 'reactNative' || getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
+  return isIframe() && (TARGET === 'reactNative' ||
+  // accessing window.location.search is safe here because `isIframe()` is only `true` if we're in a browser.
+  getSearchString(search || window.location.search).indexOf('builder.frameEditing=') !== -1);
 }

package/src/functions/is-previewing.ts

@@ -1,14 +1,16 @@
 import type { Search } from '../helpers/search/search';
 import { getSearchString } from '../helpers/search/search';
 import { isBrowser } from './is-browser';
-import { isEditing } from './is-editing';
-export function isPreviewing(search?: Search) {
-  if (!isBrowser()) {
-    return false;
-  }
-  const normalizedSearch = getSearchString(search || window.location.search);
-  if (isEditing(normalizedSearch)) {
+export function isPreviewing(_search?: Search) {
+  const search = _search || (isBrowser() ? window.location.search : undefined);
+
+  /**
+   * If this function is called on the server without an explicit `search` argument,
+   * then it can't check if the user is previewing, and will return `false`.
+   */
+  if (!search) {
     return false;
   }
+  const normalizedSearch = getSearchString(search);
   return Boolean(normalizedSearch.indexOf('builder.preview=') !== -1);
 }