@builder.io/sdk-svelte 1.0.20 → 1.0.22

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.20";
+export declare const SDK_VERSION = "1.0.22";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.20";
+export const SDK_VERSION = "1.0.22";

package/lib/node/functions/evaluate/node-runtime/init.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This function initializes the SDK on a Node server. It handles importing the
+ * `isolated-vm` package which is needed for dynamic bindings.
+ *
+ * NOTE: this function cannot be called on the client. You must call this function
+ * from a server-only location, such as:
+ * - The NextJS Pages router's `_document.tsx`
+ * - Your Remix route's `loader`
+ */
+export declare const initializeNodeRuntime: () => void;

package/lib/node/functions/evaluate/node-runtime/init.js

@@ -0,0 +1,26 @@
+/**
+ * This file:
+ * - imports `isolated-vm`, which can only be made from a file that never runs
+ * on the client (e.g. Next's `_document.tsx`)
+ * - stores the ivm instance in a global variable using `setIvm`
+ *
+ * This is needed for when bundlers/meta-frameworks are not able to reliably
+ * import the `isolated-vm` package using our `safeDynamicRequire` trick.
+ *
+ * The `isolated-vm` import must exist in this separate file, or it will end up
+ * in the SDK's main entry point, causing errors for users.
+ */
+import ivm from 'isolated-vm';
+import { setIvm } from './node-runtime';
+/**
+ * This function initializes the SDK on a Node server. It handles importing the
+ * `isolated-vm` package which is needed for dynamic bindings.
+ *
+ * NOTE: this function cannot be called on the client. You must call this function
+ * from a server-only location, such as:
+ * - The NextJS Pages router's `_document.tsx`
+ * - Your Remix route's `loader`
+ */
+export const initializeNodeRuntime = () => {
+    setIvm(ivm);
+};

package/lib/node/functions/evaluate/node-runtime/node-runtime.d.ts

@@ -1,2 +1,8 @@
 import type { ExecutorArgs } from '../helpers';
+/**
+ * Set the `isolated-vm` instance to be used by the node runtime.
+ * This is useful for environments that are not able to rely on our
+ * `safeDynamicRequire` trick to import the `isolated-vm` package.
+ */
+export declare const setIvm: (ivm: typeof import('isolated-vm')) => void;
 export declare const runInNode: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;

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

@@ -1,3 +1,4 @@
+import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
 import { getFunctionArguments } from '../helpers';
@@ -53,19 +54,44 @@ if (typeof output === 'object' && output !== null) {
 output;
 `;
 };
+let IVM_INSTANCE = null;
+/**
+ * Set the `isolated-vm` instance to be used by the node runtime.
+ * This is useful for environments that are not able to rely on our
+ * `safeDynamicRequire` trick to import the `isolated-vm` package.
+ */
+export const setIvm = (ivm) => {
+    IVM_INSTANCE = ivm;
+};
+const getIvm = () => {
+    try {
+        if (IVM_INSTANCE)
+            return IVM_INSTANCE;
+        const dynRequiredIvm = safeDynamicRequire('isolated-vm');
+        if (dynRequiredIvm)
+            return dynRequiredIvm;
+    }
+    catch (error) {
+        logger.error('isolated-vm import error.', error);
+    }
+    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
+    `);
+};
 const getIsolateContext = () => {
-    // if (Builder.serverContext) {
-    //   return Builder.serverContext;
-    // }
-    // Builder.setServerContext(isolate.createContextSync());
-    const ivm = safeDynamicRequire('isolated-vm');
+    const ivm = getIvm();
     const isolate = new ivm.Isolate({
         memoryLimit: 128
     });
     return isolate.createContextSync();
 };
 export const runInNode = ({ code, builder, context, event, localState, rootSetState, rootState }) => {
-    const ivm = safeDynamicRequire('isolated-vm');
+    const ivm = getIvm();
     const state = fastClone({
         ...rootState,
         ...localState

package/lib/node/functions/get-content/types.d.ts

@@ -131,9 +131,9 @@ export interface GetContentOptions {
     /**
      * Optional override of the `fetch` function. (Defaults to global `fetch`)
      */
-    fetch?: typeof global.fetch;
+    fetch?: (input: string, init?: object) => Promise<any>;
     /**
-     * Optional fetch options to be passed to the `fetch` function.
+     * Optional fetch options to be passed as the second argument to the `fetch` function.
      */
-    fetchOptions?: RequestInit;
+    fetchOptions?: object;
 }

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/lib/node/helpers/logger.d.ts

@@ -1,3 +1,4 @@
+export declare const MSG_PREFIX = "[Builder.io]: ";
 export declare const logger: {
     log: (...message: any[]) => void;
     error: (...message: any[]) => void;

package/lib/node/helpers/logger.js

@@ -1,4 +1,4 @@
-const MSG_PREFIX = '[Builder.io]: ';
+export const MSG_PREFIX = '[Builder.io]: ';
 export const logger = {
     log: (...message) => console.log(MSG_PREFIX, ...message),
     error: (...message) => console.error(MSG_PREFIX, ...message),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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.20"
+export const SDK_VERSION = "1.0.22"

package/src/functions/evaluate/node-runtime/init.ts

@@ -0,0 +1,27 @@
+/**
+ * This file:
+ * - imports `isolated-vm`, which can only be made from a file that never runs
+ * on the client (e.g. Next's `_document.tsx`)
+ * - stores the ivm instance in a global variable using `setIvm`
+ *
+ * This is needed for when bundlers/meta-frameworks are not able to reliably
+ * import the `isolated-vm` package using our `safeDynamicRequire` trick.
+ *
+ * The `isolated-vm` import must exist in this separate file, or it will end up
+ * in the SDK's main entry point, causing errors for users.
+ */
+import ivm from 'isolated-vm';
+import { setIvm } from './node-runtime';
+
+/**
+ * This function initializes the SDK on a Node server. It handles importing the
+ * `isolated-vm` package which is needed for dynamic bindings.
+ *
+ * NOTE: this function cannot be called on the client. You must call this function
+ * from a server-only location, such as:
+ * - The NextJS Pages router's `_document.tsx`
+ * - Your Remix route's `loader`
+ */
+export const initializeNodeRuntime = () => {
+  setIvm(ivm);
+}

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

@@ -1,3 +1,4 @@
+import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
 import type { BuilderGlobals, ExecutorArgs, FunctionArguments } from '../helpers';
@@ -62,12 +63,35 @@ if (typeof output === 'object' && output !== null) {
 output;
 `;
 };
+let IVM_INSTANCE: typeof import('isolated-vm') | null = null;
+
+/**
+ * Set the `isolated-vm` instance to be used by the node runtime.
+ * This is useful for environments that are not able to rely on our
+ * `safeDynamicRequire` trick to import the `isolated-vm` package.
+ */
+export const setIvm = (ivm: typeof import('isolated-vm')) => {
+  IVM_INSTANCE = ivm;
+};
+const getIvm = (): typeof import('isolated-vm') => {
+  try {
+    if (IVM_INSTANCE) return IVM_INSTANCE;
+    const dynRequiredIvm = safeDynamicRequire('isolated-vm');
+    if (dynRequiredIvm) return dynRequiredIvm;
+  } catch (error) {
+    logger.error('isolated-vm import error.', error);
+  }
+  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
+    `);
+};
 const getIsolateContext = () => {
-  // if (Builder.serverContext) {
-  //   return Builder.serverContext;
-  // }
-  // Builder.setServerContext(isolate.createContextSync());
-  const ivm: typeof import('isolated-vm') = safeDynamicRequire('isolated-vm');
+  const ivm = getIvm();
   const isolate = new ivm.Isolate({
     memoryLimit: 128
   });
@@ -82,7 +106,7 @@ export const runInNode = ({
   rootSetState,
   rootState
 }: ExecutorArgs) => {
-  const ivm: typeof import('isolated-vm') = safeDynamicRequire('isolated-vm');
+  const ivm = getIvm();
   const state = fastClone({
     ...rootState,
     ...localState

package/src/functions/get-content/types.ts

@@ -148,10 +148,10 @@ export interface GetContentOptions {
   /**
    * Optional override of the `fetch` function. (Defaults to global `fetch`)
    */
-  fetch?: typeof global.fetch;
+  fetch?: (input: string, init?: object) => Promise<any>;
 
   /**
-   * Optional fetch options to be passed to the `fetch` function.
+   * Optional fetch options to be passed as the second argument to the `fetch` function.
    */
-  fetchOptions?: RequestInit;
+  fetchOptions?: object;
 }

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);
 }

package/src/helpers/logger.ts

@@ -1,4 +1,4 @@
-const MSG_PREFIX = '[Builder.io]: ';
+export const MSG_PREFIX = '[Builder.io]: ';
 export const logger = {
   log: (...message: any[]) => console.log(MSG_PREFIX, ...message),
   error: (...message: any[]) => console.error(MSG_PREFIX, ...message),