@builder.io/sdk-svelte 0.4.4 → 0.4.5

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "type": "module",
   "files": [
     "package",
@@ -64,6 +64,8 @@
     "./blocks/util": "./blocks/util.js",
     "./blocks/video/component-info": "./blocks/video/component-info.js",
     "./blocks/video/video.svelte": "./blocks/video/video.svelte",
+    "./components/inlined-script.svelte": "./components/inlined-script.svelte",
+    "./components/inlined-styles.svelte": "./components/inlined-styles.svelte",
     "./components/render-block/block-styles.svelte": "./components/render-block/block-styles.svelte",
     "./components/render-block/render-block.helpers": "./components/render-block/render-block.helpers.js",
     "./components/render-block/render-block.svelte": "./components/render-block/render-block.svelte",
@@ -81,7 +83,7 @@
     "./components/render-content/wrap-component-ref": "./components/render-content/wrap-component-ref.js",
     "./components/render-content-variants/helpers": "./components/render-content-variants/helpers.js",
     "./components/render-content-variants/render-content-variants.svelte": "./components/render-content-variants/render-content-variants.svelte",
-    "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
+    "./components/render-content-variants/render-content-variants.types": "./components/render-content-variants/render-content-variants.types.js",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
     "./constants/sdk-version": "./constants/sdk-version.js",
@@ -151,6 +153,7 @@
     "./types/components": "./types/components.js",
     "./types/deep-partial": "./types/deep-partial.js",
     "./types/element": "./types/element.js",
+    "./types/enforced-partials": "./types/enforced-partials.js",
     "./types/input": "./types/input.js",
     "./types/targets": "./types/targets.js",
     "./types/typescript": "./types/typescript.js"

package/package/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 0.4.5
+
+- Fix: show dynamic symbols correctly in Preview mode.
+- Feature: SSR A/B test Symbols nested inside page content.
+
+### 0.4.4
+
+- Fix: tracking URL from `builder.io/api/v1/track` to `cdn.builder.io/api/v1/track` for improved reliability.
+
 ### 0.4.3
 
 - Fix: SSR A/B test environment check (`isHydrationTarget`) now accurately checks current environment.

package/package/blocks/columns/columns.svelte

@@ -3,7 +3,7 @@
 <script>import { getContext } from "svelte";
 import RenderBlocks from "../../components/render-blocks.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
+import InlinedStyles from "../../components/inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
 export let space;
@@ -130,7 +130,7 @@ let flexDir = stackColumnsAt === "never"
   }}
 >
   {#if TARGET !== "reactNative"}
-    <RenderInlinedStyles styles={columnsStyles()} />
+    <InlinedStyles styles={columnsStyles()} />
   {/if}
 
   {#each columns as column, index (index)}

package/package/blocks/symbol/symbol.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { getContext, onMount } from "svelte";
-import RenderContent from "../../components/render-content/render-content.svelte";
+import RenderContentVariants from "../../components/render-content-variants/render-content-variants.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
@@ -55,9 +55,11 @@ function fetchContent() {
             model: symbol.model,
             apiKey: $builderContext.apiKey,
             apiVersion: $builderContext.apiVersion,
-            query: {
-                id: symbol.entry,
-            },
+            ...(symbol?.entry && {
+                query: {
+                    id: symbol.entry,
+                },
+            }),
         })
             .then((response) => {
             if (response) {
@@ -97,7 +99,8 @@ $: onUpdateFn_0(...[symbol]);
   class={className}
   use:setAttrs={filterAttrs(attributes, isEvent)}
 >
-  <RenderContent
+  <RenderContentVariants
+    __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
     context={$builderContext.context}

package/package/blocks/text/text.svelte

@@ -17,5 +17,5 @@ function mitosis_styling(node, vars) {
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text">{@html text}</span
+  class="builder-text">{@html text?.toString()}</span
 >

package/package/blocks/text/text.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 export interface TextProps {
-    text: string;
+    text?: string;
 }
 declare const __propDef: {
     props: {

package/package/components/inlined-script.svelte

@@ -0,0 +1,7 @@
+<script context="module"></script>
+
+<script>export let scriptStr;
+export let id;
+</script>
+
+<svelte:element this={"script"} {id}>{@html scriptStr}</svelte:element>

package/package/components/inlined-script.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+interface Props {
+    scriptStr: string;
+    id?: string;
+}
+declare const __propDef: {
+    props: {
+        scriptStr: Props["scriptStr"];
+        id: Props["id"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlinedScriptProps = typeof __propDef.props;
+export type InlinedScriptEvents = typeof __propDef.events;
+export type InlinedScriptSlots = typeof __propDef.slots;
+export default class InlinedScript extends SvelteComponentTyped<InlinedScriptProps, InlinedScriptEvents, InlinedScriptSlots> {
+}
+export {};

package/package/components/inlined-styles.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+interface Props {
+    styles: string;
+    id?: string;
+}
+declare const __propDef: {
+    props: {
+        styles: Props["styles"];
+        id: Props["id"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InlinedStylesProps = typeof __propDef.props;
+export type InlinedStylesEvents = typeof __propDef.events;
+export type InlinedStylesSlots = typeof __propDef.slots;
+export default class InlinedStyles extends SvelteComponentTyped<InlinedStylesProps, InlinedStylesEvents, InlinedStylesSlots> {
+}
+export {};

package/package/components/render-block/block-styles.svelte

@@ -5,7 +5,7 @@ import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import RenderInlinedStyles from "../render-inlined-styles.svelte";
+import InlinedStyles from "../inlined-styles.svelte";
 export let block;
 export let context;
 $: useBlock = () => {
@@ -64,5 +64,5 @@ $: css = () => {
 </script>
 
 {#if TARGET !== "reactNative" && css() && canShowBlock()}
-  <RenderInlinedStyles styles={css()} />
+  <InlinedStyles styles={css()} />
 {/if}

package/package/components/render-content/components/render-styles.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+<script>import InlinedStyles from "../../inlined-styles.svelte";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 export let cssCode;
@@ -30,4 +30,4 @@ ${getFontCss({
 `.trim();
 </script>
 
-<RenderInlinedStyles styles={injectedStyles} />
+<InlinedStyles styles={injectedStyles} />

package/package/components/render-content/render-content.svelte

@@ -20,6 +20,7 @@ import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
 import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
 import { wrapComponentRef } from "./wrap-component-ref.js";
+import InlinedScript from "../inlined-script.svelte";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");
 const filterAttrs = (attrs = {}, filter) => {
@@ -52,12 +53,11 @@ export let model;
 export let context;
 export let apiKey;
 export let content;
-export let parentContentId;
 export let data;
 export let locale;
 export let apiVersion;
 export let customComponents;
-export let hideContent;
+export let showContent;
 export let classNameProp;
 export let isSsrAbTest;
 export let includeRefs;
@@ -212,9 +212,10 @@ let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
 let httpReqsData = {};
 let clicked = false;
 let scriptStr = getRenderContentScriptString({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+    variationId: content?.testVariationId,
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: content?.id,
-    parentContentId: parentContentId,
 });
 let builderContextSignal = writable({
     content: getContentInitialValue({
@@ -376,12 +377,12 @@ onDestroy(() => {
         : {},
       isNonEvent
     )}
-    {...hideContent
-      ? {
+    {...showContent
+      ? {}
+      : {
           hidden: true,
           "aria-hidden": true,
-        }
-      : {}}
+        }}
     class={classNameProp}
     use:setAttrs={filterAttrs(
       TARGET === "reactNative"
@@ -397,7 +398,7 @@ onDestroy(() => {
     )}
   >
     {#if isSsrAbTest}
-      <svelte:element this={"script"}>{@html scriptStr}</svelte:element>
+      <InlinedScript {scriptStr} />
     {/if}
 
     {#if TARGET !== "reactNative"}

package/package/components/render-content/render-content.svelte.d.ts

@@ -7,12 +7,11 @@ declare const __propDef: {
         context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
         content: RenderContentProps["content"];
-        parentContentId: RenderContentProps["parentContentId"];
         data: RenderContentProps["data"];
         locale: RenderContentProps["locale"];
         apiVersion: RenderContentProps["apiVersion"];
         customComponents: RenderContentProps["customComponents"];
-        hideContent: RenderContentProps["hideContent"];
+        showContent: RenderContentProps["showContent"];
         classNameProp: RenderContentProps["classNameProp"];
         isSsrAbTest: RenderContentProps["isSsrAbTest"];
         includeRefs: RenderContentProps["includeRefs"];

package/package/components/render-content/render-content.types.d.ts

@@ -1,30 +1,15 @@
-import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
-import type { BuilderContent } from '../../types/builder-content';
-import type { Nullable } from '../../types/typescript';
-import type { ApiVersion } from '../../types/api-version';
-export interface RenderContentProps {
-    content?: Nullable<BuilderContent>;
-    model?: string;
-    data?: {
-        [key: string]: any;
-    };
-    context?: BuilderRenderContext;
-    apiKey: string;
-    apiVersion?: ApiVersion;
-    customComponents?: RegisteredComponent[];
-    canTrack?: boolean;
-    locale?: string;
-    /** @deprecated use `enrich` instead **/
-    includeRefs?: boolean;
-    enrich?: boolean;
+import type { BuilderRenderState } from '../../context/types';
+import type { EnforcePartials } from '../../types/enforced-partials';
+import type { RenderContentVariantsProps } from '../render-content-variants/render-content-variants.types';
+interface InternalRenderProps {
     /**
      * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
      */
-    classNameProp?: string;
-    hideContent?: boolean;
-    parentContentId?: string;
-    isSsrAbTest?: boolean;
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
 }
+export type RenderContentProps = InternalRenderProps & EnforcePartials<RenderContentVariantsProps>;
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {
@@ -36,3 +21,4 @@ export interface BuilderComponentStateChange {
         };
     };
 }
+export {};

package/package/components/render-content-variants/helpers.d.ts

@@ -1,6 +1,29 @@
 import type { Nullable } from '../../helpers/nullable';
 import type { BuilderContent } from '../../types/builder-content';
-export declare const getVariants: (content: Nullable<BuilderContent>) => import("../../types/builder-content").BuilderContentVariation[];
+export declare const getVariants: (content: Nullable<BuilderContent>) => {
+    testVariationId: string | undefined;
+    id: string | undefined;
+    data?: {
+        [key: string]: any;
+        title?: string | undefined;
+        blocks?: import("../../types/builder-block").BuilderBlock[] | undefined;
+        inputs?: import("../../types/input").Input[] | undefined;
+        state?: {
+            [key: string]: any;
+        } | undefined;
+        jsCode?: string | undefined;
+        tsCode?: string | undefined;
+        httpRequests?: {
+            [key: string]: string;
+        } | undefined;
+    } | undefined;
+    name?: string | undefined;
+    testRatio?: number | undefined;
+    meta?: {
+        [key: string]: any;
+        breakpoints?: import("../../types/typescript").Nullable<import("../../types/builder-content").Breakpoints>;
+    } | undefined;
+}[];
 export declare const checkShouldRunVariants: ({ canTrack, content, }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
@@ -9,9 +32,10 @@ type VariantData = {
     id: string;
     testRatio?: number;
 };
+export declare const getScriptString: () => string;
 export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
-export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+export declare const getRenderContentScriptString: ({ contentId, variationId, }: {
+    variationId: string;
     contentId: string;
-    parentContentId: string;
 }) => string;
 export {};

package/package/components/render-content-variants/helpers.js

@@ -1,17 +1,32 @@
 import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {});
+export const getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
+    ...variant,
+    testVariationId: variant.id,
+    id: content?.id,
+}));
 export const checkShouldRunVariants = ({ canTrack, content, }) => {
     const hasVariants = getVariants(content).length > 0;
-    if (!hasVariants) {
+    /**
+     * We cannot SSR in React-Native.
+     */
+    if (TARGET === 'reactNative')
         return false;
-    }
-    if (!canTrack) {
+    if (!hasVariants)
         return false;
-    }
-    if (isBrowser()) {
+    if (!canTrack)
+        return false;
+    /**
+     * For Vue 2 and Vue 3, we need to (initially) render the variants. This is to avoid hydration mismatch errors.
+     * Unlike React, Vue's hydration checks are shallow and do not check the attributes/contents of each element, so we
+     * are able to modify the `hidden` HTML attributes and `display` CSS properties without causing a hydration mismatch error.
+     *
+     * NOTE: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
+     */
+    if (TARGET === 'vue2' || TARGET === 'vue3')
+        return true;
+    if (isBrowser())
         return false;
-    }
     return true;
 };
 /**
@@ -77,13 +92,14 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.getElementById(`variants-styles-${contentId}`);
+    const styleEl = document.currentScript
+        ?.previousElementSibling;
     /**
      * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
      */
     if (isHydrationTarget) {
         styleEl.remove();
-        const thisScriptEl = document.getElementById(`variants-script-${contentId}`);
+        const thisScriptEl = document.currentScript;
         thisScriptEl?.remove();
     }
     else {
@@ -96,7 +112,6 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         `;
         })
             .join('');
-        /* TO-DO: check if this actually updates the style */
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -122,8 +137,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     const cookieName = `builder.tests.${defaultContentId}`;
     const variantId = getCookie(cookieName);
-    /** get parent div by searching on `builder-content-id` attr */
-    const parentDiv = document.querySelector(`[builder-content-id="${variantContentId}"]`);
+    const parentDiv = document.currentScript?.parentElement;
     const variantIsDefaultContent = variantContentId === defaultContentId;
     if (variantId === variantContentId) {
         if (variantIsDefaultContent) {
@@ -156,10 +170,7 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget) {
     }
     return;
 }
-const getIsHydrationTarget = (target) => target === 'react' ||
-    target === 'reactNative' ||
-    target === 'vue3' ||
-    target === 'vue2';
+const getIsHydrationTarget = (target) => target === 'react' || target === 'reactNative';
 const isHydrationTarget = getIsHydrationTarget(TARGET);
 /**
  * We hardcode explicit function names here, because the `.toString()` of a function can change depending on the bundler.
@@ -167,18 +178,21 @@ const isHydrationTarget = getIsHydrationTarget(TARGET);
  *
  * So we hardcode the function names here, and then use those names in the script string to make sure the function names are consistent.
  */
-const AB_TEST_FN_NAME = 'bldrAbTest';
-const CONTENT_FN_NAME = 'bldrCntntScrpt';
-export const getVariantsScriptString = (variants, contentId) => {
+const AB_TEST_FN_NAME = 'builderIoAbTest';
+const CONTENT_FN_NAME = 'builderIoRenderContent';
+export const getScriptString = () => {
     const fnStr = bldrAbTest.toString().replace(/\s+/g, ' ');
     const fnStr2 = bldrCntntScrpt.toString().replace(/\s+/g, ' ');
     return `
-  const ${AB_TEST_FN_NAME} = ${fnStr}
-  const ${CONTENT_FN_NAME} = ${fnStr2}
-  ${AB_TEST_FN_NAME}("${contentId}", ${JSON.stringify(variants)}, ${isHydrationTarget})
+  window.${AB_TEST_FN_NAME} = ${fnStr}
+  window.${CONTENT_FN_NAME} = ${fnStr2}
   `;
 };
-export const getRenderContentScriptString = ({ parentContentId, contentId, }) => {
+export const getVariantsScriptString = (variants, contentId) => {
+    return `
+  window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
+};
+export const getRenderContentScriptString = ({ contentId, variationId, }) => {
     return `
-  ${CONTENT_FN_NAME}("${contentId}", "${parentContentId}", ${isHydrationTarget})`;
+  window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

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

@@ -1,70 +1,97 @@
 <script context="module"></script>
 
-<script>import { checkShouldRunVariants, getVariants, getVariantsScriptString, } from "./helpers";
+<script>import { onMount } from "svelte";
+import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers";
 import RenderContent from "../render-content/render-content.svelte";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
-import RenderInlinedStyles from "../render-inlined-styles.svelte";
+import InlinedStyles from "../inlined-styles.svelte";
 import { handleABTestingSync } from "../../helpers/ab-tests";
-export let content;
+import InlinedScript from "../inlined-script.svelte";
+import { TARGET } from "../../constants/target";
 export let canTrack;
+export let content;
+export let __isNestedRender;
+export let model;
+export let data;
+export let context;
 export let apiKey;
 export let apiVersion;
 export let customComponents;
-export let model;
-let variantScriptStr = getVariantsScriptString(getVariants(content).map((value) => ({
-    id: value.id,
-    testRatio: value.testRatio,
-})), content?.id || "");
+export let locale;
+export let includeRefs;
+export let enrich;
 let shouldRenderVariants = checkShouldRunVariants({
     canTrack: getDefaultCanTrack(canTrack),
     content: content,
 });
+let variantScriptStr = getVariantsScriptString(getVariants(content).map((value) => ({
+    id: value.testVariationId,
+    testRatio: value.testRatio,
+})), content?.id || "");
 let hideVariantsStyleString = getVariants(content)
-    .map((value) => `.variant-${value.id} { display: none; } `)
+    .map((value) => `.variant-${value.testVariationId} { display: none; } `)
     .join("");
-let contentToRender = checkShouldRunVariants({
-    canTrack: getDefaultCanTrack(canTrack),
-    content: content,
-})
-    ? content
-    : handleABTestingSync({
-        item: content,
-        canTrack: getDefaultCanTrack(canTrack),
-    });
+onMount(() => {
+    /**
+     * We unmount the non-winning variants post-hydration in Vue.
+     */
+    if (TARGET === "vue2" || TARGET === "vue3") {
+        shouldRenderVariants = false;
+    }
+});
 </script>
 
+{#if !__isNestedRender && TARGET !== "reactNative"}
+  <InlinedScript scriptStr={getScriptString()} />
+{/if}
+
 {#if shouldRenderVariants}
-  <RenderInlinedStyles
+  <InlinedStyles
     id={`variants-styles-${content?.id}`}
     styles={hideVariantsStyleString}
   />
 
-  <svelte:element this={"script"} id={`variants-script-${content?.id}`}
-    >{@html variantScriptStr}</svelte:element
-  >
+  <InlinedScript scriptStr={variantScriptStr} />
 
-  {#each getVariants(content) as variant (variant.id)}
+  {#each getVariants(content) as variant (variant.testVariationId)}
     <RenderContent
       content={variant}
+      showContent={false}
+      classNameProp={undefined}
+      {model}
+      {data}
+      {context}
       {apiKey}
       {apiVersion}
-      {canTrack}
       {customComponents}
-      hideContent={true}
-      parentContentId={content?.id}
+      {canTrack}
+      {locale}
+      {includeRefs}
+      {enrich}
       isSsrAbTest={shouldRenderVariants}
     />
   {/each}
 {/if}
 
 <RenderContent
+  {...{}}
+  content={shouldRenderVariants
+    ? content
+    : handleABTestingSync({
+        item: content,
+        canTrack: getDefaultCanTrack(canTrack),
+      })}
+  classNameProp={`variant-${content?.id}`}
+  showContent={true}
   {model}
-  content={contentToRender}
+  {data}
+  {context}
   {apiKey}
   {apiVersion}
-  {canTrack}
   {customComponents}
-  classNameProp={`variant-${content?.id}`}
-  parentContentId={content?.id}
+  {canTrack}
+  {locale}
+  {includeRefs}
+  {enrich}
   isSsrAbTest={shouldRenderVariants}
 />

package/package/components/render-content-variants/render-content-variants.svelte.d.ts

@@ -1,14 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
-type VariantsProviderProps = RenderContentProps;
-import type { RenderContentProps } from "../render-content/render-content.types";
+type VariantsProviderProps = RenderContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { RenderContentVariantsProps } from "./render-content-variants.types";
 declare const __propDef: {
     props: {
-        content: VariantsProviderProps["content"];
         canTrack: VariantsProviderProps["canTrack"];
+        content: VariantsProviderProps["content"];
+        __isNestedRender: VariantsProviderProps["__isNestedRender"];
+        model: VariantsProviderProps["model"];
+        data: VariantsProviderProps["data"];
+        context: VariantsProviderProps["context"];
         apiKey: VariantsProviderProps["apiKey"];
         apiVersion: VariantsProviderProps["apiVersion"];
         customComponents: VariantsProviderProps["customComponents"];
-        model: VariantsProviderProps["model"];
+        locale: VariantsProviderProps["locale"];
+        includeRefs: VariantsProviderProps["includeRefs"];
+        enrich: VariantsProviderProps["enrich"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/render-content-variants/render-content-variants.types.d.ts

@@ -0,0 +1,20 @@
+import type { BuilderRenderContext, RegisteredComponent } from '../../context/types';
+import type { ApiVersion } from '../../types/api-version';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+export interface RenderContentVariantsProps {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    apiVersion?: ApiVersion;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    /** @deprecated use `enrich` instead **/
+    includeRefs?: boolean;
+    enrich?: boolean;
+}