@sitecore-jss/sitecore-jss-nextjs 22.8.0-canary.9 → 22.9.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/components/NextImage.js +6 -7
  2. package/dist/cjs/editing/editing-render-middleware.js +51 -18
  3. package/dist/cjs/editing/index.js +6 -1
  4. package/dist/cjs/index.js +7 -3
  5. package/dist/esm/components/NextImage.js +6 -7
  6. package/dist/esm/editing/editing-render-middleware.js +51 -19
  7. package/dist/esm/editing/index.js +2 -1
  8. package/dist/esm/index.js +3 -2
  9. package/package.json +5 -5
  10. package/types/editing/editing-render-middleware.d.ts +24 -3
  11. package/types/editing/index.d.ts +2 -1
  12. package/types/index.d.ts +3 -2
package/dist/cjs/components/NextImage.js CHANGED
@@ -19,11 +19,9 @@ const media_1 = require("@sitecore-jss/sitecore-jss/media");
19
19
  const react_1 = __importDefault(require("react"));
20
20
  const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
21
21
  const image_1 = __importDefault(require("next/image"));
22
- const sitecore_jss_react_2 = require("@sitecore-jss/sitecore-jss-react");
23
- const sitecore_jss_react_3 = require("@sitecore-jss/sitecore-jss-react");
24
22
  const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
25
- exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss_react_2.withEmptyFieldEditingComponent)((_a) => {
26
- var _b;
23
+ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss_react_1.withEmptyFieldEditingComponent)((_a) => {
24
+ var _b, _c;
27
25
  var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
28
26
  const sitecoreContext = react_1.default.useContext(sitecore_jss_react_1.SitecoreContextReactContext);
29
27
  // next handles src and we use a custom loader,
@@ -47,9 +45,10 @@ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss
47
45
  if (!img) {
48
46
  return null;
49
47
  }
50
- // disable image optimization for Edit and Preview, but preserve original value if true
48
+ // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
51
49
  const unoptimized = otherProps.unoptimized ||
52
- ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== layout_1.LayoutServicePageState.Normal;
50
+ ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.renderingType) === layout_1.RenderingType.Component ||
51
+ ((_c = sitecoreContext.context) === null || _c === void 0 ? void 0 : _c.pageState) !== layout_1.LayoutServicePageState.Normal;
53
52
  const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
54
53
  priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
55
54
  const imageProps = Object.assign(Object.assign({}, attrs), {
@@ -65,5 +64,5 @@ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss
65
64
  return (react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps, (process.env.TEST ? { 'data-unoptimized': unoptimized } : {}))));
66
65
  }
67
66
  return null; // we can't handle the truth
68
- }, { defaultEmptyFieldEditingComponent: sitecore_jss_react_3.DefaultEmptyFieldEditingComponentImage }));
67
+ }, { defaultEmptyFieldEditingComponent: sitecore_jss_react_1.DefaultEmptyFieldEditingComponentImage }));
69
68
  exports.NextImage.displayName = 'NextImage';
package/dist/cjs/editing/editing-render-middleware.js CHANGED
@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  });
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.EditingRenderMiddleware = exports.MetadataHandler = exports.isEditingMetadataPreviewData = exports.ChromesHandler = void 0;
12
+ exports.EditingRenderMiddleware = exports.MetadataHandler = exports.isDesignLibraryPreviewData = exports.isEditingMetadataPreviewData = exports.ChromesHandler = void 0;
13
13
  const constants_1 = require("next/constants");
14
14
  const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
15
15
  const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
@@ -187,6 +187,16 @@ const isEditingMetadataPreviewData = (data) => {
187
187
  data.editMode === layout_1.EditMode.Metadata);
188
188
  };
189
189
  exports.isEditingMetadataPreviewData = isEditingMetadataPreviewData;
190
+ /**
191
+ * Type guard for Design Library mode
192
+ * @param {object} data preview data to check
193
+ * @returns true if the data is EditingMetadataPreviewData
194
+ * @see EditingMetadataPreviewData
195
+ */
196
+ const isDesignLibraryPreviewData = (data) => {
197
+ return (typeof data === 'object' && data !== null && 'mode' in data && (0, editing_1.isDesignLibraryMode)(data.mode));
198
+ };
199
+ exports.isDesignLibraryPreviewData = isDesignLibraryPreviewData;
190
200
  /**
191
201
  * Handler for the Editing Metadata GET requests.
192
202
  * This handler is responsible for redirecting the request to the page route.
@@ -200,13 +210,19 @@ class MetadataHandler {
200
210
  var _a, _b, _c;
201
211
  const { query } = req;
202
212
  const startTimestamp = Date.now();
203
- const requiredQueryParams = [
213
+ const mode = query.mode;
214
+ const metadataDefaultRequiredParams = ['sc_site', 'sc_itemid', 'sc_lang', 'route', 'mode'];
215
+ const metadataComponentRequiredParams = [
204
216
  'sc_site',
205
217
  'sc_itemid',
218
+ 'sc_renderingId',
219
+ 'sc_uid',
206
220
  'sc_lang',
207
- 'route',
208
221
  'mode',
209
222
  ];
223
+ const requiredQueryParams = (0, editing_1.isDesignLibraryMode)(mode)
224
+ ? metadataComponentRequiredParams
225
+ : metadataDefaultRequiredParams;
210
226
  const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
211
227
  // Validate query parameters
212
228
  if (missingQueryParams.length) {
@@ -215,21 +231,38 @@ class MetadataHandler {
215
231
  html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
216
232
  });
217
233
  }
218
- res.setPreviewData({
219
- site: query.sc_site,
220
- itemId: query.sc_itemid,
221
- language: query.sc_lang,
222
- // for sc_variantId we may employ multiple variants (page-layout + component level)
223
- variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [personalize_1.DEFAULT_VARIANT],
224
- version: query.sc_version,
225
- editMode: layout_1.EditMode.Metadata,
226
- pageState: query.mode,
227
- layoutKind: query.sc_layoutKind,
228
- },
229
- // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
230
- {
231
- maxAge: 3,
232
- });
234
+ if ((0, editing_1.isDesignLibraryMode)(mode)) {
235
+ res.setPreviewData({
236
+ itemId: query.sc_itemid,
237
+ componentUid: query.sc_uid,
238
+ renderingId: query.sc_renderingId,
239
+ language: query.sc_lang,
240
+ site: query.sc_site,
241
+ pageState: layout_1.LayoutServicePageState.Normal,
242
+ mode,
243
+ dataSourceId: query.dataSourceId,
244
+ version: query.sc_version,
245
+ }, {
246
+ maxAge: 3,
247
+ });
248
+ }
249
+ else {
250
+ res.setPreviewData({
251
+ site: query.sc_site,
252
+ itemId: query.sc_itemid,
253
+ language: query.sc_lang,
254
+ // for sc_variantId we may employ multiple variants (page-layout + component level)
255
+ variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [personalize_1.DEFAULT_VARIANT],
256
+ version: query.sc_version,
257
+ editMode: layout_1.EditMode.Metadata,
258
+ pageState: query.mode,
259
+ layoutKind: query.sc_layoutKind,
260
+ },
261
+ // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
262
+ {
263
+ maxAge: 3,
264
+ });
265
+ }
233
266
  // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue
234
267
  // when Next.js preview mode is activated, resulting the page to render in normal mode instead.
235
268
  // By replacing it with "SameSite=None; Secure", we ensure cookies are correctly sent with
package/dist/cjs/editing/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.isEditingMetadataPreviewData = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = exports.GraphQLEditingService = void 0;
3
+ exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.isDesignLibraryPreviewData = exports.isEditingMetadataPreviewData = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = exports.GraphQLEditingService = void 0;
4
4
  var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
5
5
  Object.defineProperty(exports, "GraphQLEditingService", { enumerable: true, get: function () { return editing_1.GraphQLEditingService; } });
6
6
  var editing_data_cache_1 = require("./editing-data-cache");
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "EditingDataMiddleware", { enumerable: true, get:
10
10
  var editing_render_middleware_1 = require("./editing-render-middleware");
11
11
  Object.defineProperty(exports, "EditingRenderMiddleware", { enumerable: true, get: function () { return editing_render_middleware_1.EditingRenderMiddleware; } });
12
12
  Object.defineProperty(exports, "isEditingMetadataPreviewData", { enumerable: true, get: function () { return editing_render_middleware_1.isEditingMetadataPreviewData; } });
13
+ Object.defineProperty(exports, "isDesignLibraryPreviewData", { enumerable: true, get: function () { return editing_render_middleware_1.isDesignLibraryPreviewData; } });
13
14
  var editing_data_service_1 = require("./editing-data-service");
14
15
  Object.defineProperty(exports, "BasicEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.BasicEditingDataService; } });
15
16
  Object.defineProperty(exports, "ServerlessEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.ServerlessEditingDataService; } });
@@ -20,3 +21,7 @@ var feaas_render_middleware_1 = require("./feaas-render-middleware");
20
21
  Object.defineProperty(exports, "FEAASRenderMiddleware", { enumerable: true, get: function () { return feaas_render_middleware_1.FEAASRenderMiddleware; } });
21
22
  var editing_config_middleware_1 = require("./editing-config-middleware");
22
23
  Object.defineProperty(exports, "EditingConfigMiddleware", { enumerable: true, get: function () { return editing_config_middleware_1.EditingConfigMiddleware; } });
24
+ var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
25
+ Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return layout_1.RenderingType; } });
26
+ Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_PLACEHOLDER; } });
27
+ Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_ID; } });
package/dist/cjs/index.js CHANGED
@@ -23,8 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
23
23
  return result;
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.Form = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getGroomedVariantIds = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.MemoryCacheClient = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.constants = void 0;
27
- exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = void 0;
26
+ exports.DateField = exports.Text = exports.Image = exports.Form = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getGroomedVariantIds = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.RestComponentLayoutService = exports.RenderingType = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.MemoryCacheClient = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.constants = void 0;
27
+ exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.DesignLibrary = exports.File = exports.getDesignLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = void 0;
28
28
  var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
29
29
  Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
30
30
  Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.NativeDataFetcher; } });
@@ -39,6 +39,9 @@ Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: f
39
39
  Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
40
40
  Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
41
41
  Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
42
+ Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return layout_1.RenderingType; } });
43
+ var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
44
+ Object.defineProperty(exports, "RestComponentLayoutService", { enumerable: true, get: function () { return editing_1.RestComponentLayoutService; } });
42
45
  var media_1 = require("@sitecore-jss/sitecore-jss/media");
43
46
  Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
44
47
  var tracking_1 = require("@sitecore-jss/sitecore-jss/tracking");
@@ -97,8 +100,9 @@ Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function ()
97
100
  Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.FEaaSComponent; } });
98
101
  Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return sitecore_jss_react_1.fetchFEaaSComponentServerProps; } });
99
102
  Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.BYOCComponent; } });
100
- Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return sitecore_jss_react_1.getComponentLibraryStylesheetLinks; } });
103
+ Object.defineProperty(exports, "getDesignLibraryStylesheetLinks", { enumerable: true, get: function () { return sitecore_jss_react_1.getDesignLibraryStylesheetLinks; } });
101
104
  Object.defineProperty(exports, "File", { enumerable: true, get: function () { return sitecore_jss_react_1.File; } });
105
+ Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return sitecore_jss_react_1.DesignLibrary; } });
102
106
  Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentImage; } });
103
107
  Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentText; } });
104
108
  Object.defineProperty(exports, "VisitorIdentification", { enumerable: true, get: function () { return sitecore_jss_react_1.VisitorIdentification; } });
package/dist/esm/components/NextImage.js CHANGED
@@ -11,13 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
13
13
  import React from 'react';
14
- import { getEEMarkup, withFieldMetadata, SitecoreContextReactContext, } from '@sitecore-jss/sitecore-jss-react';
14
+ import { getEEMarkup, withFieldMetadata, SitecoreContextReactContext, DefaultEmptyFieldEditingComponentImage, withEmptyFieldEditingComponent, } from '@sitecore-jss/sitecore-jss-react';
15
15
  import Image from 'next/image';
16
- import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
17
- import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
18
- import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
16
+ import { isFieldValueEmpty, LayoutServicePageState, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
19
17
  export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
20
- var _b;
18
+ var _b, _c;
21
19
  var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
22
20
  const sitecoreContext = React.useContext(SitecoreContextReactContext);
23
21
  // next handles src and we use a custom loader,
@@ -41,9 +39,10 @@ export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) =
41
39
  if (!img) {
42
40
  return null;
43
41
  }
44
- // disable image optimization for Edit and Preview, but preserve original value if true
42
+ // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
45
43
  const unoptimized = otherProps.unoptimized ||
46
- ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== LayoutServicePageState.Normal;
44
+ ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.renderingType) === RenderingType.Component ||
45
+ ((_c = sitecoreContext.context) === null || _c === void 0 ? void 0 : _c.pageState) !== LayoutServicePageState.Normal;
47
46
  const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
48
47
  priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
49
48
  const imageProps = Object.assign(Object.assign({}, attrs), {
package/dist/esm/editing/editing-render-middleware.js CHANGED
@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  };
10
10
  import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
11
11
  import { NativeDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
12
- import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
13
- import { QUERY_PARAM_EDITING_SECRET, EDITING_ALLOWED_ORIGINS, } from '@sitecore-jss/sitecore-jss/editing';
12
+ import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
13
+ import { QUERY_PARAM_EDITING_SECRET, EDITING_ALLOWED_ORIGINS, isDesignLibraryMode, } from '@sitecore-jss/sitecore-jss/editing';
14
14
  import { editingDataService } from './editing-data-service';
15
15
  import { getJssEditingSecret } from '../utils/utils';
16
16
  import { RenderMiddlewareBase } from './render-middleware';
@@ -182,6 +182,15 @@ export const isEditingMetadataPreviewData = (data) => {
182
182
  'editMode' in data &&
183
183
  data.editMode === EditMode.Metadata);
184
184
  };
185
+ /**
186
+ * Type guard for Design Library mode
187
+ * @param {object} data preview data to check
188
+ * @returns true if the data is EditingMetadataPreviewData
189
+ * @see EditingMetadataPreviewData
190
+ */
191
+ export const isDesignLibraryPreviewData = (data) => {
192
+ return (typeof data === 'object' && data !== null && 'mode' in data && isDesignLibraryMode(data.mode));
193
+ };
185
194
  /**
186
195
  * Handler for the Editing Metadata GET requests.
187
196
  * This handler is responsible for redirecting the request to the page route.
@@ -195,13 +204,19 @@ export class MetadataHandler {
195
204
  var _a, _b, _c;
196
205
  const { query } = req;
197
206
  const startTimestamp = Date.now();
198
- const requiredQueryParams = [
207
+ const mode = query.mode;
208
+ const metadataDefaultRequiredParams = ['sc_site', 'sc_itemid', 'sc_lang', 'route', 'mode'];
209
+ const metadataComponentRequiredParams = [
199
210
  'sc_site',
200
211
  'sc_itemid',
212
+ 'sc_renderingId',
213
+ 'sc_uid',
201
214
  'sc_lang',
202
- 'route',
203
215
  'mode',
204
216
  ];
217
+ const requiredQueryParams = isDesignLibraryMode(mode)
218
+ ? metadataComponentRequiredParams
219
+ : metadataDefaultRequiredParams;
205
220
  const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
206
221
  // Validate query parameters
207
222
  if (missingQueryParams.length) {
@@ -210,21 +225,38 @@ export class MetadataHandler {
210
225
  html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
211
226
  });
212
227
  }
213
- res.setPreviewData({
214
- site: query.sc_site,
215
- itemId: query.sc_itemid,
216
- language: query.sc_lang,
217
- // for sc_variantId we may employ multiple variants (page-layout + component level)
218
- variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [DEFAULT_VARIANT],
219
- version: query.sc_version,
220
- editMode: EditMode.Metadata,
221
- pageState: query.mode,
222
- layoutKind: query.sc_layoutKind,
223
- },
224
- // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
225
- {
226
- maxAge: 3,
227
- });
228
+ if (isDesignLibraryMode(mode)) {
229
+ res.setPreviewData({
230
+ itemId: query.sc_itemid,
231
+ componentUid: query.sc_uid,
232
+ renderingId: query.sc_renderingId,
233
+ language: query.sc_lang,
234
+ site: query.sc_site,
235
+ pageState: LayoutServicePageState.Normal,
236
+ mode,
237
+ dataSourceId: query.dataSourceId,
238
+ version: query.sc_version,
239
+ }, {
240
+ maxAge: 3,
241
+ });
242
+ }
243
+ else {
244
+ res.setPreviewData({
245
+ site: query.sc_site,
246
+ itemId: query.sc_itemid,
247
+ language: query.sc_lang,
248
+ // for sc_variantId we may employ multiple variants (page-layout + component level)
249
+ variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [DEFAULT_VARIANT],
250
+ version: query.sc_version,
251
+ editMode: EditMode.Metadata,
252
+ pageState: query.mode,
253
+ layoutKind: query.sc_layoutKind,
254
+ },
255
+ // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
256
+ {
257
+ maxAge: 3,
258
+ });
259
+ }
228
260
  // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue
229
261
  // when Next.js preview mode is activated, resulting the page to render in normal mode instead.
230
262
  // By replacing it with "SameSite=None; Secure", we ensure cookies are correctly sent with
package/dist/esm/editing/index.js CHANGED
@@ -1,8 +1,9 @@
1
1
  export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
2
2
  export { EditingDataDiskCache } from './editing-data-cache';
3
3
  export { EditingDataMiddleware } from './editing-data-middleware';
4
- export { EditingRenderMiddleware, isEditingMetadataPreviewData, } from './editing-render-middleware';
4
+ export { EditingRenderMiddleware, isEditingMetadataPreviewData, isDesignLibraryPreviewData, } from './editing-render-middleware';
5
5
  export { BasicEditingDataService, ServerlessEditingDataService, editingDataService, } from './editing-data-service';
6
6
  export { VercelEditingDataCache } from './vercel-editing-data-cache';
7
7
  export { FEAASRenderMiddleware } from './feaas-render-middleware';
8
8
  export { EditingConfigMiddleware, } from './editing-config-middleware';
9
+ export { RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export { constants, NativeDataFetcher, enableDebug, debug, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
2
- export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, getContentStylesheetLink, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
2
+ export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, getContentStylesheetLink, EditMode, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
3
+ export { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss/editing';
3
4
  export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
4
5
  export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
5
6
  export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -19,4 +20,4 @@ import * as BYOCWrapper from './components/BYOCWrapper';
19
20
  export { FEaaSWrapper };
20
21
  export { BYOCWrapper };
21
22
  export { ComponentBuilder } from './ComponentBuilder';
22
- export { Form, Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
23
+ export { Form, Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getDesignLibraryStylesheetLinks, File, DesignLibrary, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-jss/sitecore-jss-nextjs",
3
- "version": "22.8.0-canary.9",
3
+ "version": "22.9.0-canary.1",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -72,16 +72,16 @@
72
72
  "react-dom": "^19.1.0"
73
73
  },
74
74
  "dependencies": {
75
- "@sitecore-jss/sitecore-jss": "22.8.0-canary.9",
76
- "@sitecore-jss/sitecore-jss-dev-tools": "22.8.0-canary.9",
77
- "@sitecore-jss/sitecore-jss-react": "22.8.0-canary.9",
75
+ "@sitecore-jss/sitecore-jss": "22.9.0-canary.1",
76
+ "@sitecore-jss/sitecore-jss-dev-tools": "22.9.0-canary.1",
77
+ "@sitecore-jss/sitecore-jss-react": "22.9.0-canary.1",
78
78
  "@vercel/kv": "^0.2.1",
79
79
  "regex-parser": "^2.2.11",
80
80
  "sync-disk-cache": "^2.1.0"
81
81
  },
82
82
  "description": "",
83
83
  "types": "types/index.d.ts",
84
- "gitHead": "f3a11496989077dcc90bc030b4896dfde8df4112",
84
+ "gitHead": "ae9418c7df8c0e7c91b902eaffc58c7ad0beacd7",
85
85
  "files": [
86
86
  "dist",
87
87
  "types",
package/types/editing/editing-render-middleware.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { NextApiRequest, NextApiResponse } from 'next';
2
2
  import { NativeDataFetcher } from '@sitecore-jss/sitecore-jss';
3
3
  import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
4
- import { RenderMetadataQueryParams, LayoutKind } from '@sitecore-jss/sitecore-jss/editing';
4
+ import { RenderMetadataQueryParams, LayoutKind, DesignLibraryMode } from '@sitecore-jss/sitecore-jss/editing';
5
5
  import { EditingDataService } from './editing-data-service';
6
6
  import { RenderMiddlewareBase } from './render-middleware';
7
7
  /**
@@ -99,7 +99,7 @@ export type EditingRenderMiddlewareMetadataConfig = Pick<EditingRenderMiddleware
99
99
  /**
100
100
  * Next.js API request with Metadata query parameters.
101
101
  */
102
- type MetadataNextApiRequest = NextApiRequest & {
102
+ export type MetadataNextApiRequest = NextApiRequest & {
103
103
  query: RenderMetadataQueryParams;
104
104
  };
105
105
  /**
@@ -115,6 +115,21 @@ export type EditingMetadataPreviewData = {
115
115
  version?: string;
116
116
  layoutKind?: LayoutKind;
117
117
  };
118
+ /**
119
+ * Data for Design Library rendering mode
120
+ */
121
+ export interface DesignLibraryRenderPreviewData {
122
+ site: string;
123
+ itemId: string;
124
+ renderingId: string;
125
+ componentUid: string;
126
+ language: string;
127
+ pageState: LayoutServicePageState;
128
+ mode?: DesignLibraryMode;
129
+ variant?: string;
130
+ version?: string;
131
+ dataSourceId?: string;
132
+ }
118
133
  /**
119
134
  * Type guard for EditingMetadataPreviewData
120
135
  * @param {object} data preview data to check
@@ -122,6 +137,13 @@ export type EditingMetadataPreviewData = {
122
137
  * @see EditingMetadataPreviewData
123
138
  */
124
139
  export declare const isEditingMetadataPreviewData: (data: unknown) => data is EditingMetadataPreviewData;
140
+ /**
141
+ * Type guard for Design Library mode
142
+ * @param {object} data preview data to check
143
+ * @returns true if the data is EditingMetadataPreviewData
144
+ * @see EditingMetadataPreviewData
145
+ */
146
+ export declare const isDesignLibraryPreviewData: (data: unknown) => data is DesignLibraryRenderPreviewData;
125
147
  /**
126
148
  * Handler for the Editing Metadata GET requests.
127
149
  * This handler is responsible for redirecting the request to the page route.
@@ -154,4 +176,3 @@ export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
154
176
  getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
155
177
  private handler;
156
178
  }
157
- export {};
package/types/editing/index.d.ts CHANGED
@@ -2,8 +2,9 @@ export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
2
2
  export { EditingData } from './editing-data';
3
3
  export { EditingDataCache, EditingDataDiskCache } from './editing-data-cache';
4
4
  export { EditingDataMiddleware, EditingDataMiddlewareConfig } from './editing-data-middleware';
5
- export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, EditingMetadataPreviewData, isEditingMetadataPreviewData, } from './editing-render-middleware';
5
+ export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, EditingMetadataPreviewData, isEditingMetadataPreviewData, isDesignLibraryPreviewData, } from './editing-render-middleware';
6
6
  export { EditingPreviewData, EditingDataService, BasicEditingDataService, BasicEditingDataServiceConfig, ServerlessEditingDataService, ServerlessEditingDataServiceConfig, editingDataService, } from './editing-data-service';
7
7
  export { VercelEditingDataCache } from './vercel-editing-data-cache';
8
8
  export { FEAASRenderMiddleware, FEAASRenderMiddlewareConfig } from './feaas-render-middleware';
9
9
  export { EditingConfigMiddleware, EditingConfigMiddlewareConfig, } from './editing-config-middleware';
10
+ export { RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';
package/types/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { constants, HttpDataFetcher, NativeDataFetcher, NativeDataFetcherConfig, NativeDataFetcherResponse, NativeDataFetcherError, HTMLLink, enableDebug, debug, CacheClient, CacheOptions, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
2
- export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, getContentStylesheetLink, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
2
+ export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, getContentStylesheetLink, EditMode, RenderingType, } from '@sitecore-jss/sitecore-jss/layout';
3
+ export { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss/editing';
3
4
  export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
4
5
  export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
5
6
  export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, GraphQLDictionaryServiceConfig, RestDictionaryService, RestDictionaryServiceConfig, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -22,4 +23,4 @@ import * as BYOCWrapper from './components/BYOCWrapper';
22
23
  export { FEaaSWrapper };
23
24
  export { BYOCWrapper };
24
25
  export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
25
- export { ComponentFactory, Form, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
26
+ export { ComponentFactory, Form, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getDesignLibraryStylesheetLinks, File, FileField, RichTextField, DesignLibrary, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';