@sitecore-jss/sitecore-jss-react 22.5.0-beta.5 → 22.5.0-beta.7

package/dist/cjs/components/EditingScripts.js

@@ -8,16 +8,29 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
 const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+const editing_2 = require("@sitecore-jss/sitecore-jss/editing");
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * - Renders client scripts and data for editing/preview mode for Pages
+ * - Renders script required for the Design Library (when RenderingType is `component`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @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, editMode, 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) {
+const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, editMode, 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)) {
         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 })));
+    }
     if (editMode === layout_1.EditMode.Metadata) {
         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 :

package/dist/cjs/enhancers/withDatasourceCheck.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withDatasourceCheck = exports.DefaultEditingError = void 0;
 const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const withSitecoreContext_1 = require("./withSitecoreContext");
 const DefaultEditingError = () => (react_1.default.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 exports.DefaultEditingError = DefaultEditingError;
@@ -21,7 +22,9 @@ function withDatasourceCheck(options) {
             var _a, _b;
             const { sitecoreContext } = (0, withSitecoreContext_1.useSitecoreContext)();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : exports.DefaultEditingError;
-            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
+            // If the component is rendered in DesignLibrary, we don't need to check for datasource
+            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === layout_1.RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (react_1.default.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (react_1.default.createElement(EditingError, null)) : null;
         };
     };
 }

package/dist/esm/components/EditingScripts.js

@@ -1,17 +1,30 @@
 import React from 'react';
-import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { EditMode, LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from '../enhancers/withSitecoreContext';
 import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
+import { getDesignLibraryScriptLink } from '@sitecore-jss/sitecore-jss/editing';
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * - Renders client scripts and data for editing/preview mode for Pages
+ * - Renders script required for the Design Library (when RenderingType is `component`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @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, editMode, clientData, clientScripts }, } = useSitecoreContext();
-    // Don't render anything if not in editing/preview mode
-    if (pageState === LayoutServicePageState.Normal || pageState === LayoutServicePageState.Preview) {
+export const EditingScripts = (props) => {
+    const { sitecoreContext: { pageState, editMode, 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)) {
         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 })));
+    }
     if (editMode === EditMode.Metadata) {
         const jssClientData = Object.assign(Object.assign({}, clientData), getJssPagesClientData());
         return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :

package/dist/esm/enhancers/withDatasourceCheck.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RenderingType } from '@sitecore-jss/sitecore-jss/layout';
 import { useSitecoreContext } from './withSitecoreContext';
 export const DefaultEditingError = () => (React.createElement("div", { className: "sc-jss-editing-error", role: "alert" }, "Datasource is required. Please choose a content item for this component."));
 /**
@@ -14,7 +15,9 @@ export function withDatasourceCheck(options) {
             var _a, _b;
             const { sitecoreContext } = useSitecoreContext();
             const EditingError = (_a = options === null || options === void 0 ? void 0 : options.editingErrorComponent) !== null && _a !== void 0 ? _a : DefaultEditingError;
-            return ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
+            // If the component is rendered in DesignLibrary, we don't need to check for datasource
+            const isDesignLibrary = (sitecoreContext === null || sitecoreContext === void 0 ? void 0 : sitecoreContext.renderingType) === RenderingType.Component;
+            return isDesignLibrary || ((_b = props.rendering) === null || _b === void 0 ? void 0 : _b.dataSource) ? (React.createElement(Component, Object.assign({}, props))) : sitecoreContext.pageEditing ? (React.createElement(EditingError, null)) : null;
         };
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.5.0-beta.5",
+  "version": "22.5.0-beta.7",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "22.5.0-beta.5",
+    "@sitecore-jss/sitecore-jss": "22.5.0-beta.7",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "3f27536c37ff0b5cf193dde5fb8e22020bc43b26",
+  "gitHead": "9d505ba46b5dbd08852c69509a61c6e720daa12b",
   "files": [
     "dist",
     "types"

package/types/components/EditingScripts.d.ts

@@ -1,5 +1,18 @@
 /**
- * Renders client scripts and data for editing/preview mode in Pages.
- * This script is only rendered when EditMode is Metadata, otherwise it renders nothing.
+ * 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`).
+ * This script is only rendered when EditMode is Metadata or RenderingType is `component`, otherwise it renders nothing.
+ * @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;