@builder.io/sdk-solid 2.0.1 → 2.0.3

package/lib/node/dev.jsx

@@ -1636,6 +1636,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1643,7 +1644,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -1655,7 +1656,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -1674,7 +1675,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-3ff242de"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1703,7 +1704,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-5b8fb3ac {
+    <style>{`.div-3ff242de {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1777,6 +1778,9 @@ function Image(props) {
     !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
       return props.srcset;
     }
+    if (props.noWebp) {
+      return void 0;
+    }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         console.debug("Removed given srcset");
@@ -1810,7 +1814,7 @@ function Image(props) {
       <picture>
         <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1828,22 +1832,22 @@ function Image(props) {
       <Show7
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-54b38751"
+        class="builder-image-sizer div-e3b1053e"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show7>
       <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-e3b1053e-2">{props.children}</div></Show7>
     </>
-    <style>{`.img-54b38751 {
+    <style>{`.img-e3b1053e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-54b38751 {
+}.div-e3b1053e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-54b38751-2 {
+}.div-e3b1053e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1879,16 +1883,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import {
-  Show as Show14,
-  For as For9,
-  onMount as onMount4,
-  createMemo as createMemo18,
-  createSignal as createSignal18
-} from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -4261,17 +4259,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var 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}";
@@ -4839,7 +4834,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.1";
+var SDK_VERSION = "2.0.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -5493,7 +5488,13 @@ function ContentComponent(props) {
   const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -5523,7 +5524,13 @@ function ContentComponent(props) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -5749,7 +5756,7 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}

package/lib/node/index.js

@@ -1727,7 +1727,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-5b8fb3ac {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3ff242de {
   display: flex;
   line-height: normal;
 }`);
@@ -1807,6 +1807,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1814,7 +1815,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -1826,7 +1827,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -1847,7 +1848,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac";
+        return getColumnsClass(props.builderBlock?.id) + " div-3ff242de";
       },
       get style() {
         return columnsCssVars();
@@ -1972,16 +1973,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-54b38751">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-54b38751-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-54b38751 {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-e3b1053e">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-e3b1053e-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-e3b1053e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-54b38751 {
+}.div-e3b1053e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-54b38751-2 {
+}.div-e3b1053e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -2000,6 +2001,9 @@ function Image(props) {
     !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
       return props.srcset;
     }
+    if (props.noWebp) {
+      return void 0;
+    }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         return getSrcSet(url);
@@ -2040,7 +2044,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-54b38751", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -4732,17 +4736,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var 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}";
@@ -5303,7 +5304,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.1";
+var SDK_VERSION = "2.0.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -5936,7 +5937,15 @@ function ContentComponent(props) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: props.content?.id
   }));
-  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
+  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
+    models
+  }) => {
+    if (!models?.length)
+      return true;
+    if (!props.model)
+      return true;
+    return models.includes(props.model);
+  }) || []].reduce((acc, {
     component,
     ...info
   }) => ({
@@ -5962,7 +5971,15 @@ function ContentComponent(props) {
     canTrack: props.canTrack,
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
-    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
+    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
+      models
+    }) => {
+      if (!models?.length)
+        return true;
+      if (!props.model)
+        return true;
+      return models.includes(props.model);
+    }) || []].reduce((acc, {
       component: _,
       ...info
     }) => ({

package/lib/node/index.jsx

@@ -1630,6 +1630,7 @@ function Columns(props) {
     return breakpointSizes[size].max;
   }
   function columnsStyles() {
+    const childColumnDiv = `.${props.builderBlock.id}-breakpoints > .builder-column`;
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${props.builderBlock.id}-breakpoints {
@@ -1637,7 +1638,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-tablet) !important;
             margin-left: var(--column-margin-left-tablet) !important;
           }
@@ -1649,7 +1650,7 @@ function Columns(props) {
             align-items: stretch;
           }
 
-          .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${childColumnDiv} {
             width: var(--column-width-mobile) !important;
             margin-left: var(--column-margin-left-mobile) !important;
           }
@@ -1668,7 +1669,7 @@ function Columns(props) {
   }
   return <>
     <div
-      class={getColumnsClass(props.builderBlock?.id) + " div-5b8fb3ac"}
+      class={getColumnsClass(props.builderBlock?.id) + " div-3ff242de"}
       style={columnsCssVars()}
       {...{}}
     >
@@ -1697,7 +1698,7 @@ function Columns(props) {
         /></Dynamic_renderer_default>;
       }}</For4>
     </div>
-    <style>{`.div-5b8fb3ac {
+    <style>{`.div-3ff242de {
   display: flex;
   line-height: normal;
 }`}</style>
@@ -1771,6 +1772,9 @@ function Image(props) {
     !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
       return props.srcset;
     }
+    if (props.noWebp) {
+      return void 0;
+    }
     if (props.srcset && props.image?.includes("builder.io/api/v1/image")) {
       if (!props.srcset.includes(props.image.split("?")[0])) {
         return getSrcSet(url);
@@ -1803,7 +1807,7 @@ function Image(props) {
       <picture>
         <Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-54b38751"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-e3b1053e"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1821,22 +1825,22 @@ function Image(props) {
       <Show7
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-54b38751"
+        class="builder-image-sizer div-e3b1053e"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show7>
       <Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
-      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-54b38751-2">{props.children}</div></Show7>
+      <Show7 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-e3b1053e-2">{props.children}</div></Show7>
     </>
-    <style>{`.img-54b38751 {
+    <style>{`.img-e3b1053e {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-54b38751 {
+}.div-e3b1053e {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-54b38751-2 {
+}.div-e3b1053e-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1872,16 +1876,10 @@ function SectionComponent(props) {
 var section_default = SectionComponent;
 
 // src/blocks/symbol/symbol.tsx
-import { onMount as onMount5, on as on4, createEffect as createEffect4, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
+import { onMount as onMount5, on as on3, createEffect as createEffect3, createMemo as createMemo19, createSignal as createSignal19 } from "solid-js";
 
 // src/components/content-variants/content-variants.tsx
-import {
-  Show as Show14,
-  For as For9,
-  onMount as onMount4,
-  createMemo as createMemo18,
-  createSignal as createSignal18
-} from "solid-js";
+import { Show as Show14, For as For9, onMount as onMount4, createSignal as createSignal18, createMemo as createMemo18 } from "solid-js";
 
 // src/helpers/url.ts
 var getTopLevelDomain = (host) => {
@@ -4251,17 +4249,14 @@ var serializeFn = (fnValue) => {
   const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
   return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
 };
-var serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-var serializeComponentInfo = ({
-  inputs,
-  ...info
-}) => ({
-  ...fastClone(info),
-  inputs: inputs?.map((input) => Object.entries(input).reduce((acc, [key, value]) => ({
-    ...acc,
-    [key]: serializeValue(value)
-  }), {}))
-});
+function serializeComponentInfo(info) {
+  return JSON.parse(JSON.stringify(info, (key, value) => {
+    if (typeof value === "function") {
+      return serializeFn(value);
+    }
+    return value;
+  }));
+}
 
 // src/components/content-variants/inlined-fns.ts
 var 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}";
@@ -4824,7 +4819,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.1";
+var SDK_VERSION = "2.0.3";
 
 // src/functions/register.ts
 var registry = {};
@@ -5476,7 +5471,13 @@ function ContentComponent(props) {
   const [registeredComponents, setRegisteredComponents] = createSignal17(
     [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -5506,7 +5507,13 @@ function ContentComponent(props) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents || []
+      ...props.customComponents?.filter(({ models }) => {
+        if (!models?.length)
+          return true;
+        if (!props.model)
+          return true;
+        return models.includes(props.model);
+      }) || []
     ].reduce(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -5732,7 +5739,7 @@ function Symbol(props) {
   function onUpdateFn_0() {
     setContent();
   }
-  createEffect4(on4(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
+  createEffect3(on3(() => [onUpdateFn_0_props_symbol()], onUpdateFn_0));
   return <><div class={className()} {...{}} {...props.attributes} {...{}}><Content_variants_default
     nonce={props.builderContext.nonce}
     isNestedRender={true}

package/package.json

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