Dynamic Model to Component Mapping for SPAs
The SPA Editor is the recommended solution for projects that require SPA framework based client-side rendering (e.g. React or Angular).
The ComponentMapping module is provided as an NPM package to the front-end project. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. This enables a dynamic resolution of components when parsing the JSON model of the application.
Each items present in the model contains a :type field that exposes an AEM resource type. When mounted, the front-end component can render itself using the fragment of model it has received from the underlying libraries.
Please refer to the SPA Blueprint document for more information about model parsing and the front-end component access to the model.
Also see the npm package: https://www.npmjs.com/package/@adobe/cq-spa-component-mapping
Model-Driven Single Page Application
Each component is extended with the capabilities of the ModelProvider . Initialization therefore take the following general form:
- Each model provider initializes itself and listens for changes made to the piece of model that corresponds to its inner component.
- Once stored, the page model manager returns the complete model of the app.
- This model is then passed to the front-end root Container component of the application.
- Pieces of the model are finally propagated to each individual child component.