@builder.io/sdk-react 0.3.1 → 0.4.0

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

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

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

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";
@@ -35,7 +35,7 @@ function RenderBlock(props) {
                 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;
@@ -124,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) && 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(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.

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);
@@ -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;
@@ -190,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.");
@@ -209,6 +219,11 @@ function RenderContent(props) {
                             includeRefs: props.includeRefs,
                         }
                         : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
                 });
                 Object.values(allRegisteredComponents).forEach((registeredComponent) => {
                     const message = createRegisterComponentMessage(registeredComponent);
@@ -293,7 +308,21 @@ function RenderContent(props) {
             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: {

package/dist/sdk/components/render-content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

package/dist/sdk/components/render-content/wrap-component-ref.js

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

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

@@ -1,5 +1,6 @@
 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 checkShouldRunVariants: ({ canTrack, content, }: {
     canTrack: Nullable<boolean>;
     content: Nullable<BuilderContent>;
@@ -9,4 +10,8 @@ type VariantData = {
     testRatio?: number;
 };
 export declare const getVariantsScriptString: (variants: VariantData[], contentId: string) => string;
+export declare const getRenderContentScriptString: ({ parentContentId, contentId, }: {
+    contentId: string;
+    parentContentId: string;
+}) => string;
 export {};