@builder.io/sdk-svelte 2.0.1 → 2.0.3

package/lib/browser/blocks/columns/columns.svelte

@@ -93,6 +93,7 @@ function getWidthForBreakpointSize(size) {
     return breakpointSizes[size].max;
 }
 function columnsStyles() {
+    const childColumnDiv = `.${builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -100,7 +101,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -112,7 +113,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }

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

@@ -31,6 +31,9 @@ $: srcSetToUse = () => {
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
     }
+    if (noWebp) {
+        return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
         if (!srcset.includes(image.split("?")[0])) {
             console.debug("Removed given srcset");

package/lib/browser/components/content/content.svelte

@@ -14,6 +14,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let content = undefined;
 export let customComponents = undefined;
+export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let context = undefined;
@@ -23,7 +24,6 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
-export let model = undefined;
 export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
@@ -43,7 +43,13 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+        if (!models?.length)
+            return true;
+        if (!model)
+            return true;
+        return models.includes(model);
+    }) || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -69,7 +75,13 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents || []),
+        ...(customComponents?.filter(({ models }) => {
+            if (!models?.length)
+                return true;
+            if (!model)
+                return true;
+            return models.includes(model);
+        }) || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeComponentInfo(info),

package/lib/browser/components/content/content.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
+        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         context?: ContentProps["context"];
@@ -13,7 +14,6 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
-        model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];

package/lib/browser/components/content-variants/content-variants.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -58,7 +58,6 @@ onMount(() => {
      */
     shouldRenderVariants = false;
 });
-afterUpdate(() => { });
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.1";
+export declare const SDK_VERSION = "2.0.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.1";
+export const SDK_VERSION = "2.0.3";

package/lib/browser/functions/register-component.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInfo } from '../types/components';
 export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
-    data: ComponentInfo;
+    data: any;
 };
-export declare const serializeComponentInfo: ({ inputs, ...info }: ComponentInfo) => ComponentInfo;
+export declare function serializeComponentInfo(info: ComponentInfo): any;

package/lib/browser/functions/register-component.js

@@ -1,4 +1,3 @@
-import { fastClone } from './fast-clone';
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
     data: serializeComponentInfo(info)
@@ -13,11 +12,11 @@ const serializeFn = (fnValue) => {
     const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
     return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({ inputs, ...info }) => ({
-    ...fastClone(info),
-    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value)
-    }), {}))
-});
+export function serializeComponentInfo(info) {
+    return JSON.parse(JSON.stringify(info, (key, value) => {
+        if (typeof value === 'function') {
+            return serializeFn(value);
+        }
+        return value;
+    }));
+}

package/lib/edge/blocks/columns/columns.svelte

@@ -93,6 +93,7 @@ function getWidthForBreakpointSize(size) {
     return breakpointSizes[size].max;
 }
 function columnsStyles() {
+    const childColumnDiv = `.${builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -100,7 +101,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -112,7 +113,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }

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

@@ -31,6 +31,9 @@ $: srcSetToUse = () => {
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
     }
+    if (noWebp) {
+        return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
         if (!srcset.includes(image.split("?")[0])) {
             console.debug("Removed given srcset");

package/lib/edge/components/content/content.svelte

@@ -14,6 +14,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let content = undefined;
 export let customComponents = undefined;
+export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let context = undefined;
@@ -23,7 +24,6 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
-export let model = undefined;
 export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
@@ -43,7 +43,13 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+        if (!models?.length)
+            return true;
+        if (!model)
+            return true;
+        return models.includes(model);
+    }) || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -69,7 +75,13 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents || []),
+        ...(customComponents?.filter(({ models }) => {
+            if (!models?.length)
+                return true;
+            if (!model)
+                return true;
+            return models.includes(model);
+        }) || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeComponentInfo(info),

package/lib/edge/components/content/content.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
+        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         context?: ContentProps["context"];
@@ -13,7 +14,6 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
-        model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];

package/lib/edge/components/content-variants/content-variants.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -58,7 +58,6 @@ onMount(() => {
      */
     shouldRenderVariants = false;
 });
-afterUpdate(() => { });
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.1";
+export declare const SDK_VERSION = "2.0.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.1";
+export const SDK_VERSION = "2.0.3";

package/lib/edge/functions/register-component.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInfo } from '../types/components';
 export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
-    data: ComponentInfo;
+    data: any;
 };
-export declare const serializeComponentInfo: ({ inputs, ...info }: ComponentInfo) => ComponentInfo;
+export declare function serializeComponentInfo(info: ComponentInfo): any;

package/lib/edge/functions/register-component.js

@@ -1,4 +1,3 @@
-import { fastClone } from './fast-clone';
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
     data: serializeComponentInfo(info)
@@ -13,11 +12,11 @@ const serializeFn = (fnValue) => {
     const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
     return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({ inputs, ...info }) => ({
-    ...fastClone(info),
-    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value)
-    }), {}))
-});
+export function serializeComponentInfo(info) {
+    return JSON.parse(JSON.stringify(info, (key, value) => {
+        if (typeof value === 'function') {
+            return serializeFn(value);
+        }
+        return value;
+    }));
+}

package/lib/node/blocks/columns/columns.svelte

@@ -93,6 +93,7 @@ function getWidthForBreakpointSize(size) {
     return breakpointSizes[size].max;
 }
 function columnsStyles() {
+    const childColumnDiv = `.${builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -100,7 +101,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -112,7 +113,7 @@ function columnsStyles() {
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }

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

@@ -31,6 +31,9 @@ $: srcSetToUse = () => {
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
     }
+    if (noWebp) {
+        return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
         if (!srcset.includes(image.split("?")[0])) {
             console.debug("Removed given srcset");

package/lib/node/components/content/content.svelte

@@ -14,6 +14,7 @@ import { getContentInitialValue, getRootStateInitialValue, } from "./content.hel
 import "./wrap-component-ref";
 export let content = undefined;
 export let customComponents = undefined;
+export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let context = undefined;
@@ -23,7 +24,6 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
-export let model = undefined;
 export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
@@ -43,7 +43,13 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+        if (!models?.length)
+            return true;
+        if (!model)
+            return true;
+        return models.includes(model);
+    }) || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -69,7 +75,13 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents || []),
+        ...(customComponents?.filter(({ models }) => {
+            if (!models?.length)
+                return true;
+            if (!model)
+                return true;
+            return models.includes(model);
+        }) || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeComponentInfo(info),

package/lib/node/components/content/content.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
+        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         context?: ContentProps["context"];
@@ -13,7 +14,6 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
-        model?: ContentProps["model"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];

package/lib/node/components/content-variants/content-variants.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import { afterUpdate, onMount } from "svelte";
+<script>import { onMount } from "svelte";
 import { TARGET } from "../../constants/target";
 import { handleABTestingSync } from "../../helpers/ab-tests";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
@@ -58,7 +58,6 @@ onMount(() => {
      */
     shouldRenderVariants = false;
 });
-afterUpdate(() => { });
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.1";
+export declare const SDK_VERSION = "2.0.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.1";
+export const SDK_VERSION = "2.0.3";

package/lib/node/functions/register-component.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentInfo } from '../types/components';
 export declare const createRegisterComponentMessage: (info: ComponentInfo) => {
     type: string;
-    data: ComponentInfo;
+    data: any;
 };
-export declare const serializeComponentInfo: ({ inputs, ...info }: ComponentInfo) => ComponentInfo;
+export declare function serializeComponentInfo(info: ComponentInfo): any;

package/lib/node/functions/register-component.js

@@ -1,4 +1,3 @@
-import { fastClone } from './fast-clone';
 export const createRegisterComponentMessage = (info) => ({
     type: 'builder.registerComponent',
     data: serializeComponentInfo(info)
@@ -13,11 +12,11 @@ const serializeFn = (fnValue) => {
     const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
     return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-const serializeValue = (value) => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({ inputs, ...info }) => ({
-    ...fastClone(info),
-    inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-        ...acc,
-        [key]: serializeValue(value)
-    }), {}))
-});
+export function serializeComponentInfo(info) {
+    return JSON.parse(JSON.stringify(info, (key, value) => {
+        if (typeof value === 'function') {
+            return serializeFn(value);
+        }
+        return value;
+    }));
+}

package/package.json

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

package/src/blocks/columns/columns.svelte

@@ -117,6 +117,7 @@
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -124,7 +125,7 @@
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -136,7 +137,7 @@
             align-items: stretch;
           }
 
-          .${builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }

package/src/blocks/image/image.svelte

@@ -38,6 +38,9 @@
     ) {
       return srcset;
     }
+    if (noWebp) {
+      return undefined; // no need to add srcset to svg images
+    }
     if (srcset && image?.includes("builder.io/api/v1/image")) {
       if (!srcset.includes(image.split("?")[0])) {
         console.debug("Removed given srcset");

package/src/components/content/content.svelte

@@ -28,6 +28,7 @@
 
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;
+  export let model: ContentProps["model"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
   export let context: ContentProps["context"] = undefined;
@@ -37,7 +38,6 @@
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let nonce: ContentProps["nonce"] = undefined;
-  export let model: ContentProps["model"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
   export let contentWrapper: ContentProps["contentWrapper"] = undefined;
@@ -60,7 +60,11 @@
   });
   let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents || []),
+    ...(customComponents?.filter(({ models }) => {
+      if (!models?.length) return true;
+      if (!model) return true;
+      return models.includes(model);
+    }) || []),
   ].reduce<RegisteredComponents>(
     (acc, { component, ...info }) => ({
       ...acc,
@@ -89,7 +93,11 @@
     apiVersion: apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...(customComponents || []),
+      ...(customComponents?.filter(({ models }) => {
+        if (!models?.length) return true;
+        if (!model) return true;
+        return models.includes(model);
+      }) || []),
     ].reduce<Dictionary<ComponentInfo>>(
       (acc, { component: _, ...info }) => ({
         ...acc,

package/src/components/content-variants/content-variants.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-  import { afterUpdate, onMount } from "svelte";
+  import { onMount } from "svelte";
 
   import { TARGET } from "../../constants/target";
   import { handleABTestingSync } from "../../helpers/ab-tests";
@@ -85,8 +85,6 @@
      */
     shouldRenderVariants = false;
   });
-
-  afterUpdate(() => {});
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.1"
+export const SDK_VERSION = "2.0.3"

package/src/functions/register-component.ts

@@ -1,6 +1,4 @@
 import type { ComponentInfo } from '../types/components';
-import type { Input } from '../types/input';
-import { fastClone } from './fast-clone';
 export const createRegisterComponentMessage = (info: ComponentInfo) => ({
   type: 'builder.registerComponent',
   data: serializeComponentInfo(info)
@@ -17,14 +15,11 @@ const serializeFn = (fnValue: Function) => {
   const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(');
   return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
-const serializeValue = (value: object): any => typeof value === 'function' ? serializeFn(value) : fastClone(value);
-export const serializeComponentInfo = ({
-  inputs,
-  ...info
-}: ComponentInfo): ComponentInfo => ({
-  ...fastClone(info),
-  inputs: inputs?.map(input => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), ({} as Input)))
-})
+export function serializeComponentInfo(info: ComponentInfo) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === 'function') {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}