@sitecore-jss/sitecore-jss-nextjs 21.2.0-canary.9 → 21.3.0-canary.2

package/dist/cjs/ComponentBuilder.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentBuilder = void 0;
+/**
+ * Nextjs implementation of component builder class for building components based on the configuration.
+ */
+class ComponentBuilder {
+    constructor(config) {
+        this.config = config;
+        /**
+         * SXA uses custom default export name
+         */
+        this.DEFAULT_EXPORT_NAME = 'Default';
+        this.components = new Map([...config.components]);
+    }
+    /**
+     * 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() {
+        return (componentName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if module should be imported dynamically
+            if (component.module) {
+                return component.module();
+            }
+            return component;
+        };
+    }
+    /**
+     * 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 } = {}) {
+        return (componentName, exportName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if component should be imported dynamically
+            if (component.element) {
+                // Editing mode doesn't work well with dynamic components in nextjs: dynamic components are not displayed without refresh after a rendering is added.
+                // This happens beacuse Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
+                // So we use require() to obtain dynamic components in editing mode while preserving dynamic logic for non-editing scenarios
+                // As we need to be able to seamlessly work with dynamic components in both editing and normal modes, different componentFactory functions will be passed to app
+                return component.element(isEditing);
+            }
+            if (exportName && exportName !== this.DEFAULT_EXPORT_NAME) {
+                return component[exportName];
+            }
+            return component.Default || component.default || null;
+        };
+    }
+}
+exports.ComponentBuilder = ComponentBuilder;

package/dist/cjs/components/RichText.js

@@ -44,7 +44,7 @@ const router_1 = require("next/router");
 const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 const prefetched = {};
 const RichText = (props) => {
-    const { internalLinksSelector = 'a[href^="/"]' } = props, rest = __rest(props, ["internalLinksSelector"]);
+    const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks"]);
     const hasText = props.field && props.field.value;
     const isEditing = props.editable && props.field && props.field.editable;
     const router = (0, router_1.useRouter)();
@@ -54,7 +54,7 @@ const RichText = (props) => {
         if (hasText && !isEditing) {
             initializeLinks();
         }
-    }, []);
+    }, [hasText]);
     const routeHandler = (ev) => {
         if (!ev.target)
             return;
@@ -69,13 +69,13 @@ const RichText = (props) => {
         if (!internalLinks || !internalLinks.length)
             return;
         internalLinks.forEach((link) => {
-            if (link.target !== '_blank') {
-                if (!prefetched[link.pathname]) {
-                    router.prefetch(link.pathname, undefined, { locale: false });
-                    prefetched[link.pathname] = true;
-                }
-                link.addEventListener('click', routeHandler, false);
+            if (link.target === '_blank')
+                return;
+            if (prefetchLinks && !prefetched[link.pathname]) {
+                router.prefetch(link.pathname, undefined, { locale: false });
+                prefetched[link.pathname] = true;
             }
+            link.addEventListener('click', routeHandler, false);
         });
     };
     return react_1.default.createElement(sitecore_jss_react_1.RichText, Object.assign({ ref: richTextRef }, rest));

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Image = exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.PosResolver = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.tryParseEnvValue = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = void 0;
+exports.ComponentBuilder = exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.PosResolver = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.tryParseEnvValue = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
+exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "AxiosDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.AxiosDataFetcher; } });
@@ -82,6 +82,8 @@ var EditingComponentPlaceholder_1 = require("./components/EditingComponentPlaceh
 Object.defineProperty(exports, "EditingComponentPlaceholder", { enumerable: true, get: function () { return EditingComponentPlaceholder_1.EditingComponentPlaceholder; } });
 var NextImage_1 = require("./components/NextImage");
 Object.defineProperty(exports, "NextImage", { enumerable: true, get: function () { return NextImage_1.NextImage; } });
+var ComponentBuilder_1 = require("./ComponentBuilder");
+Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });
 var sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return sitecore_jss_react_1.Image; } });
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return sitecore_jss_react_1.Text; } });

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

@@ -23,9 +23,9 @@ 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);
@@ -39,9 +39,9 @@ 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);

package/dist/esm/ComponentBuilder.js

@@ -0,0 +1,57 @@
+/**
+ * Nextjs implementation of component builder class for building components based on the configuration.
+ */
+export class ComponentBuilder {
+    constructor(config) {
+        this.config = config;
+        /**
+         * SXA uses custom default export name
+         */
+        this.DEFAULT_EXPORT_NAME = 'Default';
+        this.components = new Map([...config.components]);
+    }
+    /**
+     * 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() {
+        return (componentName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if module should be imported dynamically
+            if (component.module) {
+                return component.module();
+            }
+            return component;
+        };
+    }
+    /**
+     * 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 } = {}) {
+        return (componentName, exportName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if component should be imported dynamically
+            if (component.element) {
+                // Editing mode doesn't work well with dynamic components in nextjs: dynamic components are not displayed without refresh after a rendering is added.
+                // This happens beacuse Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
+                // So we use require() to obtain dynamic components in editing mode while preserving dynamic logic for non-editing scenarios
+                // As we need to be able to seamlessly work with dynamic components in both editing and normal modes, different componentFactory functions will be passed to app
+                return component.element(isEditing);
+            }
+            if (exportName && exportName !== this.DEFAULT_EXPORT_NAME) {
+                return component[exportName];
+            }
+            return component.Default || component.default || null;
+        };
+    }
+}

package/dist/esm/components/RichText.js

@@ -15,7 +15,7 @@ import { useRouter } from 'next/router';
 import { RichText as ReactRichText, RichTextPropTypes, } from '@sitecore-jss/sitecore-jss-react';
 const prefetched = {};
 export const RichText = (props) => {
-    const { internalLinksSelector = 'a[href^="/"]' } = props, rest = __rest(props, ["internalLinksSelector"]);
+    const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks"]);
     const hasText = props.field && props.field.value;
     const isEditing = props.editable && props.field && props.field.editable;
     const router = useRouter();
@@ -25,7 +25,7 @@ export const RichText = (props) => {
         if (hasText && !isEditing) {
             initializeLinks();
         }
-    }, []);
+    }, [hasText]);
     const routeHandler = (ev) => {
         if (!ev.target)
             return;
@@ -40,13 +40,13 @@ export const RichText = (props) => {
         if (!internalLinks || !internalLinks.length)
             return;
         internalLinks.forEach((link) => {
-            if (link.target !== '_blank') {
-                if (!prefetched[link.pathname]) {
-                    router.prefetch(link.pathname, undefined, { locale: false });
-                    prefetched[link.pathname] = true;
-                }
-                link.addEventListener('click', routeHandler, false);
+            if (link.target === '_blank')
+                return;
+            if (prefetchLinks && !prefetched[link.pathname]) {
+                router.prefetch(link.pathname, undefined, { locale: false });
+                prefetched[link.pathname] = true;
             }
+            link.addEventListener('click', routeHandler, false);
         });
     };
     return React.createElement(ReactRichText, Object.assign({ ref: richTextRef }, rest));

package/dist/esm/index.js

@@ -31,4 +31,5 @@ export { RichText } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
 export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
+export { ComponentBuilder } from './ComponentBuilder';
 export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, File, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, } from '@sitecore-jss/sitecore-jss-react';

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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "21.2.0-canary.9",
+  "version": "21.3.0-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -70,9 +70,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.2.0-canary.9",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.2.0-canary.9",
-    "@sitecore-jss/sitecore-jss-react": "^21.2.0-canary.9",
+    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.2",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.3.0-canary.2",
+    "@sitecore-jss/sitecore-jss-react": "^21.3.0-canary.2",
     "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
@@ -80,7 +80,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "d4ac1db367d5ce2060cd22d543c38019b1d230bb",
+  "gitHead": "a498d1b8b6bab066a58907a2a01a554b9d20bd42",
   "files": [
     "dist",
     "types",

package/types/ComponentBuilder.d.ts

@@ -0,0 +1,60 @@
+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;
+/**
+ * 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/RichText.d.ts

@@ -6,6 +6,12 @@ export type RichTextProps = ReactRichTextProps & {
      * @default 'a[href^="/"]'
      */
     internalLinksSelector?: string;
+    /**
+     * Controls the prefetch of internal links. This can be beneficial if you have RichText fields
+     * with large numbers of internal links in them.
+     * @default true
+     */
+    prefetchLinks?: boolean;
 };
 export declare const RichText: {
     (props: RichTextProps): JSX.Element;

package/types/index.d.ts

@@ -11,7 +11,7 @@ export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, GraphQL
 export { personalizeLayout, getPersonalizedRewrite, getPersonalizedRewriteData, normalizePersonalizedRewrite, CdpHelper, PosResolver, } from '@sitecore-jss/sitecore-jss/personalize';
 export { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss';
 export { ComponentPropsCollection, GetStaticComponentProps, GetServerSideComponentProps, } from './sharedTypes/component-props';
-export { ComponentModule } from './sharedTypes/component-module';
+export { ModuleFactory, Module } from './sharedTypes/module-factory';
 export { ComponentPropsService } from './services/component-props-service';
 export { DisconnectedSitemapService } from './services/disconnected-sitemap-service';
 export { GraphQLSitemapService, GraphQLSitemapServiceConfig, } from './services/graphql-sitemap-service';
@@ -24,4 +24,5 @@ export { RichText, RichTextProps } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
 export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
+export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
 export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, ComponentConsumerProps, WithSitecoreContextOptions, WithSitecoreContextProps, } from '@sitecore-jss/sitecore-jss-react';

package/types/services/component-props-service.d.ts

@@ -1,11 +1,11 @@
 import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
 import { LayoutServiceData, ComponentRendering, PlaceholdersData } from '@sitecore-jss/sitecore-jss/layout';
 import { ComponentPropsCollection, ComponentPropsFetchFunction } from '../sharedTypes/component-props';
-import { ComponentModule } from '../sharedTypes/component-module';
+import { ModuleFactory } from '../sharedTypes/module-factory';
 export type FetchComponentPropsArguments<NextContext> = {
     layoutData: LayoutServiceData;
     context: NextContext;
-    componentModule: ComponentModule;
+    moduleFactory: ModuleFactory;
 };
 export type ComponentPropsRequest<NextContext> = {
     fetch: ComponentPropsFetchFunction<NextContext>;

package/types/sharedTypes/module-factory.d.ts

@@ -0,0 +1,32 @@
+import { ComponentType } from 'react';
+import { GetServerSideComponentProps, GetStaticComponentProps } from './component-props';
+/**
+ * Represents a module (file)
+ */
+export type Module = {
+    /**
+     * Default SXA export
+     */
+    Default?: ComponentType;
+    /**
+     * Default Next.js export
+     */
+    default?: ComponentType;
+    /**
+     * function for component level data fetching in SSR mode
+     */
+    getServerSideProps?: GetServerSideComponentProps;
+    /**
+     * function for component level data fetching in SSG mode
+     */
+    getStaticProps?: GetStaticComponentProps;
+} & {
+    /**
+     * Custom exports
+     */
+    [key: string]: ComponentType;
+};
+/**
+ * Represents a module factory
+ */
+export type ModuleFactory = (componentName: string) => Module | Promise<Module> | null;

package/types/sharedTypes/component-module.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { GetServerSideComponentProps, GetStaticComponentProps } from './component-props';
-export type Module = {
-    default: React.Component;
-    getServerSideProps?: GetServerSideComponentProps;
-    getStaticProps?: GetStaticComponentProps;
-};
-/**
- * @returns `undefined` module not found
- * @returns `Module` regular module
- * @returns `Promise<Module>` when module should be lazy loaded
- */
-export type ComponentModule = (componentName: string) => Module | Promise<Module> | undefined;