@builder.io/sdk-svelte 2.0.2 → 2.0.5

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

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -64,6 +65,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    attributes?: string;
     highPriority?: boolean;
     className?: string;
     image: string;
@@ -12,6 +13,7 @@ export interface ImageProps {
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
+    lockAspectRatio?: boolean;
     children?: any;
     fitContent?: boolean;
     builderBlock?: BuilderBlock;

package/lib/browser/blocks/symbol/symbol.types.d.ts

@@ -14,5 +14,6 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
     dynamic?: boolean;
     attributes?: any;
     inheritState?: boolean;
+    renderToLiquid?: boolean;
 }
 export {};

package/lib/browser/blocks/text/component-info.js

@@ -1,7 +1,8 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
     shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false
+        builderBlock: TARGET === 'reactNative' ? true : false,
+        builderContext: true
     },
     name: 'Text',
     static: true,

package/lib/browser/blocks/text/text.svelte

@@ -1,4 +1,6 @@
-<script>export let text = undefined;
+<script>import { evaluate } from "../../functions/evaluate/index";
+export let builderContext;
+export let text = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -9,6 +11,18 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: processedText = () => {
+    const context = $builderContext;
+    const { context: contextContext, localState, rootState, rootSetState, } = context;
+    return String(text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
+        code: group,
+        context: contextContext,
+        localState,
+        rootState,
+        rootSetState,
+        enableCache: false,
+    }));
+};
 </script>
 
 <div
@@ -17,5 +31,5 @@ function stringifyStyles(stylesObj) {
   })}
   class="builder-text"
 >
-  {@html text?.toString() || ""}
+  {@html processedText()}
 </div>

package/lib/browser/blocks/text/text.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { TextProps } from "./text.types";
 declare const __propDef: {
     props: {
+        builderContext: TextProps["builderContext"];
         text?: TextProps["text"];
     };
     events: {

package/lib/browser/components/block/animator.js

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function throttle(func, wait, options = {}) {
@@ -56,6 +57,9 @@ function assign(target, ..._args) {
     return to;
 }
 export function bindAnimations(animations) {
+    if (TARGET === 'reactNative') {
+        return;
+    }
     for (const animation of animations) {
         switch (animation.trigger) {
             case 'pageLoad':

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.2";
+export declare const SDK_VERSION = "2.0.5";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.2";
+export const SDK_VERSION = "2.0.5";

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

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -64,6 +65,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    attributes?: string;
     highPriority?: boolean;
     className?: string;
     image: string;
@@ -12,6 +13,7 @@ export interface ImageProps {
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
+    lockAspectRatio?: boolean;
     children?: any;
     fitContent?: boolean;
     builderBlock?: BuilderBlock;

package/lib/edge/blocks/symbol/symbol.types.d.ts

@@ -14,5 +14,6 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
     dynamic?: boolean;
     attributes?: any;
     inheritState?: boolean;
+    renderToLiquid?: boolean;
 }
 export {};

package/lib/edge/blocks/text/component-info.js

@@ -1,7 +1,8 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
     shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false
+        builderBlock: TARGET === 'reactNative' ? true : false,
+        builderContext: true
     },
     name: 'Text',
     static: true,

package/lib/edge/blocks/text/text.svelte

@@ -1,4 +1,6 @@
-<script>export let text = undefined;
+<script>import { evaluate } from "../../functions/evaluate/index";
+export let builderContext;
+export let text = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -9,6 +11,18 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: processedText = () => {
+    const context = $builderContext;
+    const { context: contextContext, localState, rootState, rootSetState, } = context;
+    return String(text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
+        code: group,
+        context: contextContext,
+        localState,
+        rootState,
+        rootSetState,
+        enableCache: false,
+    }));
+};
 </script>
 
 <div
@@ -17,5 +31,5 @@ function stringifyStyles(stylesObj) {
   })}
   class="builder-text"
 >
-  {@html text?.toString() || ""}
+  {@html processedText()}
 </div>

package/lib/edge/blocks/text/text.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { TextProps } from "./text.types";
 declare const __propDef: {
     props: {
+        builderContext: TextProps["builderContext"];
         text?: TextProps["text"];
     };
     events: {

package/lib/edge/components/block/animator.js

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function throttle(func, wait, options = {}) {
@@ -56,6 +57,9 @@ function assign(target, ..._args) {
     return to;
 }
 export function bindAnimations(animations) {
+    if (TARGET === 'reactNative') {
+        return;
+    }
     for (const animation of animations) {
         switch (animation.trigger) {
             case 'pageLoad':

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.2";
+export declare const SDK_VERSION = "2.0.5";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.2";
+export const SDK_VERSION = "2.0.5";

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

@@ -1,4 +1,5 @@
-<script>import { getSrcSet } from "./image.helpers";
+<script>import { onMount } from "svelte";
+import { getSrcSet } from "./image.helpers";
 export let image;
 export let src = undefined;
 export let srcset = undefined;
@@ -64,6 +65,7 @@ $: aspectRatioCss = () => {
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
 };
+onMount(() => { });
 </script>
 
 <picture>

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    attributes?: string;
     highPriority?: boolean;
     className?: string;
     image: string;
@@ -12,6 +13,7 @@ export interface ImageProps {
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
+    lockAspectRatio?: boolean;
     children?: any;
     fitContent?: boolean;
     builderBlock?: BuilderBlock;

package/lib/node/blocks/symbol/symbol.types.d.ts

@@ -14,5 +14,6 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
     dynamic?: boolean;
     attributes?: any;
     inheritState?: boolean;
+    renderToLiquid?: boolean;
 }
 export {};

package/lib/node/blocks/text/component-info.js

@@ -1,7 +1,8 @@
 import { TARGET } from '../../constants/target';
 export const componentInfo = {
     shouldReceiveBuilderProps: {
-        builderBlock: TARGET === 'reactNative' ? true : false
+        builderBlock: TARGET === 'reactNative' ? true : false,
+        builderContext: true
     },
     name: 'Text',
     static: true,

package/lib/node/blocks/text/text.svelte

@@ -1,4 +1,6 @@
-<script>export let text = undefined;
+<script>import { evaluate } from "../../functions/evaluate/index";
+export let builderContext;
+export let text = undefined;
 function stringifyStyles(stylesObj) {
     let styles = "";
     for (let key in stylesObj) {
@@ -9,6 +11,18 @@ function stringifyStyles(stylesObj) {
     }
     return styles;
 }
+$: processedText = () => {
+    const context = $builderContext;
+    const { context: contextContext, localState, rootState, rootSetState, } = context;
+    return String(text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
+        code: group,
+        context: contextContext,
+        localState,
+        rootState,
+        rootSetState,
+        enableCache: false,
+    }));
+};
 </script>
 
 <div
@@ -17,5 +31,5 @@ function stringifyStyles(stylesObj) {
   })}
   class="builder-text"
 >
-  {@html text?.toString() || ""}
+  {@html processedText()}
 </div>

package/lib/node/blocks/text/text.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { TextProps } from "./text.types";
 declare const __propDef: {
     props: {
+        builderContext: TextProps["builderContext"];
         text?: TextProps["text"];
     };
     events: {

package/lib/node/components/block/animator.js

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 // eslint-disable-next-line @typescript-eslint/ban-types
 function throttle(func, wait, options = {}) {
@@ -56,6 +57,9 @@ function assign(target, ..._args) {
     return to;
 }
 export function bindAnimations(animations) {
+    if (TARGET === 'reactNative') {
+        return;
+    }
     for (const animation of animations) {
         switch (animation.trigger) {
             case 'pageLoad':

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "2.0.2";
+export declare const SDK_VERSION = "2.0.5";

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

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.2";
+export const SDK_VERSION = "2.0.5";

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.2",
+  "version": "2.0.5",
   "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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { getSrcSet } from "./image.helpers";
   import type { ImageProps } from "./image.types";
 
@@ -69,6 +71,8 @@
     const out = aspectRatio ? aspectRatioStyles : undefined;
     return out;
   };
+
+  onMount(() => {});
 </script>
 
 <picture>

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+  attributes?: string;
   highPriority?: boolean;
   className?: string;
   image: string;
@@ -12,6 +13,7 @@ export interface ImageProps {
   backgroundPosition?: string;
   srcset?: string;
   aspectRatio?: number;
+  lockAspectRatio?: boolean;
   children?: any;
   fitContent?: boolean;
   builderBlock?: BuilderBlock;

package/src/blocks/symbol/symbol.types.ts

@@ -14,4 +14,5 @@ export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, Bu
   dynamic?: boolean;
   attributes?: any;
   inheritState?: boolean;
+  renderToLiquid?: boolean;
 }

package/src/blocks/text/component-info.ts

@@ -2,7 +2,8 @@ import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === 'reactNative' ? true : false
+    builderBlock: TARGET === 'reactNative' ? true : false,
+    builderContext: true
   },
   name: 'Text',
   static: true,

package/src/blocks/text/text.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { evaluate } from "../../functions/evaluate/index";
   import type { TextProps } from "./text.types";
 
+  export let builderContext: TextProps["builderContext"];
   export let text: TextProps["text"] = undefined;
   function stringifyStyles(stylesObj) {
     let styles = "";
@@ -12,6 +14,28 @@
     }
     return styles;
   }
+
+  $: processedText = () => {
+    const context = $builderContext;
+    const {
+      context: contextContext,
+      localState,
+      rootState,
+      rootSetState,
+    } = context;
+    return String(text?.toString() || "").replace(
+      /{{([^}]+)}}/g,
+      (match, group) =>
+        evaluate({
+          code: group,
+          context: contextContext,
+          localState,
+          rootState,
+          rootSetState,
+          enableCache: false,
+        }) as string
+    );
+  };
 </script>
 
 <div
@@ -20,5 +44,5 @@
   })}
   class="builder-text"
 >
-  {@html text?.toString() || ""}
+  {@html processedText()}
 </div>

package/src/components/block/animator.ts

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { camelToKebabCase } from '../../functions/camel-to-kebab-case';
 import type { BuilderAnimation } from '../../types/builder-block';
 
@@ -54,6 +55,9 @@ function assign(target: object, ..._args: any[]) {
   return to;
 }
 export function bindAnimations(animations: BuilderAnimation[]) {
+  if (TARGET === 'reactNative') {
+    return;
+  }
   for (const animation of animations) {
     switch (animation.trigger) {
       case 'pageLoad':

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.2"
+export const SDK_VERSION = "2.0.5"

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