@builder.io/sdk-svelte 0.12.3 → 0.12.5

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

@@ -3,8 +3,8 @@
 <script>import { writable } from "svelte/store";
 import "../../functions/extract-text-styles.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
-import "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import "../../functions/get-style.js";
 import { getComponent, getRepeatItemData } from "./block.helpers.js";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
@@ -13,6 +13,7 @@ import RepeatedBlock from "./components/repeated-block.svelte";
 export let block;
 export let context;
 export let registeredComponents;
+export let linkComponent;
 $: blockComponent = () => {
     return getComponent({
         block: block,
@@ -39,6 +40,12 @@ $: processedBlock = () => {
         });
 };
 $: Tag = () => {
+    const shouldUseLink = block.tagName === "a" ||
+        processedBlock().properties?.href ||
+        processedBlock().href;
+    if (shouldUseLink) {
+        return linkComponent || "a";
+    }
     return block.tagName || "div";
 };
 $: canShowBlock = () => {
@@ -70,6 +77,13 @@ $: componentRefProps = () => {
         componentOptions: {
             ...getBlockComponentOptions(processedBlock()),
             builderContext: context,
+            ...(blockComponent?.()?.name === "Core:Button" ||
+                blockComponent?.()?.name === "Symbol" ||
+                blockComponent?.()?.name === "Columns"
+                ? {
+                    builderLinkComponent: linkComponent,
+                }
+                : {}),
             ...(blockComponent?.()?.name === "Symbol" ||
                 blockComponent?.()?.name === "Columns"
                 ? {
@@ -78,6 +92,7 @@ $: componentRefProps = () => {
                 : {}),
         },
         context: childrenContext,
+        linkComponent: linkComponent,
         registeredComponents: registeredComponents,
         builderBlock: processedBlock(),
         includeBlockProps: blockComponent?.()?.noWrap === true,
@@ -92,13 +107,19 @@ let childrenContext = writable($context);
 
   {#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}
@@ -109,6 +130,7 @@ let childrenContext = writable($context);
             block={child}
             context={childrenContext}
             {registeredComponents}
+            {linkComponent}
           />
         {/each}
       </BlockWrapper>
@@ -118,6 +140,7 @@ let childrenContext = writable($context);
           repeatContext={data.context}
           block={data.block}
           {registeredComponents}
+          {linkComponent}
         />
       {/each}
     {/if}
@@ -128,6 +151,7 @@ let childrenContext = writable($context);
       blockChildren={componentRefProps().blockChildren}
       context={componentRefProps().context}
       registeredComponents={componentRefProps().registeredComponents}
+      linkComponent={componentRefProps().linkComponent}
       builderBlock={componentRefProps().builderBlock}
       includeBlockProps={componentRefProps().includeBlockProps}
       isInteractive={componentRefProps().isInteractive}

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

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

package/lib/node/components/block/components/component-ref/component-ref.helpers.d.ts

@@ -16,6 +16,7 @@ export interface ComponentProps {
     blockChildren: BuilderBlock[];
     context: Writable<BuilderContextInterface>;
     registeredComponents: RegisteredComponents;
+    linkComponent: any;
     builderBlock: BuilderBlock;
     includeBlockProps: boolean;
     isInteractive: boolean | undefined;
@@ -25,8 +26,7 @@ export declare const getWrapperProps: ({ componentOptions, builderBlock, context
 }) => InteractiveElementProps | {
     attributes?: {
         'builder-id': string | undefined;
-        style: string | Partial<CSSStyleDeclaration> | undefined;
-        class: string;
+        style: string | Partial<CSSStyleDeclaration>;
         href: any;
     } | {
         [index: string]: any;

package/lib/node/components/block/components/component-ref/component-ref.svelte

@@ -7,6 +7,7 @@ export let componentRef;
 export let componentOptions;
 export let builderBlock;
 export let context;
+export let linkComponent;
 export let includeBlockProps;
 export let blockChildren;
 export let registeredComponents;
@@ -21,13 +22,14 @@ let Wrapper = isInteractive ? InteractiveElement : componentRef;
       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/lib/node/components/block/components/component-ref/component-ref.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         componentOptions: ComponentProps["componentOptions"];
         builderBlock: ComponentProps["builderBlock"];
         context: ComponentProps["context"];
+        linkComponent: ComponentProps["linkComponent"];
         includeBlockProps: ComponentProps["includeBlockProps"];
         blockChildren: ComponentProps["blockChildren"];
         registeredComponents: ComponentProps["registeredComponents"];

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

@@ -7,8 +7,9 @@ import Block from "../block.svelte";
 export let repeatContext;
 export let block;
 export let registeredComponents;
+export let linkComponent;
 let store = writable(repeatContext);
 setContext(BuilderContext.key, store);
 </script>
 
-<Block {block} context={store} {registeredComponents} />
+<Block {block} context={store} {registeredComponents} {linkComponent} />

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

@@ -1,16 +1,15 @@
 import { SvelteComponent } from "svelte";
-type Props = {
-    block: BuilderBlock;
+type Props = Omit<BlockProps, "context"> & {
     repeatContext: BuilderContextInterface;
-    registeredComponents: RegisteredComponents;
 };
-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";
 declare const __propDef: {
     props: {
         repeatContext: Props["repeatContext"];
         block: Props["block"];
         registeredComponents: Props["registeredComponents"];
+        linkComponent: Props["linkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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.5";

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

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

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

@@ -12,8 +12,9 @@ import { runInBrowser } from './browser-runtime/browser.js';
  * types can be resolved correctly.
  */
 import { evaluator } from '../../../node/functions/evaluate/node-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/node/functions/evaluate/should-force-browser-runtime-in-node.d.ts

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

package/lib/node/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/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/is-node-runtime.js

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

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.5",
   "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;