@sitecore-jss/sitecore-jss-react 22.4.1-canary.2 → 22.5.0-beta.1

package/dist/cjs/components/ComponentLibraryLayout.js

@@ -0,0 +1,70 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentLibraryLayout = void 0;
+const react_1 = __importStar(require("react"));
+const Placeholder_1 = require("./Placeholder");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+const EditingScripts_1 = require("./EditingScripts");
+const ComponentLibraryLayout = (layoutData) => {
+    const { route } = layoutData.sitecore;
+    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
+    const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
+    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
+    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
+    let componentReady = false;
+    // have an up-to-date layout state between re-renders (SSR re-render excluded)
+    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
+        rootComponent,
+        rootUpdate,
+    ]);
+    route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
+    (0, react_1.useEffect)(() => {
+        // useEffect will fire when components are ready - and we inform the whole wide world of it too
+        if (!componentReady) {
+            componentReady = true;
+            window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.READY, rootComponent.uid), '*');
+        }
+        const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
+            setRootUpdate(Object.assign({}, updatedRoot));
+            setRenderKey((key) => key + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return unsubscribe;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0) {
+            return;
+        }
+        window.top.postMessage((0, editing_1.getComponentLibraryStatusEvent)(editing_1.ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
+    }, [renderKey, rootComponent.uid]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(EditingScripts_1.EditingScripts, null),
+        react_1.default.createElement("main", null,
+            react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
+};
+exports.ComponentLibraryLayout = ComponentLibraryLayout;

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withFieldMetadata = exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
-exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = void 0;
+exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.ComponentLibraryLayout = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
@@ -49,6 +49,8 @@ Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: functi
 Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
 var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
 Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
+var ComponentLibraryLayout_1 = require("./components/ComponentLibraryLayout");
+Object.defineProperty(exports, "ComponentLibraryLayout", { enumerable: true, get: function () { return ComponentLibraryLayout_1.ComponentLibraryLayout; } });
 var BYOCComponent_1 = require("./components/BYOCComponent");
 Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
 Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });

package/dist/esm/components/ComponentLibraryLayout.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Placeholder } from './Placeholder';
+import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-jss/sitecore-jss/layout';
+import { ComponentLibraryStatus, getComponentLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-jss/sitecore-jss/editing';
+import { EditingScripts } from './EditingScripts';
+export const ComponentLibraryLayout = (layoutData) => {
+    const { route } = layoutData.sitecore;
+    const [renderKey, setRenderKey] = useState(0);
+    const [rootUpdate, setRootUpdate] = useState(null);
+    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
+    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
+    let componentReady = false;
+    // have an up-to-date layout state between re-renders (SSR re-render excluded)
+    const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
+        rootComponent,
+        rootUpdate,
+    ]);
+    route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
+    useEffect(() => {
+        // useEffect will fire when components are ready - and we inform the whole wide world of it too
+        if (!componentReady) {
+            componentReady = true;
+            window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.READY, rootComponent.uid), '*');
+        }
+        const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
+            setRootUpdate(Object.assign({}, updatedRoot));
+            setRenderKey((key) => key + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0) {
+            return;
+        }
+        window.top.postMessage(getComponentLibraryStatusEvent(ComponentLibraryStatus.RENDERED, rootComponent.uid), '*');
+    }, [renderKey, rootComponent.uid]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditingScripts, null),
+        React.createElement("main", null,
+            React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
+};

package/dist/esm/index.js

@@ -12,6 +12,7 @@ export { Text } from './components/Text';
 export { DateField } from './components/Date';
 export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
 export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
 export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkPropTypes } from './components/Link';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.4.1-canary.2",
+  "version": "22.5.0-beta.1",
   "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.4.1-canary.2",
+    "@sitecore-jss/sitecore-jss": "^22.5.0-beta.1",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "7cec13189f26fb9287541720fd1491bfcc9c24b8",
+  "gitHead": "e080916b354c36e63f29f01fbcb87688d7f2b4cd",
   "files": [
     "dist",
     "types"

package/types/components/ComponentLibraryLayout.d.ts

@@ -0,0 +1,2 @@
+import { LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
+export declare const ComponentLibraryLayout: (layoutData: LayoutServiceData) => JSX.Element;

package/types/index.d.ts

@@ -14,6 +14,7 @@ export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
 export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
 export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { ComponentLibraryLayout } from './components/ComponentLibraryLayout';
 export { BYOCComponent, BYOCComponentParams, BYOCComponentProps, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
 export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';