@sitecore-jss/sitecore-jss-nextjs 22.0.0-canary.9 → 22.1.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 (103) hide show
  1. package/README.md +5 -3
  2. package/context.d.ts +1 -0
  3. package/context.js +1 -0
  4. package/dist/cjs/ComponentBuilder.js +63 -0
  5. package/dist/cjs/components/BYOCWrapper.js +47 -0
  6. package/dist/cjs/components/FEaaSWrapper.js +49 -0
  7. package/dist/cjs/components/Link.js +4 -0
  8. package/dist/cjs/components/NextImage.js +2 -10
  9. package/dist/cjs/components/RichText.js +10 -10
  10. package/dist/cjs/context/context.js +83 -0
  11. package/dist/cjs/context/index.js +5 -0
  12. package/dist/cjs/editing/constants.js +6 -0
  13. package/dist/cjs/editing/editing-config-middleware.js +49 -0
  14. package/dist/cjs/editing/editing-data-middleware.js +3 -3
  15. package/dist/cjs/editing/editing-data-service.js +16 -8
  16. package/dist/cjs/editing/editing-render-middleware.js +25 -11
  17. package/dist/cjs/editing/feaas-render-middleware.js +87 -0
  18. package/dist/cjs/editing/index.js +7 -1
  19. package/dist/cjs/editing/render-middleware.js +27 -0
  20. package/dist/cjs/editing/vercel-editing-data-cache.js +48 -0
  21. package/dist/cjs/graphql/index.js +7 -0
  22. package/dist/cjs/index.js +38 -14
  23. package/dist/cjs/middleware/index.js +3 -5
  24. package/dist/cjs/middleware/middleware.js +18 -2
  25. package/dist/cjs/middleware/multisite-middleware.js +14 -8
  26. package/dist/cjs/middleware/personalize-middleware.js +62 -56
  27. package/dist/cjs/middleware/redirects-middleware.js +64 -21
  28. package/dist/cjs/services/base-graphql-sitemap-service.js +7 -6
  29. package/dist/cjs/services/component-props-service.js +6 -6
  30. package/dist/cjs/site/index.js +5 -0
  31. package/dist/cjs/utils/index.js +11 -0
  32. package/dist/cjs/{utils.js → utils/utils.js} +7 -16
  33. package/dist/esm/ComponentBuilder.js +59 -0
  34. package/dist/esm/components/BYOCWrapper.js +42 -0
  35. package/dist/esm/components/FEaaSWrapper.js +44 -0
  36. package/dist/esm/components/Link.js +4 -0
  37. package/dist/esm/components/NextImage.js +1 -8
  38. package/dist/esm/components/RichText.js +10 -10
  39. package/dist/esm/context/context.js +79 -0
  40. package/dist/esm/context/index.js +1 -0
  41. package/dist/esm/editing/constants.js +3 -0
  42. package/dist/esm/editing/editing-config-middleware.js +45 -0
  43. package/dist/esm/editing/editing-data-middleware.js +2 -2
  44. package/dist/esm/editing/editing-data-service.js +14 -6
  45. package/dist/esm/editing/editing-render-middleware.js +25 -11
  46. package/dist/esm/editing/feaas-render-middleware.js +83 -0
  47. package/dist/esm/editing/index.js +3 -0
  48. package/dist/esm/editing/render-middleware.js +23 -0
  49. package/dist/esm/editing/vercel-editing-data-cache.js +44 -0
  50. package/dist/esm/graphql/index.js +1 -0
  51. package/dist/esm/index.js +10 -7
  52. package/dist/esm/middleware/index.js +1 -2
  53. package/dist/esm/middleware/middleware.js +18 -2
  54. package/dist/esm/middleware/multisite-middleware.js +14 -8
  55. package/dist/esm/middleware/personalize-middleware.js +65 -59
  56. package/dist/esm/middleware/redirects-middleware.js +64 -21
  57. package/dist/esm/services/base-graphql-sitemap-service.js +7 -6
  58. package/dist/esm/services/component-props-service.js +6 -6
  59. package/dist/esm/site/index.js +1 -0
  60. package/dist/esm/utils/index.js +2 -0
  61. package/dist/esm/{utils.js → utils/utils.js} +7 -13
  62. package/graphql.d.ts +1 -0
  63. package/graphql.js +1 -0
  64. package/package.json +15 -12
  65. package/site.d.ts +1 -0
  66. package/site.js +1 -0
  67. package/types/ComponentBuilder.d.ts +61 -0
  68. package/types/components/BYOCWrapper.d.ts +19 -0
  69. package/types/components/ComponentPropsContext.d.ts +1 -0
  70. package/types/components/FEaaSWrapper.d.ts +21 -0
  71. package/types/components/Link.d.ts +2 -1
  72. package/types/components/NextImage.d.ts +3 -3
  73. package/types/components/Placeholder.d.ts +3 -1
  74. package/types/components/RichText.d.ts +6 -0
  75. package/types/context/context.d.ts +116 -0
  76. package/types/context/index.d.ts +1 -0
  77. package/types/editing/constants.d.ts +3 -0
  78. package/types/editing/editing-config-middleware.d.ts +29 -0
  79. package/types/editing/editing-data-service.d.ts +12 -4
  80. package/types/editing/editing-render-middleware.d.ts +2 -1
  81. package/types/editing/feaas-render-middleware.d.ts +32 -0
  82. package/types/editing/index.d.ts +3 -0
  83. package/types/editing/render-middleware.d.ts +15 -0
  84. package/types/editing/vercel-editing-data-cache.d.ts +19 -0
  85. package/types/graphql/index.d.ts +1 -0
  86. package/types/index.d.ts +12 -9
  87. package/types/middleware/index.d.ts +1 -2
  88. package/types/middleware/middleware.d.ts +8 -0
  89. package/types/middleware/multisite-middleware.d.ts +15 -0
  90. package/types/middleware/personalize-middleware.d.ts +53 -14
  91. package/types/middleware/redirects-middleware.d.ts +1 -1
  92. package/types/services/base-graphql-sitemap-service.d.ts +7 -10
  93. package/types/services/component-props-service.d.ts +2 -2
  94. package/types/sharedTypes/component-props.d.ts +5 -1
  95. package/types/sharedTypes/module-factory.d.ts +33 -0
  96. package/types/site/index.d.ts +1 -0
  97. package/types/utils/index.d.ts +2 -0
  98. package/types/{utils.d.ts → utils/utils.d.ts} +2 -0
  99. package/utils.d.ts +1 -0
  100. package/utils.js +1 -0
  101. package/types/sharedTypes/component-module.d.ts +0 -13
  102. /package/dist/cjs/sharedTypes/{component-module.js → module-factory.js} +0 -0
  103. /package/dist/esm/sharedTypes/{component-module.js → module-factory.js} +0 -0
@@ -18,6 +18,8 @@ const server_1 = require("next/server");
18
18
  const site_1 = require("@sitecore-jss/sitecore-jss/site");
19
19
  const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
20
20
  const middleware_1 = require("./middleware");
21
+ const REGEXP_CONTEXT_SITE_LANG = new RegExp(/\$siteLang/, 'i');
22
+ const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
21
23
  /**
22
24
  * Middleware / handler fetches all redirects from Sitecore instance by grapqhl service
23
25
  * compares with current url and redirects to target url
@@ -34,13 +36,14 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
34
36
  const language = this.getLanguage(req);
35
37
  const hostname = this.getHostHeader(req) || this.defaultHostname;
36
38
  let site;
39
+ const startTimestamp = Date.now();
37
40
  sitecore_jss_1.debug.redirects('redirects middleware start: %o', {
38
41
  pathname,
39
42
  language,
40
43
  hostname,
41
44
  });
42
45
  const createResponse = () => __awaiter(this, void 0, void 0, function* () {
43
- if (this.config.disabled && this.config.disabled(req, server_1.NextResponse.next())) {
46
+ if (this.config.disabled && this.config.disabled(req, res || server_1.NextResponse.next())) {
44
47
  sitecore_jss_1.debug.redirects('skipped (redirects middleware is disabled)');
45
48
  return res || server_1.NextResponse.next();
46
49
  }
@@ -55,41 +58,59 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
55
58
  sitecore_jss_1.debug.redirects('skipped (redirect does not exist)');
56
59
  return res || server_1.NextResponse.next();
57
60
  }
61
+ // Find context site language and replace token
62
+ if (REGEXP_CONTEXT_SITE_LANG.test(existsRedirect.target) &&
63
+ !(REGEXP_ABSOLUTE_URL.test(existsRedirect.target) &&
64
+ existsRedirect.target.includes(hostname))) {
65
+ existsRedirect.target = existsRedirect.target.replace(REGEXP_CONTEXT_SITE_LANG, site.language);
66
+ }
58
67
  const url = req.nextUrl.clone();
59
- const absoluteUrlRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
60
- if (absoluteUrlRegex.test(existsRedirect.target)) {
68
+ if (REGEXP_ABSOLUTE_URL.test(existsRedirect.target)) {
61
69
  url.href = existsRedirect.target;
62
- url.locale = req.nextUrl.locale;
63
70
  }
64
71
  else {
72
+ const source = `${url.pathname}${url.search}`;
65
73
  url.search = existsRedirect.isQueryStringPreserved ? url.search : '';
66
74
  const urlFirstPart = existsRedirect.target.split('/')[1];
67
75
  if (this.locales.includes(urlFirstPart)) {
68
76
  url.locale = urlFirstPart;
69
- url.pathname = existsRedirect.target.replace(`/${urlFirstPart}`, '');
77
+ existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
70
78
  }
71
- else {
72
- url.pathname = existsRedirect.target;
79
+ const target = source
80
+ .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
81
+ .replace(/^\/\//, '/')
82
+ .split('?');
83
+ url.pathname = target[0];
84
+ if (target[1]) {
85
+ const newParams = new URLSearchParams(target[1]);
86
+ for (const [key, val] of newParams.entries()) {
87
+ url.searchParams.append(key, val);
88
+ }
73
89
  }
74
90
  }
75
91
  const redirectUrl = decodeURIComponent(url.href);
76
92
  /** return Response redirect with http code of redirect type **/
77
93
  switch (existsRedirect.redirectType) {
78
94
  case site_1.REDIRECT_TYPE_301:
79
- return server_1.NextResponse.redirect(redirectUrl, 301);
95
+ return server_1.NextResponse.redirect(redirectUrl, {
96
+ status: 301,
97
+ statusText: 'Moved Permanently',
98
+ headers: res === null || res === void 0 ? void 0 : res.headers,
99
+ });
80
100
  case site_1.REDIRECT_TYPE_302:
81
- return server_1.NextResponse.redirect(redirectUrl, 302);
101
+ return server_1.NextResponse.redirect(redirectUrl, {
102
+ status: 302,
103
+ statusText: 'Found',
104
+ headers: res === null || res === void 0 ? void 0 : res.headers,
105
+ });
82
106
  case site_1.REDIRECT_TYPE_SERVER_TRANSFER:
83
- return server_1.NextResponse.rewrite(redirectUrl);
107
+ return server_1.NextResponse.rewrite(redirectUrl, res);
84
108
  default:
85
- return server_1.NextResponse.next();
109
+ return res || server_1.NextResponse.next();
86
110
  }
87
111
  });
88
112
  const response = yield createResponse();
89
- // Share site name with the following executed middlewares
90
- // Don't need to set when middleware is disabled
91
- site && response.cookies.set(this.SITE_SYMBOL, site.name);
92
- sitecore_jss_1.debug.redirects('redirects middleware end: %o', {
113
+ sitecore_jss_1.debug.redirects('redirects middleware end in %dms: %o', Date.now() - startTimestamp, {
93
114
  redirected: response.redirected,
94
115
  status: response.status,
95
116
  url: response.url,
@@ -103,11 +124,20 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
103
124
  this.locales = config.locales;
104
125
  }
105
126
  /**
106
- * Gets the Next.js API route handler
127
+ * Gets the Next.js middleware handler with error handling
107
128
  * @returns route handler
108
129
  */
109
130
  getHandler() {
110
- return this.handler;
131
+ return (req, res) => __awaiter(this, void 0, void 0, function* () {
132
+ try {
133
+ return yield this.handler(req, res);
134
+ }
135
+ catch (error) {
136
+ console.log('Redirect middleware failed:');
137
+ console.log(error);
138
+ return res || server_1.NextResponse.next();
139
+ }
140
+ });
111
141
  }
112
142
  /**
113
143
  * Method returns RedirectInfo when matches
@@ -119,10 +149,23 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
119
149
  getExistsRedirect(req, siteName) {
120
150
  return __awaiter(this, void 0, void 0, function* () {
121
151
  const redirects = yield this.redirectsService.fetchRedirects(siteName);
122
- return redirects.length
123
- ? redirects.find((redirect) => {
124
- return (((0, regex_parser_1.default)(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
125
- (0, regex_parser_1.default)(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
152
+ const tragetURL = req.nextUrl.pathname;
153
+ const targetQS = req.nextUrl.search || '';
154
+ const language = this.getLanguage(req);
155
+ const modifyRedirects = structuredClone(redirects);
156
+ return modifyRedirects.length
157
+ ? modifyRedirects.find((redirect) => {
158
+ redirect.pattern = redirect.pattern.replace(RegExp(`^[^]?/${language}/`, 'gi'), '');
159
+ redirect.pattern = `/^\/${redirect.pattern
160
+ .replace(/^\/|\/$/g, '')
161
+ .replace(/^\^\/|\/\$$/g, '')
162
+ .replace(/^\^|\$$/g, '')
163
+ .replace(/(?<!\\)\?/g, '\\?')
164
+ .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
165
+ return (((0, regex_parser_1.default)(redirect.pattern).test(tragetURL) ||
166
+ (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
167
+ (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
168
+ (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
126
169
  (redirect.locale
127
170
  ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
128
171
  : true));
@@ -10,7 +10,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.BaseGraphQLSitemapService = exports.getSiteEmptyError = exports.siteError = exports.languageError = void 0;
13
- const graphql_1 = require("@sitecore-jss/sitecore-jss/graphql");
14
13
  const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
15
14
  const personalize_1 = require("@sitecore-jss/sitecore-jss/personalize");
16
15
  /** @private */
@@ -36,7 +35,7 @@ query ${usesPersonalize ? 'PersonalizeSitemapQuery' : 'DefaultSitemapQuery'}(
36
35
  $language: String!
37
36
  $includedPaths: [String]
38
37
  $excludedPaths: [String]
39
- $pageSize: Int = 10
38
+ $pageSize: Int = 100
40
39
  $after: String
41
40
  ) {
42
41
  site {
@@ -132,7 +131,7 @@ class BaseGraphQLSitemapService {
132
131
  getTranformedPaths(siteName, languages, formatStaticPath) {
133
132
  return __awaiter(this, void 0, void 0, function* () {
134
133
  const paths = new Array();
135
- yield Promise.all(languages.map((language) => __awaiter(this, void 0, void 0, function* () {
134
+ for (const language of languages) {
136
135
  if (language === '') {
137
136
  throw new RangeError(languageEmptyError);
138
137
  }
@@ -140,7 +139,7 @@ class BaseGraphQLSitemapService {
140
139
  const results = yield this.fetchLanguageSitePaths(language, siteName);
141
140
  const transformedPaths = yield this.transformLanguageSitePaths(results, formatStaticPath, language);
142
141
  paths.push(...transformedPaths);
143
- })));
142
+ }
144
143
  return paths;
145
144
  });
146
145
  }
@@ -195,8 +194,10 @@ class BaseGraphQLSitemapService {
195
194
  * @returns {GraphQLClient} implementation
196
195
  */
197
196
  getGraphQLClient() {
198
- return new graphql_1.GraphQLRequestClient(this.options.endpoint, {
199
- apiKey: this.options.apiKey,
197
+ if (!this.options.clientFactory) {
198
+ throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
199
+ }
200
+ return this.options.clientFactory({
200
201
  debugger: sitecore_jss_1.debug.sitemap,
201
202
  });
202
203
  }
@@ -23,9 +23,9 @@ class ComponentPropsService {
23
23
  */
24
24
  fetchServerSideComponentProps(params) {
25
25
  return __awaiter(this, void 0, void 0, function* () {
26
- const { componentModule, layoutData, context } = params;
26
+ const { moduleFactory, layoutData, context } = params;
27
27
  const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
28
- const module = yield componentModule(componentName);
28
+ const module = yield moduleFactory(componentName);
29
29
  return module === null || module === void 0 ? void 0 : module.getServerSideProps;
30
30
  });
31
31
  return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
@@ -39,9 +39,9 @@ class ComponentPropsService {
39
39
  */
40
40
  fetchStaticComponentProps(params) {
41
41
  return __awaiter(this, void 0, void 0, function* () {
42
- const { componentModule, layoutData, context } = params;
42
+ const { moduleFactory, layoutData, context } = params;
43
43
  const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
44
- const module = yield componentModule(componentName);
44
+ const module = yield moduleFactory(componentName);
45
45
  return module === null || module === void 0 ? void 0 : module.getStaticProps;
46
46
  });
47
47
  return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
@@ -128,11 +128,11 @@ class ComponentPropsService {
128
128
  componentProps[uid] = result;
129
129
  })
130
130
  .catch((error) => {
131
- const errLog = `Error during preload data for component ${uid}: ${error.message ||
132
- error}`;
131
+ const errLog = `Error during preload data for component ${req.rendering.componentName} (${uid}): ${error.message || error}`;
133
132
  console.error(chalk_1.default.red(errLog));
134
133
  componentProps[uid] = {
135
134
  error: error.message || errLog,
135
+ componentName: req.rendering.componentName,
136
136
  };
137
137
  });
138
138
  });
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SiteResolver = void 0;
4
+ var site_1 = require("@sitecore-jss/sitecore-jss/site");
5
+ Object.defineProperty(exports, "SiteResolver", { enumerable: true, get: function () { return site_1.SiteResolver; } });
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.tryParseEnvValue = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
4
+ var utils_1 = require("./utils");
5
+ Object.defineProperty(exports, "getPublicUrl", { enumerable: true, get: function () { return utils_1.getPublicUrl; } });
6
+ Object.defineProperty(exports, "handleEditorFastRefresh", { enumerable: true, get: function () { return utils_1.handleEditorFastRefresh; } });
7
+ var utils_2 = require("@sitecore-jss/sitecore-jss/utils");
8
+ Object.defineProperty(exports, "tryParseEnvValue", { enumerable: true, get: function () { return utils_2.tryParseEnvValue; } });
9
+ Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_2.isEditorActive; } });
10
+ Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_2.resetEditorChromes; } });
11
+ Object.defineProperty(exports, "resolveUrl", { enumerable: true, get: function () { return utils_2.resolveUrl; } });
@@ -1,10 +1,6 @@
1
1
  "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
2
  Object.defineProperty(exports, "__esModule", { value: true });
6
3
  exports.getJssEditingSecret = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
7
- const chalk_1 = __importDefault(require("chalk"));
8
4
  const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
9
5
  /**
10
6
  * Get the publicUrl.
@@ -12,25 +8,20 @@ const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
12
8
  * This is set to http://localhost:3000 by default.
13
9
  * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch),
14
10
  * preview deployment has unique url, we don't know exact url.
11
+ * Similarly, DEPLOY_URL is provided by Netlify and would give us the deploy URL
12
+ * In production non-editing environments it is desirable to use relative urls, so in that case set PUBLIC_URL = ''
15
13
  */
16
14
  const getPublicUrl = () => {
17
- if (process.env.VERCEL_URL)
18
- return `https://${process.env.VERCEL_URL}`;
19
15
  let url = process.env.PUBLIC_URL;
20
16
  if (url === undefined) {
21
- console.warn(`${chalk_1.default.yellow.bold('Warning:')} An PUBLIC_URL environment variable is not defined. Falling back to http://localhost:3000.`);
17
+ if (process.env.NETLIFY && process.env.DEPLOY_URL)
18
+ return process.env.DEPLOY_URL;
19
+ if (process.env.VERCEL_URL)
20
+ return `https://${process.env.VERCEL_URL}`;
22
21
  url = 'http://localhost:3000';
23
22
  }
24
- else {
25
- try {
26
- new URL(url);
27
- }
28
- catch (error) {
29
- throw new Error(`The PUBLIC_URL environment variable '${url}' is not a valid URL.`);
30
- }
31
- }
32
23
  // Ensure no trailing slash
33
- return url.toString().replace(/\/$/, '');
24
+ return url.replace(/\/$/, '');
34
25
  };
35
26
  exports.getPublicUrl = getPublicUrl;
36
27
  /**
@@ -0,0 +1,59 @@
1
+ /**
2
+ * Nextjs implementation of component builder class for building components based on the configuration.
3
+ */
4
+ export class ComponentBuilder {
5
+ constructor(config) {
6
+ this.config = config;
7
+ /**
8
+ * SXA uses custom default export name
9
+ */
10
+ this.DEFAULT_EXPORT_NAME = 'Default';
11
+ this.components = new Map([...config.components]);
12
+ }
13
+ /**
14
+ * Creates a new instance of module factory
15
+ * Module factory provides a module (file) including all exports.
16
+ * Module can be imported dynamically or statically.
17
+ * @returns {ModuleFactory} Module factory implementation
18
+ */
19
+ getModuleFactory() {
20
+ return (componentName) => {
21
+ const component = this.components.get(componentName);
22
+ if (!component)
23
+ return null;
24
+ // check if module should be imported dynamically
25
+ if (component.module) {
26
+ return component.module();
27
+ }
28
+ return component;
29
+ };
30
+ }
31
+ /**
32
+ * Creates a new instance of component factory
33
+ * Component can be imported dynamically or statically.
34
+ * @param {Object} [config] Component factory configuration
35
+ * @param {boolean} [config.isEditing] Indicates if component factory is used in editing mode
36
+ * @returns {ComponentFactory} Component factory implementation
37
+ */
38
+ getComponentFactory({ isEditing } = {}) {
39
+ return (componentName, exportName) => {
40
+ const component = this.components.get(componentName);
41
+ if (!component)
42
+ return null;
43
+ // check if component should be imported dynamically
44
+ if (component.element) {
45
+ // Editing mode doesn't work well with dynamic components in nextjs: dynamic components are not displayed without refresh after a rendering is added.
46
+ // This happens beacuse Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
47
+ // So we use require() to obtain dynamic components in editing mode while preserving dynamic logic for non-editing scenarios
48
+ // As we need to be able to seamlessly work with dynamic components in both editing and normal modes, different componentFactory functions will be passed to app
49
+ return component.element(isEditing);
50
+ }
51
+ if (exportName && exportName !== this.DEFAULT_EXPORT_NAME) {
52
+ return component[exportName];
53
+ }
54
+ return (component.Default ||
55
+ component.default ||
56
+ component);
57
+ };
58
+ }
59
+ }
@@ -0,0 +1,42 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { BYOCWrapper, fetchBYOCComponentServerProps, } from '@sitecore-jss/sitecore-jss-react';
11
+ import { constants } from '@sitecore-jss/sitecore-jss';
12
+ /**
13
+ * This is a repackaged version of the React BYOCWrapper component with support for
14
+ * server rendering in Next.js (using component-level data-fetching feature of JSS).
15
+ */
16
+ /**
17
+ * Will be called during SSG
18
+ * @param {ComponentRendering} rendering
19
+ * @returns {GetStaticPropsContext} context
20
+ */
21
+ export const getStaticProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
22
+ if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
23
+ return null;
24
+ }
25
+ const params = rendering.params || {};
26
+ const result = yield fetchBYOCComponentServerProps(params);
27
+ return result;
28
+ });
29
+ /**
30
+ * Will be called during SSR
31
+ * @param {ComponentRendering} rendering
32
+ * @returns {GetStaticPropsContext} context
33
+ */
34
+ export const getServerSideProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
35
+ if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
36
+ return null;
37
+ }
38
+ const params = rendering.params || {};
39
+ const result = yield fetchBYOCComponentServerProps(params);
40
+ return result;
41
+ });
42
+ export default BYOCWrapper;
@@ -0,0 +1,44 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { FEaaSWrapper, fetchFEaaSComponentServerProps, } from '@sitecore-jss/sitecore-jss-react';
11
+ import { constants } from '@sitecore-jss/sitecore-jss';
12
+ /**
13
+ * This is a repackaged version of the React FEaaSWrapper component with support for
14
+ * server rendering in Next.js (using component-level data-fetching feature of JSS).
15
+ */
16
+ /**
17
+ * Will be called during SSG
18
+ * @param {ComponentRendering} rendering
19
+ * @param {LayoutServiceData} layoutData
20
+ * @returns {GetStaticPropsContext} context
21
+ */
22
+ export const getStaticProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
23
+ if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
24
+ return null;
25
+ }
26
+ const params = rendering.params || {};
27
+ const result = yield fetchFEaaSComponentServerProps(params, layoutData.sitecore.context.pageState);
28
+ return result;
29
+ });
30
+ /**
31
+ * Will be called during SSR
32
+ * @param {ComponentRendering} rendering
33
+ * @param {LayoutServiceData} layoutData
34
+ * @returns {GetStaticPropsContext} context
35
+ */
36
+ export const getServerSideProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
37
+ if (process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED) {
38
+ return null;
39
+ }
40
+ const params = rendering.params || {};
41
+ const result = yield fetchFEaaSComponentServerProps(params, layoutData.sitecore.context.pageState);
42
+ return result;
43
+ });
44
+ export default FEaaSWrapper;
@@ -15,6 +15,10 @@ import NextLink from 'next/link';
15
15
  import { Link as ReactLink, LinkPropTypes, } from '@sitecore-jss/sitecore-jss-react';
16
16
  export const Link = forwardRef((props, ref) => {
17
17
  const { field, editable, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
18
+ if (!field ||
19
+ (!field.editable && !field.value && !field.href)) {
20
+ return null;
21
+ }
18
22
  const value = (field.href
19
23
  ? field
20
24
  : field.value);
@@ -14,12 +14,6 @@ import PropTypes from 'prop-types';
14
14
  import React from 'react';
15
15
  import { getEEMarkup, } from '@sitecore-jss/sitecore-jss-react';
16
16
  import Image from 'next/image';
17
- export const sitecoreLoader = ({ src, width }) => {
18
- const [root, paramString] = src.split('?');
19
- const params = new URLSearchParams(paramString);
20
- params.set('mw', width.toString());
21
- return `${root}?${params}`;
22
- };
23
17
  export const NextImage = (_a) => {
24
18
  var { editable, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
25
19
  // next handles src and we use a custom loader,
@@ -55,9 +49,8 @@ export const NextImage = (_a) => {
55
49
  delete imageProps.width;
56
50
  delete imageProps.height;
57
51
  }
58
- const loader = (otherProps.loader ? otherProps.loader : sitecoreLoader);
59
52
  if (attrs) {
60
- return React.createElement(Image, Object.assign({ alt: "", loader: loader }, imageProps));
53
+ return React.createElement(Image, Object.assign({ alt: "" }, imageProps));
61
54
  }
62
55
  return null; // we can't handle the truth
63
56
  };
@@ -15,7 +15,7 @@ import { useRouter } from 'next/router';
15
15
  import { RichText as ReactRichText, RichTextPropTypes, } from '@sitecore-jss/sitecore-jss-react';
16
16
  const prefetched = {};
17
17
  export const RichText = (props) => {
18
- const { internalLinksSelector = 'a[href^="/"]' } = props, rest = __rest(props, ["internalLinksSelector"]);
18
+ const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks"]);
19
19
  const hasText = props.field && props.field.value;
20
20
  const isEditing = props.editable && props.field && props.field.editable;
21
21
  const router = useRouter();
@@ -25,12 +25,12 @@ export const RichText = (props) => {
25
25
  if (hasText && !isEditing) {
26
26
  initializeLinks();
27
27
  }
28
- }, []);
28
+ }, [hasText]);
29
29
  const routeHandler = (ev) => {
30
- if (!ev.target)
30
+ if (!ev.currentTarget)
31
31
  return;
32
32
  ev.preventDefault();
33
- const pathname = ev.target.href;
33
+ const pathname = ev.currentTarget.href;
34
34
  router.push(pathname, pathname, { locale: false });
35
35
  };
36
36
  const initializeLinks = () => {
@@ -40,13 +40,13 @@ export const RichText = (props) => {
40
40
  if (!internalLinks || !internalLinks.length)
41
41
  return;
42
42
  internalLinks.forEach((link) => {
43
- if (link.target !== '_blank') {
44
- if (!prefetched[link.pathname]) {
45
- router.prefetch(link.pathname, undefined, { locale: false });
46
- prefetched[link.pathname] = true;
47
- }
48
- link.addEventListener('click', routeHandler, false);
43
+ if (link.target === '_blank')
44
+ return;
45
+ if (prefetchLinks && !prefetched[link.pathname]) {
46
+ router.prefetch(link.pathname, undefined, { locale: false });
47
+ prefetched[link.pathname] = true;
49
48
  }
49
+ link.addEventListener('click', routeHandler, false);
50
50
  });
51
51
  };
52
52
  return React.createElement(ReactRichText, Object.assign({ ref: richTextRef }, rest));
@@ -0,0 +1,79 @@
1
+ import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react';
2
+ /**
3
+ * Context instance that is used to initialize the application Context and associated Software Development Kits (SDKs).
4
+ */
5
+ export class Context {
6
+ constructor(props) {
7
+ this.props = props;
8
+ /**
9
+ * Indicates whether the Context and SDK(s) have been initialized
10
+ */
11
+ this.isInitialized = false;
12
+ /**
13
+ * Software Development Kits (SDKs) to be initialized
14
+ */
15
+ this.sdks = {};
16
+ /**
17
+ * Promises for the SDKs
18
+ */
19
+ this.sdkPromises = {};
20
+ this.sdkErrors = {};
21
+ /**
22
+ * Retrieves the Software Development Kit (SDK) instance, ensuring it is initialized before returning
23
+ *
24
+ * @param {string} name SDK name
25
+ * @returns initialized SDK
26
+ */
27
+ this.getSDK = (name) => {
28
+ if (!this.sdkPromises[name]) {
29
+ return Promise.reject(`Unknown SDK '${String(name)}'`);
30
+ }
31
+ else {
32
+ return this.sdkPromises[name].then((result) => {
33
+ return ((this.sdkErrors[name] && Promise.reject(this.sdkErrors[name])) || Promise.resolve(result));
34
+ });
35
+ }
36
+ };
37
+ this.sitecoreEdgeUrl = props.sitecoreEdgeUrl;
38
+ this.sitecoreEdgeContextId = props.sitecoreEdgeContextId;
39
+ this.siteName = props.siteName;
40
+ this.pageState = LayoutServicePageState.Normal;
41
+ }
42
+ init(props = {}) {
43
+ // Context and SDKs are initialized only once
44
+ if (this.isInitialized)
45
+ return;
46
+ this.isInitialized = true;
47
+ if (props.siteName) {
48
+ this.siteName = props.siteName;
49
+ }
50
+ if (props.pageState) {
51
+ this.pageState = props.pageState;
52
+ }
53
+ // iterate over the SDKs and initialize them
54
+ for (const sdkName of Object.keys(this.props.sdks)) {
55
+ this.initSDK(sdkName);
56
+ }
57
+ }
58
+ /**
59
+ * Initializes the Software Development Kit (SDK)
60
+ *
61
+ * @param {T} name SDK name
62
+ * @returns {void}
63
+ */
64
+ initSDK(name) {
65
+ this.sdkPromises[name] = new Promise((resolve) => {
66
+ this.props.sdks[name]
67
+ .init(this)
68
+ .then(() => {
69
+ this.sdks[name] = this.props.sdks[name].sdk;
70
+ resolve(this.sdks[name]);
71
+ })
72
+ .catch((e) => {
73
+ // if init rejects, we mark SDK as failed - so getSDK call would reject with a reason
74
+ this.sdkErrors[name] = e;
75
+ resolve(undefined);
76
+ });
77
+ });
78
+ }
79
+ }
@@ -0,0 +1 @@
1
+ export { Context } from './context';
@@ -0,0 +1,3 @@
1
+ export const QUERY_PARAM_EDITING_SECRET = 'secret';
2
+ export const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
3
+ export const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';