@sitecore-jss/sitecore-jss 22.4.1 → 22.5.0-beta.1

package/dist/cjs/editing/rest-component-layout-service.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RestComponentLayoutService = void 0;
+const rest_layout_service_1 = require("../layout/rest-layout-service");
+const __1 = require("..");
+/**
+ * REST service that enables Component Library functioality
+ * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
+ * Returns layoutData for one single rendered component
+ */
+class RestComponentLayoutService extends rest_layout_service_1.RestLayoutService {
+    constructor(config) {
+        super(config);
+        this.config = config;
+    }
+    fetchComponentData(params, req, res) {
+        params.siteName = params.siteName || this.config.siteName;
+        const querystringParams = this.getComponentFetchParams(params);
+        __1.debug.layout('fetching component with uid %s for %s %s %s', params.componentUid, params.itemId, params.language, params.siteName);
+        const fetcher = this.getFetcher(req, res);
+        const fetchUrl = this.resolveLayoutServiceUrl('component');
+        return (0, __1.fetchData)(fetchUrl, fetcher, querystringParams).catch((error) => {
+            var _a;
+            if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404) {
+                return error.response.data;
+            }
+            throw error;
+        });
+    }
+    getComponentFetchParams(params) {
+        // exclude undefined params with this one simple trick
+        return JSON.parse(JSON.stringify({
+            sc_apikey: this.config.apiKey,
+            item: params.itemId,
+            uid: params.componentUid,
+            dataSourceId: params.dataSourceId,
+            renderingItemId: params.renderingId,
+            version: params.version,
+            sc_site: params.siteName,
+            sc_lang: params.language || 'en',
+            sc_mode: params.editMode,
+        }));
+    }
+}
+exports.RestComponentLayoutService = RestComponentLayoutService;

package/dist/cjs/layout/index.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentLibraryStylesheetLinks = exports.GRAPHQL_LAYOUT_QUERY_NAME = exports.GraphQLLayoutService = exports.RestLayoutService = exports.getContentStylesheetLink = exports.EMPTY_DATE_FIELD_VALUE = exports.getDynamicPlaceholderPattern = exports.isDynamicPlaceholder = exports.isFieldValueEmpty = exports.getChildPlaceholder = exports.getFieldValue = exports.EditMode = exports.LayoutServicePageState = void 0;
+exports.getComponentLibraryStylesheetLinks = exports.GRAPHQL_LAYOUT_QUERY_NAME = exports.GraphQLLayoutService = exports.RestLayoutService = exports.getContentStylesheetLink = exports.EMPTY_DATE_FIELD_VALUE = exports.getDynamicPlaceholderPattern = exports.isDynamicPlaceholder = exports.isFieldValueEmpty = exports.getChildPlaceholder = exports.getFieldValue = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditMode = exports.LayoutServicePageState = void 0;
 // layout
 var models_1 = require("./models");
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return models_1.LayoutServicePageState; } });
 Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return models_1.EditMode; } });
+Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return models_1.RenderingType; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_PLACEHOLDER; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return models_1.EDITING_COMPONENT_ID; } });
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return utils_1.getFieldValue; } });
 Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return utils_1.getChildPlaceholder; } });

package/dist/cjs/layout/models.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditMode = exports.LayoutServicePageState = void 0;
+exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditMode = exports.LayoutServicePageState = void 0;
 /**
  * Layout Service page state enum
+ * library mode would render a single component
  */
 var LayoutServicePageState;
 (function (LayoutServicePageState) {
@@ -20,3 +21,18 @@ var EditMode;
     EditMode["Chromes"] = "chromes";
     EditMode["Metadata"] = "metadata";
 })(EditMode || (exports.EditMode = EditMode = {}));
+/**
+ * Editing rendering type
+ */
+var RenderingType;
+(function (RenderingType) {
+    RenderingType["Component"] = "component";
+})(RenderingType || (exports.RenderingType = RenderingType = {}));
+/**
+ * Static placeholder name used for component rendering
+ */
+exports.EDITING_COMPONENT_PLACEHOLDER = 'editing-componentmode-placeholder';
+/**
+ * Id of wrapper for component rendering
+ */
+exports.EDITING_COMPONENT_ID = 'editing-component';

package/dist/cjs/layout/rest-layout-service.js

@@ -40,6 +40,11 @@ class RestLayoutService extends layout_service_1.LayoutServiceBase {
                 tracking: (_a = this.serviceConfig.tracking) !== null && _a !== void 0 ? _a : true,
             };
         };
+        this.getFetcher = (req, res) => {
+            return this.serviceConfig.dataFetcherResolver
+                ? this.serviceConfig.dataFetcherResolver(req, res)
+                : this.getDefaultFetcher(req, res);
+        };
         /**
          * Returns a fetcher function pre-configured with headers from the incoming request.
          * Provides default @see NativeDataFetcher data fetcher
@@ -77,9 +82,7 @@ class RestLayoutService extends layout_service_1.LayoutServiceBase {
             var _a;
             const querystringParams = this.getFetchParams(language);
             debug_1.default.layout('fetching layout data for %s %s %s', itemPath, language, this.serviceConfig.siteName);
-            const fetcher = this.serviceConfig.dataFetcherResolver
-                ? this.serviceConfig.dataFetcherResolver(req, res)
-                : this.getDefaultFetcher(req, res);
+            const fetcher = this.getFetcher(req, res);
             const fetchUrl = this.resolveLayoutServiceUrl('render');
             try {
                 return yield (0, data_fetcher_1.fetchData)(fetchUrl, fetcher, Object.assign({ item: itemPath }, querystringParams));

package/dist/esm/editing/component-library.js

@@ -0,0 +1,98 @@
+/**
+ * Event to be sent when report status to component library
+ */
+export const COMPONENT_LIBRARY_STATUS_EVENT_NAME = 'component:status';
+/**
+ * Enumeration of statuses for the component library.
+ */
+export var ComponentLibraryStatus;
+(function (ComponentLibraryStatus) {
+    ComponentLibraryStatus["READY"] = "ready";
+    ComponentLibraryStatus["RENDERED"] = "rendered";
+})(ComponentLibraryStatus || (ComponentLibraryStatus = {}));
+/**
+ * Adds the browser-side event handler for 'component:update' message used in Component Library
+ * The event should update a component on page by uid, with fields and params from event args
+ * @param {ComponentRendering} rootComponent root component displayed for Component Library page
+ * @param {Function} successCallback  callback to be called after successful component update
+ */
+export const addComponentUpdateHandler = (rootComponent, successCallback) => {
+    if (!window)
+        return;
+    const handler = (e) => updateComponentHandler(e, rootComponent, successCallback);
+    window.addEventListener('message', handler);
+    // the power to remove handler outside of this function, if needed
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+const validateOrigin = (event) => {
+    // TODO: use `EDITING_ALLOWED_ORIGINS.concat(getAllowedOriginsFromEnv())` later
+    // nextjs's JSS_ALLOWED_ORIGINS is not available on the client, need to use NEXT_PUBLIC_ variable, but it's a breaking change for Deploy
+    const allowedOrigins = ['*'];
+    return allowedOrigins.some((origin) => origin === event.origin ||
+        new RegExp('^' + origin.replace('.', '\\.').replace(/\*/g, '.*') + '$').test(event.origin));
+};
+export const updateComponentHandler = (e, rootComponent, successCallback) => {
+    var _a;
+    const eventArgs = e.data;
+    if (!e.origin || !eventArgs || eventArgs.name !== 'component:update') {
+        // avoid extra noise in logs
+        if (!validateOrigin(e)) {
+            console.debug('Component Library: event skipped: message %s from origin %s', eventArgs.name, e.origin);
+        }
+        return;
+    }
+    if (!((_a = eventArgs.details) === null || _a === void 0 ? void 0 : _a.uid)) {
+        console.debug('Received component:update event without uid, aborting event handler...');
+        return;
+    }
+    const findComponent = (root) => {
+        var _a, _b;
+        if (((_a = root.uid) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = eventArgs.details) === null || _b === void 0 ? void 0 : _b.uid.toLowerCase()))
+            return root;
+        if (root.placeholders) {
+            for (const plhName of Object.keys(root.placeholders)) {
+                for (const rendering of root.placeholders[plhName]) {
+                    const result = findComponent(rendering);
+                    if (result)
+                        return result;
+                }
+            }
+        }
+        return null;
+    };
+    const updateComponent = findComponent(rootComponent);
+    if (updateComponent) {
+        console.debug('Found component with uid %s to update. Update fields: %o. Update params: %o.', eventArgs.details.uid, eventArgs.details.fields, eventArgs.details.params);
+        if (eventArgs.details.fields) {
+            updateComponent.fields = Object.assign(Object.assign({}, updateComponent.fields), eventArgs.details.fields);
+        }
+        if (eventArgs.details.params) {
+            updateComponent.params = Object.assign(Object.assign({}, updateComponent.params), eventArgs.details.params);
+        }
+        if (successCallback)
+            successCallback(rootComponent);
+    }
+    else {
+        console.debug('Rendering with uid %s not found', eventArgs.details.uid);
+    }
+    // strictly for testing
+    return rootComponent;
+};
+/**
+ * Generates a ComponentLibraryStatusEvent with the given status and uid.
+ * @param {ComponentLibraryStatus} status - The status of rendering.
+ * @param {string} uid - The unique identifier for the event.
+ * @returns An object representing the ComponentLibraryStatusEvent.
+ */
+export function getComponentLibraryStatusEvent(status, uid) {
+    return {
+        name: COMPONENT_LIBRARY_STATUS_EVENT_NAME,
+        message: {
+            status,
+            uid,
+        },
+    };
+}

package/dist/esm/editing/graphql-editing-service.js

@@ -97,7 +97,7 @@ export class GraphQLEditingService {
      */
     fetchEditingData(_a) {
         return __awaiter(this, arguments, void 0, function* ({ siteName, itemId, language, version, layoutKind = LayoutKind.Final, }) {
-            var _b, _c, _d, _e, _f;
+            var _b, _c, _d;
             debug.editing('fetching editing data for %s %s %s %s', siteName, itemId, language, version, layoutKind);
             if (!siteName) {
                 throw new RangeError('The site name must be a non-empty string');
@@ -105,7 +105,6 @@ export class GraphQLEditingService {
             if (!language) {
                 throw new RangeError('The language must be a non-empty string');
             }
-            const dictionary = {};
             let dictionaryResults = [];
             let hasNext = true;
             let after = '';
@@ -127,13 +126,30 @@ export class GraphQLEditingService {
             else {
                 hasNext = false;
             }
+            const dictionary = yield this.fetchDictionaryData({ siteName, language }, dictionaryResults, hasNext, after);
+            return {
+                layoutData: ((_d = editingData === null || editingData === void 0 ? void 0 : editingData.item) === null || _d === void 0 ? void 0 : _d.rendered) || {
+                    sitecore: {
+                        context: { pageEditing: true, language, editMode: EditMode.Metadata },
+                        route: null,
+                    },
+                },
+                dictionary,
+            };
+        });
+    }
+    fetchDictionaryData(_a) {
+        return __awaiter(this, arguments, void 0, function* ({ siteName, language, }, initDictionary = [], hasNext = true, after) {
+            var _b, _c;
+            let dictionaryResults = initDictionary;
+            const dictionary = {};
             while (hasNext) {
                 const data = yield this.graphQLClient.request(dictionaryQuery, {
                     siteName,
                     language,
                     after,
                 });
-                if ((_e = (_d = data === null || data === void 0 ? void 0 : data.site) === null || _d === void 0 ? void 0 : _d.siteInfo) === null || _e === void 0 ? void 0 : _e.dictionary) {
+                if ((_c = (_b = data === null || data === void 0 ? void 0 : data.site) === null || _b === void 0 ? void 0 : _b.siteInfo) === null || _c === void 0 ? void 0 : _c.dictionary) {
                     dictionaryResults = dictionaryResults.concat(data.site.siteInfo.dictionary.results);
                     hasNext = data.site.siteInfo.dictionary.pageInfo.hasNext;
                     after = data.site.siteInfo.dictionary.pageInfo.endCursor;
@@ -143,15 +159,7 @@ export class GraphQLEditingService {
                 }
             }
             dictionaryResults.forEach((item) => (dictionary[item.key] = item.value));
-            return {
-                layoutData: ((_f = editingData === null || editingData === void 0 ? void 0 : editingData.item) === null || _f === void 0 ? void 0 : _f.rendered) || {
-                    sitecore: {
-                        context: { pageEditing: true, language, editMode: EditMode.Metadata },
-                        route: null,
-                    },
-                },
-                dictionary,
-            };
+            return dictionary;
         });
     }
     /**

package/dist/esm/editing/index.js

@@ -1,4 +1,6 @@
 export { GraphQLEditingService } from './graphql-editing-service';
 export { DEFAULT_PLACEHOLDER_UID, ExperienceEditor, HorizonEditor, isEditorActive, resetEditorChromes, handleEditorAnchors, getJssPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, } from './utils';
+export { RestComponentLayoutService, } from './rest-component-layout-service';
 export { DefaultEditFrameButton, DefaultEditFrameButtons, DefaultEditFrameButtonIds, mapButtonToCommand, } from './edit-frame';
 export { LayoutKind, MetadataKind } from './models';
+export { addComponentUpdateHandler, ComponentLibraryStatus, getComponentLibraryStatusEvent, } from './component-library';

package/dist/esm/editing/rest-component-layout-service.js

@@ -0,0 +1,41 @@
+import { RestLayoutService } from '../layout/rest-layout-service';
+import { debug, fetchData } from '..';
+/**
+ * REST service that enables Component Library functioality
+ * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
+ * Returns layoutData for one single rendered component
+ */
+export class RestComponentLayoutService extends RestLayoutService {
+    constructor(config) {
+        super(config);
+        this.config = config;
+    }
+    fetchComponentData(params, req, res) {
+        params.siteName = params.siteName || this.config.siteName;
+        const querystringParams = this.getComponentFetchParams(params);
+        debug.layout('fetching component with uid %s for %s %s %s', params.componentUid, params.itemId, params.language, params.siteName);
+        const fetcher = this.getFetcher(req, res);
+        const fetchUrl = this.resolveLayoutServiceUrl('component');
+        return fetchData(fetchUrl, fetcher, querystringParams).catch((error) => {
+            var _a;
+            if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404) {
+                return error.response.data;
+            }
+            throw error;
+        });
+    }
+    getComponentFetchParams(params) {
+        // exclude undefined params with this one simple trick
+        return JSON.parse(JSON.stringify({
+            sc_apikey: this.config.apiKey,
+            item: params.itemId,
+            uid: params.componentUid,
+            dataSourceId: params.dataSourceId,
+            renderingItemId: params.renderingId,
+            version: params.version,
+            sc_site: params.siteName,
+            sc_lang: params.language || 'en',
+            sc_mode: params.editMode,
+        }));
+    }
+}

package/dist/esm/layout/index.js

@@ -1,5 +1,5 @@
 // layout
-export { LayoutServicePageState, EditMode, } from './models';
+export { LayoutServicePageState, EditMode, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from './models';
 export { getFieldValue, getChildPlaceholder, isFieldValueEmpty, isDynamicPlaceholder, getDynamicPlaceholderPattern, EMPTY_DATE_FIELD_VALUE, } from './utils';
 export { getContentStylesheetLink } from './content-styles';
 export { RestLayoutService, } from './rest-layout-service';

package/dist/esm/layout/models.js

@@ -1,5 +1,6 @@
 /**
  * Layout Service page state enum
+ * library mode would render a single component
  */
 export var LayoutServicePageState;
 (function (LayoutServicePageState) {
@@ -17,3 +18,18 @@ export var EditMode;
     EditMode["Chromes"] = "chromes";
     EditMode["Metadata"] = "metadata";
 })(EditMode || (EditMode = {}));
+/**
+ * Editing rendering type
+ */
+export var RenderingType;
+(function (RenderingType) {
+    RenderingType["Component"] = "component";
+})(RenderingType || (RenderingType = {}));
+/**
+ * Static placeholder name used for component rendering
+ */
+export const EDITING_COMPONENT_PLACEHOLDER = 'editing-componentmode-placeholder';
+/**
+ * Id of wrapper for component rendering
+ */
+export const EDITING_COMPONENT_ID = 'editing-component';

package/dist/esm/layout/rest-layout-service.js

@@ -34,6 +34,11 @@ export class RestLayoutService extends LayoutServiceBase {
                 tracking: (_a = this.serviceConfig.tracking) !== null && _a !== void 0 ? _a : true,
             };
         };
+        this.getFetcher = (req, res) => {
+            return this.serviceConfig.dataFetcherResolver
+                ? this.serviceConfig.dataFetcherResolver(req, res)
+                : this.getDefaultFetcher(req, res);
+        };
         /**
          * Returns a fetcher function pre-configured with headers from the incoming request.
          * Provides default @see NativeDataFetcher data fetcher
@@ -71,9 +76,7 @@ export class RestLayoutService extends LayoutServiceBase {
             var _a;
             const querystringParams = this.getFetchParams(language);
             debug.layout('fetching layout data for %s %s %s', itemPath, language, this.serviceConfig.siteName);
-            const fetcher = this.serviceConfig.dataFetcherResolver
-                ? this.serviceConfig.dataFetcherResolver(req, res)
-                : this.getDefaultFetcher(req, res);
+            const fetcher = this.getFetcher(req, res);
             const fetchUrl = this.resolveLayoutServiceUrl('render');
             try {
                 return yield fetchData(fetchUrl, fetcher, Object.assign({ item: itemPath }, querystringParams));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss",
-  "version": "22.4.1",
+  "version": "22.5.0-beta.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -65,7 +65,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "627a7190d59f910247e54329198d7bf842d97916",
+  "gitHead": "e080916b354c36e63f29f01fbcb87688d7f2b4cd",
   "files": [
     "dist",
     "types",

package/types/editing/component-library.d.ts

@@ -0,0 +1,48 @@
+import { ComponentRendering, Field, GenericFieldValue } from '../layout/models';
+/**
+ * Event to be sent when report status to component library
+ */
+export declare const COMPONENT_LIBRARY_STATUS_EVENT_NAME = "component:status";
+/**
+ * Represents an event indicating the status of a component in the library.
+ */
+export interface ComponentLibraryStatusEvent {
+    name: typeof COMPONENT_LIBRARY_STATUS_EVENT_NAME;
+    message: {
+        status: 'ready' | 'rendered';
+        uid: string;
+    };
+}
+/**
+ * Enumeration of statuses for the component library.
+ */
+export declare enum ComponentLibraryStatus {
+    READY = "ready",
+    RENDERED = "rendered"
+}
+/**
+ * Event args for Component Library `update` event
+ */
+export interface ComponentUpdateEventArgs {
+    name: string;
+    details?: {
+        uid: string;
+        params?: Record<string, string>;
+        fields?: Record<string, Field<GenericFieldValue>>;
+    };
+}
+/**
+ * Adds the browser-side event handler for 'component:update' message used in Component Library
+ * The event should update a component on page by uid, with fields and params from event args
+ * @param {ComponentRendering} rootComponent root component displayed for Component Library page
+ * @param {Function} successCallback  callback to be called after successful component update
+ */
+export declare const addComponentUpdateHandler: (rootComponent: ComponentRendering, successCallback?: (updatedRootComponent: ComponentRendering) => void) => (() => void) | undefined;
+export declare const updateComponentHandler: (e: MessageEvent, rootComponent: ComponentRendering, successCallback?: (updatedRootComponent: ComponentRendering) => void) => ComponentRendering<import("../layout/models").ComponentFields> | undefined;
+/**
+ * Generates a ComponentLibraryStatusEvent with the given status and uid.
+ * @param {ComponentLibraryStatus} status - The status of rendering.
+ * @param {string} uid - The unique identifier for the event.
+ * @returns An object representing the ComponentLibraryStatusEvent.
+ */
+export declare function getComponentLibraryStatusEvent(status: ComponentLibraryStatus, uid: string): ComponentLibraryStatusEvent;

package/types/editing/graphql-editing-service.d.ts

@@ -75,6 +75,13 @@ export declare class GraphQLEditingService {
         layoutData: LayoutServiceData;
         dictionary: DictionaryPhrases;
     }>;
+    fetchDictionaryData({ siteName, language, }: {
+        siteName: string;
+        language: string;
+    }, initDictionary?: {
+        key: string;
+        value: string;
+    }[], hasNext?: boolean, after?: string): Promise<DictionaryPhrases>;
     /**
      * Gets a GraphQL client that can make requests to the API.
      * @returns {GraphQLClient} implementation

package/types/editing/index.d.ts

@@ -1,5 +1,7 @@
 export { GraphQLEditingService } from './graphql-editing-service';
-export { DEFAULT_PLACEHOLDER_UID, ExperienceEditor, HorizonEditor, isEditorActive, resetEditorChromes, handleEditorAnchors, Metadata, getJssPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, } from './utils';
+export { DEFAULT_PLACEHOLDER_UID, ExperienceEditor, HorizonEditor, isEditorActive, resetEditorChromes, handleEditorAnchors, Metadata, getJssPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, ComponentUpdateEventArgs, } from './utils';
+export { RestComponentLayoutService, ComponentLayoutRequestParams, } from './rest-component-layout-service';
 export { DefaultEditFrameButton, DefaultEditFrameButtons, DefaultEditFrameButtonIds, EditFrameDataSource, ChromeCommand, FieldEditButton, WebEditButton, EditButtonTypes, mapButtonToCommand, } from './edit-frame';
-export { RenderMetadataQueryParams } from './models';
+export { RenderMetadataQueryParams, RenderComponentQueryParams } from './models';
 export { LayoutKind, MetadataKind } from './models';
+export { addComponentUpdateHandler, ComponentLibraryStatus, ComponentLibraryStatusEvent, getComponentLibraryStatusEvent, } from './component-library';

package/types/editing/models.d.ts

@@ -2,6 +2,7 @@ import { LayoutServicePageState } from '../layout';
 /**
  * Query parameters appended to the page route URL
  * Appended when XMCloud Pages preview (editing) Metadata Edit Mode is used
+ * `mode` is a special case as it serves editing and component library both
  */
 export interface RenderMetadataQueryParams {
     [key: string]: unknown;
@@ -10,11 +11,27 @@ export interface RenderMetadataQueryParams {
     sc_itemid: string;
     sc_site: string;
     route: string;
-    mode: Exclude<LayoutServicePageState, 'normal'>;
+    mode: Exclude<LayoutServicePageState, 'normal'> | 'library';
     sc_layoutKind?: LayoutKind;
     sc_variant?: string;
     sc_version?: string;
 }
+/**
+ * Query parameters appended for Component Library functionaity.
+ * Used when a single component is rendered in Pages.
+ */
+export interface RenderComponentQueryParams {
+    [key: string]: unknown;
+    secret: string;
+    sc_lang: string;
+    sc_itemid: string;
+    sc_renderingId: string;
+    sc_uid: string;
+    sc_site: string;
+    mode: 'library';
+    sc_variant?: string;
+    sc_version?: string;
+}
 /**
  * Represents the Editing Layout variant.
  * - shared - shared layout

package/types/editing/rest-component-layout-service.d.ts

@@ -0,0 +1,52 @@
+import { RestLayoutServiceConfig, RestLayoutService } from '../layout/rest-layout-service';
+import { LayoutServiceData, EditMode } from '../layout/models';
+import { IncomingMessage, ServerResponse } from 'http';
+/**
+ * Params for requesting component data from service in Component Library mode
+ */
+export interface ComponentLayoutRequestParams {
+    /**
+     * Item id to be used as context for rendering the component
+     */
+    itemId: string;
+    /**
+     * Component identifier. Can be either taken from item's layout details or
+     * an arbitrary one (component renderingId and datasource would be used for identification then)
+     */
+    componentUid: string;
+    /**
+     * language to render component in
+     */
+    language?: string;
+    /**
+     * optional component datasource
+     */
+    dataSourceId?: string;
+    /**
+     * ID of the component definition rendering item in Sitecore
+     */
+    renderingId?: string;
+    /**
+     * version of the context item (latest by default)
+     */
+    version?: string;
+    /**
+     * edit mode (edit, preview) to be rendered component in. Component is rendered in normal mode by default
+     */
+    editMode?: EditMode;
+    /**
+     * site name to be used as context for rendering the component
+     */
+    siteName?: string;
+}
+/**
+ * REST service that enables Component Library functioality
+ * Makes a request to /sitecore/api/layout/component in 'library' mode in Pages.
+ * Returns layoutData for one single rendered component
+ */
+export declare class RestComponentLayoutService extends RestLayoutService {
+    private config;
+    constructor(config: RestLayoutServiceConfig);
+    fetchComponentData(params: ComponentLayoutRequestParams, req?: IncomingMessage, res?: ServerResponse): Promise<LayoutServiceData>;
+    protected getComponentFetchParams(params: ComponentLayoutRequestParams): any;
+}

package/types/editing/utils.d.ts

@@ -1,3 +1,4 @@
+import { Field, GenericFieldValue } from '../layout/models';
 /**
  * Default value of uid for root placeholder when uid is not present.
  */
@@ -15,6 +16,17 @@ export declare const PAGES_EDITING_MARKER = "jss-hrz-editing";
  * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
  */
 export declare const EDITING_ALLOWED_ORIGINS: string[];
+/**
+ * Event args for Component Library `update` event
+ */
+export interface ComponentUpdateEventArgs {
+    name: string;
+    details?: {
+        uid: string;
+        params?: Record<string, string>;
+        fields?: Record<string, Field<GenericFieldValue>>;
+    };
+}
 /**
  * Application metadata
  */

package/types/layout/index.d.ts

@@ -1,4 +1,4 @@
-export { LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, RouteData, PlaceholderData, ComponentRendering, HtmlElementRendering, Field, GenericFieldValue, Item, PlaceholdersData, ComponentFields, ComponentParams, EditMode, FieldMetadata, } from './models';
+export { LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, RouteData, PlaceholderData, ComponentRendering, HtmlElementRendering, Field, GenericFieldValue, Item, PlaceholdersData, ComponentFields, ComponentParams, EditMode, FieldMetadata, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from './models';
 export { getFieldValue, getChildPlaceholder, isFieldValueEmpty, isDynamicPlaceholder, getDynamicPlaceholderPattern, EMPTY_DATE_FIELD_VALUE, } from './utils';
 export { getContentStylesheetLink } from './content-styles';
 export { LayoutService } from './layout-service';

package/types/layout/models.d.ts

@@ -8,6 +8,7 @@ export interface LayoutServiceData {
 }
 /**
  * Layout Service page state enum
+ * library mode would render a single component
  */
 export declare enum LayoutServicePageState {
     Preview = "preview",
@@ -36,6 +37,7 @@ export interface LayoutServiceContext {
     site?: {
         name?: string;
     };
+    renderingType?: RenderingType;
     editMode?: EditMode;
     clientScripts?: string[];
     clientData?: Record<string, Record<string, unknown>>;
@@ -144,3 +146,17 @@ export interface PlaceholderData {
     path: string;
     elements: Array<HtmlElementRendering | ComponentRendering>;
 }
+/**
+ * Editing rendering type
+ */
+export declare enum RenderingType {
+    Component = "component"
+}
+/**
+ * Static placeholder name used for component rendering
+ */
+export declare const EDITING_COMPONENT_PLACEHOLDER = "editing-componentmode-placeholder";
+/**
+ * Id of wrapper for component rendering
+ */
+export declare const EDITING_COMPONENT_ID = "editing-component";

package/types/layout/rest-layout-service.d.ts

@@ -81,12 +81,13 @@ export declare class RestLayoutService extends LayoutServiceBase {
      * @returns {FetchOptions} fetch options
      */
     protected getFetchParams: (language?: string) => FetchParams;
+    protected getFetcher: (req?: IncomingMessage, res?: ServerResponse) => HttpDataFetcher<LayoutServiceData> | NativeDataFetcherFunction<LayoutServiceData>;
     /**
      * Resolves layout service url
      * @param {string} apiType which layout service API to call ('render' or 'placeholder')
      * @returns the layout service url
      */
-    protected resolveLayoutServiceUrl(apiType: 'render' | 'placeholder'): string;
+    protected resolveLayoutServiceUrl(apiType: 'render' | 'placeholder' | 'component'): string;
     /**
      * Returns a fetcher function pre-configured with headers from the incoming request.
      * Provides default @see NativeDataFetcher data fetcher