@sitecore-content-sdk/react 0.1.0-beta.34 → 0.1.0-beta.36

package/dist/cjs/components/EditingScripts.js

@@ -8,17 +8,30 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
+const editing_2 = require("@sitecore-content-sdk/core/editing");
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when RenderingType is `component`).
+ * @param {EditingScriptsProps} props - The props for the EditingScripts component.
+ * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-const EditingScripts = () => {
-    const { sitecoreContext: { pageState, clientData, clientScripts }, } = (0, withSitecoreContext_1.useSitecoreContext)();
-    // Don't render anything if not in editing/preview mode
-    if (pageState === layout_1.LayoutServicePageState.Normal ||
-        pageState === layout_1.LayoutServicePageState.Preview ||
-        !pageState) {
+const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = (0, withSitecoreContext_1.useSitecoreContext)();
+    // Don't render anything if not in editing/preview mode and rendering type is not component
+    if (renderingType !== layout_1.RenderingType.Component &&
+        (pageState === layout_1.LayoutServicePageState.Normal ||
+            pageState === layout_1.LayoutServicePageState.Preview ||
+            !pageState)) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
+    // In case of RenderingType.Component - render only the script for Design Libnrary
+    if (renderingType === layout_1.RenderingType.Component) {
+        // Add cache buster to the script URL
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     const jssClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getJssPagesClientData)());
     return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
         clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),

package/dist/cjs/components/Placeholder.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Placeholder = void 0;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("./PlaceholderCommon");
-const withComponentFactory_1 = require("../enhancers/withComponentFactory");
+const withComponentMap_1 = require("../enhancers/withComponentMap");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
@@ -30,7 +30,7 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     render() {
         var _a, _b;
         const childProps = Object.assign({}, this.props);
-        delete childProps.componentFactory;
+        delete childProps.componentMap;
         if (this.state.error) {
             if (childProps.errorComponent) {
                 return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
@@ -68,5 +68,5 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-const PlaceholderWithComponentFactory = (0, withComponentFactory_1.withComponentFactory)(PlaceholderComponent);
-exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentFactory);
+const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
+exports.Placeholder = (0, withSitecoreContext_1.withSitecoreContext)()(PlaceholderWithComponentMap);

package/dist/cjs/components/PlaceholderCommon.js

@@ -18,6 +18,7 @@ exports.PlaceholderCommon = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const MissingComponent_1 = require("./MissingComponent");
+const sharedTypes_1 = require("./sharedTypes");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const core_1 = require("@sitecore-content-sdk/core");
 const HiddenRendering_1 = require("./HiddenRendering");
@@ -102,7 +103,7 @@ class PlaceholderCommon extends react_1.default.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
             if (!component) {
                 if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
                     component = FEaaSComponent_1.FEaaSComponent;
@@ -118,7 +119,7 @@ class PlaceholderCommon extends react_1.default.Component {
                 }
             }
             if (!component) {
-                console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
+                console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent;
                 isEmpty = true;
             }
@@ -151,16 +152,22 @@ class PlaceholderCommon extends react_1.default.Component {
     }
     getComponentForRendering(renderingDefinition) {
         var _a;
-        const componentFactory = this.props.componentFactory;
-        if (!componentFactory || typeof componentFactory !== 'function') {
-            console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
+        const componentMap = this.props.componentMap;
+        if (!componentMap || componentMap.size === 0) {
+            console.warn(`No components were available in component map to service request for component ${renderingDefinition}`);
             return null;
         }
-        // Render SXA Rendering Variant
-        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
-            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        // Render SXA Rendering Variant if available
+        const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+        const component = componentMap.get(renderingDefinition.componentName);
+        if (!component)
+            return null;
+        if (exportName && exportName !== sharedTypes_1.DEFAULT_EXPORT_NAME) {
+            return component[exportName];
         }
-        return componentFactory(renderingDefinition.componentName);
+        return (component.default ||
+            component.Default ||
+            component);
     }
 }
 exports.PlaceholderCommon = PlaceholderCommon;

package/dist/cjs/components/SitecoreContext.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SitecoreContext = exports.ComponentFactoryReactContext = exports.SitecoreContextReactContext = void 0;
+exports.SitecoreContext = exports.ComponentMapReactContext = exports.SitecoreContextReactContext = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
 const core_1 = require("@sitecore-content-sdk/core");
 exports.SitecoreContextReactContext = react_1.default.createContext({});
-exports.ComponentFactoryReactContext = react_1.default.createContext({});
+exports.ComponentMapReactContext = react_1.default.createContext(new Map());
 class SitecoreContext extends react_1.default.Component {
     constructor(props) {
         var _a, _b, _c, _d;
@@ -56,14 +56,14 @@ class SitecoreContext extends react_1.default.Component {
         }
     }
     render() {
-        return (react_1.default.createElement(exports.ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+        return (react_1.default.createElement(exports.ComponentMapReactContext.Provider, { value: this.props.componentMap },
             react_1.default.createElement(exports.SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
     }
 }
 exports.SitecoreContext = SitecoreContext;
 SitecoreContext.propTypes = {
     children: prop_types_1.default.any.isRequired,
-    componentFactory: prop_types_1.default.func,
+    componentMap: prop_types_1.default.instanceOf(Map),
     layoutData: prop_types_1.default.shape({
         sitecore: prop_types_1.default.shape({
             context: prop_types_1.default.any,

package/dist/cjs/components/sharedTypes/components.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_EXPORT_NAME = void 0;
+/**
+ * SXA uses custom default export name
+ */
+exports.DEFAULT_EXPORT_NAME = 'Default';

package/dist/cjs/components/sharedTypes/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./props"), exports);

package/dist/cjs/enhancers/{withComponentFactory.js → withComponentMap.js}

@@ -3,24 +3,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withComponentFactory = withComponentFactory;
+exports.withComponentMap = withComponentMap;
 const react_1 = __importDefault(require("react"));
 const SitecoreContext_1 = require("../components/SitecoreContext");
 const react_2 = require("react");
 /**
  * @param {React.ComponentClass<T> | React.FC<T>} Component
  */
-function withComponentFactory(Component) {
+function withComponentMap(Component) {
     /**
      * @param {T} props - props to pass to the wrapped component
      * @returns {JSX.Element} - the rendered component
      */
-    function WithComponentFactory(props) {
-        const context = (0, react_2.useContext)(SitecoreContext_1.ComponentFactoryReactContext);
-        return react_1.default.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
+    function WithComponentMap(props) {
+        const context = (0, react_2.useContext)(SitecoreContext_1.ComponentMapReactContext);
+        return react_1.default.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
     }
-    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
+    WithComponentMap.displayName = `withComponentMap(${Component.displayName ||
         Component.name ||
         'Anonymous'})`;
-    return WithComponentFactory;
+    return WithComponentMap;
 }

package/dist/cjs/enhancers/withPlaceholder.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withPlaceholder = withPlaceholder;
 const react_1 = __importDefault(require("react"));
 const PlaceholderCommon_1 = require("../components/PlaceholderCommon");
-const withComponentFactory_1 = require("./withComponentFactory");
+const withComponentMap_1 = require("./withComponentMap");
 const withSitecoreContext_1 = require("./withSitecoreContext");
 /**
  * @param {WithPlaceholderSpec} placeholders
@@ -20,7 +20,7 @@ function withPlaceholder(placeholders, options) {
             }
             render() {
                 let childProps = Object.assign({}, this.props);
-                delete childProps.componentFactory;
+                delete childProps.componentMap;
                 if (options && options.propsTransformer) {
                     childProps = options.propsTransformer(childProps);
                 }
@@ -58,6 +58,6 @@ function withPlaceholder(placeholders, options) {
             }
         }
         WithPlaceholder.propTypes = PlaceholderCommon_1.PlaceholderCommon.propTypes;
-        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentFactory_1.withComponentFactory)(WithPlaceholder));
+        return (0, withSitecoreContext_1.withSitecoreContext)()((0, withComponentMap_1.withComponentMap)(WithPlaceholder));
     };
 }

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphQLSitePathService = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.ComponentBuilder = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.Form = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.GraphQLSitePathService = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.Image = exports.Placeholder = exports.Form = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.GraphQLDictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -67,8 +67,6 @@ var withPlaceholder_1 = require("./enhancers/withPlaceholder");
 Object.defineProperty(exports, "withPlaceholder", { enumerable: true, get: function () { return withPlaceholder_1.withPlaceholder; } });
 var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return withDatasourceCheck_1.withDatasourceCheck; } });
-var ComponentBuilder_1 = require("./ComponentBuilder");
-Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });
 var withFieldMetadata_1 = require("./enhancers/withFieldMetadata");
 Object.defineProperty(exports, "withFieldMetadata", { enumerable: true, get: function () { return withFieldMetadata_1.withFieldMetadata; } });
 var withEmptyFieldEditingComponent_1 = require("./enhancers/withEmptyFieldEditingComponent");

package/dist/esm/components/EditingScripts.js

@@ -1,18 +1,31 @@
 import React from 'react';
-import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { LayoutServicePageState, RenderingType } from '@sitecore-content-sdk/core/layout';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
 import { getJssPagesClientData } from '@sitecore-content-sdk/core/editing';
+import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when RenderingType is `component`).
+ * @param {EditingScriptsProps} props - The props for the EditingScripts component.
+ * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-export const EditingScripts = () => {
-    const { sitecoreContext: { pageState, clientData, clientScripts }, } = useSitecoreContext();
-    // Don't render anything if not in editing/preview mode
-    if (pageState === LayoutServicePageState.Normal ||
-        pageState === LayoutServicePageState.Preview ||
-        !pageState) {
+export const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecoreContext();
+    // Don't render anything if not in editing/preview mode and rendering type is not component
+    if (renderingType !== RenderingType.Component &&
+        (pageState === LayoutServicePageState.Normal ||
+            pageState === LayoutServicePageState.Preview ||
+            !pageState)) {
         return React.createElement(React.Fragment, null);
     }
+    // In case of RenderingType.Component - render only the script for Design Libnrary
+    if (renderingType === RenderingType.Component) {
+        // Add cache buster to the script URL
+        const scriptUrl = `${getDesignLibraryScriptLink(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
     const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
     return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
         clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),

package/dist/esm/components/Placeholder.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
-import { withComponentFactory } from '../enhancers/withComponentFactory';
+import { withComponentMap } from '../enhancers/withComponentMap';
 import { PagesEditor } from '@sitecore-content-sdk/core/editing';
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 class PlaceholderComponent extends PlaceholderCommon {
@@ -24,7 +24,7 @@ class PlaceholderComponent extends PlaceholderCommon {
     render() {
         var _a, _b;
         const childProps = Object.assign({}, this.props);
-        delete childProps.componentFactory;
+        delete childProps.componentMap;
         if (this.state.error) {
             if (childProps.errorComponent) {
                 return React.createElement(childProps.errorComponent, { error: this.state.error });
@@ -62,5 +62,5 @@ class PlaceholderComponent extends PlaceholderCommon {
     }
 }
 PlaceholderComponent.propTypes = PlaceholderCommon.propTypes;
-const PlaceholderWithComponentFactory = withComponentFactory(PlaceholderComponent);
-export const Placeholder = withSitecoreContext()(PlaceholderWithComponentFactory);
+const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
+export const Placeholder = withSitecoreContext()(PlaceholderWithComponentMap);

package/dist/esm/components/PlaceholderCommon.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MissingComponent } from './MissingComponent';
+import { DEFAULT_EXPORT_NAME } from './sharedTypes';
 import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-content-sdk/core/layout';
 import { constants } from '@sitecore-content-sdk/core';
 import { HiddenRendering } from './HiddenRendering';
@@ -96,7 +97,7 @@ export class PlaceholderCommon extends React.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
             if (!component) {
                 if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
                     component = FEaaSComponent;
@@ -112,7 +113,7 @@ export class PlaceholderCommon extends React.Component {
                 }
             }
             if (!component) {
-                console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);
+                console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your component-map file.`);
                 component = missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent;
                 isEmpty = true;
             }
@@ -145,16 +146,22 @@ export class PlaceholderCommon extends React.Component {
     }
     getComponentForRendering(renderingDefinition) {
         var _a;
-        const componentFactory = this.props.componentFactory;
-        if (!componentFactory || typeof componentFactory !== 'function') {
-            console.warn(`No componentFactory was available to service request for component ${renderingDefinition}`);
+        const componentMap = this.props.componentMap;
+        if (!componentMap || componentMap.size === 0) {
+            console.warn(`No components were available in component map to service request for component ${renderingDefinition}`);
             return null;
         }
-        // Render SXA Rendering Variant
-        if ((_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames) {
-            return componentFactory(renderingDefinition.componentName, renderingDefinition.params.FieldNames);
+        // Render SXA Rendering Variant if available
+        const exportName = (_a = renderingDefinition.params) === null || _a === void 0 ? void 0 : _a.FieldNames;
+        const component = componentMap.get(renderingDefinition.componentName);
+        if (!component)
+            return null;
+        if (exportName && exportName !== DEFAULT_EXPORT_NAME) {
+            return component[exportName];
         }
-        return componentFactory(renderingDefinition.componentName);
+        return (component.default ||
+            component.Default ||
+            component);
     }
 }
 PlaceholderCommon.propTypes = {

package/dist/esm/components/SitecoreContext.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
 import { constants } from '@sitecore-content-sdk/core';
 export const SitecoreContextReactContext = React.createContext({});
-export const ComponentFactoryReactContext = React.createContext({});
+export const ComponentMapReactContext = React.createContext(new Map());
 export class SitecoreContext extends React.Component {
     constructor(props) {
         var _a, _b, _c, _d;
@@ -50,13 +50,13 @@ export class SitecoreContext extends React.Component {
         }
     }
     render() {
-        return (React.createElement(ComponentFactoryReactContext.Provider, { value: this.props.componentFactory },
+        return (React.createElement(ComponentMapReactContext.Provider, { value: this.props.componentMap },
             React.createElement(SitecoreContextReactContext.Provider, { value: this.state }, this.props.children)));
     }
 }
 SitecoreContext.propTypes = {
     children: PropTypes.any.isRequired,
-    componentFactory: PropTypes.func,
+    componentMap: PropTypes.instanceOf(Map),
     layoutData: PropTypes.shape({
         sitecore: PropTypes.shape({
             context: PropTypes.any,

package/dist/esm/components/sharedTypes/components.js

@@ -0,0 +1,4 @@
+/**
+ * SXA uses custom default export name
+ */
+export const DEFAULT_EXPORT_NAME = 'Default';

package/dist/esm/components/sharedTypes/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './props';

package/dist/esm/enhancers/withComponentMap.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentMapReactContext } from '../components/SitecoreContext';
+import { useContext } from 'react';
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+export function withComponentMap(Component) {
+    /**
+     * @param {T} props - props to pass to the wrapped component
+     * @returns {JSX.Element} - the rendered component
+     */
+    function WithComponentMap(props) {
+        const context = useContext(ComponentMapReactContext);
+        return React.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
+    }
+    WithComponentMap.displayName = `withComponentMap(${Component.displayName ||
+        Component.name ||
+        'Anonymous'})`;
+    return WithComponentMap;
+}

package/dist/esm/enhancers/withPlaceholder.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PlaceholderCommon } from '../components/PlaceholderCommon';
-import { withComponentFactory } from './withComponentFactory';
+import { withComponentMap } from './withComponentMap';
 import { withSitecoreContext } from './withSitecoreContext';
 /**
  * @param {WithPlaceholderSpec} placeholders
@@ -14,7 +14,7 @@ export function withPlaceholder(placeholders, options) {
             }
             render() {
                 let childProps = Object.assign({}, this.props);
-                delete childProps.componentFactory;
+                delete childProps.componentMap;
                 if (options && options.propsTransformer) {
                     childProps = options.propsTransformer(childProps);
                 }
@@ -52,6 +52,6 @@ export function withPlaceholder(placeholders, options) {
             }
         }
         WithPlaceholder.propTypes = PlaceholderCommon.propTypes;
-        return withSitecoreContext()(withComponentFactory(WithPlaceholder));
+        return withSitecoreContext()(withComponentMap(WithPlaceholder));
     };
 }

package/dist/esm/index.js

@@ -22,7 +22,6 @@ export { withSitecoreContext, useSitecoreContext, } from './enhancers/withSiteco
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
-export { ComponentBuilder } from './ComponentBuilder';
 export { withFieldMetadata } from './enhancers/withFieldMetadata';
 export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
 export { EditingScripts } from './components/EditingScripts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "0.1.0-beta.34",
+  "version": "0.1.0-beta.36",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -67,13 +67,13 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "0.1.0-beta.34",
+    "@sitecore-content-sdk/core": "0.1.0-beta.36",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "671c575e11cd9e99e816b02b6ebd4620d2476304",
+  "gitHead": "1a28b6590a0f8ef4d9e897f057f47abb01976998",
   "files": [
     "dist",
     "types"

package/types/components/EditingScripts.d.ts

@@ -1,4 +1,17 @@
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
+ * Props for the EditingScripts component.
  */
-export declare const EditingScripts: () => JSX.Element;
+export type EditingScriptsProps = {
+    /**
+     * Sitecore Edge Platform URL.
+     */
+    sitecoreEdgeUrl?: string;
+};
+/**
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when RenderingType is `component`).
+ * @param {EditingScriptsProps} props - The props for the EditingScripts component.
+ * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
+ */
+export declare const EditingScripts: (props: EditingScriptsProps) => JSX.Element;

package/types/components/PlaceholderCommon.d.ts

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import PropTypes, { Requireable } from 'prop-types';
-import { ComponentFactory } from './sharedTypes';
+import { ComponentMap } from './sharedTypes';
 import { ComponentRendering, RouteData, Field, Item } from '@sitecore-content-sdk/core/layout';
 import { SitecoreContextValue } from './SitecoreContext';
 type ErrorComponentProps = {
@@ -18,10 +18,10 @@ export interface PlaceholderProps {
     /** Rendering data to be used when rendering the placeholder. */
     rendering: ComponentRendering | RouteData;
     /**
-     * A factory function that will receive a componentName and return an instance of a React component.
-     * When rendered within a <SitecoreContext> component, defaults to the context componentFactory.
+     * Component Map will be used to map Sitecore component names to app implementation
+     * When rendered within a <SitecoreContext> component, defaults to the context componentMap.
      */
-    componentFactory?: ComponentFactory;
+    componentMap?: ComponentMap;
     /**
      * An object of field names/values that are aggregated and propagated through the component tree created by a placeholder.
      * Any component or placeholder rendered by a placeholder will have access to this data via `props.fields`.
@@ -45,7 +45,7 @@ export interface PlaceholderProps {
     modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
     /**
      * A component that is rendered in place of any components that are in this placeholder,
-     * but do not have a definition in the componentFactory (i.e. don't have a React implementation)
+     * but do not have a definition in the componentMap (i.e. don't have a React implementation)
      */
     missingComponentComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
     /**

package/types/components/SitecoreContext.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ComponentFactory } from './sharedTypes';
 import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
 import { LayoutServiceContext, LayoutServiceData, RouteData } from '../index';
+import { ComponentMap } from './sharedTypes';
 export interface SitecoreContextProps {
     api: SitecoreConfig['api'];
-    componentFactory: ComponentFactory;
+    componentMap: ComponentMap;
     layoutData?: LayoutServiceData;
     children: React.ReactNode;
 }
@@ -15,7 +15,7 @@ export interface SitecoreContextState {
     api?: SitecoreContextProps['api'];
 }
 export declare const SitecoreContextReactContext: React.Context<SitecoreContextState>;
-export declare const ComponentFactoryReactContext: React.Context<ComponentFactory>;
+export declare const ComponentMapReactContext: React.Context<ComponentMap>;
 export type SitecoreContextValue = LayoutServiceContext & {
     itemId?: string;
     route?: RouteData;
@@ -23,7 +23,7 @@ export type SitecoreContextValue = LayoutServiceContext & {
 export declare class SitecoreContext extends React.Component<SitecoreContextProps, SitecoreContextState> {
     static propTypes: {
         children: PropTypes.Validator<any>;
-        componentFactory: PropTypes.Requireable<(...args: any[]) => any>;
+        componentMap: PropTypes.Requireable<Map<unknown, unknown>>;
         layoutData: PropTypes.Requireable<PropTypes.InferProps<{
             sitecore: PropTypes.Requireable<PropTypes.InferProps<{
                 context: PropTypes.Requireable<any>;

package/types/components/sharedTypes/components.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+/**
+ * SXA uses custom default export name
+ */
+export declare const DEFAULT_EXPORT_NAME = "Default";
+/**
+ * React component import with account for custom exports
+ */
+export type ReactJssComponent = ComponentType | ReactModule;
+export type ReactModule = {
+    /**
+     * Custom exports
+     */
+    [key: string]: unknown;
+    /**
+     * Default module export
+     */
+    Default?: ComponentType;
+    /**
+     * Default non-standard export
+     */
+    default?: ComponentType;
+};
+/**
+ * Component type returned from component builder / factory
+ */
+export type LazyComponentType = ComponentType & {
+    render?: {
+        [key: string]: unknown;
+    };
+};
+export type ComponentMap<TComponent extends ReactJssComponent = ReactJssComponent> = Map<string, TComponent>;

package/types/components/sharedTypes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './props';

package/types/components/sharedTypes/props.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared editing field props
+ */
+export interface EditableFieldProps {
+    /**
+     * Can be used to explicitly disable inline editing.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Custom element to render in Pages in edit mode if field value is empty
+     */
+    emptyFieldEditingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
+}

package/types/enhancers/withComponentMap.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ComponentMap } from '../components/sharedTypes';
+export interface WithComponentMapProps {
+    componentMap?: ComponentMap;
+}
+/**
+ * @param {React.ComponentClass<T> | React.FC<T>} Component
+ */
+export declare function withComponentMap<T extends WithComponentMapProps>(Component: React.ComponentClass<T> | React.FC<T>): {
+    (props: T): JSX.Element;
+    displayName: string;
+};

package/types/index.d.ts

@@ -6,7 +6,7 @@ export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, } from
 export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequestClientFactoryConfig, GraphQLRequestClient, } from '@sitecore-content-sdk/core/client';
 export { mediaApi } from '@sitecore-content-sdk/core/media';
 export { Form } from './components/Form';
-export { ComponentFactory, JssComponentType } from './components/sharedTypes';
+export { ReactJssComponent, ComponentMap, ReactModule } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './components/RichText';
@@ -24,7 +24,6 @@ export { withSitecoreContext, useSitecoreContext, WithSitecoreContextOptions, Wi
 export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
-export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
 export { withFieldMetadata } from './enhancers/withFieldMetadata';
 export { withEmptyFieldEditingComponent } from './enhancers/withEmptyFieldEditingComponent';
 export { EditingScripts } from './components/EditingScripts';

package/dist/cjs/ComponentBuilder.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBuilder = void 0;
-/**
- * React implementation of component builder class for building components based on the configuration.
- */
-class ComponentBuilder {
-    constructor(config) {
-        this.config = config;
-        this.components = new Map([...config.components]);
-    }
-    /**
-     * Creates a new instance of component factory
-     * @returns {ComponentFactory} Component factory implementation
-     */
-    getComponentFactory() {
-        return (componentName) => {
-            const component = this.components.get(componentName);
-            if (!component)
-                return null;
-            return component;
-        };
-    }
-}
-exports.ComponentBuilder = ComponentBuilder;

package/dist/esm/ComponentBuilder.js

@@ -1,21 +0,0 @@
-/**
- * React implementation of component builder class for building components based on the configuration.
- */
-export class ComponentBuilder {
-    constructor(config) {
-        this.config = config;
-        this.components = new Map([...config.components]);
-    }
-    /**
-     * Creates a new instance of component factory
-     * @returns {ComponentFactory} Component factory implementation
-     */
-    getComponentFactory() {
-        return (componentName) => {
-            const component = this.components.get(componentName);
-            if (!component)
-                return null;
-            return component;
-        };
-    }
-}

package/dist/esm/enhancers/withComponentFactory.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { ComponentFactoryReactContext } from '../components/SitecoreContext';
-import { useContext } from 'react';
-/**
- * @param {React.ComponentClass<T> | React.FC<T>} Component
- */
-export function withComponentFactory(Component) {
-    /**
-     * @param {T} props - props to pass to the wrapped component
-     * @returns {JSX.Element} - the rendered component
-     */
-    function WithComponentFactory(props) {
-        const context = useContext(ComponentFactoryReactContext);
-        return React.createElement(Component, Object.assign({}, props, { componentFactory: props.componentFactory || context }));
-    }
-    WithComponentFactory.displayName = `withComponentFactory(${Component.displayName ||
-        Component.name ||
-        'Anonymous'})`;
-    return WithComponentFactory;
-}

package/types/ComponentBuilder.d.ts

@@ -1,27 +0,0 @@
-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/sharedTypes.d.ts

@@ -1,28 +0,0 @@
-import { ComponentType } from 'react';
-/**
- * @param {string} componentName component to be imported from the component factory
- * @param {string?} exportName component to be imported in case you export multiple components from the same file
- */
-export type ComponentFactory = (componentName: string, exportName?: string) => JssComponentType | null;
-/**
- * Component type returned from component builder / factory
- */
-export type JssComponentType = ComponentType & {
-    render?: {
-        [key: string]: unknown;
-    };
-};
-/**
- * Shared editing field props
- */
-export interface EditableFieldProps {
-    /**
-     * Can be used to explicitly disable inline editing.
-     * @default true
-     */
-    editable?: boolean;
-    /**
-     * Custom element to render in Pages in edit mode if field value is empty
-     */
-    emptyFieldEditingComponent?: React.ComponentClass<unknown> | React.FC<unknown>;
-}

package/types/enhancers/withComponentFactory.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { ComponentFactory } from '../components/sharedTypes';
-export interface ComponentFactoryProps {
-    componentFactory?: ComponentFactory;
-}
-/**
- * @param {React.ComponentClass<T> | React.FC<T>} Component
- */
-export declare function withComponentFactory<T extends ComponentFactoryProps>(Component: React.ComponentClass<T> | React.FC<T>): {
-    (props: T): JSX.Element;
-    displayName: string;
-};