npm - @builder.io/sdk-svelte - Versions diffs - 4.0.2 → 4.0.4 - Mend

@builder.io/sdk-svelte 4.0.2 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/lib/browser/blocks/custom-code/custom-code.svelte CHANGED Viewed

@@ -1,14 +1,14 @@
 <script context="module"></script>
 <script>import { onMount } from "svelte";
-export let replaceNodes = undefined;
+import { isEditing } from "../../functions/is-editing";
+import { logger } from "../../helpers/logger";
 export let code;
-let elementRef;
-let scriptsInserted = [];
-let scriptsRun = [];
-onMount(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+export let replaceNodes = undefined;
+function runScripts() {
+    if (!elementRef ||
+        !elementRef?.getElementsByTagName ||
+        typeof window === "undefined") {
         return;
     }
     const scripts = elementRef.getElementsByTagName("script");
@@ -38,11 +38,25 @@ onMount(() => {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`CustomCode`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `CustomCode`: Error running script:", error);
             }
         }
     }
+}
+let elementRef;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
+    runScripts();
 });
+function onUpdateFn_0(..._args) {
+    if (isEditing()) {
+        setTimeout(() => {
+            runScripts();
+        }, 0);
+    }
+}
+$: onUpdateFn_0(...[code]);
 </script>
 <div

package/lib/browser/blocks/embed/embed.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script context="module"></script>
-<script>import { isJsScript } from "./helpers";
+<script>import { logger } from "../../helpers/logger";
+import { isJsScript } from "./helpers";
 export let content;
 function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
@@ -21,7 +22,7 @@ function findAndRunScripts() {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`Embed`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `Embed`: Error running script:", error);
             }
         }
     }

package/lib/browser/blocks/image/component-info.js CHANGED Viewed

@@ -87,6 +87,10 @@ export const componentInfo = {
             name: 'altText',
             type: 'string',
             helperText: 'Text to display when the user has images off'
+        }, {
+            name: 'title',
+            type: 'string',
+            helperText: 'Text to display when hovering over the asset'
         }, {
             name: 'height',
             type: 'number',

package/lib/browser/blocks/image/image.svelte CHANGED Viewed

@@ -6,6 +6,7 @@ export let noWebp = undefined;
 export let aspectRatio = undefined;
 export let highPriority = undefined;
 export let altText = undefined;
+export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
@@ -79,6 +80,7 @@ $: aspectRatioCss = () => {
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
+    {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}

package/lib/browser/blocks/image/image.svelte.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ declare const __propDef: {
         aspectRatio?: ImageProps["aspectRatio"];
         highPriority?: ImageProps["highPriority"];
         altText?: ImageProps["altText"];
+        title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];

package/lib/browser/blocks/image/image.types.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
+    title?: string;
     backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: string;
     srcset?: string;

package/lib/browser/components/blocks/blocks-wrapper.svelte CHANGED Viewed

@@ -59,7 +59,10 @@ $: dataPath = () => {
             : `${pathPrefix}${path || ""}`;
 };
 let blocksWrapperRef;
+let shouldUpdate = false;
 onMount(() => { });
+function onUpdateFn_0(..._args) { }
+$: onUpdateFn_0(...[blocks]);
 </script>
 <svelte:element

package/lib/browser/components/content-variants/helpers.js CHANGED Viewed

@@ -41,6 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
     return true;
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
+const isAngularSDK = TARGET === 'angular';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
@@ -48,7 +49,7 @@ export const getInitVariantsFnsScriptString = () => `
   `;
 export const getUpdateCookieAndStylesScript = (variants, contentId) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
   )`;
 export const getUpdateVariantVisibilityScript = ({ contentId, variationId }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}

package/lib/browser/components/content-variants/inlined-fns.d.ts CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export declare const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/lib/browser/components/content-variants/inlined-fns.js CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

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

	@@ -1 +1 @@
1	- export declare const SDK_VERSION = "4.0.2";
1	+ export declare const SDK_VERSION = "4.0.4";

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

	@@ -1 +1 @@
1	- export const SDK_VERSION = "4.0.2";
1	+ export const SDK_VERSION = "4.0.4";

package/lib/edge/blocks/custom-code/custom-code.svelte CHANGED Viewed

@@ -1,14 +1,14 @@
 <script context="module"></script>
 <script>import { onMount } from "svelte";
-export let replaceNodes = undefined;
+import { isEditing } from "../../functions/is-editing";
+import { logger } from "../../helpers/logger";
 export let code;
-let elementRef;
-let scriptsInserted = [];
-let scriptsRun = [];
-onMount(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+export let replaceNodes = undefined;
+function runScripts() {
+    if (!elementRef ||
+        !elementRef?.getElementsByTagName ||
+        typeof window === "undefined") {
         return;
     }
     const scripts = elementRef.getElementsByTagName("script");
@@ -38,11 +38,25 @@ onMount(() => {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`CustomCode`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `CustomCode`: Error running script:", error);
             }
         }
     }
+}
+let elementRef;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
+    runScripts();
 });
+function onUpdateFn_0(..._args) {
+    if (isEditing()) {
+        setTimeout(() => {
+            runScripts();
+        }, 0);
+    }
+}
+$: onUpdateFn_0(...[code]);
 </script>
 <div

package/lib/edge/blocks/embed/embed.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script context="module"></script>
-<script>import { isJsScript } from "./helpers";
+<script>import { logger } from "../../helpers/logger";
+import { isJsScript } from "./helpers";
 export let content;
 function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
@@ -21,7 +22,7 @@ function findAndRunScripts() {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`Embed`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `Embed`: Error running script:", error);
             }
         }
     }

package/lib/edge/blocks/image/component-info.js CHANGED Viewed

@@ -87,6 +87,10 @@ export const componentInfo = {
             name: 'altText',
             type: 'string',
             helperText: 'Text to display when the user has images off'
+        }, {
+            name: 'title',
+            type: 'string',
+            helperText: 'Text to display when hovering over the asset'
         }, {
             name: 'height',
             type: 'number',

package/lib/edge/blocks/image/image.svelte CHANGED Viewed

@@ -6,6 +6,7 @@ export let noWebp = undefined;
 export let aspectRatio = undefined;
 export let highPriority = undefined;
 export let altText = undefined;
+export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
@@ -79,6 +80,7 @@ $: aspectRatioCss = () => {
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
+    {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}

package/lib/edge/blocks/image/image.svelte.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ declare const __propDef: {
         aspectRatio?: ImageProps["aspectRatio"];
         highPriority?: ImageProps["highPriority"];
         altText?: ImageProps["altText"];
+        title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];

package/lib/edge/blocks/image/image.types.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
+    title?: string;
     backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: string;
     srcset?: string;

package/lib/edge/components/blocks/blocks-wrapper.svelte CHANGED Viewed

@@ -59,7 +59,10 @@ $: dataPath = () => {
             : `${pathPrefix}${path || ""}`;
 };
 let blocksWrapperRef;
+let shouldUpdate = false;
 onMount(() => { });
+function onUpdateFn_0(..._args) { }
+$: onUpdateFn_0(...[blocks]);
 </script>
 <svelte:element

package/lib/edge/components/content-variants/helpers.js CHANGED Viewed

@@ -41,6 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
     return true;
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
+const isAngularSDK = TARGET === 'angular';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
@@ -48,7 +49,7 @@ export const getInitVariantsFnsScriptString = () => `
   `;
 export const getUpdateCookieAndStylesScript = (variants, contentId) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
   )`;
 export const getUpdateVariantVisibilityScript = ({ contentId, variationId }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}

package/lib/edge/components/content-variants/inlined-fns.d.ts CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export declare const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/lib/edge/components/content-variants/inlined-fns.js CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

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

	@@ -1 +1 @@
1	- export declare const SDK_VERSION = "4.0.2";
1	+ export declare const SDK_VERSION = "4.0.4";

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

	@@ -1 +1 @@
1	- export const SDK_VERSION = "4.0.2";
1	+ export const SDK_VERSION = "4.0.4";

package/lib/node/blocks/custom-code/custom-code.svelte CHANGED Viewed

@@ -1,14 +1,14 @@
 <script context="module"></script>
 <script>import { onMount } from "svelte";
-export let replaceNodes = undefined;
+import { isEditing } from "../../functions/is-editing";
+import { logger } from "../../helpers/logger";
 export let code;
-let elementRef;
-let scriptsInserted = [];
-let scriptsRun = [];
-onMount(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+export let replaceNodes = undefined;
+function runScripts() {
+    if (!elementRef ||
+        !elementRef?.getElementsByTagName ||
+        typeof window === "undefined") {
         return;
     }
     const scripts = elementRef.getElementsByTagName("script");
@@ -38,11 +38,25 @@ onMount(() => {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`CustomCode`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `CustomCode`: Error running script:", error);
             }
         }
     }
+}
+let elementRef;
+let scriptsInserted = [];
+let scriptsRun = [];
+onMount(() => {
+    runScripts();
 });
+function onUpdateFn_0(..._args) {
+    if (isEditing()) {
+        setTimeout(() => {
+            runScripts();
+        }, 0);
+    }
+}
+$: onUpdateFn_0(...[code]);
 </script>
 <div

package/lib/node/blocks/embed/embed.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script context="module"></script>
-<script>import { isJsScript } from "./helpers";
+<script>import { logger } from "../../helpers/logger";
+import { isJsScript } from "./helpers";
 export let content;
 function findAndRunScripts() {
     if (!elem || !elem.getElementsByTagName)
@@ -21,7 +22,7 @@ function findAndRunScripts() {
                 new Function(script.innerText)();
             }
             catch (error) {
-                console.warn("`Embed`: Error running script:", error);
+                logger.warn("[BUILDER.IO] `Embed`: Error running script:", error);
             }
         }
     }

package/lib/node/blocks/image/component-info.js CHANGED Viewed

@@ -87,6 +87,10 @@ export const componentInfo = {
             name: 'altText',
             type: 'string',
             helperText: 'Text to display when the user has images off'
+        }, {
+            name: 'title',
+            type: 'string',
+            helperText: 'Text to display when hovering over the asset'
         }, {
             name: 'height',
             type: 'number',

package/lib/node/blocks/image/image.svelte CHANGED Viewed

@@ -6,6 +6,7 @@ export let noWebp = undefined;
 export let aspectRatio = undefined;
 export let highPriority = undefined;
 export let altText = undefined;
+export let title = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
 export let className = undefined;
@@ -79,6 +80,7 @@ $: aspectRatioCss = () => {
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
+    {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}

package/lib/node/blocks/image/image.svelte.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ declare const __propDef: {
         aspectRatio?: ImageProps["aspectRatio"];
         highPriority?: ImageProps["highPriority"];
         altText?: ImageProps["altText"];
+        title?: ImageProps["title"];
         backgroundPosition?: ImageProps["backgroundPosition"];
         backgroundSize?: ImageProps["backgroundSize"];
         className?: ImageProps["className"];

package/lib/node/blocks/image/image.types.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
+    title?: string;
     backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: string;
     srcset?: string;

package/lib/node/components/blocks/blocks-wrapper.svelte CHANGED Viewed

@@ -59,7 +59,10 @@ $: dataPath = () => {
             : `${pathPrefix}${path || ""}`;
 };
 let blocksWrapperRef;
+let shouldUpdate = false;
 onMount(() => { });
+function onUpdateFn_0(..._args) { }
+$: onUpdateFn_0(...[blocks]);
 </script>
 <svelte:element

package/lib/node/components/content-variants/helpers.js CHANGED Viewed

@@ -41,6 +41,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
     return true;
 };
 const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
+const isAngularSDK = TARGET === 'angular';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
@@ -48,7 +49,7 @@ export const getInitVariantsFnsScriptString = () => `
   `;
 export const getUpdateCookieAndStylesScript = (variants, contentId) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
   )`;
 export const getUpdateVariantVisibilityScript = ({ contentId, variationId }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}

package/lib/node/components/content-variants/inlined-fns.d.ts CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export declare const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export declare const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/lib/node/components/content-variants/inlined-fns.js CHANGED Viewed

@@ -10,5 +10,5 @@
  * For more information on how this works,
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

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

	@@ -1 +1 @@
1	- export declare const SDK_VERSION = "4.0.2";
1	+ export declare const SDK_VERSION = "4.0.4";

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

	@@ -1 +1 @@
1	- export const SDK_VERSION = "4.0.2";
1	+ export const SDK_VERSION = "4.0.4";

package/package.json CHANGED Viewed

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

package/src/blocks/custom-code/custom-code.svelte CHANGED Viewed

@@ -8,17 +8,18 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  export let replaceNodes: CustomCodeProps["replaceNodes"] = undefined;
-  export let code: CustomCodeProps["code"];
-  let elementRef;
+  import { isEditing } from "../../functions/is-editing";
+  import { logger } from "../../helpers/logger";
-  let scriptsInserted = [];
-  let scriptsRun = [];
+  export let code: CustomCodeProps["code"];
+  export let replaceNodes: CustomCodeProps["replaceNodes"] = undefined;
-  onMount(() => {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (!elementRef?.getElementsByTagName || typeof window === "undefined") {
+  function runScripts() {
+    if (
+      !elementRef ||
+      !elementRef?.getElementsByTagName ||
+      typeof window === "undefined"
+    ) {
       return;
     }
     const scripts = elementRef.getElementsByTagName("script");
@@ -48,11 +49,33 @@
           scriptsRun.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
-          console.warn("`CustomCode`: Error running script:", error);
+          logger.warn(
+            "[BUILDER.IO] `CustomCode`: Error running script:",
+            error
+          );
         }
       }
     }
+  }
+  let elementRef;
+  let scriptsInserted = [];
+  let scriptsRun = [];
+  onMount(() => {
+    runScripts();
   });
+  function onUpdateFn_0(..._args: any[]) {
+    if (isEditing()) {
+      setTimeout(() => {
+        runScripts();
+      }, 0);
+    }
+  }
+  $: onUpdateFn_0(...[code]);
 </script>
 <div

package/src/blocks/embed/embed.svelte CHANGED Viewed

@@ -5,6 +5,7 @@
 </script>
 <script lang="ts">
+  import { logger } from "../../helpers/logger";
   import { isJsScript } from "./helpers";
   export let content: EmbedProps["content"];
@@ -25,7 +26,7 @@
           scriptsRun.push(script.innerText);
           new Function(script.innerText)();
         } catch (error) {
-          console.warn("`Embed`: Error running script:", error);
+          logger.warn("[BUILDER.IO] `Embed`: Error running script:", error);
         }
       }
     }

package/src/blocks/image/component-info.ts CHANGED Viewed

@@ -89,6 +89,10 @@ export const componentInfo: ComponentInfo = {
     name: 'altText',
     type: 'string',
     helperText: 'Text to display when the user has images off'
+  }, {
+    name: 'title',
+    type: 'string',
+    helperText: 'Text to display when hovering over the asset'
   }, {
     name: 'height',
     type: 'number',

package/src/blocks/image/image.svelte CHANGED Viewed

@@ -9,6 +9,7 @@
   export let aspectRatio: ImageProps["aspectRatio"] = undefined;
   export let highPriority: ImageProps["highPriority"] = undefined;
   export let altText: ImageProps["altText"] = undefined;
+  export let title: ImageProps["title"] = undefined;
   export let backgroundPosition: ImageProps["backgroundPosition"] = undefined;
   export let backgroundSize: ImageProps["backgroundSize"] = undefined;
   export let className: ImageProps["className"] = undefined;
@@ -86,6 +87,7 @@
     loading={highPriority ? "eager" : "lazy"}
     fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
+    {title}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}
     src={image}

package/src/blocks/image/image.types.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface ImageProps {
   height?: number;
   width?: number;
   altText?: string;
+  title?: string;
   backgroundSize?: 'cover' | 'contain';
   backgroundPosition?: string;
   srcset?: string;

package/src/components/blocks/blocks-wrapper.svelte CHANGED Viewed

@@ -90,7 +90,13 @@
   let blocksWrapperRef;
+  let shouldUpdate = false;
   onMount(() => {});
+  function onUpdateFn_0(..._args: any[]) {}
+  $: onUpdateFn_0(...[blocks]);
 </script>
 <svelte:element

package/src/components/content-variants/helpers.ts CHANGED Viewed

@@ -52,6 +52,7 @@ type VariantData = {
   testRatio?: number;
 };
 const getIsHydrationTarget = (target: Target) => target === 'react' || target === 'reactNative';
+const isAngularSDK = TARGET === 'angular';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 export const getInitVariantsFnsScriptString = () => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME} = ${UPDATE_COOKIES_AND_STYLES_SCRIPT}
@@ -59,7 +60,7 @@ export const getInitVariantsFnsScriptString = () => `
   `;
 export const getUpdateCookieAndStylesScript = (variants: VariantData[], contentId: string) => `
   window.${UPDATE_COOKIES_AND_STYLES_SCRIPT_NAME}(
-    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}
+    "${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget}, ${isAngularSDK}
   )`;
 export const getUpdateVariantVisibilityScript = ({
   contentId,

package/src/components/content-variants/inlined-fns.ts CHANGED Viewed

@@ -18,5 +18,5 @@ type VariantData = {
  * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
-export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
+export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget, isAngularSDK) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  let styleEl = document.currentScript?.previousElementSibling;\n  if (isAngularSDK) {\n    styleEl = document.currentScript?.parentElement?.previousElementSibling?.querySelector('style');\n  }\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";
 export const UPDATE_VARIANT_VISIBILITY_SCRIPT = "function updateVariantVisibility(variantContentId, defaultContentId, isHydrationTarget) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const cookieName = `builder.tests.${defaultContentId}`;\n  const winningVariant = getCookie(cookieName);\n  const parentDiv = document.currentScript?.parentElement;\n  const isDefaultContent = variantContentId === defaultContentId;\n  const isWinningVariant = winningVariant === variantContentId;\n  if (isWinningVariant && !isDefaultContent) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultContent) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      parentDiv?.remove();\n    }\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  }\n  return;\n}";

package/src/constants/sdk-version.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export const SDK_VERSION = "4.0.2"
1	+ export const SDK_VERSION = "4.0.4"