@builder.io/sdk-svelte 0.12.2 → 0.12.4

package/src/components/block/block.svelte

@@ -3,6 +3,7 @@
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
     registeredComponents: RegisteredComponents;
+    linkComponent: any;
   };
 </script>
 
@@ -15,8 +16,8 @@
   } from "../../context/types.js";
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-  import { getBlockProperties } from "../../functions/get-block-properties.js";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
+  import { getStyle } from "../../functions/get-style.js";
   import type { BuilderBlock } from "../../types/builder-block.js";
   import { getComponent, getRepeatItemData } from "./block.helpers.js";
   import BlockStyles from "./components/block-styles.svelte";
@@ -29,6 +30,7 @@
   export let block: BlockProps["block"];
   export let context: BlockProps["context"];
   export let registeredComponents: BlockProps["registeredComponents"];
+  export let linkComponent: BlockProps["linkComponent"];
 
   $: blockComponent = () => {
     return getComponent({
@@ -56,6 +58,13 @@
         });
   };
   $: Tag = () => {
+    const shouldUseLink =
+      block.tagName === "a" ||
+      processedBlock().properties?.href ||
+      processedBlock().href;
+    if (shouldUseLink) {
+      return linkComponent || "a";
+    }
     return block.tagName || "div";
   };
   $: canShowBlock = () => {
@@ -89,6 +98,13 @@
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: context,
+        ...(blockComponent?.()?.name === "Core:Button" ||
+        blockComponent?.()?.name === "Symbol" ||
+        blockComponent?.()?.name === "Columns"
+          ? {
+              builderLinkComponent: linkComponent,
+            }
+          : {}),
         ...(blockComponent?.()?.name === "Symbol" ||
         blockComponent?.()?.name === "Columns"
           ? {
@@ -97,6 +113,7 @@
           : {}),
       },
       context: childrenContext,
+      linkComponent: linkComponent,
       registeredComponents: registeredComponents,
       builderBlock: processedBlock(),
       includeBlockProps: blockComponent?.()?.noWrap === true,
@@ -112,13 +129,19 @@
 
   {#if !blockComponent?.()?.noWrap}
     {#if !repeatItem()}
-      <BlockWrapper Wrapper={Tag()} block={processedBlock()} {context}>
+      <BlockWrapper
+        Wrapper={Tag()}
+        block={processedBlock()}
+        {context}
+        {linkComponent}
+      >
         <ComponentRef
           componentRef={componentRefProps().componentRef}
           componentOptions={componentRefProps().componentOptions}
           blockChildren={componentRefProps().blockChildren}
           context={componentRefProps().context}
           registeredComponents={componentRefProps().registeredComponents}
+          linkComponent={componentRefProps().linkComponent}
           builderBlock={componentRefProps().builderBlock}
           includeBlockProps={componentRefProps().includeBlockProps}
           isInteractive={componentRefProps().isInteractive}
@@ -129,6 +152,7 @@
             block={child}
             context={childrenContext}
             {registeredComponents}
+            {linkComponent}
           />
         {/each}
       </BlockWrapper>
@@ -138,6 +162,7 @@
           repeatContext={data.context}
           block={data.block}
           {registeredComponents}
+          {linkComponent}
         />
       {/each}
     {/if}
@@ -148,6 +173,7 @@
       blockChildren={componentRefProps().blockChildren}
       context={componentRefProps().context}
       registeredComponents={componentRefProps().registeredComponents}
+      linkComponent={componentRefProps().linkComponent}
       builderBlock={componentRefProps().builderBlock}
       includeBlockProps={componentRefProps().includeBlockProps}
       isInteractive={componentRefProps().isInteractive}

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

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

package/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -16,6 +16,7 @@ export interface ComponentProps {
   blockChildren: BuilderBlock[];
   context: Writable<BuilderContextInterface>;
   registeredComponents: RegisteredComponents;
+  linkComponent: any;
   builderBlock: BuilderBlock;
   includeBlockProps: boolean;
   isInteractive: boolean | undefined;

package/src/components/block/components/component-ref/component-ref.svelte

@@ -10,6 +10,7 @@
   export let componentOptions: ComponentProps["componentOptions"];
   export let builderBlock: ComponentProps["builderBlock"];
   export let context: ComponentProps["context"];
+  export let linkComponent: ComponentProps["linkComponent"];
   export let includeBlockProps: ComponentProps["includeBlockProps"];
   export let blockChildren: ComponentProps["blockChildren"];
   export let registeredComponents: ComponentProps["registeredComponents"];
@@ -25,13 +26,14 @@
       builderBlock: builderBlock,
       context: context,
       componentRef: componentRef,
+      linkComponent: linkComponent,
       includeBlockProps: includeBlockProps,
       isInteractive: isInteractive,
       contextValue: $context,
     })}
   >
     {#each blockChildren as child (child.id)}
-      <Block block={child} {context} {registeredComponents} />
+      <Block block={child} {context} {registeredComponents} {linkComponent} />
     {/each}
   </svelte:component>
 {/if}

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

@@ -1,8 +1,6 @@
 <script context="module" lang="ts">
-  type Props = {
-    block: BuilderBlock;
+  type Props = Omit<BlockProps, "context"> & {
     repeatContext: BuilderContextInterface;
-    registeredComponents: RegisteredComponents;
   };
 </script>
 
@@ -11,20 +9,18 @@
   import { writable } from "svelte/store";
 
   import BuilderContext from "../../../context/builder.context.js";
-  import type {
-    BuilderContextInterface,
-    RegisteredComponents,
-  } from "../../../context/types.js";
-  import type { BuilderBlock } from "../../../types/builder-block.js";
+  import type { BuilderContextInterface } from "../../../context/types.js";
+  import type { BlockProps } from "../block.svelte";
   import Block from "../block.svelte";
 
   export let repeatContext: Props["repeatContext"];
   export let block: Props["block"];
   export let registeredComponents: Props["registeredComponents"];
+  export let linkComponent: Props["linkComponent"];
 
   let store = writable(repeatContext);
 
   setContext(BuilderContext.key, store);
 </script>
 
-<Block {block} context={store} {registeredComponents} />
+<Block {block} context={store} {registeredComponents} {linkComponent} />

package/src/components/blocks/blocks.svelte

@@ -12,6 +12,7 @@
   export let path: BlocksProps["path"];
   export let styleProp: BlocksProps["styleProp"];
   export let context: BlocksProps["context"] = undefined;
+  export let linkComponent: BlocksProps["linkComponent"] = undefined;
   export let registeredComponents: BlocksProps["registeredComponents"] =
     undefined;
 
@@ -31,6 +32,7 @@
     {#each blocks as block (block.id)}
       <Block
         {block}
+        {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
           componentsContext.registeredComponents}

package/src/components/blocks/blocks.types.ts

@@ -4,4 +4,5 @@ import type { BlocksWrapperProps } from './blocks-wrapper.svelte';
 export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
   context?: Writable<BuilderContextInterface>;
   registeredComponents?: RegisteredComponents;
+  linkComponent?: any;
 }

package/src/components/content/components/styles.svelte

@@ -24,6 +24,10 @@ ${getFontCss({
   customFonts: customFonts,
 })}
 
+.builder-button {
+  all: unset;
+}
+
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
   margin: 0;
 }

package/src/components/content/content.svelte

@@ -45,6 +45,7 @@
   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"];
 
@@ -132,6 +133,7 @@
   {builderContextSignal}
   {contentWrapper}
   {contentWrapperProps}
+  {linkComponent}
   {trustedHosts}
   {...{}}
 >
@@ -150,5 +152,6 @@
     blocks={$builderContextSignal.content?.data?.blocks}
     context={builderContextSignal}
     {registeredComponents}
+    {linkComponent}
   />
 </EnableEditor>

package/src/components/content-variants/content-variants.svelte

@@ -35,6 +35,7 @@
   export let apiVersion: VariantsProviderProps["apiVersion"] = undefined;
   export let customComponents: VariantsProviderProps["customComponents"] =
     undefined;
+  export let linkComponent: VariantsProviderProps["linkComponent"] = undefined;
   export let locale: VariantsProviderProps["locale"] = undefined;
   export let includeRefs: VariantsProviderProps["includeRefs"] = undefined;
   export let enrich: VariantsProviderProps["enrich"] = undefined;
@@ -108,6 +109,7 @@
       {apiKey}
       {apiVersion}
       {customComponents}
+      {linkComponent}
       {canTrack}
       {locale}
       {includeRefs}
@@ -132,6 +134,7 @@
   {apiKey}
   {apiVersion}
   {customComponents}
+  {linkComponent}
   {canTrack}
   {locale}
   {includeRefs}

package/src/components/content-variants/content-variants.types.ts

@@ -35,6 +35,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`.
@@ -57,7 +61,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;
 
@@ -67,7 +71,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/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.2"
+export const SDK_VERSION = "0.12.4"

package/src/functions/get-block-properties.ts

@@ -1,7 +1,7 @@
-import { TARGET } from '../constants/target.js';
 import type { BuilderContextInterface } from '../context/types.js';
-import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.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: BuilderBlock) => {
   // currently we are only spreading the `href` property
@@ -48,30 +48,15 @@ export function getBlockProperties({
     ...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,
     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: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration> {
-  switch (TARGET) {
-    case 'svelte':
-    case 'vue':
-    case 'solid':
-      return convertStyleMapToCSSArray(style).join(' ');
-    case 'qwik':
-    case 'reactNative':
-    case 'react':
-    case 'rsc':
-      return style;
-  }
 }

package/src/functions/get-class-prop-name.ts

@@ -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/src/functions/get-style.ts

@@ -0,0 +1,37 @@
+import { TARGET } from '../constants/target.js';
+import type { BuilderContextInterface } from '../context/types.js';
+import { convertStyleMapToCSSArray } from '../helpers/css.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { transformStyleProperty } from './transform-style-property.js';
+export const getStyle = ({
+  block,
+  context
+}: {
+  block: BuilderBlock;
+  context: BuilderContextInterface;
+}) => {
+  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: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration> {
+  switch (TARGET) {
+    case 'svelte':
+    case 'vue':
+    case 'solid':
+      return convertStyleMapToCSSArray(style).join(' ');
+    case 'qwik':
+    case 'reactNative':
+    case 'react':
+    case 'rsc':
+      return style;
+  }
+}

package/src/functions/transform-block-properties.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 function transformBlockProperties<T>({
   properties
 }: {

package/src/functions/transform-style-property.ts

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

package/src/helpers/omit.ts

@@ -0,0 +1,7 @@
+export function omit<T extends object>(obj: T, ...values: (keyof T)[]): Partial<T> {
+  const newObject = Object.assign({}, obj);
+  for (const key of values) {
+    delete (newObject as any)[key];
+  }
+  return newObject;
+}

package/src/types/builder-block.ts

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

package/src/types/builder-props.ts

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