The Component Factory
When a JSS app renders a page, it traverses the layout data JSON fetched from Sitecore to determine what components to render on the page. However, without a way to match Sitecore rendering names to JSS components, the page can not render.
The Component Factory is a mapping between Sitecore renderings and their JSS component implementations that JSS apps use to match renderings to components. Every JSS sample application has a Component Factory implementation - a JavaScript function that accepts a rendering name as a parameter and returns the associated JSS component.
The following is a simplified example of a Component Factory:
import * as ContentBlock from 'src/components/ContentBlock';
import * as AnotherComponent from 'src/components/AnotherComponent';
const components = new Map();
components.set('ContentBlock', ContentBlock);
components.set('AnotherComponent', AnotherComponent);
export function componentFactory(componentName: string) {
return components.get(componentName)?.default;
};Generating the Component Factory
For most JSS sample applications, the Component Factory is generated programmatically at build time by recursively inspecting the application's directory of components. The logic for generating the mapping in the Component Factory is defined in the scripts/generate-component-factory.[ts|js] file. You can customize this file to support different project structures, and it can work with flat or nested directory structures.
Programmatic generation of the Component Factory is not required, but it makes development easier by eliminating the need to register new components manually.
For JSS React Native applications, a sample Component Factory is defined in src/componentFactory.js. You must maintain the mapping manually.
When running the application on a local development server, the application watches for changes to the components directory and updates the Component Factory with new components automatically.
For JSS Angular applications, the Component Factory is generated at the path src/app/components/app-components.module.ts, when you run the application for the first time.
For JSS React and Next.js applications, the Component Factory is generated as a part of the ComponentBuilder implementation at the path src/temp/componentBuilder when you run the application for the first time. The default implementation is provided in the @sitecore-jss/sitecore-jss-react, @sitecore-jss/sitecore-jss-nextjs NPM packages. Generation and templates are in the @sitecore-jss/sitecore-jss-dev-tools/<react | nextjs> submodule.
For Vue.js applications, the Component Factory is generated at the path src/temp/componentFactory.js, when you run the application for the first time.
The Component Factory and granular components
Modern development practices recommend using granular components - where every component has a single clear responsibility.
Sitecore renderings are an authoring concept, while JSS components are a developer concept. In most cases, a Sitecore rendering and a JSS component represent the same thing, but you might prefer smaller, more contained components to represent the same data as a corresponding Sitecore rendering would.
For example, consider a rendering for displaying search results. For content authors, the entire search results area is a single user-interface element. For front-end developers, however, a search results display area is a composition of components. For example, there is a component for the search results container, a component for every result list item, and possibly components for different results sections. Because content authors do not need to manage multiple variations of search results, they would see no value in breaking up the rendering into smaller elements. Such an approach would complicate their work. But not doing so while creating the granular components in JSS results in components without matching Sitecore renderings.
In conclusion, the components mapped in the Component Factory must match the Sitecore rendering as the content author sees it. When you create granular components to build the search results component for the rendering, we recommend that you do not include those components in the Component Factory or use placeholders to work around the issue.
Instead, we recommend placing your granular components in a different directory than all other components. Assuming that in your JSS applications, the principal components directory is src/components, you could place your development-only components in directories such as src/helpers and src/containers.
Because the Component Factory only inspects the main directory for components, in this case, src/components, it will not attempt to map any of the components you include in src/helpers and src/containers to nonexistent Sitecore renderings.