@builder.io/sdk-solid 1.0.21 → 1.0.22

package/lib/node/index.js

@@ -166,7 +166,8 @@ function isIframe() {
 
 // src/functions/is-editing.ts
 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);
 }
 
 // src/functions/track/helpers.ts
@@ -679,9 +680,6 @@ function bindAnimations(animations) {
       case "pageLoad":
         triggerAnimation(animation);
         break;
-      case "hover":
-        bindHoverAnimation(animation);
-        break;
       case "scrollInView":
         bindScrollInViewAnimation(animation);
         break;
@@ -739,33 +737,6 @@ function triggerAnimation(animation) {
     });
   });
 }
-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) {
@@ -1073,7 +1044,20 @@ function BlockStyles(props) {
       styles: smallStyles,
       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(" ");
   });
   return createComponent(Show, {
     get when() {
@@ -1405,7 +1389,7 @@ function Block(props) {
     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
       })));
@@ -4325,14 +4309,12 @@ async function fetchEntries(options) {
 }
 
 // src/functions/is-previewing.ts
-function isPreviewing(search) {
-  if (!isBrowser()) {
-    return false;
-  }
-  const normalizedSearch = getSearchString(search || window.location.search);
-  if (isEditing(normalizedSearch)) {
+function isPreviewing(_search) {
+  const search = _search || (isBrowser() ? window.location.search : void 0);
+  if (!search) {
     return false;
   }
+  const normalizedSearch = getSearchString(search);
   return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
 }
 
@@ -4580,7 +4562,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.21";
+var SDK_VERSION = "1.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -4956,7 +4938,7 @@ function EnableEditor(props) {
           variationId: variationId !== contentId ? variationId : void 0
         });
       }
-      if (isPreviewing()) {
+      if (isPreviewing() && !isEditing()) {
         const searchParams = new URL(location.href).searchParams;
         const searchParamPreviewModel = searchParams.get("builder.preview");
         const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);

package/lib/node/index.jsx

@@ -152,7 +152,8 @@ function isIframe() {
 
 // src/functions/is-editing.ts
 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);
 }
 
 // src/functions/track/helpers.ts
@@ -668,9 +669,6 @@ function bindAnimations(animations) {
       case "pageLoad":
         triggerAnimation(animation);
         break;
-      case "hover":
-        bindHoverAnimation(animation);
-        break;
       case "scrollInView":
         bindScrollInViewAnimation(animation);
         break;
@@ -728,33 +726,6 @@ function triggerAnimation(animation) {
     });
   });
 }
-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) {
@@ -1062,7 +1033,27 @@ function BlockStyles(props) {
         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(" ");
   });
   return <Show2 when={TARGET !== "reactNative" && css5() && canShowBlock()}><Inlined_styles_default id="builderio-block" styles={css5()} /></Show2>;
 }
@@ -1341,7 +1332,7 @@ function Block(props) {
     const animations = processedBlock().animations;
     if (animations && blockId) {
       bindAnimations(
-        animations.filter((item) => item.trigger !== "hover").map((animation) => ({
+        animations.map((animation) => ({
           ...animation,
           elementId: blockId
         }))
@@ -3910,14 +3901,12 @@ async function fetchEntries(options) {
 }
 
 // src/functions/is-previewing.ts
-function isPreviewing(search) {
-  if (!isBrowser()) {
-    return false;
-  }
-  const normalizedSearch = getSearchString(search || window.location.search);
-  if (isEditing(normalizedSearch)) {
+function isPreviewing(_search) {
+  const search = _search || (isBrowser() ? window.location.search : void 0);
+  if (!search) {
     return false;
   }
+  const normalizedSearch = getSearchString(search);
   return Boolean(normalizedSearch.indexOf("builder.preview=") !== -1);
 }
 
@@ -4165,7 +4154,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.21";
+var SDK_VERSION = "1.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -4555,7 +4544,7 @@ function EnableEditor(props) {
           variationId: variationId !== contentId ? variationId : void 0
         });
       }
-      if (isPreviewing()) {
+      if (isPreviewing() && !isEditing()) {
         const searchParams = new URL(location.href).searchParams;
         const searchParamPreviewModel = searchParams.get("builder.preview");
         const searchParamPreviewId = searchParams.get(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "",
   "files": [
     "dist",