@builder.io/sdk-solid 1.0.20 → 1.0.22

package/lib/node/dev.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
@@ -370,8 +371,28 @@ if (typeof output === 'object' && output !== null) {
 output;
 `;
 };
+var IVM_INSTANCE = null;
+var getIvm = () => {
+  try {
+    if (IVM_INSTANCE)
+      return IVM_INSTANCE;
+    const dynRequiredIvm = safeDynamicRequire("isolated-vm");
+    if (dynRequiredIvm)
+      return dynRequiredIvm;
+  } catch (error2) {
+    logger.error("isolated-vm import error.", error2);
+  }
+  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
+    
+    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
+    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
+    a server-only execution path within your application.
+
+    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
+    `);
+};
 var getIsolateContext = () => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const isolate = new ivm.Isolate({
     memoryLimit: 128
   });
@@ -386,7 +407,7 @@ var runInNode = ({
   rootSetState,
   rootState
 }) => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const state = fastClone({
     ...rootState,
     ...localState
@@ -650,9 +671,6 @@ function bindAnimations(animations) {
       case "pageLoad":
         triggerAnimation(animation);
         break;
-      case "hover":
-        bindHoverAnimation(animation);
-        break;
       case "scrollInView":
         bindScrollInViewAnimation(animation);
         break;
@@ -711,33 +729,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) {
@@ -1048,7 +1039,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>;
 }
@@ -1327,7 +1338,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
         }))
@@ -3902,14 +3913,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);
 }
 
@@ -4160,7 +4169,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.20";
+var SDK_VERSION = "1.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -4552,7 +4561,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/lib/node/index.js

@@ -128,6 +128,7 @@ function getBlockComponentOptions(block) {
 }
 
 // src/helpers/logger.ts
+var MSG_PREFIX = "[Builder.io]: ";
 var logger = {
   log: (...message) => void 0,
   error: (...message) => void 0,
@@ -165,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
@@ -379,8 +381,28 @@ if (typeof output === 'object' && output !== null) {
 output;
 `;
 };
+var IVM_INSTANCE = null;
+var getIvm = () => {
+  try {
+    if (IVM_INSTANCE)
+      return IVM_INSTANCE;
+    const dynRequiredIvm = safeDynamicRequire("isolated-vm");
+    if (dynRequiredIvm)
+      return dynRequiredIvm;
+  } catch (error2) {
+    logger.error("isolated-vm import error.", error2);
+  }
+  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
+    
+    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
+    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
+    a server-only execution path within your application.
+
+    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
+    `);
+};
 var getIsolateContext = () => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const isolate = new ivm.Isolate({
     memoryLimit: 128
   });
@@ -395,7 +417,7 @@ var runInNode = ({
   rootSetState,
   rootState
 }) => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const state = fastClone({
     ...rootState,
     ...localState
@@ -658,9 +680,6 @@ function bindAnimations(animations) {
       case "pageLoad":
         triggerAnimation(animation);
         break;
-      case "hover":
-        bindHoverAnimation(animation);
-        break;
       case "scrollInView":
         bindScrollInViewAnimation(animation);
         break;
@@ -718,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) {
@@ -1052,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() {
@@ -1384,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
       })));
@@ -4304,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);
 }
 
@@ -4559,7 +4562,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.20";
+var SDK_VERSION = "1.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -4935,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

@@ -114,6 +114,7 @@ function getBlockComponentOptions(block) {
 }
 
 // src/helpers/logger.ts
+var MSG_PREFIX = "[Builder.io]: ";
 var logger = {
   log: (...message) => void 0,
   error: (...message) => void 0,
@@ -151,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
@@ -368,8 +370,28 @@ if (typeof output === 'object' && output !== null) {
 output;
 `;
 };
+var IVM_INSTANCE = null;
+var getIvm = () => {
+  try {
+    if (IVM_INSTANCE)
+      return IVM_INSTANCE;
+    const dynRequiredIvm = safeDynamicRequire("isolated-vm");
+    if (dynRequiredIvm)
+      return dynRequiredIvm;
+  } catch (error2) {
+    logger.error("isolated-vm import error.", error2);
+  }
+  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
+    
+    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
+    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
+    a server-only execution path within your application.
+
+    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
+    `);
+};
 var getIsolateContext = () => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const isolate = new ivm.Isolate({
     memoryLimit: 128
   });
@@ -384,7 +406,7 @@ var runInNode = ({
   rootSetState,
   rootState
 }) => {
-  const ivm = safeDynamicRequire("isolated-vm");
+  const ivm = getIvm();
   const state = fastClone({
     ...rootState,
     ...localState
@@ -647,9 +669,6 @@ function bindAnimations(animations) {
       case "pageLoad":
         triggerAnimation(animation);
         break;
-      case "hover":
-        bindHoverAnimation(animation);
-        break;
       case "scrollInView":
         bindScrollInViewAnimation(animation);
         break;
@@ -707,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) {
@@ -1041,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>;
 }
@@ -1320,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
         }))
@@ -3889,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);
 }
 
@@ -4144,7 +4154,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "1.0.20";
+var SDK_VERSION = "1.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -4534,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.20",
+  "version": "1.0.22",
   "description": "",
   "files": [
     "dist",