@builder.io/sdk-react 0.2.3 → 0.4.0

package/README.md

@@ -1,6 +1,72 @@
 # Builder.io React SDK v2 (BETA)
 
-This is the React v2 SDK. It is still in Beta: for the stable React v1 SDK [go here](../../../react/).
+This is the React v2 SDK, `@builder.io/sdk-react`.
+
+NOTE: it is still in Beta. For the stable React v1 SDK [go here](../../../react/), i.e. `builder.io/react`.
+
+## API Reference
+
+To use the SDK, you need to:
+
+- fetch the builder data using `getContent`: you can see how to use it here https://www.builder.io/c/docs/content-api, and how it differs from the React V1 SDK's `builder.get()` function.
+
+NOTE: if you are using the SDK in next v13's app directory, you will have to import `getContent` from @builder.io/sdk-react/server`. this is a special import that guarantees you don't import any client components with your data fetching.
+
+- pass that data to the `RenderContent` component, along with the following properties:
+
+```ts
+type RenderContentProps = {
+  content?: Nullable<BuilderContent>;
+  model?: string;
+  data?: { [key: string]: any };
+  context?: BuilderRenderContext;
+  apiKey: string;
+  apiVersion?: ApiVersion;
+  customComponents?: RegisteredComponent[];
+  canTrack?: boolean;
+  locale?: string;
+  includeRefs?: boolean;
+};
+```
+
+Here is a simplified example showing how you would use both:
+
+```tsx
+import { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-react';
+import { useEffect, useState } from 'react';
+
+const BUILDER_PUBLIC_API_KEY = 'YOUR API KEY';
+
+function App() {
+  const [content, setContent] = useState(undefined);
+
+  useEffect(() => {
+    getContent({
+      model: 'page',
+      apiKey: BUILDER_PUBLIC_API_KEY,
+      userAttributes: {
+        urlPath: window.location.pathname || '/',
+      },
+    }).then((content) => {
+      setContent(content);
+    });
+  }, []);
+
+  const shouldRenderBuilderContent = content || isPreviewing();
+
+  return shouldRenderBuilderContent ? (
+    <RenderContent
+      content={content}
+      model="page"
+      apiKey={BUILDER_PUBLIC_API_KEY}
+    />
+  ) : (
+    <div>Content Not Found</div>
+  );
+}
+```
+
+Look at the [examples](#examples) for more information.
 
 ## Mitosis
 
@@ -13,10 +79,13 @@ To check the status of the SDK, look at [these tables](../../README.md#feature-i
 ## Getting Started
 
 ```
-npm install @builder.io/sdk-react@dev
+npm install @builder.io/sdk-react
 ```
 
-Take a look at [our example repo](/examples/react-v2) for how to use this SDK.
+## Examples
+
+- [React](../../../../examples/react-v2/)
+- [Next.js + app dir](../../../../examples/next-app-directory)
 
 ## Fetch
 

package/dist/sdk/blocks/BaseText.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

package/dist/sdk/blocks/button/button.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function Button(props) {
     return (React.createElement(React.Fragment, null,

package/dist/sdk/blocks/columns/columns.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
@@ -50,7 +50,7 @@ function Columns(props) {
             };
         }
         const width = getColumnCssWidth(index);
-        const gutterPixels = `${gutterSize}px`;
+        const gutterPixels = `${gutter}px`;
         const mobileWidth = "100%";
         const mobileMarginLeft = 0;
         return {
@@ -108,17 +108,17 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-348c3b10", style: columnsCssVars() },
+                " div-08005e06", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-348c3b10-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-08005e06-2", style: columnCssVars(index), key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-348c3b10 {
+        React.createElement("style", null, `.div-08005e06 {
   display: flex;
   line-height: normal;
-}.div-348c3b10-2 {
+}.div-08005e06-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/custom-code/custom-code.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 function CustomCode(props) {

package/dist/sdk/blocks/embed/embed.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";

package/dist/sdk/blocks/fragment/fragment.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function FragmentComponent(props) {
     return React.createElement("span", null, props.children);

package/dist/sdk/blocks/image/image.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
 function Image(props) {

package/dist/sdk/blocks/img/img.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 function ImgComponent(props) {

package/dist/sdk/blocks/input/input.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 function FormInputComponent(props) {

package/dist/sdk/blocks/raw-text/raw-text.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function RawText(props) {
     return (React.createElement("span", { className: props.attributes?.class || props.attributes?.className, dangerouslySetInnerHTML: { __html: props.text || "" } }));

package/dist/sdk/blocks/section/section.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function SectionComponent(props) {
     return (React.createElement("section", { ...props.attributes, style: {

package/dist/sdk/blocks/select/select.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 function SelectComponent(props) {

package/dist/sdk/blocks/submit-button/submit-button.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function SubmitButton(props) {
     return (React.createElement("button", { type: "submit", ...props.attributes }, props.text));

package/dist/sdk/blocks/symbol/symbol.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content";
@@ -62,7 +62,7 @@ function Symbol(props) {
     return (React.createElement("div", { ...props.attributes, className: className },
         React.createElement(RenderContent, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...props.symbol?.data,
-                ...builderContext.state,
+                ...builderContext.localState,
                 ...contentToUse?.data?.state,
             }, model: props.symbol?.model, content: contentToUse })));
 }

package/dist/sdk/blocks/text/text.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function Text(props) {
     return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text }, style: {

package/dist/sdk/blocks/textarea/textarea.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function Textarea(props) {
     return (React.createElement("textarea", { ...props.attributes, placeholder: props.placeholder, name: props.name, value: props.value, defaultValue: props.defaultValue }));

package/dist/sdk/blocks/video/video.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function Video(props) {
     function videoProps() {

package/dist/sdk/components/render-block/block-styles.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
@@ -10,7 +10,9 @@ function BlockStyles(props) {
     function useBlock() {
         return getProcessedBlock({
             block: props.block,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             context: props.context.context,
             shouldEvaluateBindings: true,
         });

package/dist/sdk/components/render-block/render-block.helpers.d.ts

@@ -10,4 +10,3 @@ export declare const getRepeatItemData: ({ block, context, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
-export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

package/dist/sdk/components/render-block/render-block.helpers.js

@@ -27,7 +27,9 @@ export const isEmptyHtmlElement = (tagName) => {
 export const getComponent = ({ block, context, }) => {
     const componentName = getProcessedBlock({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false,
     }).component?.name;
@@ -57,7 +59,9 @@ export const getRepeatItemData = ({ block, context, }) => {
     }
     const itemsArray = evaluate({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
     });
     if (!Array.isArray(itemsArray)) {
@@ -68,8 +72,8 @@ export const getRepeatItemData = ({ block, context, }) => {
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
-            state: {
-                ...context.state,
+            localState: {
+                ...context.localState,
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -80,19 +84,3 @@ export const getRepeatItemData = ({ block, context, }) => {
     }));
     return repeatArray;
 };
-export const getProxyState = (context) => {
-    if (typeof Proxy === 'undefined') {
-        console.error('no Proxy available in this environment, cannot proxy state.');
-        return context.state;
-    }
-    const useState = new Proxy(context.state, {
-        set: (obj, prop, value) => {
-            // set the value on the state object, so that the event handler instantly gets the update.
-            obj[prop] = value;
-            // set the value in the context, so that the rest of the app gets the update.
-            context.setState?.(obj);
-            return true;
-        },
-    });
-    return useState;
-};

package/dist/sdk/components/render-block/render-block.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
@@ -6,7 +6,7 @@ import { getBlockComponentOptions } from "../../functions/get-block-component-op
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import BlockStyles from "./block-styles";
-import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -17,21 +17,25 @@ function RenderBlock(props) {
         block: props.block,
         context: props.context,
     }));
-    const [repeatItemData, setRepeatItemData] = useState(() => getRepeatItemData({
-        block: props.block,
-        context: props.context,
-    }));
+    function repeatItem() {
+        return getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        });
+    }
     function useBlock() {
-        return repeatItemData
+        return repeatItem()
             ? props.block
             : getProcessedBlock({
                 block: props.block,
-                state: props.context.state,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
                 context: props.context.context,
                 shouldEvaluateBindings: true,
             });
     }
-    const [tag, setTag] = useState(() => props.block.tagName || "div");
+    const [Tag, setTag] = useState(() => props.block.tagName || "div");
     function canShowBlock() {
         if ("hide" in useBlock()) {
             return !useBlock().hide;
@@ -41,11 +45,12 @@ function RenderBlock(props) {
         }
         return true;
     }
-    const [proxyState, setProxyState] = useState(() => getProxyState(props.context));
     function actions() {
         return getBlockActions({
             block: useBlock(),
-            state: TARGET === "qwik" ? props.context.state : proxyState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
             context: props.context.context,
         });
     }
@@ -71,7 +76,7 @@ function RenderBlock(props) {
          * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
          * blocks, and the children will be repeated within those blocks.
          */
-        const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
+        const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
         return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
     }
     function childrenContext() {
@@ -88,10 +93,11 @@ function RenderBlock(props) {
         return {
             apiKey: props.context.apiKey,
             apiVersion: props.context.apiVersion,
-            state: props.context.state,
+            localState: props.context.localState,
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
             content: props.context.content,
             context: props.context.context,
-            setState: props.context.setState,
             registeredComponents: props.context.registeredComponents,
             inheritedStyles: getInheritedTextStyles(),
         };
@@ -118,13 +124,12 @@ function RenderBlock(props) {
             context: childrenContext(),
         };
     }
-    const TagRef = tag;
     return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
-        isEmptyHtmlElement(tag) ? (React.createElement(React.Fragment, null,
-            React.createElement(TagRef, { ...attributes(), ...actions() }))) : null,
-        !isEmptyHtmlElement(tag) && repeatItemData ? (React.createElement(React.Fragment, null, repeatItemData?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
-        !isEmptyHtmlElement(tag) && !repeatItemData ? (React.createElement(React.Fragment, null,
-            React.createElement(TagRef, { ...attributes(), ...actions() },
+        isEmptyHtmlElement(Tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
+        !isEmptyHtmlElement(Tag) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RenderRepeatedBlock, { key: index, repeatContext: data.context, block: data.block }))))) : null,
+        !isEmptyHtmlElement(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() },
                 React.createElement(RenderComponent, { ...renderComponentProps() }),
                 childrenWithoutParentComponent()?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: childrenContext() }))),
                 childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext() })))))) : null)) : (React.createElement(React.Fragment, null,

package/dist/sdk/components/render-block/render-component.js

@@ -1,11 +1,10 @@
-"use client";
+'use client';
 import * as React from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";
 function RenderComponent(props) {
-    const ComponentRefRef = props.componentRef;
     return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
-        React.createElement(ComponentRefRef, { ...props.componentOptions },
+        React.createElement(props.componentRef, { ...props.componentOptions },
             props.blockChildren?.map((child) => (React.createElement(RenderBlock, { key: "render-block-" + child.id, block: child, context: props.context }))),
             props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
 }

package/dist/sdk/components/render-block/render-repeated-block.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 /**
  * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
@@ -14,8 +14,9 @@ import RenderBlock from "./render-block";
 function RenderRepeatedBlock(props) {
     return (React.createElement(BuilderContext.Provider, { value: {
             content: props.repeatContext.content,
-            state: props.repeatContext.state,
-            setState: props.repeatContext.setState,
+            localState: props.repeatContext.localState,
+            rootState: props.repeatContext.rootState,
+            rootSetState: props.repeatContext.rootSetState,
             context: props.repeatContext.context,
             apiKey: props.repeatContext.apiKey,
             registeredComponents: props.repeatContext.registeredComponents,

package/dist/sdk/components/render-blocks.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

package/dist/sdk/components/render-content/builder-editing.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 function BuilderEditing(props) {
     return React.createElement("div", null);

package/dist/sdk/components/render-content/components/render-styles.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState } from "react";
 import RenderInlinedStyles from "../../render-inlined-styles";
@@ -26,7 +26,7 @@ ${getFontCss({
   text-align: inherit;
   font-family: inherit;
 }
-`);
+`.trim());
     return React.createElement(RenderInlinedStyles, { styles: injectedStyles });
 }
 export default RenderContentStyles;

package/dist/sdk/components/render-content/render-content.js

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
@@ -19,6 +19,8 @@ import { getInteractionPropertiesForEvent } from "../../functions/track/interact
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 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";
 function RenderContent(props) {
     const elementRef = useRef(null);
     const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
@@ -58,8 +60,8 @@ function RenderContent(props) {
         data: props.data,
         locale: props.locale,
     }));
-    function setContextState(newState) {
-        setContentState(newState);
+    function contentSetState(newRootState) {
+        setContentState(newRootState);
     }
     const [allRegisteredComponents, setAllRegisteredComponents] = useState(() => [
         ...getDefaultRegisteredComponents(),
@@ -70,9 +72,12 @@ function RenderContent(props) {
         // which is the new standard way of providing custom components, and must therefore take precedence.
         ...components,
         ...(props.customComponents || []),
-    ].reduce((acc, curr) => ({
+    ].reduce((acc, { component, ...curr }) => ({
         ...acc,
-        [curr.name]: curr,
+        [curr.name]: {
+            component: TARGET === "vue3" ? wrapComponentRef(component) : component,
+            ...curr,
+        },
     }), {}));
     function processMessage(event) {
         const { data } = event;
@@ -117,7 +122,9 @@ function RenderContent(props) {
             evaluate({
                 code: jsCode,
                 context: props.context || {},
-                state: contentState,
+                localState: undefined,
+                rootState: contentState,
+                rootSetState: contentSetState,
             });
         }
     }
@@ -145,7 +152,9 @@ function RenderContent(props) {
         return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
             code: group,
             context: props.context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         }));
     }
     function handleRequest({ url, key }) {
@@ -156,7 +165,7 @@ function RenderContent(props) {
                 ...contentState,
                 [key]: json,
             };
-            setContextState(newState);
+            contentSetState(newState);
         })
             .catch((err) => {
             console.error("error fetching dynamic data", url, err);
@@ -186,6 +195,11 @@ function RenderContent(props) {
             }));
         }
     }
+    const [scriptStr, setScriptStr] = useState(() => getRenderContentScriptString({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        contentId: props.content?.id,
+        parentContentId: props.parentContentId,
+    }));
     useEffect(() => {
         if (!props.apiKey) {
             logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
@@ -205,6 +219,11 @@ function RenderContent(props) {
                             includeRefs: props.includeRefs,
                         }
                         : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
                 });
                 Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                     const message = createRegisterComponentMessage(registeredComponent);
@@ -280,15 +299,30 @@ function RenderContent(props) {
     }, []);
     return (React.createElement(builderContext.Provider, { value: {
             content: useContent,
-            state: contentState,
-            setState: setContextState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: TARGET === "qwik" ? undefined : contentSetState,
             context: props.context || {},
             apiKey: props.apiKey,
             apiVersion: props.apiVersion,
             registeredComponents: allRegisteredComponents,
             inheritedStyles: {},
         } }, useContent ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
+        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model, ...(TARGET === "reactNative"
+                ? {
+                    dataSet: {
+                        // currently, we can't set the actual ID here. // we don't need it right now, we just need to identify content divs for testing.
+                        "builder-content-id": "",
+                    },
+                }
+                : {}), ...(props.hideContent
+                ? {
+                    hidden: true,
+                    "aria-hidden": true,
+                }
+                : {}), className: props.classNameProp },
+            props.isSsrAbTest ? (React.createElement(React.Fragment, null,
+                React.createElement("script", { dangerouslySetInnerHTML: { __html: scriptStr } }))) : null,
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(RenderContentStyles, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
             React.createElement(RenderBlocks, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));

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

@@ -2,7 +2,7 @@ import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } fr
 import type { BuilderContent } from '../../types/builder-content';
 import type { Nullable } from '../../types/typescript';
 import type { ApiVersion } from '../../types/api-version';
-export type RenderContentProps = {
+export interface RenderContentProps {
     content?: Nullable<BuilderContent>;
     model?: string;
     data?: {
@@ -14,8 +14,17 @@ export type RenderContentProps = {
     customComponents?: RegisteredComponent[];
     canTrack?: boolean;
     locale?: string;
+    /** @deprecated use `enrich` instead **/
     includeRefs?: boolean;
-};
+    enrich?: boolean;
+    /**
+     * 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;
+}
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {