@sitecore-jss/sitecore-jss-react 22.0.0-canary.9 → 22.0.0

package/dist/esm/utils.js

@@ -1,3 +1,15 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 import { parse as styleParse } from 'style-attr';
 // https://stackoverflow.com/a/10426674/9324
 export const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -45,7 +57,7 @@ export const convertAttributesToReactProps = (attributes) => {
 /**
  * "class" property will be transformed into or appended to "className" instead.
  * @param {string} otherAttrs all other props included on the image component
- * * @returns {void}
+ * @returns {void}
  */
 export const addClassName = (otherAttrs) => {
     if (otherAttrs.class) {
@@ -61,3 +73,37 @@ export const addClassName = (otherAttrs) => {
         delete otherAttrs.class;
     }
 };
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export const getAttributesString = (attributes) => {
+    const { className } = attributes, restAttributes = __rest(attributes, ["className"]);
+    const attributesEntries = Object.entries(restAttributes).map(([key, value]) => {
+        if (typeof value === 'object') {
+            const valueString = JSON.stringify(value)
+                .replace(/"|{|}/g, '')
+                .replace(/,/g, ';');
+            return `${key}="${valueString}"`;
+        }
+        return `${key}="${value}"`;
+    });
+    if (className) {
+        attributesEntries.push(`class="${className}"`);
+    }
+    return attributesEntries.join(' ');
+};
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = getFieldValue(fields, key);
+        return acc;
+    }, data);
+    return data;
+};

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.0.0-canary.9",
+  "version": "22.0.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
   "scripts": {
     "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig-esm.json",
     "clean": "del-cli dist types",
-    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts",
+    "lint": "eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
     "test": "mocha --require ts-node/register/transpile-only --require ./src/tests/shim.ts ./src/tests/jsdom-setup.ts ./src/tests/enzyme-setup.ts \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
     "prepublishOnly": "npm run build",
     "coverage": "nyc npm test",
     "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-react src/index.ts --githubPages false"
   },
   "engines": {
-    "node": ">=12",
-    "npm": ">=6"
+    "node": ">=18"
   },
   "author": {
     "name": "Sitecore Corporation",
@@ -27,15 +26,14 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-feaas/clientside": "^0.1.24",
+    "@sitecore-feaas/clientside": "^0.5.17",
     "@types/chai": "^4.3.4",
     "@types/chai-string": "^1.4.2",
-    "@types/deep-equal": "^1.0.1",
     "@types/enzyme": "^3.10.12",
     "@types/mocha": "^10.0.1",
     "@types/node": "18.11.10",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.10",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
@@ -58,19 +56,19 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
+    "@sitecore-feaas/clientside": "^0.5.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.0.0-canary.9",
-    "deep-equal": "^2.1.0",
-    "html-react-parser": "^3.0.4",
+    "@sitecore-jss/sitecore-jss": "22.0.0",
+    "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "f28c2255e8bc93787848a7778b6a32355590e7b4",
+  "gitHead": "2a5fe700fd75e19e4107b39630cce823fc1af08e",
   "files": [
     "dist",
     "types"

package/types/ComponentBuilder.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="@types/react" />
+import { ComponentType } from 'react';
+import { ComponentFactory } from './components/sharedTypes';
+/**
+ * Configuration for ComponentBuilder
+ */
+export type ComponentBuilderConfig<ComponentType> = {
+    /**
+     * List of components to be stored
+     */
+    components: Map<string, ComponentType>;
+};
+/**
+ * React implementation of component builder class for building components based on the configuration.
+ */
+export declare class ComponentBuilder {
+    protected config: ComponentBuilderConfig<ComponentType>;
+    /**
+     * List of components to be stored
+     */
+    protected components: Map<string, ComponentType>;
+    constructor(config: ComponentBuilderConfig<ComponentType>);
+    /**
+     * Creates a new instance of component factory
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory(): ComponentFactory;
+}

package/types/components/BYOCComponent.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="@types/react" />
+import React from 'react';
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
+import { MissingComponentProps } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export declare const BYOC_COMPONENT_RENDERING_NAME = "BYOCComponent";
+/**
+ * FEaaS props for server rendering.
+ */
+type BYOCServerProps = {
+    /**
+     * Fetched data from server component props for server rendering, based on rendering params.
+     */
+    fetchedData?: FEAAS.DataScopes;
+};
+/**
+ * Data from rendering params on Sitecore's BYOC rendering
+ */
+export type BYOCComponentParams = {
+    /**
+     * Name of the component to render
+     */
+    ComponentName?: string;
+    /**
+     * JSON props to pass into rendered component
+     */
+    ComponentProps?: string;
+    /**
+     * A JSON object with data sources to be fetched and passed to the component
+     */
+    ComponentDataOverride?: string;
+    /**
+     * A string with classes that can be used to apply themes, via SXA functionality
+     */
+    styles?: string;
+    RenderingIdentifier?: string;
+};
+/**
+ * Props for BYOCComponent. Includes components list to load external components from.
+ */
+export type BYOCComponentClientProps = {
+    /**
+     * rendering params
+     */
+    params?: BYOCComponentParams;
+    /**
+     * fields from datasource items to be passed as rendered child component props
+     */
+    fields?: ComponentFields;
+    /**
+     * Error component override. To be shown when Renderer or underlying component throws
+     */
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    /**
+     * Override to indicate missing component situations. Would be shown when BYOC component is not registered
+     * or ComponentName is missing
+     */
+    missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
+};
+export type BYOCComponentProps = BYOCComponentClientProps & BYOCServerProps;
+type ErrorComponentProps = {
+    [prop: string]: unknown;
+    error?: Error;
+};
+/**
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
+ * missing components, and customization of error messages or alternative rendering components.
+ * @param {ByocComponentProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export declare class BYOCComponent extends React.Component<BYOCComponentProps> {
+    state: Readonly<{
+        error?: Error;
+    }>;
+    constructor(props: BYOCComponentProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): React.JSX.Element;
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ */
+export declare function fetchBYOCComponentServerProps(params: BYOCComponentParams): Promise<BYOCComponentProps>;
+export {};

package/types/components/BYOCWrapper.d.ts

@@ -0,0 +1,3 @@
+import { BYOCComponentProps } from './BYOCComponent';
+export declare const BYOC_WRAPPER_RENDERING_NAME = "BYOCWrapper";
+export declare const BYOCWrapper: (props: BYOCComponentProps) => JSX.Element;

package/types/components/Date.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface DateFieldProps {
     /** The date field data. */

package/types/components/EditFrame.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { PropsWithChildren } from 'react';
 import { EditFrameDataSource, EditButtonTypes } from '@sitecore-jss/sitecore-jss/utils';
 export interface EditFrameProps {

package/types/components/FEaaSComponent.d.ts

@@ -1,18 +1,71 @@
-import { ComponentParams, ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
-export declare const FEAAS_MODULE_SRC = "https://feaasstatic.blob.core.windows.net/packages/clientside/latest/browser/index.esm.js";
-export type FEaaSComponentParams = ComponentParams & {
+/**
+ * Params from a Sitecore FEaaS rendering
+ */
+export type FEaaSComponentParams = {
     LibraryId?: string;
     ComponentId?: string;
     ComponentVersion?: string;
-    ComponentRevision?: string;
+    ComponentRevision?: RevisionType;
     ComponentHostName?: string;
     ComponentInstanceId?: string;
     ComponentDataOverride?: string;
     ComponentHTMLOverride?: string;
+    styles?: string;
+    RenderingIdentifier?: string;
 };
-export type FEaaSComponentProps = {
+type RevisionType = number | 'staged' | 'published' | 'saved';
+/**
+ * FEaaS props for server rendering.
+ */
+type FEaaSComponentServerProps = {
+    /**
+     * HTML template for presentation rendered inside the component
+     */
+    template?: string;
+    /**
+     * Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
+     */
+    revisionFallback?: RevisionType;
+    /**
+     * Fetched data from server component props for server rendering, based on rendering params.
+     */
+    fetchedData?: FEAAS.DataScopes;
+};
+/**
+ * FEaaS props for client side component. Should be used as fallback when server props are not provided.
+ * Would also be passed on server to avoid hydration issues
+ */
+type FEaaSComponentClientProps = {
+    /**
+     * parameters from Sitecore's FEAAS component
+     */
     params?: FEaaSComponentParams;
+    /**
+     * field data from component's datasource
+     */
     fields?: ComponentFields;
 };
-export declare const FEaaSComponent: ({ params, fields }: FEaaSComponentProps) => JSX.Element;
+export type FEaaSComponentProps = FEaaSComponentServerProps & FEaaSComponentClientProps;
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+export declare const FEaaSComponent: (props: FEaaSComponentProps) => JSX.Element;
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * Component endpoint will either be retrieved from params or from endpointOverride
+ * @param {FEaaSComponentParams} params component params
+ * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
+ * @param {string} [endpointOverride] optional override for component endpoint
+ */
+export declare function fetchFEaaSComponentServerProps(params: FEaaSComponentParams, pageState?: LayoutServicePageState, endpointOverride?: string): Promise<FEaaSComponentProps>;
+/**
+ * Build component endpoint URL from component's params
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ * @returns component endpoint URL
+ */
+export declare const composeComponentEndpoint: (params: FEaaSComponentParams, revisionFallback: RevisionType) => string;
+export {};

package/types/components/FEaaSWrapper.d.ts

@@ -0,0 +1,3 @@
+import { FEaaSComponentProps } from './FEaaSComponent';
+export declare const FEAAS_WRAPPER_RENDERING_NAME = "FEaaSWrapper";
+export declare const FEaaSWrapper: (props: FEaaSComponentProps) => JSX.Element;

package/types/components/File.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface FileFieldValue {
     [propName: string]: unknown;

package/types/components/HiddenRendering.d.ts

@@ -1,2 +1,4 @@
-export declare const HiddenRendering: () => JSX.Element;
+/// <reference types="@types/react" />
+import React from 'react';
+export declare const HiddenRendering: () => React.JSX.Element;
 export declare const HIDDEN_RENDERING_NAME = "Hidden Rendering";

package/types/components/Image.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface ImageFieldValue {
     [attributeName: string]: unknown;
@@ -26,11 +27,6 @@ export interface ImageSizeParameters {
 }
 export interface ImageProps {
     [attributeName: string]: unknown;
-    /**
-     * The image field data.
-     * @deprecated use field property instead
-     */
-    media?: ImageField | ImageFieldValue;
     /** Image field data (consistent with other field types) */
     field?: ImageField | ImageFieldValue;
     /**
@@ -62,5 +58,5 @@ export interface ImageProps {
  * @param {ImageProps} otherProps {ImageProps} all other props included on the image component
  * @returns Experience Editor Markup
  */
-export declare const getEEMarkup: (imageField: ImageField, imageParams?: ImageProps['imageParams'], mediaUrlPrefix?: RegExp, otherProps?: ImageProps) => JSX.Element;
+export declare const getEEMarkup: (imageField: ImageField, imageParams?: ImageProps['imageParams'], mediaUrlPrefix?: RegExp, otherProps?: ImageProps) => React.JSX.Element;
 export declare const Image: React.FC<ImageProps>;

package/types/components/Link.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface LinkFieldValue {
@@ -32,7 +33,7 @@ export type LinkProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLA
      */
     showLinkTextWithChildrenPresent?: boolean;
 };
-export declare const Link: React.ForwardRefExoticComponent<Pick<LinkProps, "key" | "editable" | "field" | "showLinkTextWithChildrenPresent" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export declare const LinkPropTypes: {
     field: PropTypes.Validator<NonNullable<NonNullable<PropTypes.InferProps<{
         href: PropTypes.Requireable<any>;

package/types/components/MissingComponent.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export interface MissingComponentProps {
     rendering?: {
         componentName?: string;
     };
+    errorOverride?: string;
 }
 export declare const MissingComponent: React.FC<MissingComponentProps>;

package/types/components/Placeholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { PlaceholderProps } from './PlaceholderCommon';
 import { ComponentRendering, HtmlElementRendering } from '@sitecore-jss/sitecore-jss/layout';

package/types/components/PlaceholderCommon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';

package/types/components/RichText.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface RichTextField {

package/types/components/SitecoreContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ComponentFactory } from './sharedTypes';
@@ -38,5 +39,5 @@ export declare class SitecoreContext extends React.Component<SitecoreContextProp
      * @param {SitecoreContextValue | LayoutServiceData} value New context value
      */
     setContext: (value: SitecoreContextValue | LayoutServiceData) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/types/components/Text.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { FunctionComponent } from 'react';
 export interface TextField {
     value?: string | number;

package/types/components/VisitorIdentification.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 interface VisitorIdentificationProps {
     defer?: boolean;

package/types/components/sharedTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import { ComponentType } from 'react';
 /**
  * @param {string} componentName component to be imported from the component factory

package/types/enhancers/withComponentFactory.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentFactory } from '../components/sharedTypes';
 export interface ComponentFactoryProps {

package/types/enhancers/withDatasourceCheck.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React from 'react';
 import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
 export declare const DefaultEditingError: () => JSX.Element;
@@ -18,4 +19,4 @@ export interface WithDatasourceCheckOptions {
  *  The wrapped component, if a datasource is present.
  *  A null component (in normal mode) or an error component (in editing mode), if a datasource is not present.
  */
-export declare function withDatasourceCheck(options?: WithDatasourceCheckOptions): <ComponentProps extends WithDatasourceCheckProps>(Component: React.ComponentType<ComponentProps>) => (props: ComponentProps) => JSX.Element;
+export declare function withDatasourceCheck(options?: WithDatasourceCheckOptions): <ComponentProps extends WithDatasourceCheckProps>(Component: React.ComponentType<ComponentProps>) => (props: ComponentProps) => React.JSX.Element;

package/types/enhancers/withEditorChromes.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="@types/react" />
 import React from 'react';
 export declare const withEditorChromes: (WrappedComponent: React.ComponentClass<unknown> | React.FC<unknown>) => React.ComponentClass<{}, any>;

package/types/enhancers/withSitecoreContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="@types/react" />
 import React, { ReactNode } from 'react';
 import { SitecoreContextValue } from '../components/SitecoreContext';
 export interface WithSitecoreContextOptions {
@@ -14,7 +15,7 @@ export type WithSitecoreContextHocProps<ComponentProps> = Pick<ComponentProps, E
 /**
  * @param {WithSitecoreContextOptions} [options]
  */
-export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends ComponentConsumerProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreContextHocProps<ComponentProps>) => JSX.Element;
+export declare function withSitecoreContext(options?: WithSitecoreContextOptions): <ComponentProps extends ComponentConsumerProps>(Component: React.ComponentType<ComponentProps>) => (props: WithSitecoreContextHocProps<ComponentProps>) => React.JSX.Element;
 /**
  * This hook grants acсess to the current Sitecore page context
  * by default JSS includes the following properties in this context:

package/types/index.d.ts

@@ -1,17 +1,20 @@
-export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
+export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, EditFrameDataSource, FieldEditButton, WebEditButton, EditButtonTypes, } from '@sitecore-jss/sitecore-jss/utils';
-export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, RestLayoutService, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
+export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
-export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
-export { FEaaSComponent, FEaaSComponentProps } from './components/FEaaSComponent';
+export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
 export { File, FileField } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
@@ -21,3 +24,4 @@ export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
 export { EditFrameProps, EditFrame } from './components/EditFrame';
+export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';

package/types/utils.d.ts

@@ -1,3 +1,4 @@
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
 export declare const convertKebabCasetoCamelCase: (str: string) => string;
 /**
  * https://facebook.github.io/react/docs/dom-elements.html
@@ -18,8 +19,24 @@ export declare const convertAttributesToReactProps: (attributes: {
 /**
  * "class" property will be transformed into or appended to "className" instead.
  * @param {string} otherAttrs all other props included on the image component
- * * @returns {void}
+ * @returns {void}
  */
 export declare const addClassName: (otherAttrs: {
     [key: string]: unknown;
 }) => void;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export declare const getAttributesString: (attributes: {
+    [key: string]: unknown;
+}) => string;
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+export declare const getDataFromFields: (fields: ComponentFields) => {
+    [key: string]: unknown;
+};