@builder.io/sdk-svelte 0.12.2 → 0.12.4

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

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

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

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

package/lib/browser/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/browser/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/browser/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/edge/blocks/button/button.svelte

@@ -1,44 +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}
-    {...filterAttrs(attributes, "on:", false)}
-    class={attributes.class + " button"}
-    use:setAttrs={filterAttrs(attributes, "on:", true)}
-  >
-    {text}
-  </button>
-{/if}
-
-<style>
-  .button {
-    all: unset;
-  }
-</style>
+<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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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;

package/lib/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/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/edge/components/content/components/styles.svelte

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

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"];
     };