@builder.io/sdk-svelte 2.0.3 → 2.0.5

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

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

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

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

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

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

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

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

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

package/package.json

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

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.3"
+export const SDK_VERSION = "2.0.5"