@sitecore-jss/sitecore-jss-nextjs 21.5.0-canary.6 → 21.6.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 (4) hide show
  1. package/dist/cjs/middleware/personalize-middleware.js +51 -48
  2. package/dist/esm/middleware/personalize-middleware.js +54 -51
  3. package/package.json +7 -5
  4. package/types/middleware/personalize-middleware.d.ts +40 -7
package/dist/cjs/middleware/personalize-middleware.js CHANGED
@@ -14,6 +14,7 @@ const server_1 = require("next/server");
14
14
  const personalize_1 = require("@sitecore-jss/sitecore-jss/personalize");
15
15
  const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
16
16
  const middleware_1 = require("./middleware");
17
+ const engage_1 = require("@sitecore/engage");
17
18
  /**
18
19
  * Middleware / handler to support Sitecore Personalize
19
20
  */
@@ -25,19 +26,20 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
25
26
  super(config);
26
27
  this.config = config;
27
28
  this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
29
+ var _a;
28
30
  const pathname = req.nextUrl.pathname;
29
31
  const language = this.getLanguage(req);
30
32
  const hostname = this.getHostHeader(req) || this.defaultHostname;
31
33
  const startTimestamp = Date.now();
32
- let browserId = this.getBrowserId(req);
34
+ const timeout = this.config.cdpConfig.timeout;
35
+ // Response will be provided if other middleware is run before us (e.g. redirects)
36
+ let response = res || server_1.NextResponse.next();
33
37
  sitecore_jss_1.debug.personalize('personalize middleware start: %o', {
34
38
  pathname,
35
39
  language,
36
40
  hostname,
37
- browserId,
41
+ headers: this.extractDebugHeaders(req.headers),
38
42
  });
39
- // Response will be provided if other middleware is run before us (e.g. redirects)
40
- let response = res || server_1.NextResponse.next();
41
43
  if (this.config.disabled && this.config.disabled(req, response)) {
42
44
  sitecore_jss_1.debug.personalize('skipped (personalize middleware is disabled)');
43
45
  return response;
@@ -48,7 +50,17 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
48
50
  sitecore_jss_1.debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
49
51
  return response;
50
52
  }
51
- const site = this.getSite(req, res);
53
+ const site = this.getSite(req, response);
54
+ const engageServer = this.initializeEngageServer(site, language);
55
+ // creates the browser ID cookie on the server side
56
+ // and includes the cookie in the response header
57
+ try {
58
+ yield engageServer.handleCookie(req, response, timeout);
59
+ }
60
+ catch (error) {
61
+ sitecore_jss_1.debug.personalize('skipped (browser id generation failed)');
62
+ throw error;
63
+ }
52
64
  // Get personalization info from Experience Edge
53
65
  const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
54
66
  if (!personalizeInfo) {
@@ -60,20 +72,24 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
60
72
  sitecore_jss_1.debug.personalize('skipped (no personalization configured)');
61
73
  return response;
62
74
  }
63
- if (!browserId) {
64
- browserId = yield this.cdpService.generateBrowserId();
65
- if (!browserId) {
66
- sitecore_jss_1.debug.personalize('skipped (browser id generation failed)');
67
- return response;
68
- }
69
- }
70
- // Execute targeted experience in CDP
71
- const { ua } = (0, server_1.userAgent)(req);
72
75
  const params = this.getExperienceParams(req);
73
- const pointOfSale = this.config.getPointOfSale
74
- ? this.config.getPointOfSale(site, language)
75
- : personalize_1.PosResolver.resolve(site, language);
76
- const variantId = yield this.cdpService.executeExperience(personalizeInfo.contentId, browserId, ua, pointOfSale, params);
76
+ sitecore_jss_1.debug.personalize('executing experience for %s %s %o', personalizeInfo.contentId, params);
77
+ const personalizationData = {
78
+ channel: this.config.cdpConfig.channel || 'WEB',
79
+ currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USA',
80
+ friendlyId: personalizeInfo.contentId,
81
+ params,
82
+ language,
83
+ };
84
+ let variantId;
85
+ // Execute targeted experience in CDP
86
+ // eslint-disable-next-line no-useless-catch
87
+ try {
88
+ variantId = (yield engageServer.personalize(personalizationData, req, timeout)).variantId;
89
+ }
90
+ catch (error) {
91
+ throw error;
92
+ }
77
93
  if (!variantId) {
78
94
  sitecore_jss_1.debug.personalize('skipped (no variant identified)');
79
95
  return response;
@@ -95,13 +111,10 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
95
111
  response.headers.set('x-middleware-cache', 'no-cache');
96
112
  // Share rewrite path with following executed middlewares
97
113
  response.headers.set('x-sc-rewrite', rewritePath);
98
- // Set browserId cookie on the response
99
- this.setBrowserId(response, browserId);
100
114
  // Share site name with the following executed middlewares
101
115
  response.cookies.set(this.SITE_SYMBOL, site.name);
102
116
  sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
103
117
  rewritePath,
104
- browserId,
105
118
  headers: this.extractDebugHeaders(response.headers),
106
119
  });
107
120
  return response;
@@ -109,15 +122,6 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
109
122
  // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
110
123
  // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
111
124
  this.personalizeService = new personalize_1.GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
112
- // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
113
- this.cdpService = new personalize_1.CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
114
- const fetcher = new sitecore_jss_1.NativeDataFetcher({
115
- debugger: sitecore_jss_1.debug.personalize,
116
- timeout,
117
- headers,
118
- });
119
- return (url, data) => fetcher.fetch(url, data);
120
- } }));
121
125
  }
122
126
  /**
123
127
  * Gets the Next.js middleware handler with error handling
@@ -135,31 +139,30 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
135
139
  }
136
140
  });
137
141
  }
138
- get browserIdCookieName() {
139
- // Each user should have saved identifier to connect between session, CDP uses bid cookies + local storage
140
- return `BID_${this.config.cdpConfig.clientKey}`;
141
- }
142
- getBrowserId(req) {
143
- var _a;
144
- return ((_a = req.cookies.get(this.browserIdCookieName)) === null || _a === void 0 ? void 0 : _a.value) || undefined;
145
- }
146
- setBrowserId(res, browserId) {
147
- const expiryDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
148
- const options = { expires: expiryDate, secure: true };
149
- res.cookies.set(this.browserIdCookieName, browserId, options);
142
+ initializeEngageServer(site, language) {
143
+ const engageServer = (0, engage_1.initServer)({
144
+ clientKey: this.config.cdpConfig.clientKey,
145
+ targetURL: this.config.cdpConfig.endpoint,
146
+ pointOfSale: this.config.getPointOfSale
147
+ ? this.config.getPointOfSale(site, language)
148
+ : personalize_1.PosResolver.resolve(site, language),
149
+ forceServerCookieMode: true,
150
+ });
151
+ return engageServer;
150
152
  }
151
153
  getExperienceParams(req) {
154
+ const utm = {
155
+ campaign: req.nextUrl.searchParams.get('utm_campaign') || undefined,
156
+ content: req.nextUrl.searchParams.get('utm_content') || undefined,
157
+ medium: req.nextUrl.searchParams.get('utm_medium') || undefined,
158
+ source: req.nextUrl.searchParams.get('utm_source') || undefined,
159
+ };
152
160
  return {
153
161
  // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
154
162
  // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
155
163
  // used as a fallback
156
164
  referrer: req.headers.get('referer') || req.referrer,
157
- utm: {
158
- campaign: req.nextUrl.searchParams.get('utm_campaign'),
159
- content: req.nextUrl.searchParams.get('utm_content'),
160
- medium: req.nextUrl.searchParams.get('utm_medium'),
161
- source: req.nextUrl.searchParams.get('utm_source'),
162
- },
165
+ utm: utm,
163
166
  };
164
167
  }
165
168
  excludeRoute(pathname) {
package/dist/esm/middleware/personalize-middleware.js CHANGED
@@ -7,10 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import { NextResponse, userAgent } from 'next/server';
11
- import { GraphQLPersonalizeService, CdpService, getPersonalizedRewrite, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
12
- import { debug, NativeDataFetcher } from '@sitecore-jss/sitecore-jss';
10
+ import { NextResponse } from 'next/server';
11
+ import { GraphQLPersonalizeService, getPersonalizedRewrite, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
12
+ import { debug } from '@sitecore-jss/sitecore-jss';
13
13
  import { MiddlewareBase } from './middleware';
14
+ import { initServer } from '@sitecore/engage';
14
15
  /**
15
16
  * Middleware / handler to support Sitecore Personalize
16
17
  */
@@ -22,19 +23,20 @@ export class PersonalizeMiddleware extends MiddlewareBase {
22
23
  super(config);
23
24
  this.config = config;
24
25
  this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
26
+ var _a;
25
27
  const pathname = req.nextUrl.pathname;
26
28
  const language = this.getLanguage(req);
27
29
  const hostname = this.getHostHeader(req) || this.defaultHostname;
28
30
  const startTimestamp = Date.now();
29
- let browserId = this.getBrowserId(req);
31
+ const timeout = this.config.cdpConfig.timeout;
32
+ // Response will be provided if other middleware is run before us (e.g. redirects)
33
+ let response = res || NextResponse.next();
30
34
  debug.personalize('personalize middleware start: %o', {
31
35
  pathname,
32
36
  language,
33
37
  hostname,
34
- browserId,
38
+ headers: this.extractDebugHeaders(req.headers),
35
39
  });
36
- // Response will be provided if other middleware is run before us (e.g. redirects)
37
- let response = res || NextResponse.next();
38
40
  if (this.config.disabled && this.config.disabled(req, response)) {
39
41
  debug.personalize('skipped (personalize middleware is disabled)');
40
42
  return response;
@@ -45,7 +47,17 @@ export class PersonalizeMiddleware extends MiddlewareBase {
45
47
  debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
46
48
  return response;
47
49
  }
48
- const site = this.getSite(req, res);
50
+ const site = this.getSite(req, response);
51
+ const engageServer = this.initializeEngageServer(site, language);
52
+ // creates the browser ID cookie on the server side
53
+ // and includes the cookie in the response header
54
+ try {
55
+ yield engageServer.handleCookie(req, response, timeout);
56
+ }
57
+ catch (error) {
58
+ debug.personalize('skipped (browser id generation failed)');
59
+ throw error;
60
+ }
49
61
  // Get personalization info from Experience Edge
50
62
  const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
51
63
  if (!personalizeInfo) {
@@ -57,20 +69,24 @@ export class PersonalizeMiddleware extends MiddlewareBase {
57
69
  debug.personalize('skipped (no personalization configured)');
58
70
  return response;
59
71
  }
60
- if (!browserId) {
61
- browserId = yield this.cdpService.generateBrowserId();
62
- if (!browserId) {
63
- debug.personalize('skipped (browser id generation failed)');
64
- return response;
65
- }
66
- }
67
- // Execute targeted experience in CDP
68
- const { ua } = userAgent(req);
69
72
  const params = this.getExperienceParams(req);
70
- const pointOfSale = this.config.getPointOfSale
71
- ? this.config.getPointOfSale(site, language)
72
- : PosResolver.resolve(site, language);
73
- const variantId = yield this.cdpService.executeExperience(personalizeInfo.contentId, browserId, ua, pointOfSale, params);
73
+ debug.personalize('executing experience for %s %s %o', personalizeInfo.contentId, params);
74
+ const personalizationData = {
75
+ channel: this.config.cdpConfig.channel || 'WEB',
76
+ currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USA',
77
+ friendlyId: personalizeInfo.contentId,
78
+ params,
79
+ language,
80
+ };
81
+ let variantId;
82
+ // Execute targeted experience in CDP
83
+ // eslint-disable-next-line no-useless-catch
84
+ try {
85
+ variantId = (yield engageServer.personalize(personalizationData, req, timeout)).variantId;
86
+ }
87
+ catch (error) {
88
+ throw error;
89
+ }
74
90
  if (!variantId) {
75
91
  debug.personalize('skipped (no variant identified)');
76
92
  return response;
@@ -92,13 +108,10 @@ export class PersonalizeMiddleware extends MiddlewareBase {
92
108
  response.headers.set('x-middleware-cache', 'no-cache');
93
109
  // Share rewrite path with following executed middlewares
94
110
  response.headers.set('x-sc-rewrite', rewritePath);
95
- // Set browserId cookie on the response
96
- this.setBrowserId(response, browserId);
97
111
  // Share site name with the following executed middlewares
98
112
  response.cookies.set(this.SITE_SYMBOL, site.name);
99
113
  debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
100
114
  rewritePath,
101
- browserId,
102
115
  headers: this.extractDebugHeaders(response.headers),
103
116
  });
104
117
  return response;
@@ -106,15 +119,6 @@ export class PersonalizeMiddleware extends MiddlewareBase {
106
119
  // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
107
120
  // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
108
121
  this.personalizeService = new GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
109
- // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
110
- this.cdpService = new CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
111
- const fetcher = new NativeDataFetcher({
112
- debugger: debug.personalize,
113
- timeout,
114
- headers,
115
- });
116
- return (url, data) => fetcher.fetch(url, data);
117
- } }));
118
122
  }
119
123
  /**
120
124
  * Gets the Next.js middleware handler with error handling
@@ -132,31 +136,30 @@ export class PersonalizeMiddleware extends MiddlewareBase {
132
136
  }
133
137
  });
134
138
  }
135
- get browserIdCookieName() {
136
- // Each user should have saved identifier to connect between session, CDP uses bid cookies + local storage
137
- return `BID_${this.config.cdpConfig.clientKey}`;
138
- }
139
- getBrowserId(req) {
140
- var _a;
141
- return ((_a = req.cookies.get(this.browserIdCookieName)) === null || _a === void 0 ? void 0 : _a.value) || undefined;
142
- }
143
- setBrowserId(res, browserId) {
144
- const expiryDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
145
- const options = { expires: expiryDate, secure: true };
146
- res.cookies.set(this.browserIdCookieName, browserId, options);
139
+ initializeEngageServer(site, language) {
140
+ const engageServer = initServer({
141
+ clientKey: this.config.cdpConfig.clientKey,
142
+ targetURL: this.config.cdpConfig.endpoint,
143
+ pointOfSale: this.config.getPointOfSale
144
+ ? this.config.getPointOfSale(site, language)
145
+ : PosResolver.resolve(site, language),
146
+ forceServerCookieMode: true,
147
+ });
148
+ return engageServer;
147
149
  }
148
150
  getExperienceParams(req) {
151
+ const utm = {
152
+ campaign: req.nextUrl.searchParams.get('utm_campaign') || undefined,
153
+ content: req.nextUrl.searchParams.get('utm_content') || undefined,
154
+ medium: req.nextUrl.searchParams.get('utm_medium') || undefined,
155
+ source: req.nextUrl.searchParams.get('utm_source') || undefined,
156
+ };
149
157
  return {
150
158
  // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
151
159
  // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
152
160
  // used as a fallback
153
161
  referrer: req.headers.get('referer') || req.referrer,
154
- utm: {
155
- campaign: req.nextUrl.searchParams.get('utm_campaign'),
156
- content: req.nextUrl.searchParams.get('utm_content'),
157
- medium: req.nextUrl.searchParams.get('utm_medium'),
158
- source: req.nextUrl.searchParams.get('utm_source'),
159
- },
162
+ utm: utm,
160
163
  };
161
164
  }
162
165
  excludeRoute(pathname) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-jss/sitecore-jss-nextjs",
3
- "version": "21.5.0-canary.6",
3
+ "version": "21.6.0-canary.1",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -30,6 +30,7 @@
30
30
  "url": "https://github.com/sitecore/jss/issues"
31
31
  },
32
32
  "devDependencies": {
33
+ "@sitecore/engage": "^1.4.0",
33
34
  "@types/chai": "^4.3.4",
34
35
  "@types/chai-as-promised": "^7.1.5",
35
36
  "@types/chai-string": "^1.4.2",
@@ -65,14 +66,15 @@
65
66
  "typescript": "~4.9.4"
66
67
  },
67
68
  "peerDependencies": {
69
+ "@sitecore/engage": "^1.4.0",
68
70
  "next": "^13.4.16",
69
71
  "react": "^18.2.0",
70
72
  "react-dom": "^18.2.0"
71
73
  },
72
74
  "dependencies": {
73
- "@sitecore-jss/sitecore-jss": "^21.5.0-canary.6",
74
- "@sitecore-jss/sitecore-jss-dev-tools": "^21.5.0-canary.6",
75
- "@sitecore-jss/sitecore-jss-react": "^21.5.0-canary.6",
75
+ "@sitecore-jss/sitecore-jss": "^21.6.0-canary.1",
76
+ "@sitecore-jss/sitecore-jss-dev-tools": "^21.6.0-canary.1",
77
+ "@sitecore-jss/sitecore-jss-react": "^21.6.0-canary.1",
76
78
  "@vercel/kv": "^0.2.1",
77
79
  "node-html-parser": "^6.1.4",
78
80
  "prop-types": "^15.8.1",
@@ -81,7 +83,7 @@
81
83
  },
82
84
  "description": "",
83
85
  "types": "types/index.d.ts",
84
- "gitHead": "a4eed1036ee33670fa3b82661d8abb5dd7340408",
86
+ "gitHead": "76dc8a54ba77baf6dec26aa7e05bede41747e9c5",
85
87
  "files": [
86
88
  "dist",
87
89
  "types",
package/types/middleware/personalize-middleware.d.ts CHANGED
@@ -1,7 +1,30 @@
1
1
  import { NextResponse, NextRequest } from 'next/server';
2
- import { GraphQLPersonalizeServiceConfig, CdpServiceConfig, ExperienceParams } from '@sitecore-jss/sitecore-jss/personalize';
3
- import { MiddlewareBase, MiddlewareBaseConfig } from './middleware';
2
+ import { GraphQLPersonalizeServiceConfig } from '@sitecore-jss/sitecore-jss/personalize';
4
3
  import { SiteInfo } from '@sitecore-jss/sitecore-jss/site';
4
+ import { MiddlewareBase, MiddlewareBaseConfig } from './middleware';
5
+ import { EngageServer } from '@sitecore/engage';
6
+ export type CdpServiceConfig = {
7
+ /**
8
+ * Your Sitecore CDP API endpoint
9
+ */
10
+ endpoint: string;
11
+ /**
12
+ * The client key to use for authentication
13
+ */
14
+ clientKey: string;
15
+ /**
16
+ * The Sitecore CDP channel to use for events. Uses 'WEB' by default.
17
+ */
18
+ channel?: string;
19
+ /**
20
+ * Currency for CDP request. Uses 'USA' as default.
21
+ */
22
+ currency?: string;
23
+ /**
24
+ * Timeout (ms) for CDP request. Default is 400.
25
+ */
26
+ timeout?: number;
27
+ };
5
28
  export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
6
29
  /**
7
30
  * Configuration for your Sitecore Experience Edge endpoint
@@ -10,7 +33,7 @@ export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
10
33
  /**
11
34
  * Configuration for your Sitecore CDP endpoint
12
35
  */
13
- cdpConfig: Omit<CdpServiceConfig, 'dataFetcherResolver'>;
36
+ cdpConfig: CdpServiceConfig;
14
37
  /**
15
38
  * function to resolve point of sale for a site
16
39
  * @param {Siteinfo} site to get info from
@@ -19,13 +42,25 @@ export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
19
42
  */
20
43
  getPointOfSale?: (site: SiteInfo, language: string) => string;
21
44
  };
45
+ /**
46
+ * Object model of Experience Context data
47
+ */
48
+ export type ExperienceParams = {
49
+ referrer: string;
50
+ utm: {
51
+ [key: string]: string | undefined;
52
+ campaign: string | undefined;
53
+ source: string | undefined;
54
+ medium: string | undefined;
55
+ content: string | undefined;
56
+ };
57
+ };
22
58
  /**
23
59
  * Middleware / handler to support Sitecore Personalize
24
60
  */
25
61
  export declare class PersonalizeMiddleware extends MiddlewareBase {
26
62
  protected config: PersonalizeMiddlewareConfig;
27
63
  private personalizeService;
28
- private cdpService;
29
64
  /**
30
65
  * @param {PersonalizeMiddlewareConfig} [config] Personalize middleware config
31
66
  */
@@ -35,9 +70,7 @@ export declare class PersonalizeMiddleware extends MiddlewareBase {
35
70
  * @returns middleware handler
36
71
  */
37
72
  getHandler(): (req: NextRequest, res?: NextResponse) => Promise<NextResponse>;
38
- protected get browserIdCookieName(): string;
39
- protected getBrowserId(req: NextRequest): string | undefined;
40
- protected setBrowserId(res: NextResponse, browserId: string): void;
73
+ protected initializeEngageServer(site: SiteInfo, language: string): EngageServer;
41
74
  protected getExperienceParams(req: NextRequest): ExperienceParams;
42
75
  protected excludeRoute(pathname: string): boolean | undefined;
43
76
  private handler;