@sitecore-content-sdk/nextjs 0.2.0-beta.4 → 0.2.0-beta.6

package/dist/cjs/components/Link.js

@@ -49,7 +49,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const link_1 = __importDefault(require("next/link"));
 const react_2 = require("@sitecore-content-sdk/react");
 /**
@@ -90,4 +89,3 @@ exports.Link = (0, react_1.forwardRef)((props, ref) => {
     return (react_1.default.createElement(react_2.Link, Object.assign({}, reactLinkProps, { ref: ref }, (process.env.TEST ? { 'data-react-link': true } : {}))));
 });
 exports.Link.displayName = 'NextLink';
-exports.Link.propTypes = Object.assign({ internalLinkMatcher: prop_types_1.default.instanceOf(RegExp) }, react_2.LinkPropTypes);

package/dist/cjs/components/NextImage.js

@@ -16,15 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextImage = void 0;
 const media_1 = require("@sitecore-content-sdk/core/media");
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@sitecore-content-sdk/react");
 const image_1 = __importDefault(require("next/image"));
-const react_3 = require("@sitecore-content-sdk/react");
-const react_4 = require("@sitecore-content-sdk/react");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-exports.NextImage = (0, react_2.withFieldMetadata)((0, react_3.withEmptyFieldEditingComponent)((_a) => {
-    var _b;
+exports.NextImage = (0, react_2.withFieldMetadata)((0, react_2.withEmptyFieldEditingComponent)((_a) => {
+    var _b, _c;
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     const sitecoreContext = react_1.default.useContext(react_2.SitecoreContextReactContext);
     // next handles src and we use a custom loader,
@@ -43,9 +40,10 @@ exports.NextImage = (0, react_2.withFieldMetadata)((0, react_3.withEmptyFieldEdi
     if (!img) {
         return null;
     }
-    // disable image optimization for Edit and Preview, but preserve original value if true
+    // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
     const unoptimized = otherProps.unoptimized ||
-        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== layout_1.LayoutServicePageState.Normal;
+        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.renderingType) === layout_1.RenderingType.Component ||
+        ((_c = sitecoreContext.context) === null || _c === void 0 ? void 0 : _c.pageState) !== layout_1.LayoutServicePageState.Normal;
     const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
         priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
     const imageProps = Object.assign(Object.assign({}, attrs), { 
@@ -61,22 +59,5 @@ exports.NextImage = (0, react_2.withFieldMetadata)((0, react_3.withEmptyFieldEdi
         return (react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps, (process.env.TEST ? { 'data-unoptimized': unoptimized } : {}))));
     }
     return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: react_4.DefaultEmptyFieldEditingComponentImage }));
-exports.NextImage.propTypes = {
-    field: prop_types_1.default.oneOfType([
-        prop_types_1.default.shape({
-            src: prop_types_1.default.string.isRequired,
-        }),
-        prop_types_1.default.shape({
-            value: prop_types_1.default.object,
-        }),
-    ]),
-    editable: prop_types_1.default.bool,
-    mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
-    imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
-    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
-        prop_types_1.default.object,
-        prop_types_1.default.func,
-    ]),
-};
+}, { defaultEmptyFieldEditingComponent: react_2.DefaultEmptyFieldEditingComponentImage }));
 exports.NextImage.displayName = 'NextImage';

package/dist/cjs/components/RichText.js

@@ -43,13 +43,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichText = exports.prefetched = void 0;
 const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const router_1 = require("next/router");
 const react_2 = require("@sitecore-content-sdk/react");
 exports.prefetched = {};
@@ -103,5 +99,4 @@ const RichText = (props) => {
     return react_1.default.createElement(react_2.RichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 exports.RichText = RichText;
-exports.RichText.propTypes = Object.assign({ internalLinksSelector: prop_types_1.default.string }, react_2.RichTextPropTypes);
 exports.RichText.displayName = 'NextRichText';

package/dist/cjs/editing/editing-render-middleware.js

@@ -105,7 +105,7 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                     language: query.sc_lang,
                     site: query.sc_site,
                     mode: 'library',
-                    dataSourceId: query.sc_datasourceId,
+                    dataSourceId: query.dataSourceId,
                     version: query.sc_version,
                 }, {
                     maxAge: 3,

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

@@ -242,9 +242,9 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             return false;
         })
             .join('&');
-        const newUrl = new URL(`${url.pathname}?${newQueryString}`, url.origin);
+        const newUrl = new URL(`${url.pathname.toLowerCase()}?${newQueryString}`, url.origin);
         url.search = newUrl.search;
-        url.pathname = newUrl.pathname;
+        url.pathname = newUrl.pathname.toLocaleLowerCase();
         url.href = newUrl.href;
         return url;
     }

package/dist/cjs/tools/codegen/extract-components.js

@@ -0,0 +1,64 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractComponents = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const utils_1 = require("./utils");
+const core_1 = require("@sitecore-content-sdk/core");
+const tools_1 = require("@sitecore-content-sdk/core/tools");
+/**
+ * Extracts components from the app folder and sends them to XMCloud.
+ * @param {ExtractComponentsConfig} args - Config for components extraction
+ */
+const extractComponents = (args) => {
+    const authParams = {
+        clientId: process.env.SITECORE_AUTH_CLIENT_ID || '',
+        clientSecret: process.env.SITECORE_AUTH_CLIENT_SECRET || '',
+        endpoint: process.env.SITECORE_AUTH_ENDPOINT || core_1.constants.DEFAULT_SITECORE_AUTH_ENDPOINT,
+        audience: process.env.SITECORE_AUTH_AUDIENCE || core_1.constants.DEFAULT_SITECORE_AUTH_AUDIENCE,
+    };
+    return () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!(0, utils_1.validateDeployContext)()) {
+            console.log(chalk_1.default.yellow('Skipping code extraction, not in deploy context'));
+            return;
+        }
+        if (!(0, utils_1.validateConsent)()) {
+            console.log(chalk_1.default.yellow('Skipping code extraction, consent not given'));
+            return;
+        }
+        const basePath = process.cwd();
+        try {
+            const bearer = yield (0, tools_1.fetchBearerToken)(authParams);
+            if (!bearer) {
+                console.error(chalk_1.default.red('Failed to get bearer token, aborting code extraction'));
+                return;
+            }
+            const componentPaths = yield (0, utils_1.resolveComponentImportFiles)(basePath, args.componentMapPath);
+            const codeDispatches = Array.from(componentPaths, (mapEntry) => (0, utils_1.sendCode)({
+                file: {
+                    name: mapEntry[0],
+                    path: mapEntry[1],
+                    type: utils_1.ExtractedFileType.Component,
+                },
+                token: bearer,
+                edgeUrl: args.scConfig.api.edge.edgeUrl,
+            }));
+            yield Promise.all(codeDispatches);
+        }
+        catch (error) {
+            console.error(chalk_1.default.red('Error during component extraction:', error));
+        }
+    });
+};
+exports.extractComponents = extractComponents;

package/dist/cjs/tools/codegen/utils.js

@@ -0,0 +1,255 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendCode = exports.resolveComponentImportFiles = exports.validateDeployContext = exports.validateConsent = exports.ExtractedFileType = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const ts = __importStar(require("typescript"));
+const core_1 = require("@sitecore-content-sdk/core");
+/**
+ * Type of file to be sent to the mesh endpoint
+ */
+var ExtractedFileType;
+(function (ExtractedFileType) {
+    ExtractedFileType["Component"] = "component";
+    ExtractedFileType["Json"] = "json";
+    ExtractedFileType["Package"] = "package.json";
+})(ExtractedFileType || (exports.ExtractedFileType = ExtractedFileType = {}));
+/**
+ * Validates consent for code extraction procedures
+ * @returns {boolean} - true if consent is given, false otherwise
+ */
+const validateConsent = () => {
+    if (!process.env.EXTRACT_CONSENT) {
+        console.log(chalk_1.default.yellow('EXTRACT_CONSENT is not set'));
+        return false;
+    }
+    return true;
+};
+exports.validateConsent = validateConsent;
+/**
+ * Validates if the current operation is done in Vercel, Netlify or XMCloud
+ * deploy context
+ * @returns {boolean} - true if in deploy context, false otherwise
+ */
+const validateDeployContext = () => {
+    if (process.env.NETLIFY && process.env.BUILD_ID) {
+        return true;
+    }
+    // workaround, Vercel does not have variables that are only accessible at build time
+    if (process.env.VERCEL && !process.env.VERCEL_REGION) {
+        return true;
+    }
+    if (process.env.SITECORE && process.env.BuildMetadata_BuildId) {
+        return true;
+    }
+    return false;
+};
+exports.validateDeployContext = validateDeployContext;
+/**
+ * Parses the componentBuilder.ts file and returns a map of component names
+ * and their respective import strings
+ * @param {string} appPath path to the JSS app root
+ * @param {string} [componentMapPath] path to the app's component map file. Default: 'src/lib/componentMap.ts'
+ * @returns map of component names and their respective import strings
+ */
+const resolveComponentImportFiles = (appPath, componentMapPath = './src/lib/componentMap.ts') => {
+    appPath = path_1.default.isAbsolute(appPath) ? appPath : path_1.default.resolve(process.cwd(), appPath);
+    const tsConfig = ts.readConfigFile(path_1.default.resolve(appPath, 'tsconfig.json'), ts.sys.readFile);
+    if (tsConfig.error) {
+        throw new Error(`Error reading tsconfig.json from JSS app root: ${tsConfig.error.messageText}`);
+    }
+    const componentMapFullPath = path_1.default.isAbsolute(componentMapPath)
+        ? componentMapPath
+        : path_1.default.resolve(appPath, componentMapPath);
+    const cliCompilerOptions = Object.assign(Object.assign({}, tsConfig.config.compilerOptions), { baseUrl: appPath });
+    const tsHost = ts.createCompilerHost(cliCompilerOptions, true);
+    const componentMapSourceFile = tsHost.getSourceFile(componentMapFullPath, ts.ScriptTarget.Latest, (msg) => {
+        throw new Error(`Failed to parse ${componentMapFullPath}: ${msg}`);
+    });
+    if (!componentMapSourceFile)
+        throw ReferenceError(`Failed to find file ${componentMapFullPath}`);
+    // this map matches all raw import strings (i.e. * as component) to import strings
+    const importStringsMap = {};
+    // this map will match component names only to full resolved source file paths
+    const componentImportsMap = new Map();
+    let mapExportName = '';
+    // all new xyz() statements in file
+    const newAssignments = [];
+    // all map.set() assignments in file
+    const mapAssignments = [];
+    // this function will traverse the  map = new Map([/values/]) statement
+    // and get the component names registered in map from it
+    const traverseNewStatement = (node) => {
+        // going through map invocation, we're looking for outer array value
+        if (ts.isArrayLiteralExpression(node)) {
+            ts.forEachChild(node, (childNode) => {
+                // and then parse each individual array pair (i.e. ['MyComp', MyComp])
+                if (!ts.isArrayLiteralExpression(childNode)) {
+                    return;
+                }
+                const componentKey = childNode.elements[1].getText();
+                const componentImport = Object.keys(importStringsMap).find((importStatement) => {
+                    const matcher = new RegExp(`\\b(${componentKey})\\b`);
+                    return importStatement.match(matcher) !== null;
+                });
+                if (componentImport) {
+                    const componentValue = importStringsMap[componentImport];
+                    componentImportsMap.set(componentKey, componentValue);
+                }
+            });
+        }
+        else if (node.getChildCount() > 0) {
+            ts.forEachChild(node, (childNode) => {
+                traverseNewStatement(childNode);
+            });
+        }
+    };
+    // step 1: get all import statements, map assignments (map.set) and map inits (map = new Map()) from componentMap file
+    ts.forEachChild(componentMapSourceFile, (childNode) => {
+        var _a;
+        // first, all import statements are parsed
+        if (ts.isImportDeclaration(childNode) && childNode.importClause) {
+            // import path is extracted
+            const moduleName = childNode.moduleSpecifier.getText().replace(/['"]/g, '');
+            // unless the import is a nodeJS one, or points to dependency package, resolve full path to the imported source file
+            if (moduleName.startsWith('node:') || moduleName.indexOf('/node_modules') > -1) {
+                return;
+            }
+            const resolvedModule = ts.nodeModuleNameResolver(moduleName, componentMapFullPath, cliCompilerOptions, tsHost);
+            const resolvedFile = (_a = resolvedModule === null || resolvedModule === void 0 ? void 0 : resolvedModule.resolvedModule) === null || _a === void 0 ? void 0 : _a.resolvedFileName;
+            // module imports will be resolved to /node_modules location - we don't support that yet
+            if (resolvedFile && resolvedFile.indexOf('node_modules') === -1) {
+                importStringsMap[childNode.importClause.getText()] = path_1.default.resolve(resolvedFile);
+            }
+            else {
+                console.warn('Could not resolve a file for import %s', moduleName);
+            }
+        }
+        else if (ts.isExpressionStatement(childNode)) {
+            // parse map assignments (map.set(..)) to get registered components
+            ts.forEachChild(childNode, (expressionNode) => {
+                if (ts.isCallExpression(expressionNode) &&
+                    expressionNode.expression.getText().indexOf('set') !== -1) {
+                    // get map.set assignments
+                    mapAssignments.push(expressionNode);
+                }
+            });
+        }
+        else if (ts.isExportAssignment(childNode)) {
+            // get component map export variable
+            mapExportName = childNode.expression.getText();
+        }
+        else if (childNode.kind === ts.SyntaxKind.FirstStatement) {
+            // get potential map = new Map() assignments to extract initial component values from
+            newAssignments.push(childNode);
+        }
+    });
+    // step 2: parse map assignments (from map.set and the new Map()) and retrieve import paths
+    // only for components registered into component map
+    for (const mapAssignment of newAssignments) {
+        // parse new Map() statement first
+        // only consider variable name for map that is exported
+        if (
+        // get the (maybe) exported new Map() statement
+        // matches i.e. export const map.. / export default const map.. / let map = .. / etc
+        mapAssignment
+            .getText()
+            .match(`^((export )|(export default ))?\\b(var|let|const)\\b\\s{1}\\b(${mapExportName})\\b`)) {
+            traverseNewStatement(mapAssignment);
+            break;
+        }
+    }
+    for (const mapAssignment of mapAssignments) {
+        // only consider the map variable that is exported
+        if (mapAssignment.getText().startsWith(mapExportName)) {
+            const componentKey = mapAssignment.arguments[1].getText();
+            const componentImport = Object.keys(importStringsMap).find((importStatement) => {
+                const matcher = new RegExp(`\\b(${componentKey})\\b`);
+                return importStatement.match(matcher) !== null;
+            });
+            if (componentImport) {
+                const componentValue = importStringsMap[componentImport];
+                componentImportsMap.set(componentKey, componentValue);
+            }
+        }
+    }
+    return componentImportsMap;
+};
+exports.resolveComponentImportFiles = resolveComponentImportFiles;
+const sendCode = (_a) => __awaiter(void 0, [_a], void 0, function* ({ file, token, edgeUrl, }) {
+    const meshEndpoint = `${edgeUrl || core_1.constants.SITECORE_EDGE_URL_DEFAULT}/api/v1/mesh`;
+    if (!fs_1.default.existsSync(file.path)) {
+        console.error(chalk_1.default.red(`Component file not found: ${file.path}`));
+        return;
+    }
+    const code = fs_1.default.readFileSync(file.path);
+    const response = yield fetch(meshEndpoint, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            name: file.name,
+            content: code.toString(),
+            labels: {
+                properties: {
+                    type: file.type,
+                },
+            },
+        }),
+    });
+    if (!response.ok) {
+        console.error(chalk_1.default.red(`Failed to send extracted code from ${file.path}: ${response.statusText}`));
+    }
+    else {
+        console.log(chalk_1.default.green(`Code from ${file.path} extracted and sent to mesh endpoint`));
+    }
+});
+exports.sendCode = sendCode;

package/dist/cjs/tools/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleType = exports.generatePlugins = exports.getComponentList = exports.generateMetadata = exports.generateSites = void 0;
+exports.extractComponents = exports.ModuleType = exports.generatePlugins = exports.getComponentList = exports.generateMetadata = exports.generateSites = void 0;
 var tools_1 = require("@sitecore-content-sdk/core/tools");
 Object.defineProperty(exports, "generateSites", { enumerable: true, get: function () { return tools_1.generateSites; } });
 Object.defineProperty(exports, "generateMetadata", { enumerable: true, get: function () { return tools_1.generateMetadata; } });
 Object.defineProperty(exports, "getComponentList", { enumerable: true, get: function () { return tools_1.getComponentList; } });
 Object.defineProperty(exports, "generatePlugins", { enumerable: true, get: function () { return tools_1.generatePlugins; } });
 Object.defineProperty(exports, "ModuleType", { enumerable: true, get: function () { return tools_1.ModuleType; } });
+var extract_components_1 = require("./codegen/extract-components");
+Object.defineProperty(exports, "extractComponents", { enumerable: true, get: function () { return extract_components_1.extractComponents; } });

package/dist/esm/components/Link.js

@@ -10,9 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import NextLink from 'next/link';
-import { Link as ReactLink, LinkPropTypes, } from '@sitecore-content-sdk/react';
+import { Link as ReactLink, } from '@sitecore-content-sdk/react';
 /**
  * Matches relative URLs that end with a file extension.
  */
@@ -51,4 +50,3 @@ export const Link = forwardRef((props, ref) => {
     return (React.createElement(ReactLink, Object.assign({}, reactLinkProps, { ref: ref }, (process.env.TEST ? { 'data-react-link': true } : {}))));
 });
 Link.displayName = 'NextLink';
-Link.propTypes = Object.assign({ internalLinkMatcher: PropTypes.instanceOf(RegExp) }, LinkPropTypes);

package/dist/esm/components/NextImage.js

@@ -10,15 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { mediaApi } from '@sitecore-content-sdk/core/media';
-import PropTypes from 'prop-types';
 import React from 'react';
-import { withFieldMetadata, SitecoreContextReactContext, } from '@sitecore-content-sdk/react';
+import { withFieldMetadata, SitecoreContextReactContext, DefaultEmptyFieldEditingComponentImage, withEmptyFieldEditingComponent, } from '@sitecore-content-sdk/react';
 import Image from 'next/image';
-import { withEmptyFieldEditingComponent } from '@sitecore-content-sdk/react';
-import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-content-sdk/react';
-import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
+import { isFieldValueEmpty, LayoutServicePageState, RenderingType, } from '@sitecore-content-sdk/core/layout';
 export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
-    var _b;
+    var _b, _c;
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     const sitecoreContext = React.useContext(SitecoreContextReactContext);
     // next handles src and we use a custom loader,
@@ -37,9 +34,10 @@ export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) =
     if (!img) {
         return null;
     }
-    // disable image optimization for Edit and Preview, but preserve original value if true
+    // disable image optimization for Edit / Preview / Component rendering, but preserve original value if true
     const unoptimized = otherProps.unoptimized ||
-        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== LayoutServicePageState.Normal;
+        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.renderingType) === RenderingType.Component ||
+        ((_c = sitecoreContext.context) === null || _c === void 0 ? void 0 : _c.pageState) !== LayoutServicePageState.Normal;
     const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
         priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
     const imageProps = Object.assign(Object.assign({}, attrs), { 
@@ -56,21 +54,4 @@ export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) =
     }
     return null; // we can't handle the truth
 }, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
-NextImage.propTypes = {
-    field: PropTypes.oneOfType([
-        PropTypes.shape({
-            src: PropTypes.string.isRequired,
-        }),
-        PropTypes.shape({
-            value: PropTypes.object,
-        }),
-    ]),
-    editable: PropTypes.bool,
-    mediaUrlPrefix: PropTypes.instanceOf(RegExp),
-    imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
-    emptyFieldEditingComponent: PropTypes.oneOfType([
-        PropTypes.object,
-        PropTypes.func,
-    ]),
-};
 NextImage.displayName = 'NextImage';

package/dist/esm/components/RichText.js

@@ -10,9 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
-import { RichText as ReactRichText, RichTextPropTypes, } from '@sitecore-content-sdk/react';
+import { RichText as ReactRichText, } from '@sitecore-content-sdk/react';
 export const prefetched = {};
 export const RichText = (props) => {
     const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
@@ -63,5 +62,4 @@ export const RichText = (props) => {
     };
     return React.createElement(ReactRichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
-RichText.propTypes = Object.assign({ internalLinksSelector: PropTypes.string }, RichTextPropTypes);
 RichText.displayName = 'NextRichText';

package/dist/esm/editing/editing-render-middleware.js

@@ -101,7 +101,7 @@ export class EditingRenderMiddleware extends RenderMiddlewareBase {
                     language: query.sc_lang,
                     site: query.sc_site,
                     mode: 'library',
-                    dataSourceId: query.sc_datasourceId,
+                    dataSourceId: query.dataSourceId,
                     version: query.sc_version,
                 }, {
                     maxAge: 3,

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

@@ -236,9 +236,9 @@ export class RedirectsMiddleware extends MiddlewareBase {
             return false;
         })
             .join('&');
-        const newUrl = new URL(`${url.pathname}?${newQueryString}`, url.origin);
+        const newUrl = new URL(`${url.pathname.toLowerCase()}?${newQueryString}`, url.origin);
         url.search = newUrl.search;
-        url.pathname = newUrl.pathname;
+        url.pathname = newUrl.pathname.toLocaleLowerCase();
         url.href = newUrl.href;
         return url;
     }

package/dist/esm/tools/codegen/extract-components.js

@@ -0,0 +1,57 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import chalk from 'chalk';
+import { ExtractedFileType, resolveComponentImportFiles, sendCode, validateConsent, validateDeployContext, } from './utils';
+import { constants } from '@sitecore-content-sdk/core';
+import { fetchBearerToken } from '@sitecore-content-sdk/core/tools';
+/**
+ * Extracts components from the app folder and sends them to XMCloud.
+ * @param {ExtractComponentsConfig} args - Config for components extraction
+ */
+export const extractComponents = (args) => {
+    const authParams = {
+        clientId: process.env.SITECORE_AUTH_CLIENT_ID || '',
+        clientSecret: process.env.SITECORE_AUTH_CLIENT_SECRET || '',
+        endpoint: process.env.SITECORE_AUTH_ENDPOINT || constants.DEFAULT_SITECORE_AUTH_ENDPOINT,
+        audience: process.env.SITECORE_AUTH_AUDIENCE || constants.DEFAULT_SITECORE_AUTH_AUDIENCE,
+    };
+    return () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!validateDeployContext()) {
+            console.log(chalk.yellow('Skipping code extraction, not in deploy context'));
+            return;
+        }
+        if (!validateConsent()) {
+            console.log(chalk.yellow('Skipping code extraction, consent not given'));
+            return;
+        }
+        const basePath = process.cwd();
+        try {
+            const bearer = yield fetchBearerToken(authParams);
+            if (!bearer) {
+                console.error(chalk.red('Failed to get bearer token, aborting code extraction'));
+                return;
+            }
+            const componentPaths = yield resolveComponentImportFiles(basePath, args.componentMapPath);
+            const codeDispatches = Array.from(componentPaths, (mapEntry) => sendCode({
+                file: {
+                    name: mapEntry[0],
+                    path: mapEntry[1],
+                    type: ExtractedFileType.Component,
+                },
+                token: bearer,
+                edgeUrl: args.scConfig.api.edge.edgeUrl,
+            }));
+            yield Promise.all(codeDispatches);
+        }
+        catch (error) {
+            console.error(chalk.red('Error during component extraction:', error));
+        }
+    });
+};

package/dist/esm/tools/codegen/utils.js

@@ -0,0 +1,212 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import chalk from 'chalk';
+import path from 'path';
+import fs from 'fs';
+import * as ts from 'typescript';
+import { constants } from '@sitecore-content-sdk/core';
+/**
+ * Type of file to be sent to the mesh endpoint
+ */
+export var ExtractedFileType;
+(function (ExtractedFileType) {
+    ExtractedFileType["Component"] = "component";
+    ExtractedFileType["Json"] = "json";
+    ExtractedFileType["Package"] = "package.json";
+})(ExtractedFileType || (ExtractedFileType = {}));
+/**
+ * Validates consent for code extraction procedures
+ * @returns {boolean} - true if consent is given, false otherwise
+ */
+export const validateConsent = () => {
+    if (!process.env.EXTRACT_CONSENT) {
+        console.log(chalk.yellow('EXTRACT_CONSENT is not set'));
+        return false;
+    }
+    return true;
+};
+/**
+ * Validates if the current operation is done in Vercel, Netlify or XMCloud
+ * deploy context
+ * @returns {boolean} - true if in deploy context, false otherwise
+ */
+export const validateDeployContext = () => {
+    if (process.env.NETLIFY && process.env.BUILD_ID) {
+        return true;
+    }
+    // workaround, Vercel does not have variables that are only accessible at build time
+    if (process.env.VERCEL && !process.env.VERCEL_REGION) {
+        return true;
+    }
+    if (process.env.SITECORE && process.env.BuildMetadata_BuildId) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Parses the componentBuilder.ts file and returns a map of component names
+ * and their respective import strings
+ * @param {string} appPath path to the JSS app root
+ * @param {string} [componentMapPath] path to the app's component map file. Default: 'src/lib/componentMap.ts'
+ * @returns map of component names and their respective import strings
+ */
+export const resolveComponentImportFiles = (appPath, componentMapPath = './src/lib/componentMap.ts') => {
+    appPath = path.isAbsolute(appPath) ? appPath : path.resolve(process.cwd(), appPath);
+    const tsConfig = ts.readConfigFile(path.resolve(appPath, 'tsconfig.json'), ts.sys.readFile);
+    if (tsConfig.error) {
+        throw new Error(`Error reading tsconfig.json from JSS app root: ${tsConfig.error.messageText}`);
+    }
+    const componentMapFullPath = path.isAbsolute(componentMapPath)
+        ? componentMapPath
+        : path.resolve(appPath, componentMapPath);
+    const cliCompilerOptions = Object.assign(Object.assign({}, tsConfig.config.compilerOptions), { baseUrl: appPath });
+    const tsHost = ts.createCompilerHost(cliCompilerOptions, true);
+    const componentMapSourceFile = tsHost.getSourceFile(componentMapFullPath, ts.ScriptTarget.Latest, (msg) => {
+        throw new Error(`Failed to parse ${componentMapFullPath}: ${msg}`);
+    });
+    if (!componentMapSourceFile)
+        throw ReferenceError(`Failed to find file ${componentMapFullPath}`);
+    // this map matches all raw import strings (i.e. * as component) to import strings
+    const importStringsMap = {};
+    // this map will match component names only to full resolved source file paths
+    const componentImportsMap = new Map();
+    let mapExportName = '';
+    // all new xyz() statements in file
+    const newAssignments = [];
+    // all map.set() assignments in file
+    const mapAssignments = [];
+    // this function will traverse the  map = new Map([/values/]) statement
+    // and get the component names registered in map from it
+    const traverseNewStatement = (node) => {
+        // going through map invocation, we're looking for outer array value
+        if (ts.isArrayLiteralExpression(node)) {
+            ts.forEachChild(node, (childNode) => {
+                // and then parse each individual array pair (i.e. ['MyComp', MyComp])
+                if (!ts.isArrayLiteralExpression(childNode)) {
+                    return;
+                }
+                const componentKey = childNode.elements[1].getText();
+                const componentImport = Object.keys(importStringsMap).find((importStatement) => {
+                    const matcher = new RegExp(`\\b(${componentKey})\\b`);
+                    return importStatement.match(matcher) !== null;
+                });
+                if (componentImport) {
+                    const componentValue = importStringsMap[componentImport];
+                    componentImportsMap.set(componentKey, componentValue);
+                }
+            });
+        }
+        else if (node.getChildCount() > 0) {
+            ts.forEachChild(node, (childNode) => {
+                traverseNewStatement(childNode);
+            });
+        }
+    };
+    // step 1: get all import statements, map assignments (map.set) and map inits (map = new Map()) from componentMap file
+    ts.forEachChild(componentMapSourceFile, (childNode) => {
+        var _a;
+        // first, all import statements are parsed
+        if (ts.isImportDeclaration(childNode) && childNode.importClause) {
+            // import path is extracted
+            const moduleName = childNode.moduleSpecifier.getText().replace(/['"]/g, '');
+            // unless the import is a nodeJS one, or points to dependency package, resolve full path to the imported source file
+            if (moduleName.startsWith('node:') || moduleName.indexOf('/node_modules') > -1) {
+                return;
+            }
+            const resolvedModule = ts.nodeModuleNameResolver(moduleName, componentMapFullPath, cliCompilerOptions, tsHost);
+            const resolvedFile = (_a = resolvedModule === null || resolvedModule === void 0 ? void 0 : resolvedModule.resolvedModule) === null || _a === void 0 ? void 0 : _a.resolvedFileName;
+            // module imports will be resolved to /node_modules location - we don't support that yet
+            if (resolvedFile && resolvedFile.indexOf('node_modules') === -1) {
+                importStringsMap[childNode.importClause.getText()] = path.resolve(resolvedFile);
+            }
+            else {
+                console.warn('Could not resolve a file for import %s', moduleName);
+            }
+        }
+        else if (ts.isExpressionStatement(childNode)) {
+            // parse map assignments (map.set(..)) to get registered components
+            ts.forEachChild(childNode, (expressionNode) => {
+                if (ts.isCallExpression(expressionNode) &&
+                    expressionNode.expression.getText().indexOf('set') !== -1) {
+                    // get map.set assignments
+                    mapAssignments.push(expressionNode);
+                }
+            });
+        }
+        else if (ts.isExportAssignment(childNode)) {
+            // get component map export variable
+            mapExportName = childNode.expression.getText();
+        }
+        else if (childNode.kind === ts.SyntaxKind.FirstStatement) {
+            // get potential map = new Map() assignments to extract initial component values from
+            newAssignments.push(childNode);
+        }
+    });
+    // step 2: parse map assignments (from map.set and the new Map()) and retrieve import paths
+    // only for components registered into component map
+    for (const mapAssignment of newAssignments) {
+        // parse new Map() statement first
+        // only consider variable name for map that is exported
+        if (
+        // get the (maybe) exported new Map() statement
+        // matches i.e. export const map.. / export default const map.. / let map = .. / etc
+        mapAssignment
+            .getText()
+            .match(`^((export )|(export default ))?\\b(var|let|const)\\b\\s{1}\\b(${mapExportName})\\b`)) {
+            traverseNewStatement(mapAssignment);
+            break;
+        }
+    }
+    for (const mapAssignment of mapAssignments) {
+        // only consider the map variable that is exported
+        if (mapAssignment.getText().startsWith(mapExportName)) {
+            const componentKey = mapAssignment.arguments[1].getText();
+            const componentImport = Object.keys(importStringsMap).find((importStatement) => {
+                const matcher = new RegExp(`\\b(${componentKey})\\b`);
+                return importStatement.match(matcher) !== null;
+            });
+            if (componentImport) {
+                const componentValue = importStringsMap[componentImport];
+                componentImportsMap.set(componentKey, componentValue);
+            }
+        }
+    }
+    return componentImportsMap;
+};
+export const sendCode = (_a) => __awaiter(void 0, [_a], void 0, function* ({ file, token, edgeUrl, }) {
+    const meshEndpoint = `${edgeUrl || constants.SITECORE_EDGE_URL_DEFAULT}/api/v1/mesh`;
+    if (!fs.existsSync(file.path)) {
+        console.error(chalk.red(`Component file not found: ${file.path}`));
+        return;
+    }
+    const code = fs.readFileSync(file.path);
+    const response = yield fetch(meshEndpoint, {
+        method: 'POST',
+        headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            name: file.name,
+            content: code.toString(),
+            labels: {
+                properties: {
+                    type: file.type,
+                },
+            },
+        }),
+    });
+    if (!response.ok) {
+        console.error(chalk.red(`Failed to send extracted code from ${file.path}: ${response.statusText}`));
+    }
+    else {
+        console.log(chalk.green(`Code from ${file.path} extracted and sent to mesh endpoint`));
+    }
+});

package/dist/esm/tools/index.js

@@ -1 +1,2 @@
 export { generateSites, generateMetadata, getComponentList, generatePlugins, ModuleType, } from '@sitecore-content-sdk/core/tools';
+export { extractComponents } from './codegen/extract-components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/nextjs",
-  "version": "0.2.0-beta.4",
+  "version": "0.2.0-beta.6",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -33,15 +33,14 @@
     "@sitecore-cloudsdk/core": "^0.5.0",
     "@sitecore-cloudsdk/personalize": "^0.5.0",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
     "@types/mocha": "^10.0.1",
     "@types/node": "~22.9.0",
-    "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
     "@types/sinon": "^10.0.13",
     "@types/sinon-chai": "^3.2.9",
     "chai": "^4.3.7",
@@ -51,15 +50,15 @@
     "cross-fetch": "^4.1.0",
     "del-cli": "^6.0.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react": "^7.37.5",
     "jsdom": "^26.0.0",
     "mocha": "^11.1.0",
-    "next": "^14.2.18",
+    "next": "^15.3.1",
     "nock": "14.0.0-beta.7",
     "nyc": "^17.1.0",
     "proxyquire": "^2.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sinon": "^19.0.2",
     "sinon-chai": "^3.7.0",
     "ts-node": "^10.9.1",
@@ -69,23 +68,28 @@
     "@sitecore-cloudsdk/core": "^0.5.0",
     "@sitecore-cloudsdk/events": "^0.5.0",
     "@sitecore-cloudsdk/personalize": "^0.5.0",
-    "next": "^14.2.18",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.4.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@babel/parser": "^7.26.10",
-    "@sitecore-content-sdk/core": "0.2.0-beta.4",
-    "@sitecore-content-sdk/react": "0.2.0-beta.4",
+    "@sitecore-content-sdk/core": "0.2.0-beta.6",
+    "@sitecore-content-sdk/react": "0.2.0-beta.6",
     "@vercel/kv": "^3.0.0",
-    "prop-types": "^15.8.1",
     "recast": "^0.23.11",
     "regex-parser": "^2.3.0",
     "sync-disk-cache": "^2.1.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "750ea744c6ba45e5480c921acf549ec48c53b303",
+  "gitHead": "a56ee0c0a3897b5f9915329e20469fa427ee13a8",
   "files": [
     "dist",
     "types",

package/types/components/ComponentPropsContext.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, JSX } from 'react';
 import { ComponentPropsCollection } from '../sharedTypes/component-props';
 /**
  * Component props context which we are using in order to store data fetched on components level (getStaticProps/getServerSideProps)

package/types/components/RichText.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { JSX } from 'react';
 import { RichTextProps as ReactRichTextProps } from '@sitecore-content-sdk/react';
 export type RichTextProps = ReactRichTextProps & {
     /**
@@ -22,17 +21,5 @@ export declare const prefetched: {
 };
 export declare const RichText: {
     (props: RichTextProps): JSX.Element;
-    propTypes: {
-        field: PropTypes.Requireable<PropTypes.InferProps<{
-            value: PropTypes.Requireable<string>;
-            metadata: PropTypes.Requireable<{
-                [x: string]: any;
-            }>;
-        }>>;
-        tag: PropTypes.Requireable<string>;
-        editable: PropTypes.Requireable<boolean>;
-        emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
-        internalLinksSelector: PropTypes.Requireable<string>;
-    };
     displayName: string;
 };

package/types/tools/codegen/extract-components.d.ts

@@ -0,0 +1,10 @@
+import { SitecoreConfig } from '@sitecore-content-sdk/core/config';
+export type ExtractComponentsConfig = {
+    scConfig: SitecoreConfig;
+    componentMapPath?: string;
+};
+/**
+ * Extracts components from the app folder and sends them to XMCloud.
+ * @param {ExtractComponentsConfig} args - Config for components extraction
+ */
+export declare const extractComponents: (args: ExtractComponentsConfig) => () => Promise<void>;

package/types/tools/codegen/utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Description properties for the files sent to the mesh endpoint
+ */
+export type ExtractedFile = {
+    name: string;
+    path: string;
+    type: ExtractedFileType;
+};
+/**
+ * Type of file to be sent to the mesh endpoint
+ */
+export declare enum ExtractedFileType {
+    Component = "component",
+    Json = "json",
+    Package = "package.json"
+}
+/**
+ * Validates consent for code extraction procedures
+ * @returns {boolean} - true if consent is given, false otherwise
+ */
+export declare const validateConsent: () => boolean;
+/**
+ * Validates if the current operation is done in Vercel, Netlify or XMCloud
+ * deploy context
+ * @returns {boolean} - true if in deploy context, false otherwise
+ */
+export declare const validateDeployContext: () => boolean;
+/**
+ * Parses the componentBuilder.ts file and returns a map of component names
+ * and their respective import strings
+ * @param {string} appPath path to the JSS app root
+ * @param {string} [componentMapPath] path to the app's component map file. Default: 'src/lib/componentMap.ts'
+ * @returns map of component names and their respective import strings
+ */
+export declare const resolveComponentImportFiles: (appPath: string, componentMapPath?: string) => Map<string, string>;
+export declare const sendCode: ({ file, token, edgeUrl, }: {
+    file: ExtractedFile;
+    token: string;
+    edgeUrl?: string;
+}) => Promise<void>;

package/types/tools/index.d.ts

@@ -1 +1,2 @@
 export { generateSites, GenerateSitesConfig, generateMetadata, ComponentFile, PackageDefinition, getComponentList, PluginDefinition, generatePlugins, ModuleType, } from '@sitecore-content-sdk/core/tools';
+export { extractComponents } from './codegen/extract-components';