@builder.io/sdk-svelte 0.12.3 → 0.12.5

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

@@ -27,6 +27,7 @@ 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;
 function contentSetState(newRootState) {
@@ -105,6 +106,7 @@ setContext(ComponentsContext.key, {
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
+  {linkComponent}
   {trustedHosts}
   {...{}}
 >
@@ -123,5 +125,6 @@ setContext(ComponentsContext.key, {
     blocks={$builderContextSignal.content?.data?.blocks}
     context={builderContextSignal}
     {registeredComponents}
+    {linkComponent}
   />
 </EnableEditor>

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

@@ -18,6 +18,7 @@ declare const __propDef: {
         showContent: ContentProps["showContent"];
         contentWrapper?: ContentProps["contentWrapper"];
         contentWrapperProps?: ContentProps["contentWrapperProps"];
+        linkComponent?: ContentProps["linkComponent"];
         trustedHosts?: ContentProps["trustedHosts"];
         isSsrAbTest: ContentProps["isSsrAbTest"];
     };

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

@@ -17,6 +17,7 @@ export let context = undefined;
 export let apiKey;
 export let apiVersion = undefined;
 export let customComponents = undefined;
+export let linkComponent = undefined;
 export let locale = undefined;
 export let includeRefs = undefined;
 export let enrich = undefined;
@@ -81,6 +82,7 @@ onMount(() => {
       {apiKey}
       {apiVersion}
       {customComponents}
+      {linkComponent}
       {canTrack}
       {locale}
       {includeRefs}
@@ -105,6 +107,7 @@ onMount(() => {
   {apiKey}
   {apiVersion}
   {customComponents}
+  {linkComponent}
   {canTrack}
   {locale}
   {includeRefs}

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

@@ -17,6 +17,7 @@ declare const __propDef: {
         apiKey: VariantsProviderProps["apiKey"];
         apiVersion?: VariantsProviderProps["apiVersion"];
         customComponents?: VariantsProviderProps["customComponents"];
+        linkComponent?: VariantsProviderProps["linkComponent"];
         locale?: VariantsProviderProps["locale"];
         includeRefs?: VariantsProviderProps["includeRefs"];
         enrich?: VariantsProviderProps["enrich"];

package/lib/edge/components/content-variants/content-variants.types.d.ts

@@ -30,6 +30,10 @@ export interface ContentVariantsPrps {
      * An array of custom components to register (optional).
      */
     customComponents?: RegisteredComponent[];
+    /**
+     * The component to use for rendering links. Defaults to anchor element `<a>`.
+     */
+    linkComponent?: any;
     /**
      * A boolean to enable or disable tracking (optional). Defaults to `true`.
      */
@@ -47,7 +51,7 @@ export interface ContentVariantsPrps {
      */
     enrich?: boolean;
     /**
-     * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
+     * The element that wraps your content. Defaults to `<div>` ('ScrollView' in React Native).
      */
     contentWrapper?: any;
     /**
@@ -55,7 +59,7 @@ export interface ContentVariantsPrps {
      */
     contentWrapperProps?: any;
     /**
-     * The element that wraps your blocks. Defaults to `div` ('ScrollView' in React Native).
+     * The element that wraps your blocks. Defaults to `<div>` ('ScrollView' in React Native).
      */
     blocksWrapper?: any;
     /**

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.3";
+export declare const SDK_VERSION = "0.12.5";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.3";
+export const SDK_VERSION = "0.12.5";

package/lib/edge/functions/evaluate/choose-eval.js

@@ -12,8 +12,9 @@ import { runInBrowser } from './browser-runtime/browser.js';
  * types can be resolved correctly.
  */
 import { evaluator } from '../../../edge/functions/evaluate/edge-runtime/index.js';
+import { shouldForceBrowserRuntimeInNode } from './should-force-browser-runtime-in-node.js';
 /**
  * Even though we have separate runtimes for browser/node/edge, sometimes frameworks will
  * end up sending the server runtime code to the browser (most notably in dev mode).
  */
-export const chooseBrowserOrServerEval = (args) => isBrowser() ? runInBrowser(args) : evaluator(args);
+export const chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : evaluator(args);

package/lib/edge/functions/evaluate/should-force-browser-runtime-in-node.d.ts

@@ -0,0 +1 @@
+export declare const shouldForceBrowserRuntimeInNode: () => boolean;

package/lib/edge/functions/evaluate/should-force-browser-runtime-in-node.js

@@ -0,0 +1,21 @@
+import { logger } from '../../helpers/logger.js';
+import { isNodeRuntime } from '../is-node-runtime.js';
+export const shouldForceBrowserRuntimeInNode = () => {
+    if (!isNodeRuntime())
+        return false;
+    const isArm64 = process.arch === 'arm64';
+    const isNode20 = process.version.startsWith('v20');
+    // if the user passed this node option, then the `isolated-vm` package will work
+    const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes('--no-node-snapshot');
+    /**
+     * https://github.com/laverdet/isolated-vm/issues/424
+     */
+    if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
+        logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+    If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
+    See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
+    `);
+        return true;
+    }
+    return false;
+};

package/lib/edge/functions/get-block-properties.d.ts

@@ -5,7 +5,6 @@ export declare function getBlockProperties({ block, context }: {
     context: BuilderContextInterface;
 }): {
     'builder-id': string | undefined;
-    style: string | Partial<CSSStyleDeclaration> | undefined;
-    class: string;
+    style: string | Partial<CSSStyleDeclaration>;
     href: any;
 };

package/lib/edge/functions/get-block-properties.js

@@ -1,5 +1,5 @@
-import { TARGET } from '../constants/target.js';
-import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import { getClassPropName } from './get-class-prop-name.js';
+import { getStyle } from './get-style.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 const extractRelevantRootBlockProperties = (block) => {
     // currently we are only spreading the `href` property
@@ -38,8 +38,11 @@ export function getBlockProperties({ block, context }) {
         ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
-        style: block.style ? getStyleAttribute(block.style) : undefined,
-        class: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
+        style: getStyle({
+            block,
+            context
+        }),
+        [getClassPropName()]: [block.id, 'builder-block', block.class, block.properties?.class].filter(Boolean).join(' ')
     };
     return transformBlockProperties({
         properties,
@@ -47,21 +50,3 @@ export function getBlockProperties({ block, context }) {
         block
     });
 }
-/**
- * Svelte does not support style attribute as an object so we need to flatten it.
- *
- * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
- */
-function getStyleAttribute(style) {
-    switch (TARGET) {
-        case 'svelte':
-        case 'vue':
-        case 'solid':
-            return convertStyleMapToCSSArray(style).join(' ');
-        case 'qwik':
-        case 'reactNative':
-        case 'react':
-        case 'rsc':
-            return style;
-    }
-}

package/lib/edge/functions/get-class-prop-name.d.ts

@@ -0,0 +1 @@
+export declare const getClassPropName: () => "className" | "class";

package/lib/edge/functions/get-class-prop-name.js

@@ -0,0 +1,14 @@
+import { TARGET } from '../constants/target.js';
+export const getClassPropName = () => {
+    switch (TARGET) {
+        case 'react':
+        case 'reactNative':
+        case 'rsc':
+            return 'className';
+        case 'svelte':
+        case 'vue':
+        case 'solid':
+        case 'qwik':
+            return 'class';
+    }
+};

package/lib/edge/functions/get-style.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare const getStyle: ({ block, context }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => string | Partial<CSSStyleDeclaration>;
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+export declare function mapStyleObjToStrIfNeeded(style: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration>;

package/lib/edge/functions/get-style.js

@@ -0,0 +1,28 @@
+import { TARGET } from '../constants/target.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import { transformStyleProperty } from './transform-style-property.js';
+export const getStyle = ({ block, context }) => {
+    return mapStyleObjToStrIfNeeded(transformStyleProperty({
+        style: block.style || {},
+        context,
+        block
+    }));
+};
+/**
+ * Svelte does not support style attribute as an object so we need to flatten it.
+ *
+ * Additionally, Svelte, Vue and other frameworks use kebab-case styles, so we need to convert them.
+ */
+export function mapStyleObjToStrIfNeeded(style) {
+    switch (TARGET) {
+        case 'svelte':
+        case 'vue':
+        case 'solid':
+            return convertStyleMapToCSSArray(style).join(' ');
+        case 'qwik':
+        case 'reactNative':
+        case 'react':
+        case 'rsc':
+            return style;
+    }
+}

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

@@ -1,4 +1,4 @@
-import { checkIsDefined } from '../helpers/nullable';
+import { checkIsDefined } from '../helpers/nullable.js';
 /**
  * Identifies node runtime
  */

package/lib/edge/functions/transform-block-properties.d.ts

@@ -1,5 +1,5 @@
-import type { BuilderContextInterface } from '../context/types';
-import type { BuilderBlock } from '../types/builder-block';
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
 export declare function transformBlockProperties<T>({ properties }: {
     properties: T;
     context: BuilderContextInterface;

package/lib/edge/functions/transform-style-property.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+export declare function transformStyleProperty({ style }: {
+    style: Partial<CSSStyleDeclaration>;
+    context: BuilderContextInterface;
+    block: BuilderBlock;
+}): Partial<CSSStyleDeclaration>;

package/lib/edge/functions/transform-style-property.js

@@ -0,0 +1,3 @@
+export function transformStyleProperty({ style }) {
+    return style;
+}

package/lib/edge/helpers/omit.d.ts

@@ -0,0 +1 @@
+export declare function omit<T extends object>(obj: T, ...values: (keyof T)[]): Partial<T>;

package/lib/edge/helpers/omit.js

@@ -0,0 +1,7 @@
+export function omit(obj, ...values) {
+    const newObject = Object.assign({}, obj);
+    for (const key of values) {
+        delete newObject[key];
+    }
+    return newObject;
+}

package/lib/edge/types/builder-block.d.ts

@@ -54,6 +54,7 @@ export interface BuilderBlock {
     } | null;
     animations?: any[];
     style?: Partial<CSSStyleDeclaration>;
+    href?: string;
     /**
      * generated by the "Hide If" binding
      */

package/lib/edge/types/builder-props.d.ts

@@ -9,3 +9,6 @@ export type PropsWithBuilderData<T> = T & {
 export type BuilderComponentsProp = {
     builderComponents: RegisteredComponents;
 };
+export type BuilderLinkComponentProp = {
+    builderLinkComponent?: any;
+};

package/lib/node/blocks/button/button.svelte

@@ -1,39 +1,31 @@
-<script>import { filterAttrs } from "../helpers.js";
-import { setAttrs } from "../helpers.js";
-export let attributes = undefined;
-export let text = undefined;
+<script>import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
+import { getClassPropName } from "../../functions/get-class-prop-name.js";
+import { filterAttrs } from "../helpers.js";
 export let link = undefined;
+export let builderLinkComponent = undefined;
+export let attributes = undefined;
 export let openLinkInNewTab = undefined;
-function mitosis_styling(node, vars) {
-    Object.entries(vars || {}).forEach(([p, v]) => {
-        if (p.startsWith("--")) {
-            node.style.setProperty(p, v);
-        }
-        else {
-            node.style[p] = v;
-        }
-    });
-}
+export let text = undefined;
 </script>
 
-{#if link}
-  <a
-    {...filterAttrs(attributes, "on:", false)}
-    href={link}
-    target={openLinkInNewTab ? "_blank" : undefined}
-    role={"button"}
-    use:setAttrs={filterAttrs(attributes, "on:", true)}
-  >
-    {text}
-  </a>
-{:else}
-  <button
-    use:mitosis_styling={attributes.style}
-    role="button"
-    {...filterAttrs(attributes, "on:", false)}
-    class={`builder-button ${attributes.class}`}
-    use:setAttrs={filterAttrs(attributes, "on:", true)}
-  >
-    {text}
-  </button>
-{/if}
+<DynamicRenderer
+  TagName={link ? builderLinkComponent || "a" : "button"}
+  attributes={{
+    ...filterAttrs(attributes, "on:", false),
+    [getClassPropName()]: `${link ? "" : "builder-button"} ${
+      attributes[getClassPropName()] || ""
+    }`,
+    ...(link
+      ? {
+          href: link,
+          target: openLinkInNewTab ? "_blank" : undefined,
+          role: "link",
+        }
+      : {
+          role: "button",
+        }),
+  }}
+  actionAttributes={filterAttrs(attributes, "on:", true)}
+>
+  {text}
+</DynamicRenderer>

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

@@ -2,10 +2,11 @@ import { SvelteComponent } from "svelte";
 import type { ButtonProps } from "./button.types.js";
 declare const __propDef: {
     props: {
-        attributes?: ButtonProps["attributes"];
-        text?: ButtonProps["text"];
         link?: ButtonProps["link"];
+        builderLinkComponent?: ButtonProps["builderLinkComponent"];
+        attributes?: ButtonProps["attributes"];
         openLinkInNewTab?: ButtonProps["openLinkInNewTab"];
+        text?: ButtonProps["text"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,5 @@
-export interface ButtonProps {
+import type { BuilderLinkComponentProp } from '../../types/builder-props.js';
+export interface ButtonProps extends BuilderLinkComponentProp {
     attributes?: any;
     text?: string;
     link?: string;

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

@@ -1,10 +1,13 @@
 <script context="module"></script>
 
 <script>import Blocks from "../../components/blocks/blocks.svelte";
+import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
 import InlinedStyles from "../../components/inlined-styles.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import "../../functions/deopt.js";
+import { getClassPropName } from "../../functions/get-class-prop-name.js";
+import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
 export let js;
 export let space = undefined;
 export let columns = undefined;
@@ -12,6 +15,7 @@ export let stackColumnsAt = undefined;
 export let reverseColumnsWhenStacked = undefined;
 export let builderContext;
 export let builderBlock;
+export let builderLinkComponent = undefined;
 export let builderComponents;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -43,7 +47,13 @@ function columnCssVars(index) {
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     const marginLeftKey = "margin-left";
+    const sharedStyles = {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+    };
     return {
+        ...sharedStyles,
         width,
         [marginLeftKey]: gutterPixels,
         "--column-width-mobile": getMobileStyle({
@@ -124,10 +134,19 @@ let flexDir = stackColumnsAt === "never"
   {/if}
 
   {#each columns as column, index (index)}
-    <div
-      use:mitosis_styling={columnCssVars(index)}
-      class="builder-column div-2"
-      {...{}}
+    <DynamicRenderer
+      TagName={column.link ? builderLinkComponent || "a" : "div"}
+      actionAttributes={{}}
+      attributes={{
+        ...{},
+        ...(column.link
+          ? {
+              href: column.link,
+            }
+          : {}),
+        [getClassPropName()]: "builder-column",
+        style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
+      }}
     >
       <Blocks
         path={`component.options.columns.${index}.blocks`}
@@ -137,9 +156,10 @@ let flexDir = stackColumnsAt === "never"
         }}
         context={builderContext}
         registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
         blocks={column.blocks}
       />
-    </div>
+    </DynamicRenderer>
   {/each}
 </div>
 
@@ -148,9 +168,4 @@ let flexDir = stackColumnsAt === "never"
     display: flex;
     line-height: normal;
   }
-  .div-2 {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
 </style>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
         builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
         builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+        builderLinkComponent?: PropsWithBuilderData<ColumnProps>["builderLinkComponent"];
         builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
     };
     events: {

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

@@ -1,13 +1,13 @@
 import type { BuilderBlock } from '../../types/builder-block.js';
-import type { BuilderComponentsProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
 type Column = {
     blocks: BuilderBlock[];
     width?: number;
+    link?: string;
 };
 type StackColumnsAt = 'tablet' | 'mobile' | 'never';
-export interface ColumnProps extends BuilderComponentsProp {
+export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp {
     columns?: Column[];
-    builderBlock: BuilderBlock;
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;

package/lib/node/blocks/symbol/symbol.svelte

@@ -1,6 +1,7 @@
 <script>import { onMount } from "svelte";
 import ContentVariants from "../../components/content-variants/content-variants.svelte";
 import { filterAttrs } from "../helpers.js";
+import { getClassPropName } from "../../functions/get-class-prop-name.js";
 import { setAttrs } from "../helpers.js";
 import { fetchSymbolContent } from "./symbol.helpers.js";
 export let js;
@@ -10,6 +11,7 @@ export let dynamic = undefined;
 export let builderContext;
 export let builderBlock;
 export let builderComponents;
+export let builderLinkComponent = undefined;
 function setContent() {
     if (contentToUse)
         return;
@@ -24,7 +26,7 @@ function setContent() {
 }
 $: className = () => {
     return [
-        ...[attributes.class],
+        ...[attributes[getClassPropName()]],
         "builder-symbol",
         symbol?.inline ? "builder-inline-symbol" : undefined,
         symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
@@ -64,5 +66,6 @@ $: onUpdateFn_0(...[symbol]);
     }}
     model={symbol?.model}
     content={contentToUse}
+    linkComponent={builderLinkComponent}
   />
 </div>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
         builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
         builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
+        builderLinkComponent?: PropsWithBuilderData<SymbolProps>["builderLinkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,5 @@
 import type { BuilderContent } from '../../types/builder-content.js';
-import type { BuilderComponentsProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
 interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -8,7 +8,7 @@ interface SymbolInfo {
     inline?: boolean;
     dynamic?: boolean;
 }
-export interface SymbolProps extends BuilderComponentsProp {
+export interface SymbolProps extends BuilderComponentsProp, BuilderLinkComponentProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
     dynamic?: boolean;