@builder.io/sdk-react-nextjs 0.4.6-0 → 0.5.1

package/README.md

@@ -1,8 +1,8 @@
-# Builder.io React SDK v2 (BETA)
+# Builder.io React NextJS SDK (BETA)
 
-This is the React v2 SDK, `@builder.io/sdk-react`.
+This is the Builder NextJS SDK, `@builder.io/sdk-react-nextjs`. It is intended to be used _only_ with NextJS's app directory, and has hard dependencies on NextJS-specific functionality that only works in the app directory.
 
-NOTE: it is still in Beta. For the stable React v1 SDK [go here](../../../react/), i.e. `builder.io/react`.
+If you are using NextJS's pages directory, use the [React gen2 SDK](../react/) in Beta, or the stable React gen1 SDK [here](../../../react/) (i.e. `builder.io/react`).
 
 ## API Reference
 
@@ -10,8 +10,6 @@ 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
@@ -29,40 +27,35 @@ type RenderContentProps = {
 };
 ```
 
-Here is a simplified example showing how you would use both:
+Here is a simplified example showing how you would use both. This needs to be created created with the name `app/[[...slug]]/page.tsx`, so it catches all routes:
 
 ```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>
-  );
+import {
+  RenderContent,
+  getBuilderSearchParams,
+  getContent,
+} from '@builder.io/sdk-react-nextjs';
+
+interface MyPageProps {
+  params: {
+    slug: string[];
+  };
+  searchParams: Record<string, string>;
+}
+
+const apiKey = 'YOUR_API_KEY_HERE';
+
+export default async function Page(props: MyPageProps) {
+  const urlPath = '/' + (props.params?.slug?.join('/') || '');
+
+  const content = await getContent({
+    model: 'page',
+    apiKey,
+    options: getBuilderSearchParams(props.searchParams),
+    userAttributes: { urlPath },
+  });
+
+  return <RenderContent content={content} model="page" apiKey={apiKey} />;
 }
 ```
 
@@ -79,14 +72,9 @@ To check the status of the SDK, look at [these tables](../../README.md#feature-i
 ## Getting Started
 
 ```
-npm install @builder.io/sdk-react
+npm install @builder.io/sdk-react-nextjs
 ```
 
 ## Examples
 
-- [React](../../../../examples/react-v2/)
-- [Next.js + app dir](../../../../examples/next-app-directory)
-
-## Fetch
-
-This Package uses fetch. See [these docs](https://github.com/BuilderIO/this-package-uses-fetch/blob/main/README.md) for more information.
+- [Next.js SDK](../../../../examples/next-js-sdk-gen-2-experimental-app-directory)

package/dist/blocks/button/button.d.ts

@@ -1,7 +1,6 @@
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-export interface ButtonProps {
+ */ export interface ButtonProps {
     attributes?: any;
     text?: string;
     link?: string;

package/dist/blocks/button/button.js

@@ -4,8 +4,8 @@ function Button(props) {
     return (React.createElement(React.Fragment, null,
         props.link ? (React.createElement(React.Fragment, null,
             React.createElement("a", { role: "button", ...props.attributes, href: props.link, target: props.openLinkInNewTab ? "_blank" : undefined }, props.text))) : (React.createElement(React.Fragment, null,
-            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-533f77e6" }, props.text))),
-        React.createElement("style", null, `.button-533f77e6 {
+            React.createElement("button", { ...props.attributes, style: props.attributes.style, className: props.attributes.className + " button-7267e9c6" }, props.text))),
+        React.createElement("style", null, `.button-7267e9c6 {
   all: unset;
 }`)));
 }

package/dist/blocks/columns/columns.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import Blocks from "../../components/blocks/blocks.js";
+import Blocks from "../../components/blocks/blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-import InlinedStyles from "../../components/inlined-styles.js";
+import InlinedStyles from "../../components/inlined-styles";
 import { TARGET } from "../../constants/target.js";
 function Columns(props) {
     const gutterSize = typeof props.space === "number" ? props.space || 0 : 20;
@@ -100,17 +100,17 @@ function Columns(props) {
     };
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-71b923fc", style: columnsCssVars() },
+                " div-3ec60680", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
                 React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-71b923fc-2", style: columnCssVars(index), key: index },
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-3ec60680-2", style: columnCssVars(index), key: index },
                 React.createElement(Blocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     }, context: props.builderContext, registeredComponents: props.builderComponents }))))),
-        React.createElement("style", null, `.div-71b923fc {
+        React.createElement("style", null, `.div-3ec60680 {
   display: flex;
   line-height: normal;
-}.div-71b923fc-2 {
+}.div-3ec60680-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/blocks/embed/component-info.js

@@ -10,7 +10,8 @@ export const componentInfo = {
             onChange: (options) => {
                 const url = options.get('url');
                 if (url) {
-                    options.set('content', 'Loading...'); // TODO: get this out of here!
+                    options.set('content', 'Loading...');
+                    // TODO: get this out of here!
                     const apiKey = 'ae0e60e78201a3f2b0de4b';
                     return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get('url') === url) {

package/dist/blocks/image/component-info.js

@@ -44,7 +44,8 @@ export const componentInfo = {
                     return Math.round(num * 1000) / 1000;
                 }
                 const value = options.get('image');
-                const aspectRatio = options.get('aspectRatio'); // For SVG images - don't render as webp, keep them as SVG
+                const aspectRatio = options.get('aspectRatio');
+                // For SVG images - don't render as webp, keep them as SVG
                 fetch(value).then(res => res.blob()).then(blob => {
                     if (blob.type.includes('svg')) {
                         options.set('noWebp', true);

package/dist/blocks/image/image.js

@@ -5,7 +5,8 @@ function Image(props) {
     function srcSetToUse() {
         const imageToUse = props.image || props.src;
         const url = imageToUse;
-        if (!url || // We can auto add srcset for cdn.builder.io and shopify
+        if (!url ||
+            // We can auto add srcset for cdn.builder.io and shopify
             // images, otherwise you can supply this prop manually
             !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
             return props.srcset;
@@ -51,23 +52,23 @@ function Image(props) {
                         ...aspectRatioCss(),
                     }, className: "builder-image" +
                         (props.className ? " " + props.className : "") +
-                        " img-0abd4ebe", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
+                        " img-7c5f6b46", src: props.image, srcSet: srcSetToUse(), sizes: props.sizes })),
             props.aspectRatio &&
                 !(props.builderBlock?.children?.length && props.fitContent) ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "builder-image-sizer div-0abd4ebe", style: {
+                React.createElement("div", { className: "builder-image-sizer div-7c5f6b46", style: {
                         paddingTop: props.aspectRatio * 100 + "%",
                     } }))) : null,
             props.builderBlock?.children?.length && props.fitContent ? (React.createElement(React.Fragment, null, props.children)) : null,
             !props.fitContent && props.children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "div-0abd4ebe-2" }, props.children))) : null),
-        React.createElement("style", null, `.img-0abd4ebe {
+                React.createElement("div", { className: "div-7c5f6b46-2" }, props.children))) : null),
+        React.createElement("style", null, `.img-7c5f6b46 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-0abd4ebe {
+}.div-7c5f6b46 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-0abd4ebe-2 {
+}.div-7c5f6b46-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/blocks/img/img.d.ts

@@ -1,7 +1,6 @@
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-export interface ImgProps {
+ */ export interface ImgProps {
     attributes?: any;
     imgSrc?: string;
     image?: string;

package/dist/blocks/section/section.d.ts

@@ -1,7 +1,6 @@
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SectionProps {
+ */ export interface SectionProps {
     maxWidth?: number;
     attributes?: any;
     children?: any;

package/dist/blocks/symbol/symbol.d.ts

@@ -1,7 +1,6 @@
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SymbolInfo {
+ */ export interface SymbolInfo {
     model?: string;
     entry?: string;
     data?: any;
@@ -11,8 +10,7 @@ export interface SymbolInfo {
 }
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-export interface SymbolProps extends BuilderComponentsProp {
+ */ export interface SymbolProps extends BuilderComponentsProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
     dynamic?: boolean;

package/dist/blocks/symbol/symbol.helpers.js

@@ -10,7 +10,8 @@ export const fetchContent = async ({ builderContextValue, symbol }) => {
      *
      * then we want to re-fetch the symbol content.
      */
-    if (symbol?.model && // This is a hack, we should not need to check for this, but it is needed for Svelte.
+    if (symbol?.model &&
+        // This is a hack, we should not need to check for this, but it is needed for Svelte.
         builderContextValue?.apiKey) {
         return getContent({
             model: symbol.model,

package/dist/blocks/symbol/symbol.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import ContentVariants from "../../components/content-variants/content-variants.js";
+import ContentVariants from "../../components/content-variants/content-variants";
 import { fetchContent } from "./symbol.helpers.js";
 async function Symbol(props) {
     const className = function className() {
@@ -14,11 +14,11 @@ async function Symbol(props) {
             .filter(Boolean)
             .join(" ");
     };
-    const contentToUse = props.symbol?.content ||
+    const contentToUse = (props.symbol?.content ||
         (await fetchContent({
             symbol: props.symbol,
             builderContextValue: props.builderContext,
-        }));
+        })));
     return (React.createElement("div", { ...props.attributes, className: className() },
         React.createElement(ContentVariants, { __isNestedRender: true, apiVersion: props.builderContext.apiVersion, apiKey: props.builderContext.apiKey, context: props.builderContext.context, customComponents: Object.values(props.builderComponents), data: {
                 ...props.symbol?.data,

package/dist/blocks/video/video.js

@@ -31,7 +31,10 @@ function Video(props) {
         };
     }
     function spreadProps() {
-        return { ...props.attributes, ...videoProps() };
+        return {
+            ...props.attributes,
+            ...videoProps(),
+        };
     }
     return (React.createElement("video", { ...spreadProps(), preload: props.preload || "metadata", style: {
             width: "100%",

package/dist/components/block/block.helpers.js

@@ -1,4 +1,4 @@
-import { evaluate } from '../../functions/evaluate.js';
+import { evaluate } from '../../functions/evaluate';
 import { getProcessedBlock } from '../../functions/get-processed-block.js';
 /**
  * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
@@ -53,8 +53,10 @@ export const getRepeatItemData = ({ block, context }) => {
     const collectionName = repeat.collection.split('.').pop();
     const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
     const repeatArray = itemsArray.map((item, index) => ({
-        context: { ...context,
-            localState: { ...context.localState,
+        context: {
+            ...context,
+            localState: {
+                ...context.localState,
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,

package/dist/components/block/block.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import BlockStyles from "./components/block-styles.js";
+import BlockStyles from "./components/block-styles";
 import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
-import RepeatedBlock from "./components/repeated-block.js";
-import ComponentRef from "./components/component-ref/component-ref.js";
-import BlockWrapper from "./components/block-wrapper.js";
+import RepeatedBlock from "./components/repeated-block";
+import ComponentRef from "./components/component-ref/component-ref";
+import BlockWrapper from "./components/block-wrapper";
 function Block(props) {
     const blockComponent = function blockComponent() {
         return getComponent({

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

@@ -6,7 +6,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 InlinedStyles from "../../inlined-styles.js";
+import InlinedStyles from "../../inlined-styles";
 function BlockStyles(props) {
     const [processedBlock, setProcessedBlock] = useState(() => getProcessedBlock({
         block: props.block,

package/dist/components/block/components/block-wrapper.d.ts

@@ -1,7 +1,6 @@
 /**
  * This import is used by the Svelte SDK. Do not remove.
- */
-type BlockWrapperProps = {
+ */ type BlockWrapperProps = {
     Wrapper: string;
     block: BuilderBlock;
     context: BuilderContextInterface;

package/dist/components/block/components/component-ref/component-ref.helpers.d.ts

@@ -1,7 +1,7 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
 import type { BuilderBlock } from '../../../../types/builder-block.js';
 import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
-import type { InteractiveElementProps } from '../interactive-element.js';
+import type { InteractiveElementProps } from '../interactive-element';
 type ComponentOptions = PropsWithBuilderData<{
     [index: string]: any;
     attributes?: {

package/dist/components/block/components/component-ref/component-ref.helpers.js

@@ -6,7 +6,8 @@ export const getWrapperProps = ({ componentOptions, builderBlock, context, compo
         context,
         wrapperProps: componentOptions
     };
-    return isInteractive ? interactiveElementProps : { ...componentOptions,
+    return isInteractive ? interactiveElementProps : {
+        ...componentOptions,
         /**
          * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
          * component itself directly. Otherwise, they are provided to the wrapper element.

package/dist/components/block/components/component-ref/component-ref.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import BlockStyles from "../block-styles.js";
-import Block from "../../block.js";
-import InteractiveElement from "../interactive-element.js";
+import BlockStyles from "../block-styles";
+import Block from "../../block";
+import InteractiveElement from "../interactive-element";
 import { getWrapperProps } from "./component-ref.helpers.js";
 function ComponentRef(props) {
     const Wrapper = props.isInteractive ? InteractiveElement : props.componentRef;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Block from "../block.js";
+import Block from "../block";
 function RepeatedBlock(props) {
     const store = props.repeatContext;
     return (React.createElement(Block, { block: props.block, context: store, registeredComponents: props.registeredComponents }));

package/dist/components/blocks/blocks.d.ts

@@ -1,8 +1,8 @@
 export type BlocksProps = Partial<BlocksWrapperProps> & {
-    context: BuilderContextInterface;
-    registeredComponents: RegisteredComponents;
+    context?: BuilderContextInterface;
+    registeredComponents?: RegisteredComponents;
 };
-import type { BlocksWrapperProps } from "./blocks-wrapper.js";
+import type { BlocksWrapperProps } from "./blocks-wrapper";
 import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
 declare function Blocks(props: BlocksProps): JSX.Element;
 export default Blocks;

package/dist/components/blocks/blocks.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import BlockStyles from "../block/components/block-styles.js";
-import Block from "../block/block.js";
-import BlocksWrapper from "./blocks-wrapper.js";
+import BlockStyles from "../block/components/block-styles";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
 function Blocks(props) {
     return (React.createElement(BlocksWrapper, { blocks: props.blocks, parent: props.parent, path: props.path, styleProp: props.styleProp },
         props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context, registeredComponents: props.registeredComponents }))))) : null,

package/dist/components/content/components/enable-editor.js

@@ -1,7 +1,7 @@
 "use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { evaluate } from "../../../functions/evaluate.js";
+import { evaluate } from "../../../functions/evaluate";
 import { fetch } from "../../../functions/get-fetch.js";
 import { isBrowser } from "../../../functions/is-browser.js";
 import { isEditing } from "../../../functions/is-editing.js";

package/dist/components/content/components/styles.helpers.js

@@ -19,7 +19,8 @@ font-weight: 400;
             const isNumber = String(Number(weight)) === weight;
             if (!isNumber) {
                 continue;
-            } // TODO: maybe limit number loaded
+            }
+            // TODO: maybe limit number loaded
             const weightUrl = font.files[weight];
             if (weightUrl && weightUrl !== url) {
                 str += `
@@ -49,7 +50,8 @@ export const getCss = ({ cssCode, contentId }) => {
     }
     if (!contentId) {
         return cssCode;
-    } // Allow using `&` in custom CSS code like @emotion
+    }
+    // Allow using `&` in custom CSS code like @emotion
     // E.g. `& .foobar { ... }` to scope CSS
     // TODO: handle if '&' is within a string like `content: "&"`
     return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';

package/dist/components/content/components/styles.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import InlinedStyles from "../../inlined-styles.js";
+import InlinedStyles from "../../inlined-styles";
 import { getCss } from "./styles.helpers.js";
 import { getFontCss } from "./styles.helpers.js";
 function ContentStyles(props) {

package/dist/components/content/content.helpers.js

@@ -1,23 +1,28 @@
 export const getContextStateInitialValue = ({ content, data, locale }) => {
-    const defaultValues = {}; // set default values for content state inputs
+    const defaultValues = {};
+    // set default values for content state inputs
     content?.data?.inputs?.forEach(input => {
         if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
             defaultValues[input.name] = input.defaultValue;
         }
     });
-    const stateToUse = { ...content?.data?.state,
+    const stateToUse = {
+        ...content?.data?.state,
         ...data,
         ...(locale ? {
             locale
         } : {})
     };
-    return { ...defaultValues,
+    return {
+        ...defaultValues,
         ...stateToUse
     };
 };
 export const getContentInitialValue = ({ content, data }) => {
-    return !content ? undefined : { ...content,
-        data: { ...content?.data,
+    return !content ? undefined : {
+        ...content,
+        data: {
+            ...content?.data,
             ...data
         },
         meta: content?.meta

package/dist/components/content/content.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { components, serializeComponentInfo, } from "../../functions/register-component.js";
-import Blocks from "../blocks/blocks.js";
-import ContentStyles from "./components/styles.js";
+import Blocks from "../blocks/blocks";
+import ContentStyles from "./components/styles";
 import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { getRenderContentScriptString } from "../content-variants/helpers.js";
-import EnableEditor from "./components/enable-editor.js";
-import InlinedScript from "../inlined-script.js";
+import EnableEditor from "./components/enable-editor";
+import InlinedScript from "../inlined-script";
 function ContentComponent(props) {
     const scriptStr = getRenderContentScriptString({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
@@ -20,6 +20,7 @@ function ContentComponent(props) {
     };
     const registeredComponents = [
         ...getDefaultRegisteredComponents(),
+        // While this `components` object is deprecated, we must maintain support for it.
         // Since users are able to override our default components, we need to make sure that we do not break such
         // existing usage.
         // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
@@ -50,6 +51,7 @@ function ContentComponent(props) {
         apiVersion: props.apiVersion,
         componentInfos: [
             ...getDefaultRegisteredComponents(),
+            // While this `components` object is deprecated, we must maintain support for it.
             // Since users are able to override our default components, we need to make sure that we do not break such
             // existing usage.
             // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,

package/dist/components/content-variants/content-variants.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { checkShouldRunVariants, getScriptString, getVariants, getVariantsScriptString, } from "./helpers.js";
-import ContentComponent from "../content/content.js";
+import ContentComponent from "../content/content";
 import { getDefaultCanTrack } from "../../helpers/canTrack.js";
-import InlinedStyles from "../inlined-styles.js";
+import InlinedStyles from "../inlined-styles";
 import { handleABTestingSync } from "../../helpers/ab-tests.js";
-import InlinedScript from "../inlined-script.js";
+import InlinedScript from "../inlined-script";
 import { TARGET } from "../../constants/target.js";
 function ContentVariants(props) {
     const shouldRenderVariants = checkShouldRunVariants({

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

@@ -1,6 +1,7 @@
 import { TARGET } from '../../constants/target.js';
 import { isBrowser } from '../../functions/is-browser.js';
-export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({ ...variant,
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
+    ...variant,
     testVariationId: variant.id,
     id: content?.id
 }));

package/dist/constants/builder-registered-components.js

@@ -1,24 +1,24 @@
-import { default as Button } from '../blocks/button/button.js';
+import { default as Button } from '../blocks/button/button';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
-import { default as Columns } from '../blocks/columns/columns.js';
+import { default as Columns } from '../blocks/columns/columns';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
 import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
-import { default as Fragment } from '../blocks/fragment/fragment.js';
+import { default as Fragment } from '../blocks/fragment/fragment';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
-import { default as Image } from '../blocks/image/image.js';
+import { default as Image } from '../blocks/image/image';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
-import { default as Section } from '../blocks/section/section.js';
+import { default as Section } from '../blocks/section/section';
 import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
-import { default as Symbol } from '../blocks/symbol/symbol.js';
+import { default as Symbol } from '../blocks/symbol/symbol';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
-import { default as Text } from '../blocks/text/text.js';
+import { default as Text } from '../blocks/text/text';
 import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video.js';
+import { default as Video } from '../blocks/video/video';
 import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
-import { default as embed } from '../blocks/embed/embed.js';
-import { default as Img } from '../blocks/img/img.js';
+import { default as embed } from '../blocks/embed/embed';
+import { default as Img } from '../blocks/img/img';
 import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code.js';
+import { default as customCode } from '../blocks/custom-code/custom-code';
 import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
 /**
  * Returns a list of all registered components.

package/dist/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.4.6-0";
+export declare const SDK_VERSION = "0.5.1";

package/dist/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.6-0";
+export const SDK_VERSION = "0.5.1";

package/dist/context/components.context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").Context<any>;
+export default _default;

package/dist/context/components.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export default createContext({ registeredComponents: {} });