@builder.io/sdk-svelte 1.0.31 → 1.0.33

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

@@ -112,6 +112,11 @@ export const componentInfo = {
             type: 'boolean',
             helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
             defaultValue: true
+        }, {
+            name: 'highPriority',
+            type: 'boolean',
+            advanced: true,
+            helperText: 'Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page.'
         }, {
             name: 'aspectRatio',
             type: 'number',

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

@@ -4,6 +4,7 @@ export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
 export let aspectRatio = undefined;
+export let highPriority = undefined;
 export let altText = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
@@ -71,7 +72,8 @@ $: aspectRatioCss = () => {
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}
-    loading="lazy"
+    loading={highPriority ? "eager" : "lazy"}
+    fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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

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

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    highPriority?: boolean;
     className?: string;
     image: string;
     sizes?: string;

package/lib/browser/components/block/block.helpers.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
@@ -14,5 +16,23 @@ export declare const getInheritedStyles: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
-export declare const shouldPassLinkComponent: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
-export declare const shouldPassRegisteredComponents: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
+export declare const provideLinkComponent: (block: RegisteredComponent | null | undefined, linkComponent: any) => {
+    builderLinkComponent: any;
+} | {
+    builderLinkComponent?: undefined;
+};
+export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
+    builderComponents: RegisteredComponents;
+} | {
+    builderComponents?: undefined;
+};
+export declare const provideBuilderBlock: (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
+    builderBlock: BuilderBlock;
+} | {
+    builderBlock?: undefined;
+};
+export declare const provideBuilderContext: (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
+    builderContext: Writable<BuilderContextInterface>;
+} | {
+    builderContext?: undefined;
+};

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

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
@@ -73,9 +74,26 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
-export const shouldPassLinkComponent = (block) => {
-    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideLinkComponent = (block, linkComponent) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderLinkComponent: linkComponent
+    } : {};
 };
-export const shouldPassRegisteredComponents = (block) => {
-    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideRegisteredComponents = (block, registeredComponents) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderComponents: registeredComponents
+    } : {};
+};
+export const provideBuilderBlock = (block, builderBlock) => {
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
+    return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+        builderBlock
+    } : {};
+};
+export const provideBuilderContext = (block, context) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+        builderContext: context
+    } : {};
 };

package/lib/browser/components/block/block.svelte

@@ -5,7 +5,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
+import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -76,17 +76,10 @@ $: componentRefProps = () => {
         componentRef: blockComponent?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(processedBlock()),
-            builderContext: context,
-            ...(shouldPassLinkComponent(blockComponent())
-                ? {
-                    builderLinkComponent: linkComponent,
-                }
-                : {}),
-            ...(shouldPassRegisteredComponents(blockComponent())
-                ? {
-                    builderComponents: registeredComponents,
-                }
-                : {}),
+            ...provideBuilderBlock(blockComponent(), processedBlock()),
+            ...provideBuilderContext(blockComponent(), context),
+            ...provideLinkComponent(blockComponent(), linkComponent),
+            ...provideRegisteredComponents(blockComponent(), registeredComponents),
         },
         context: context,
         linkComponent: linkComponent,
@@ -113,11 +106,7 @@ onMount(() => {
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        {linkComponent}
+      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}
         ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}

package/lib/browser/components/block/components/block-wrapper.svelte.d.ts

@@ -3,7 +3,6 @@ type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    linkComponent: any;
     children?: any;
 };
 import type { BuilderContextInterface } from "../../../context/types";

package/lib/browser/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender" | "linkComponent"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

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

@@ -27,10 +27,10 @@ export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
-export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
 export let isNestedRender = undefined;
+export let linkComponent = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -95,7 +95,6 @@ setContext(ComponentsContext.key, {
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
-  {linkComponent}
   {trustedHosts}
   {...{}}
 >

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

@@ -17,10 +17,10 @@ declare const __propDef: {
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];
         contentWrapperProps?: ContentProps["contentWrapperProps"];
-        linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
         isNestedRender?: ContentProps["isNestedRender"];
+        linkComponent?: ContentProps["linkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.31";
+export declare const SDK_VERSION = "1.0.33";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.31";
+export const SDK_VERSION = "1.0.33";

package/lib/browser/functions/evaluate/edge-runtime/edge-runtime.js

@@ -71,16 +71,8 @@ theFunction();
          */
         interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
     };
-    try {
-        const myInterpreter = new Interpreter(transformed, initFunc);
-        myInterpreter.run();
-        const output = myInterpreter.pseudoToNative(myInterpreter.value);
-        return output;
-    }
-    catch (e) {
-        logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
-            e
-        });
-        return;
-    }
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
 };

package/lib/browser/functions/get-block-component-options.js

@@ -1,10 +1,6 @@
 export function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
-        ...block.options,
-        /**
-         * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-         */
-        builderBlock: block
+        ...block.options
     };
 }

package/lib/browser/functions/is-from-trusted-host.js

@@ -1,5 +1,8 @@
 const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
 export function isFromTrustedHost(trustedHosts, e) {
+    if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
+        return false;
+    }
     const url = new URL(e.origin), hostname = url.hostname;
     return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }

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

@@ -112,6 +112,11 @@ export const componentInfo = {
             type: 'boolean',
             helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
             defaultValue: true
+        }, {
+            name: 'highPriority',
+            type: 'boolean',
+            advanced: true,
+            helperText: 'Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page.'
         }, {
             name: 'aspectRatio',
             type: 'number',

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

@@ -4,6 +4,7 @@ export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
 export let aspectRatio = undefined;
+export let highPriority = undefined;
 export let altText = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
@@ -71,7 +72,8 @@ $: aspectRatioCss = () => {
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}
-    loading="lazy"
+    loading={highPriority ? "eager" : "lazy"}
+    fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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

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

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    highPriority?: boolean;
     className?: string;
     image: string;
     sizes?: string;

package/lib/edge/components/block/block.helpers.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
@@ -14,5 +16,23 @@ export declare const getInheritedStyles: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
-export declare const shouldPassLinkComponent: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
-export declare const shouldPassRegisteredComponents: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
+export declare const provideLinkComponent: (block: RegisteredComponent | null | undefined, linkComponent: any) => {
+    builderLinkComponent: any;
+} | {
+    builderLinkComponent?: undefined;
+};
+export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
+    builderComponents: RegisteredComponents;
+} | {
+    builderComponents?: undefined;
+};
+export declare const provideBuilderBlock: (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
+    builderBlock: BuilderBlock;
+} | {
+    builderBlock?: undefined;
+};
+export declare const provideBuilderContext: (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
+    builderContext: Writable<BuilderContextInterface>;
+} | {
+    builderContext?: undefined;
+};

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

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
@@ -73,9 +74,26 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
-export const shouldPassLinkComponent = (block) => {
-    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideLinkComponent = (block, linkComponent) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderLinkComponent: linkComponent
+    } : {};
 };
-export const shouldPassRegisteredComponents = (block) => {
-    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideRegisteredComponents = (block, registeredComponents) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderComponents: registeredComponents
+    } : {};
+};
+export const provideBuilderBlock = (block, builderBlock) => {
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
+    return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+        builderBlock
+    } : {};
+};
+export const provideBuilderContext = (block, context) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+        builderContext: context
+    } : {};
 };

package/lib/edge/components/block/block.svelte

@@ -5,7 +5,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
+import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -76,17 +76,10 @@ $: componentRefProps = () => {
         componentRef: blockComponent?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(processedBlock()),
-            builderContext: context,
-            ...(shouldPassLinkComponent(blockComponent())
-                ? {
-                    builderLinkComponent: linkComponent,
-                }
-                : {}),
-            ...(shouldPassRegisteredComponents(blockComponent())
-                ? {
-                    builderComponents: registeredComponents,
-                }
-                : {}),
+            ...provideBuilderBlock(blockComponent(), processedBlock()),
+            ...provideBuilderContext(blockComponent(), context),
+            ...provideLinkComponent(blockComponent(), linkComponent),
+            ...provideRegisteredComponents(blockComponent(), registeredComponents),
         },
         context: context,
         linkComponent: linkComponent,
@@ -113,11 +106,7 @@ onMount(() => {
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        {linkComponent}
+      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}
         ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}

package/lib/edge/components/block/components/block-wrapper.svelte.d.ts

@@ -3,7 +3,6 @@ type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    linkComponent: any;
     children?: any;
 };
 import type { BuilderContextInterface } from "../../../context/types";

package/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender" | "linkComponent"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

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

@@ -27,10 +27,10 @@ export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
-export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
 export let isNestedRender = undefined;
+export let linkComponent = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -95,7 +95,6 @@ setContext(ComponentsContext.key, {
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
-  {linkComponent}
   {trustedHosts}
   {...{}}
 >

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

@@ -17,10 +17,10 @@ declare const __propDef: {
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];
         contentWrapperProps?: ContentProps["contentWrapperProps"];
-        linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
         isNestedRender?: ContentProps["isNestedRender"];
+        linkComponent?: ContentProps["linkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.31";
+export declare const SDK_VERSION = "1.0.33";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.31";
+export const SDK_VERSION = "1.0.33";

package/lib/edge/functions/evaluate/edge-runtime/edge-runtime.js

@@ -71,16 +71,8 @@ theFunction();
          */
         interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
     };
-    try {
-        const myInterpreter = new Interpreter(transformed, initFunc);
-        myInterpreter.run();
-        const output = myInterpreter.pseudoToNative(myInterpreter.value);
-        return output;
-    }
-    catch (e) {
-        logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
-            e
-        });
-        return;
-    }
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
 };

package/lib/edge/functions/get-block-component-options.js

@@ -1,10 +1,6 @@
 export function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
-        ...block.options,
-        /**
-         * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-         */
-        builderBlock: block
+        ...block.options
     };
 }

package/lib/edge/functions/is-from-trusted-host.js

@@ -1,5 +1,8 @@
 const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
 export function isFromTrustedHost(trustedHosts, e) {
+    if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
+        return false;
+    }
     const url = new URL(e.origin), hostname = url.hostname;
     return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }

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

@@ -112,6 +112,11 @@ export const componentInfo = {
             type: 'boolean',
             helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
             defaultValue: true
+        }, {
+            name: 'highPriority',
+            type: 'boolean',
+            advanced: true,
+            helperText: 'Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page.'
         }, {
             name: 'aspectRatio',
             type: 'number',

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

@@ -4,6 +4,7 @@ export let src = undefined;
 export let srcset = undefined;
 export let noWebp = undefined;
 export let aspectRatio = undefined;
+export let highPriority = undefined;
 export let altText = undefined;
 export let backgroundPosition = undefined;
 export let backgroundSize = undefined;
@@ -71,7 +72,8 @@ $: aspectRatioCss = () => {
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}
-    loading="lazy"
+    loading={highPriority ? "eager" : "lazy"}
+    fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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

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

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+    highPriority?: boolean;
     className?: string;
     image: string;
     sizes?: string;

package/lib/node/components/block/block.helpers.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="svelte" />
+import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
@@ -14,5 +16,23 @@ export declare const getInheritedStyles: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
-export declare const shouldPassLinkComponent: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
-export declare const shouldPassRegisteredComponents: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
+export declare const provideLinkComponent: (block: RegisteredComponent | null | undefined, linkComponent: any) => {
+    builderLinkComponent: any;
+} | {
+    builderLinkComponent?: undefined;
+};
+export declare const provideRegisteredComponents: (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
+    builderComponents: RegisteredComponents;
+} | {
+    builderComponents?: undefined;
+};
+export declare const provideBuilderBlock: (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
+    builderBlock: BuilderBlock;
+} | {
+    builderBlock?: undefined;
+};
+export declare const provideBuilderContext: (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
+    builderContext: Writable<BuilderContextInterface>;
+} | {
+    builderContext?: undefined;
+};

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

@@ -1,3 +1,4 @@
+import { TARGET } from '../../constants/target';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
@@ -73,9 +74,26 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
-export const shouldPassLinkComponent = (block) => {
-    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideLinkComponent = (block, linkComponent) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderLinkComponent: linkComponent
+    } : {};
 };
-export const shouldPassRegisteredComponents = (block) => {
-    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideRegisteredComponents = (block, registeredComponents) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+        builderComponents: registeredComponents
+    } : {};
+};
+export const provideBuilderBlock = (block, builderBlock) => {
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
+    return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+        builderBlock
+    } : {};
+};
+export const provideBuilderContext = (block, context) => {
+    return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+        builderContext: context
+    } : {};
 };

package/lib/node/components/block/block.svelte

@@ -5,7 +5,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getProcessedBlock } from "../../functions/get-processed-block";
 import "../dynamic-div.svelte";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
+import { getComponent, getRepeatItemData, provideBuilderBlock, provideBuilderContext, provideLinkComponent, provideRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
@@ -76,17 +76,10 @@ $: componentRefProps = () => {
         componentRef: blockComponent?.()?.component,
         componentOptions: {
             ...getBlockComponentOptions(processedBlock()),
-            builderContext: context,
-            ...(shouldPassLinkComponent(blockComponent())
-                ? {
-                    builderLinkComponent: linkComponent,
-                }
-                : {}),
-            ...(shouldPassRegisteredComponents(blockComponent())
-                ? {
-                    builderComponents: registeredComponents,
-                }
-                : {}),
+            ...provideBuilderBlock(blockComponent(), processedBlock()),
+            ...provideBuilderContext(blockComponent(), context),
+            ...provideLinkComponent(blockComponent(), linkComponent),
+            ...provideRegisteredComponents(blockComponent(), registeredComponents),
         },
         context: context,
         linkComponent: linkComponent,
@@ -113,11 +106,7 @@ onMount(() => {
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        {linkComponent}
+      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}
         ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}

package/lib/node/components/block/components/block-wrapper.svelte.d.ts

@@ -3,7 +3,6 @@ type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    linkComponent: any;
     children?: any;
 };
 import type { BuilderContextInterface } from "../../../context/types";

package/lib/node/components/content/components/enable-editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender"> & {
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "apiVersion" | "isSsrAbTest" | "blocksWrapper" | "blocksWrapperProps" | "isNestedRender" | "linkComponent"> & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;
     children?: any;

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

@@ -27,10 +27,10 @@ export let enrich = undefined;
 export let showContent;
 export let contentWrapper = undefined;
 export let contentWrapperProps = undefined;
-export let linkComponent = undefined;
 export let trustedHosts = undefined;
 export let isSsrAbTest;
 export let isNestedRender = undefined;
+export let linkComponent = undefined;
 function contentSetState(newRootState) {
     $builderContextSignal.rootState = newRootState;
 }
@@ -95,7 +95,6 @@ setContext(ComponentsContext.key, {
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
-  {linkComponent}
   {trustedHosts}
   {...{}}
 >

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

@@ -17,10 +17,10 @@ declare const __propDef: {
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];
         contentWrapperProps?: ContentProps["contentWrapperProps"];
-        linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
         isNestedRender?: ContentProps["isNestedRender"];
+        linkComponent?: ContentProps["linkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.31";
+export declare const SDK_VERSION = "1.0.33";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.31";
+export const SDK_VERSION = "1.0.33";

package/lib/node/functions/evaluate/edge-runtime/edge-runtime.js

@@ -71,16 +71,8 @@ theFunction();
          */
         interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
     };
-    try {
-        const myInterpreter = new Interpreter(transformed, initFunc);
-        myInterpreter.run();
-        const output = myInterpreter.pseudoToNative(myInterpreter.value);
-        return output;
-    }
-    catch (e) {
-        logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
-            e
-        });
-        return;
-    }
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
 };

package/lib/node/functions/get-block-component-options.js

@@ -1,10 +1,6 @@
 export function getBlockComponentOptions(block) {
     return {
         ...block.component?.options,
-        ...block.options,
-        /**
-         * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-         */
-        builderBlock: block
+        ...block.options
     };
 }

package/lib/node/functions/is-from-trusted-host.js

@@ -1,5 +1,8 @@
 const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.io', 'localhost', 'qa.builder.io'];
 export function isFromTrustedHost(trustedHosts, e) {
+    if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
+        return false;
+    }
     const url = new URL(e.origin), hostname = url.hostname;
     return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
 }

package/package.json

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

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

@@ -114,6 +114,11 @@ export const componentInfo: ComponentInfo = {
     type: 'boolean',
     helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
     defaultValue: true
+  }, {
+    name: 'highPriority',
+    type: 'boolean',
+    advanced: true,
+    helperText: 'Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page.'
   }, {
     name: 'aspectRatio',
     type: 'number',

package/src/blocks/image/image.svelte

@@ -7,6 +7,7 @@
   export let srcset: ImageProps["srcset"] = undefined;
   export let noWebp: ImageProps["noWebp"] = undefined;
   export let aspectRatio: ImageProps["aspectRatio"] = undefined;
+  export let highPriority: ImageProps["highPriority"] = undefined;
   export let altText: ImageProps["altText"] = undefined;
   export let backgroundPosition: ImageProps["backgroundPosition"] = undefined;
   export let backgroundSize: ImageProps["backgroundSize"] = undefined;
@@ -76,7 +77,8 @@
       objectFit: backgroundSize || "cover",
       ...aspectRatioCss(),
     })}
-    loading="lazy"
+    loading={highPriority ? "eager" : "lazy"}
+    fetchpriority={highPriority ? "high" : "auto"}
     alt={altText}
     role={altText ? undefined : "presentation"}
     class={"builder-image" + (className ? " " + className : "") + " img"}

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

@@ -1,5 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 export interface ImageProps {
+  highPriority?: boolean;
   className?: string;
   image: string;
   sizes?: string;

package/src/components/block/block.helpers.ts

@@ -1,3 +1,5 @@
+import type { Writable } from "svelte/store";
+import { TARGET } from '../../constants/target';
 import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
@@ -98,9 +100,26 @@ export const getInheritedStyles = ({
   }
   return extractTextStyles(style);
 };
-export const shouldPassLinkComponent = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideLinkComponent = (block: RegisteredComponent | null | undefined, linkComponent: any) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+    builderLinkComponent: linkComponent
+  } : {};
 };
-export const shouldPassRegisteredComponents = (block: RegisteredComponent | null | undefined) => {
-  return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name));
+export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+    builderComponents: registeredComponents
+  } : {};
+};
+export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
+  /**
+   * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+   */
+  return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+    builderBlock
+  } : {};
+};
+export const provideBuilderContext = (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
+  return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+    builderContext: context
+  } : {};
 }

package/src/components/block/block.svelte

@@ -23,8 +23,10 @@
     getComponent,
     getInheritedStyles,
     getRepeatItemData,
-    shouldPassLinkComponent,
-    shouldPassRegisteredComponents,
+    provideBuilderBlock,
+    provideBuilderContext,
+    provideLinkComponent,
+    provideRegisteredComponents,
   } from "./block.helpers";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
@@ -103,17 +105,10 @@
       componentRef: blockComponent?.()?.component,
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
-        builderContext: context,
-        ...(shouldPassLinkComponent(blockComponent())
-          ? {
-              builderLinkComponent: linkComponent,
-            }
-          : {}),
-        ...(shouldPassRegisteredComponents(blockComponent())
-          ? {
-              builderComponents: registeredComponents,
-            }
-          : {}),
+        ...provideBuilderBlock(blockComponent(), processedBlock()),
+        ...provideBuilderContext(blockComponent(), context),
+        ...provideLinkComponent(blockComponent(), linkComponent),
+        ...provideRegisteredComponents(blockComponent(), registeredComponents),
       },
       context: context,
       linkComponent: linkComponent,
@@ -143,11 +138,7 @@
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
-      <BlockWrapper
-        Wrapper={Tag()}
-        block={processedBlock()}
-        {context}
-        {linkComponent}
+      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}
         ><ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}

package/src/components/block/components/block-wrapper.svelte

@@ -3,7 +3,6 @@
     Wrapper: string;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    linkComponent: any;
     children?: any;
   };
 

package/src/components/content/components/enable-editor.svelte

@@ -7,6 +7,7 @@
     | "blocksWrapper"
     | "blocksWrapperProps"
     | "isNestedRender"
+    | "linkComponent"
   > & {
     builderContextSignal: Writable<BuilderContextInterface>;
     setBuilderContextSignal?: (signal: any) => any;

package/src/components/content/content.svelte

@@ -42,10 +42,10 @@
   export let contentWrapper: ContentProps["contentWrapper"] = undefined;
   export let contentWrapperProps: ContentProps["contentWrapperProps"] =
     undefined;
-  export let linkComponent: ContentProps["linkComponent"] = undefined;
   export let trustedHosts: ContentProps["trustedHosts"] = undefined;
   export let isSsrAbTest: ContentProps["isSsrAbTest"];
   export let isNestedRender: ContentProps["isNestedRender"] = undefined;
+  export let linkComponent: ContentProps["linkComponent"] = undefined;
 
   function contentSetState(newRootState: BuilderRenderState) {
     $builderContextSignal.rootState = newRootState;
@@ -119,7 +119,6 @@
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
-  {linkComponent}
   {trustedHosts}
   {...{}}
 >

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.31"
+export const SDK_VERSION = "1.0.33"

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -82,15 +82,8 @@ theFunction();
      */
     interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
   };
-  try {
-    const myInterpreter = new Interpreter(transformed, initFunc);
-    myInterpreter.run();
-    const output = myInterpreter.pseudoToNative(myInterpreter.value);
-    return output;
-  } catch (e) {
-    logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
-      e
-    });
-    return;
-  }
+  const myInterpreter = new Interpreter(transformed, initFunc);
+  myInterpreter.run();
+  const output = myInterpreter.pseudoToNative(myInterpreter.value);
+  return output;
 }

package/src/functions/get-block-component-options.ts

@@ -2,10 +2,6 @@ import type { BuilderBlock } from '../types/builder-block';
 export function getBlockComponentOptions(block: BuilderBlock) {
   return {
     ...block.component?.options,
-    ...(block as any).options,
-    /**
-     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-     */
-    builderBlock: block
+    ...(block as any).options
   };
 }

package/src/functions/is-from-trusted-host.ts

@@ -2,6 +2,9 @@ const DEFAULT_TRUSTED_HOSTS = ['*.beta.builder.io', 'beta.builder.io', 'builder.
 export function isFromTrustedHost(trustedHosts: string[] | undefined, e: {
   origin: string;
 }): boolean {
+  if (!e.origin.startsWith('http') && !e.origin.startsWith('https')) {
+    return false;
+  }
   const url = new URL(e.origin),
     hostname = url.hostname;
   return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex(trustedHost => trustedHost.startsWith('*.') ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;