Functional Components

For all of our components we’re in the process of documenting their setup details.

• How does the component render?
  • CSR
  • SSG
  • SSR / Isomorph SSR
• Do we use TypeScript / output types?
• How does the component integrate with AEM?
• How is the component packaged?
  • AMD
  • IIFE
  • UMD
  • ESM
  • CJS
• How is the component state management?
  • React Context
  • Redux
  • Zustand
  • …
• Which testing framework is used to test the components?

Component	TS	Styles	State	Testing	Build	Module	Nexus	Render
UI Components	✅	CSS Modules Runtime injected	Context	Storybook Jest	Rollup (Vite Lib)	ESM	✅	CSR
DXP-Screens	✅	Styled Components	Redux	Jest RTL	Webpack (CRA)	CJS	❌	CSR
OR: Used/stock cars	✅	Styled Components	Redux	Jest RTL/Enzyme	Webpack (Custom)	AMD	❌	Custom (SSR -> CSR)
OR: Old new cars	✅	Styled Components	Redux	Jest RTL/Enzyme	Webpack (Custom)	AMD	❌	Custom (SSR -> CSR)
OR: Apheleia	✅	CSS Modules Styled Components	Redux	Jest RTL	Webpack (Custom)	AMD	❌	Custom (SSR -> CSR)
Trinity Components	✅	Styled Components (SASS)	Zustand	Jest	Webpack (@tmedxp/build)	ESM	❌	CSR
QT Components	❌	CSS Modules Runtime injected	Default	Jest	Webpack (Custom)	ESM	❌	CSR
Foundation Components	✅	Traditional SCSS (SASS)	Context	Jest	Webpack (@tmedxp/build)	ESM	✅	CSR
Kinto Components	✅	Traditional SCSS (SASS)	Context	Jest	Webpack (@tmedxp/build)	ESM	❌	CSR
Speedboat	✅	SCSS, PostCSS, UnoCSS, CobaltUI	Zustand	Storybook Vitest / RTL	Webpack (Next.js)	ESM	❌	Hybrid

Components

UI Components

The UI component were created in a separate repository to serve the development of the Aphelia Sales Campaign pages. The repository is packaged with Vite and published to Nexus.

dxp-aem installs this package as a dependency and uses the components in the AEM project. All components are client-side rendered and use CSS Modules for styling. The CSS styles are bundled per component with CSS modules and are injected into the head of the document at runtime.

OR components

These types of components are injected using custom logic from the newcars-aem and usedstock-cars AEM packages. The server will attempt to inject a SSR version, but will fallback to client side injection in case this takes too long. This means, a request to our React rendering server is always required. The source for this server can be found in this monorepo (all 3 apps): io-online-retailer.

Trinity components

For Trinity each components output a DTO from the Java side which is marshalled as JSon (ComponentJsonExporterModel.java) and added as a data-prop. We then have a reactRenderer.tsx file which keeps track of all the expected content upon which he should bootstrap a given React component with the marshalled JSON as a our component’s properties.

We are trying to keep a strong typing between our DTOs and or component properties types in TypeScript.

Foundation components

The Foundation project includes a custom reactRenderer.tsx that performs several key functions:

• Webpack Chunk Generation: For each defined component, a webpackChunk is generated through Webpack.
• Dynamic Component Rendering: The renderer identifies all elements on the page with the data-react-component attribute and lazy loads the corresponding webpackChunk defined in our React renderer.
• Passing Props: Each element also contains a data-react-props attribute, which is used to pass JSON data as properties to the React component. This JSON data is generated on the back-end via our ComponentJsonExporterModel.java

Example Usage

The following example demonstrates how our custom React renderer renders the evHorizontalHero component:

<div
  data-react-component="evHorizontalHero"
  data-react-props="${model.modelJsonString}"
></div>

Deployments

We deploy both our front-end and back-end code to Nexus after each UAT release. This process is automated through the aem-build workflow.

Kinto components

The Kinto project includes a custom reactRenderer.jsx that is essentially a copy of Foundation’s renderer :

• Webpack Chunk Generation: For each defined component, a webpackChunk is generated through Webpack.
• Dynamic Component Rendering: The renderer identifies all elements on the page with the data-react-component attribute and lazy loads the corresponding webpackChunk defined in our React renderer.
• Passing Props: Each element also contains a data-react-props attribute, which is used to pass JSON data as properties to the React component. This JSON data is generated on the back-end in each corresponding model.

Example Usage

See the example usage section under “Foundation Components”

Missing

• Portal
• Checkout
• Reservation