@sitecore-jss/sitecore-jss-nextjs 22.0.0-canary.8 → 22.1.0-canary.1

package/dist/esm/middleware/personalize-middleware.js

@@ -7,10 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { NextResponse, userAgent } from 'next/server';
-import { GraphQLPersonalizeService, CdpService, getPersonalizedRewrite, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
-import { debug, NativeDataFetcher } from '@sitecore-jss/sitecore-jss';
+import { NextResponse } from 'next/server';
+import { GraphQLPersonalizeService, getPersonalizedRewrite, } from '@sitecore-jss/sitecore-jss/personalize';
+import { debug } from '@sitecore-jss/sitecore-jss';
 import { MiddlewareBase } from './middleware';
+import { init, personalize } from '@sitecore-cloudsdk/personalize/server';
 /**
  * Middleware / handler to support Sitecore Personalize
  */
@@ -25,15 +26,16 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const pathname = req.nextUrl.pathname;
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
-            let browserId = this.getBrowserId(req);
+            const startTimestamp = Date.now();
+            const timeout = this.config.cdpConfig.timeout;
+            // Response will be provided if other middleware is run before us (e.g. redirects)
+            let response = res || NextResponse.next();
             debug.personalize('personalize middleware start: %o', {
                 pathname,
                 language,
                 hostname,
-                browserId,
+                headers: this.extractDebugHeaders(req.headers),
             });
-            // Response will be provided if other middleware is run before us (e.g. redirects)
-            let response = res || NextResponse.next();
             if (this.config.disabled && this.config.disabled(req, response)) {
                 debug.personalize('skipped (personalize middleware is disabled)');
                 return response;
@@ -44,7 +46,7 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
                 return response;
             }
-            const site = this.getSite(req, res);
+            const site = this.getSite(req, response);
             // Get personalization info from Experience Edge
             const personalizeInfo = yield this.personalizeService.getPersonalizeInfo(pathname, language, site.name);
             if (!personalizeInfo) {
@@ -56,20 +58,24 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (no personalization configured)');
                 return response;
             }
-            if (!browserId) {
-                browserId = yield this.cdpService.generateBrowserId();
-                if (!browserId) {
-                    debug.personalize('skipped (browser id generation failed)');
-                    return response;
-                }
-            }
-            // Execute targeted experience in CDP
-            const { ua } = userAgent(req);
+            yield this.initPersonalizeServer({
+                hostname,
+                siteName: site.name,
+                request: req,
+                response,
+            });
             const params = this.getExperienceParams(req);
-            const pointOfSale = this.config.getPointOfSale
-                ? this.config.getPointOfSale(site, language)
-                : PosResolver.resolve(site, language);
-            const variantId = yield this.cdpService.executeExperience(personalizeInfo.contentId, browserId, ua, pointOfSale, params);
+            debug.personalize('executing experience for %s %o', personalizeInfo.contentId, params);
+            let variantId;
+            // Execute targeted experience in Personalize SDK
+            // eslint-disable-next-line no-useless-catch
+            try {
+                const personalization = yield this.personalize({ personalizeInfo, params, language, timeout }, req);
+                variantId = personalization.variantId;
+            }
+            catch (error) {
+                throw error;
+            }
             if (!variantId) {
                 debug.personalize('skipped (no variant identified)');
                 return response;
@@ -82,22 +88,12 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             const basePath = (res === null || res === void 0 ? void 0 : res.headers.get('x-sc-rewrite')) || pathname;
             // Rewrite to persononalized path
             const rewritePath = getPersonalizedRewrite(basePath, { variantId });
-            // Note an absolute URL is required: https://nextjs.org/docs/messages/middleware-relative-urls
-            const rewriteUrl = req.nextUrl.clone();
-            rewriteUrl.pathname = rewritePath;
-            response = NextResponse.rewrite(rewriteUrl);
+            response = this.rewrite(rewritePath, req, response);
             // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
             // See https://github.com/vercel/next.js/issues/32727
             response.headers.set('x-middleware-cache', 'no-cache');
-            // Share rewrite path with following executed middlewares
-            response.headers.set('x-sc-rewrite', rewritePath);
-            // Set browserId cookie on the response
-            this.setBrowserId(response, browserId);
-            // Share site name with the following executed middlewares
-            response.cookies.set(this.SITE_SYMBOL, site.name);
-            debug.personalize('personalize middleware end: %o', {
+            debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
-                browserId,
                 headers: this.extractDebugHeaders(response.headers),
             });
             return response;
@@ -105,15 +101,6 @@ export class PersonalizeMiddleware extends MiddlewareBase {
         // NOTE: we provide native fetch for compatibility on Next.js Edge Runtime
         // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
         this.personalizeService = new GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
-        // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
-        this.cdpService = new CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
-                const fetcher = new NativeDataFetcher({
-                    debugger: debug.personalize,
-                    timeout,
-                    headers,
-                });
-                return (url, data) => fetcher.fetch(url, data);
-            } }));
     }
     /**
      * Gets the Next.js middleware handler with error handling
@@ -131,28 +118,47 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             }
         });
     }
-    get browserIdCookieName() {
-        // Each user should have saved identifier to connect between session, CDP uses bid cookies + local storage
-        return `BID_${this.config.cdpConfig.clientKey}`;
+    initPersonalizeServer({ hostname, siteName, request, response, }) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield init(request, response, {
+                sitecoreEdgeUrl: this.config.cdpConfig.sitecoreEdgeUrl,
+                sitecoreEdgeContextId: this.config.cdpConfig.sitecoreEdgeContextId,
+                siteName,
+                cookieDomain: hostname,
+                enableServerCookie: true,
+            });
+        });
     }
-    getBrowserId(req) {
+    personalize({ params, personalizeInfo, language, timeout, }, request) {
         var _a;
-        return ((_a = req.cookies.get(this.browserIdCookieName)) === null || _a === void 0 ? void 0 : _a.value) || undefined;
-    }
-    setBrowserId(res, browserId) {
-        const expiryDate = new Date(new Date().setFullYear(new Date().getFullYear() + 2));
-        const options = { expires: expiryDate, secure: true };
-        res.cookies.set(this.browserIdCookieName, browserId, options);
+        return __awaiter(this, void 0, void 0, function* () {
+            const personalizationData = {
+                channel: this.config.cdpConfig.channel || 'WEB',
+                currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USD',
+                friendlyId: personalizeInfo.contentId,
+                params,
+                language,
+            };
+            return (yield personalize(request, personalizationData, { timeout }));
+        });
     }
     getExperienceParams(req) {
+        const utm = {
+            campaign: req.nextUrl.searchParams.get('utm_campaign') || undefined,
+            content: req.nextUrl.searchParams.get('utm_content') || undefined,
+            medium: req.nextUrl.searchParams.get('utm_medium') || undefined,
+            source: req.nextUrl.searchParams.get('utm_source') || undefined,
+        };
         return {
-            referrer: req.referrer,
-            utm: {
-                campaign: req.nextUrl.searchParams.get('utm_campaign'),
-                content: req.nextUrl.searchParams.get('utm_content'),
-                medium: req.nextUrl.searchParams.get('utm_medium'),
-                source: req.nextUrl.searchParams.get('utm_source'),
-            },
+            // It's expected that the header name "referer" is actually a misspelling of the word "referrer"
+            // req.referrer is used during fetching to determine the value of the Referer header of the request being made,
+            // used as a fallback
+            referrer: req.headers.get('referer') || req.referrer,
+            utm: utm,
         };
     }
+    excludeRoute(pathname) {
+        // ignore files
+        return pathname.includes('.') || super.excludeRoute(pathname);
+    }
 }

package/dist/esm/middleware/redirects-middleware.js

@@ -12,6 +12,8 @@ import { NextResponse } from 'next/server';
 import { GraphQLRedirectsService, REDIRECT_TYPE_301, REDIRECT_TYPE_302, REDIRECT_TYPE_SERVER_TRANSFER, } from '@sitecore-jss/sitecore-jss/site';
 import { debug } from '@sitecore-jss/sitecore-jss';
 import { MiddlewareBase } from './middleware';
+const REGEXP_CONTEXT_SITE_LANG = new RegExp(/\$siteLang/, 'i');
+const REGEXP_ABSOLUTE_URL = new RegExp('^(?:[a-z]+:)?//', 'i');
 /**
  * Middleware / handler fetches all redirects from Sitecore instance by grapqhl service
  * compares with current url and redirects to target url
@@ -28,13 +30,14 @@ export class RedirectsMiddleware extends MiddlewareBase {
             const language = this.getLanguage(req);
             const hostname = this.getHostHeader(req) || this.defaultHostname;
             let site;
+            const startTimestamp = Date.now();
             debug.redirects('redirects middleware start: %o', {
                 pathname,
                 language,
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
-                if (this.config.disabled && this.config.disabled(req, NextResponse.next())) {
+                if (this.config.disabled && this.config.disabled(req, res || NextResponse.next())) {
                     debug.redirects('skipped (redirects middleware is disabled)');
                     return res || NextResponse.next();
                 }
@@ -49,41 +52,59 @@ export class RedirectsMiddleware extends MiddlewareBase {
                     debug.redirects('skipped (redirect does not exist)');
                     return res || NextResponse.next();
                 }
+                // Find context site language and replace token
+                if (REGEXP_CONTEXT_SITE_LANG.test(existsRedirect.target) &&
+                    !(REGEXP_ABSOLUTE_URL.test(existsRedirect.target) &&
+                        existsRedirect.target.includes(hostname))) {
+                    existsRedirect.target = existsRedirect.target.replace(REGEXP_CONTEXT_SITE_LANG, site.language);
+                }
                 const url = req.nextUrl.clone();
-                const absoluteUrlRegex = new RegExp('^(?:[a-z]+:)?//', 'i');
-                if (absoluteUrlRegex.test(existsRedirect.target)) {
+                if (REGEXP_ABSOLUTE_URL.test(existsRedirect.target)) {
                     url.href = existsRedirect.target;
-                    url.locale = req.nextUrl.locale;
                 }
                 else {
+                    const source = `${url.pathname}${url.search}`;
                     url.search = existsRedirect.isQueryStringPreserved ? url.search : '';
                     const urlFirstPart = existsRedirect.target.split('/')[1];
                     if (this.locales.includes(urlFirstPart)) {
                         url.locale = urlFirstPart;
-                        url.pathname = existsRedirect.target.replace(`/${urlFirstPart}`, '');
+                        existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
-                    else {
-                        url.pathname = existsRedirect.target;
+                    const target = source
+                        .replace(regexParser(existsRedirect.pattern), existsRedirect.target)
+                        .replace(/^\/\//, '/')
+                        .split('?');
+                    url.pathname = target[0];
+                    if (target[1]) {
+                        const newParams = new URLSearchParams(target[1]);
+                        for (const [key, val] of newParams.entries()) {
+                            url.searchParams.append(key, val);
+                        }
                     }
                 }
                 const redirectUrl = decodeURIComponent(url.href);
                 /** return Response redirect with http code of redirect type **/
                 switch (existsRedirect.redirectType) {
                     case REDIRECT_TYPE_301:
-                        return NextResponse.redirect(redirectUrl, 301);
+                        return NextResponse.redirect(redirectUrl, {
+                            status: 301,
+                            statusText: 'Moved Permanently',
+                            headers: res === null || res === void 0 ? void 0 : res.headers,
+                        });
                     case REDIRECT_TYPE_302:
-                        return NextResponse.redirect(redirectUrl, 302);
+                        return NextResponse.redirect(redirectUrl, {
+                            status: 302,
+                            statusText: 'Found',
+                            headers: res === null || res === void 0 ? void 0 : res.headers,
+                        });
                     case REDIRECT_TYPE_SERVER_TRANSFER:
-                        return NextResponse.rewrite(redirectUrl);
+                        return NextResponse.rewrite(redirectUrl, res);
                     default:
-                        return NextResponse.next();
+                        return res || NextResponse.next();
                 }
             });
             const response = yield createResponse();
-            // Share site name with the following executed middlewares
-            // Don't need to set when middleware is disabled
-            site && response.cookies.set(this.SITE_SYMBOL, site.name);
-            debug.redirects('redirects middleware end: %o', {
+            debug.redirects('redirects middleware end in %dms: %o', Date.now() - startTimestamp, {
                 redirected: response.redirected,
                 status: response.status,
                 url: response.url,
@@ -97,11 +118,20 @@ export class RedirectsMiddleware extends MiddlewareBase {
         this.locales = config.locales;
     }
     /**
-     * Gets the Next.js API route handler
+     * Gets the Next.js middleware handler with error handling
      * @returns route handler
      */
     getHandler() {
-        return this.handler;
+        return (req, res) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                return yield this.handler(req, res);
+            }
+            catch (error) {
+                console.log('Redirect middleware failed:');
+                console.log(error);
+                return res || NextResponse.next();
+            }
+        });
     }
     /**
      * Method returns RedirectInfo when matches
@@ -113,10 +143,23 @@ export class RedirectsMiddleware extends MiddlewareBase {
     getExistsRedirect(req, siteName) {
         return __awaiter(this, void 0, void 0, function* () {
             const redirects = yield this.redirectsService.fetchRedirects(siteName);
-            return redirects.length
-                ? redirects.find((redirect) => {
-                    return ((regexParser(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
-                        regexParser(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
+            const tragetURL = req.nextUrl.pathname;
+            const targetQS = req.nextUrl.search || '';
+            const language = this.getLanguage(req);
+            const modifyRedirects = structuredClone(redirects);
+            return modifyRedirects.length
+                ? modifyRedirects.find((redirect) => {
+                    redirect.pattern = redirect.pattern.replace(RegExp(`^[^]?/${language}/`, 'gi'), '');
+                    redirect.pattern = `/^\/${redirect.pattern
+                        .replace(/^\/|\/$/g, '')
+                        .replace(/^\^\/|\/\$$/g, '')
+                        .replace(/^\^|\$$/g, '')
+                        .replace(/(?<!\\)\?/g, '\\?')
+                        .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
+                    return ((regexParser(redirect.pattern).test(tragetURL) ||
+                        regexParser(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
+                        regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
                             ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
                             : true));

package/dist/esm/services/base-graphql-sitemap-service.js

@@ -7,7 +7,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss/graphql';
 import { debug } from '@sitecore-jss/sitecore-jss';
 import { getPersonalizedRewrite } from '@sitecore-jss/sitecore-jss/personalize';
 /** @private */
@@ -32,7 +31,7 @@ query ${usesPersonalize ? 'PersonalizeSitemapQuery' : 'DefaultSitemapQuery'}(
   $language: String!
   $includedPaths: [String]
   $excludedPaths: [String]
-  $pageSize: Int = 10
+  $pageSize: Int = 100
   $after: String
 ) {
   site {
@@ -128,7 +127,7 @@ export class BaseGraphQLSitemapService {
     getTranformedPaths(siteName, languages, formatStaticPath) {
         return __awaiter(this, void 0, void 0, function* () {
             const paths = new Array();
-            yield Promise.all(languages.map((language) => __awaiter(this, void 0, void 0, function* () {
+            for (const language of languages) {
                 if (language === '') {
                     throw new RangeError(languageEmptyError);
                 }
@@ -136,7 +135,7 @@ export class BaseGraphQLSitemapService {
                 const results = yield this.fetchLanguageSitePaths(language, siteName);
                 const transformedPaths = yield this.transformLanguageSitePaths(results, formatStaticPath, language);
                 paths.push(...transformedPaths);
-            })));
+            }
             return paths;
         });
     }
@@ -191,8 +190,10 @@ export class BaseGraphQLSitemapService {
      * @returns {GraphQLClient} implementation
      */
     getGraphQLClient() {
-        return new GraphQLRequestClient(this.options.endpoint, {
-            apiKey: this.options.apiKey,
+        if (!this.options.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.options.clientFactory({
             debugger: debug.sitemap,
         });
     }

package/dist/esm/services/component-props-service.js

@@ -17,9 +17,9 @@ export class ComponentPropsService {
      */
     fetchServerSideComponentProps(params) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { componentModule, layoutData, context } = params;
+            const { moduleFactory, layoutData, context } = params;
             const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
-                const module = yield componentModule(componentName);
+                const module = yield moduleFactory(componentName);
                 return module === null || module === void 0 ? void 0 : module.getServerSideProps;
             });
             return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
@@ -33,9 +33,9 @@ export class ComponentPropsService {
      */
     fetchStaticComponentProps(params) {
         return __awaiter(this, void 0, void 0, function* () {
-            const { componentModule, layoutData, context } = params;
+            const { moduleFactory, layoutData, context } = params;
             const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
-                const module = yield componentModule(componentName);
+                const module = yield moduleFactory(componentName);
                 return module === null || module === void 0 ? void 0 : module.getStaticProps;
             });
             return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
@@ -122,11 +122,11 @@ export class ComponentPropsService {
                     componentProps[uid] = result;
                 })
                     .catch((error) => {
-                    const errLog = `Error during preload data for component ${uid}: ${error.message ||
-                        error}`;
+                    const errLog = `Error during preload data for component ${req.rendering.componentName} (${uid}): ${error.message || error}`;
                     console.error(chalk.red(errLog));
                     componentProps[uid] = {
                         error: error.message || errLog,
+                        componentName: req.rendering.componentName,
                     };
                 });
             });

package/dist/esm/site/index.js

@@ -0,0 +1 @@
+export { SiteResolver } from '@sitecore-jss/sitecore-jss/site';

package/dist/esm/utils/index.js

@@ -0,0 +1,2 @@
+export { getPublicUrl, handleEditorFastRefresh } from './utils';
+export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';

package/dist/esm/{utils.js → utils/utils.js}

@@ -1,4 +1,3 @@
-import chalk from 'chalk';
 import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
 /**
  * Get the publicUrl.
@@ -6,25 +5,20 @@ import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/u
  * This is set to http://localhost:3000 by default.
  * VERCEL_URL is provided by Vercel in case if we are in Preview deployment (deployment based on the custom branch),
  * preview deployment has unique url, we don't know exact url.
+ * Similarly, DEPLOY_URL is provided by Netlify and would give us the deploy URL
+ * In production non-editing environments it is desirable to use relative urls, so in that case set PUBLIC_URL = ''
  */
 export const getPublicUrl = () => {
-    if (process.env.VERCEL_URL)
-        return `https://${process.env.VERCEL_URL}`;
     let url = process.env.PUBLIC_URL;
     if (url === undefined) {
-        console.warn(`${chalk.yellow.bold('Warning:')} An PUBLIC_URL environment variable is not defined. Falling back to http://localhost:3000.`);
+        if (process.env.NETLIFY && process.env.DEPLOY_URL)
+            return process.env.DEPLOY_URL;
+        if (process.env.VERCEL_URL)
+            return `https://${process.env.VERCEL_URL}`;
         url = 'http://localhost:3000';
     }
-    else {
-        try {
-            new URL(url);
-        }
-        catch (error) {
-            throw new Error(`The PUBLIC_URL environment variable '${url}' is not a valid URL.`);
-        }
-    }
     // Ensure no trailing slash
-    return url.toString().replace(/\/$/, '');
+    return url.replace(/\/$/, '');
 };
 /**
  * Since Sitecore editors do not support Fast Refresh:

package/graphql.d.ts

@@ -0,0 +1 @@
+export * from './types/graphql/index';

package/graphql.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/graphql/index');

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.0.0-canary.8",
+  "version": "22.1.0-canary.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
   "scripts": {
     "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig-esm.json",
     "clean": "del-cli dist types",
-    "lint": "eslint ./src/**/*.tsx ./src/**/*.ts",
+    "lint": "eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
     "test": "mocha --require ./test/setup.js \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
     "prepublishOnly": "npm run build",
     "coverage": "nyc npm test",
-    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-nextjs --entryPoints src/index.ts --entryPoints src/monitoring/index.ts --entryPoints src/editing/index.ts --entryPoints src/middleware/index.ts --githubPages false"
+    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-nextjs --entryPoints src/index.ts --entryPoints src/monitoring/index.ts --entryPoints src/editing/index.ts --entryPoints src/middleware/index.ts --entryPoints src/context/index.ts --entryPoints src/utils/index.ts --entryPoints src/site/index.ts --entryPoints src/graphql/index.ts --githubPages false"
   },
   "engines": {
-    "node": ">=12",
-    "npm": ">=6"
+    "node": ">=18"
   },
   "author": {
     "name": "Sitecore Corporation",
@@ -30,6 +29,7 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
+    "@sitecore-cloudsdk/personalize": "^0.3.0",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
@@ -37,7 +37,7 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "~18.11.18",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.10",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
@@ -54,7 +54,7 @@
     "eslint-plugin-react": "^7.32.1",
     "jsdom": "^21.1.0",
     "mocha": "^10.2.0",
-    "next": "^13.1.6",
+    "next": "^14.1.0",
     "nock": "^13.3.0",
     "nyc": "^15.1.0",
     "react": "^18.2.0",
@@ -65,14 +65,17 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "next": "^13.1.6",
+    "@sitecore-cloudsdk/events": "^0.3.0",
+    "@sitecore-cloudsdk/personalize": "^0.3.0",
+    "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.0.0-canary.8",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.0.0-canary.8",
-    "@sitecore-jss/sitecore-jss-react": "^22.0.0-canary.8",
+    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.1",
+    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.1",
+    "@vercel/kv": "^0.2.1",
     "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
@@ -80,7 +83,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "f9660c4a7514b843cbf7c60db56b12452b877aa4",
+  "gitHead": "30a3425acc99805adeb0d95ce469db9325c0f83d",
   "files": [
     "dist",
     "types",

package/site.d.ts

@@ -0,0 +1 @@
+export * from './types/site/index';

package/site.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/site/index');

package/types/ComponentBuilder.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="@types/react" />
+import { ComponentFactory } from '@sitecore-jss/sitecore-jss-react';
+import { Module, ModuleFactory } from './sharedTypes/module-factory';
+import { ComponentType } from 'react';
+/**
+ * Represents a component that can be imported dynamically
+ */
+export type LazyModule = {
+    module: () => Promise<Module>;
+    element: (isEditing?: boolean) => ComponentType;
+};
+/**
+ * Component is a module or a lazy module
+ */
+type Component = Module | LazyModule | ComponentType;
+/**
+ * Configuration for ComponentBuilder
+ */
+export type ComponentBuilderConfig<Component> = {
+    /**
+     * List of components to be stored
+     */
+    components: Map<string, Component>;
+};
+/**
+ * Configuration for ComponentFactory
+ */
+type ComponentFactoryConfig = {
+    isEditing?: boolean;
+};
+/**
+ * Nextjs implementation of component builder class for building components based on the configuration.
+ */
+export declare class ComponentBuilder {
+    protected config: ComponentBuilderConfig<Component>;
+    /**
+     * List of components to be stored
+     */
+    protected components: Map<string, Component>;
+    /**
+     * SXA uses custom default export name
+     */
+    protected DEFAULT_EXPORT_NAME: string;
+    constructor(config: ComponentBuilderConfig<Component>);
+    /**
+     * Creates a new instance of module factory
+     * Module factory provides a module (file) including all exports.
+     * Module can be imported dynamically or statically.
+     * @returns {ModuleFactory} Module factory implementation
+     */
+    getModuleFactory(): ModuleFactory;
+    /**
+     * Creates a new instance of component factory
+     * Component can be imported dynamically or statically.
+     * @param {Object} [config] Component factory configuration
+     * @param {boolean} [config.isEditing] Indicates if component factory is used in editing mode
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory({ isEditing }?: ComponentFactoryConfig): ComponentFactory;
+}
+export {};

package/types/components/BYOCWrapper.d.ts

@@ -0,0 +1,19 @@
+import { BYOCWrapper } from '@sitecore-jss/sitecore-jss-react';
+import { GetStaticComponentProps, GetServerSideComponentProps } from '../sharedTypes/component-props';
+/**
+ * This is a repackaged version of the React BYOCWrapper component with support for
+ * server rendering in Next.js (using component-level data-fetching feature of JSS).
+ */
+/**
+ * Will be called during SSG
+ * @param {ComponentRendering} rendering
+ * @returns {GetStaticPropsContext} context
+ */
+export declare const getStaticProps: GetStaticComponentProps;
+/**
+ * Will be called during SSR
+ * @param {ComponentRendering} rendering
+ * @returns {GetStaticPropsContext} context
+ */
+export declare const getServerSideProps: GetServerSideComponentProps;
+export default BYOCWrapper;