@builder.io/sdk-svelte 0.12.3 → 0.12.4

package/lib/node/components/blocks/blocks.svelte

@@ -8,6 +8,7 @@ export let parent;
 export let path;
 export let styleProp;
 export let context = undefined;
+export let linkComponent = undefined;
 export let registeredComponents = undefined;
 let builderContext = getContext(BuilderContext.key);
 let componentsContext = getContext(ComponentsContext.key);
@@ -25,6 +26,7 @@ let componentsContext = getContext(ComponentsContext.key);
     {#each blocks as block (block.id)}
       <Block
         {block}
+        {linkComponent}
         context={context || builderContext}
         registeredComponents={registeredComponents ||
           componentsContext.registeredComponents}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
         context?: BlocksProps["context"];
+        linkComponent?: BlocksProps["linkComponent"];
         registeredComponents?: BlocksProps["registeredComponents"];
     };
     events: {

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

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/constants/sdk-version.d.ts

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

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

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

package/lib/node/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/node/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/node/functions/get-class-prop-name.d.ts

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/functions/transform-style-property.js

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

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

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

package/lib/node/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/node/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/node/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/package.json

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

package/src/blocks/button/button.svelte

@@ -1,42 +1,35 @@
 <script lang="ts">
+  import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
+  import { getClassPropName } from "../../functions/get-class-prop-name.js";
   import { filterAttrs } from "../helpers.js";
-  import { setAttrs } from "../helpers.js";
   import type { ButtonProps } from "./button.types.js";
 
-  export let attributes: ButtonProps["attributes"] = undefined;
-  export let text: ButtonProps["text"] = undefined;
   export let link: ButtonProps["link"] = undefined;
+  export let builderLinkComponent: ButtonProps["builderLinkComponent"] =
+    undefined;
+  export let attributes: ButtonProps["attributes"] = undefined;
   export let openLinkInNewTab: ButtonProps["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: ButtonProps["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/src/blocks/button/button.types.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/src/blocks/columns/columns.svelte

@@ -4,11 +4,14 @@
 
 <script lang="ts">
   import Blocks from "../../components/blocks/blocks.svelte";
+  import DynamicRenderer from "../../components/dynamic-renderer/dynamic-renderer.svelte";
   import InlinedStyles from "../../components/inlined-styles.svelte";
   import type { SizeName } from "../../constants/device-sizes.js";
   import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
   import { TARGET } from "../../constants/target.js";
   import { deoptSignal } from "../../functions/deopt.js";
+  import { getClassPropName } from "../../functions/get-class-prop-name.js";
+  import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
   import type { PropsWithBuilderData } from "../../types/builder-props.js";
   import type { Dictionary } from "../../types/typescript.js";
   import type { ColumnProps } from "./columns.types.js";
@@ -22,6 +25,8 @@
     undefined;
   export let builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
   export let builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
+  export let builderLinkComponent: PropsWithBuilderData<ColumnProps>["builderLinkComponent"] =
+    undefined;
   export let builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
 
   function mitosis_styling(node, vars) {
@@ -66,7 +71,13 @@
     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({
@@ -151,10 +162,19 @@
   {/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`}
@@ -164,9 +184,10 @@
         }}
         context={builderContext}
         registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
         blocks={column.blocks}
       />
-    </div>
+    </DynamicRenderer>
   {/each}
 </div>
 
@@ -175,9 +196,4 @@
     display: flex;
     line-height: normal;
   }
-  .div-2 {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
 </style>

package/src/blocks/columns/columns.types.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/src/blocks/symbol/symbol.svelte

@@ -5,6 +5,7 @@
   import type { BuilderContent } from "../../types/builder-content.js";
   import type { PropsWithBuilderData } from "../../types/builder-props.js";
   import { filterAttrs } from "../helpers.js";
+  import { getClassPropName } from "../../functions/get-class-prop-name.js";
   import type { Nullable } from "../../types/typescript.js";
   import { setAttrs } from "../helpers.js";
   import { fetchSymbolContent } from "./symbol.helpers.js";
@@ -18,6 +19,8 @@
   export let builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
   export let builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
   export let builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
+  export let builderLinkComponent: PropsWithBuilderData<SymbolProps>["builderLinkComponent"] =
+    undefined;
 
   function setContent() {
     if (contentToUse) return;
@@ -32,7 +35,7 @@
   }
   $: className = () => {
     return [
-      ...[attributes.class],
+      ...[attributes[getClassPropName()]],
       "builder-symbol",
       symbol?.inline ? "builder-inline-symbol" : undefined,
       symbol?.dynamic || dynamic ? "builder-dynamic-symbol" : undefined,
@@ -75,5 +78,6 @@
     }}
     model={symbol?.model}
     content={contentToUse}
+    linkComponent={builderLinkComponent}
   />
 </div>

package/src/blocks/symbol/symbol.types.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;

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;
   };
 
   /**