How to override components?
Longer, detailed and not finished version
Milan Herda, 07/2024
The Problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472320/Screenshot_2024-07-15_at_12-25-56_V%C5%A1echny_pr%C3%A1ce_v_cel%C3%A9_%C4%8CR_-_Prace.cz.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472324/Screenshot_2024-07-15_at_12-29-18_V%C5%A1echny_pr%C3%A1ce_v_cel%C3%A9_%C4%8CR_-_Prace.cz.png)
1. Design based on
the current portal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/7213736/easy.jpg)
2. Different components for the same functionality
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472343/Screenshot_2024-07-15_at_12-37-59_Jobs.cz___Aktu%C3%A1ln%C3%AD_nab%C3%ADdka_pr%C3%A1ce_od_zam%C4%9Bstnavatel%C5%AF_i_person%C3%A1ln%C3%ADch_agentur.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472350/Screenshot_2024-07-15_at_12-41-35_V%C5%A1echny_pr%C3%A1ce_v_cel%C3%A9_%C4%8CR_-_Prace.cz.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/4495067/question.png)
3. Different set of features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472343/Screenshot_2024-07-15_at_12-37-59_Jobs.cz___Aktu%C3%A1ln%C3%AD_nab%C3%ADdka_pr%C3%A1ce_od_zam%C4%9Bstnavatel%C5%AF_i_person%C3%A1ln%C3%ADch_agentur.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11472350/Screenshot_2024-07-15_at_12-41-35_V%C5%A1echny_pr%C3%A1ce_v_cel%C3%A9_%C4%8CR_-_Prace.cz.png)
![](https://media1.giphy.com/media/APqEbxBsVlkWSuFpth/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/10907112/TT-Let-Me-Overthink-This_4200x4200_SEPS-500x500.jpg)
Let's start with an obvious approach
'use client';
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import SearchForm from '@local/ui/search/SearchForm';
import useHostname from '@local/router/infrastructure/react/useHostname';
export default function Homepage() {
const hostname = useHostname();
let HeroBanner = DefaultHeroBanner;
if (hostname === 'prace.cz') {
HeroBanner = HeroBannerPrace;
} else if (hostname === 'jobs.cz') {
HeroBanner = HeroBannerJobs;
}
return (
<>
<HeroBanner />
<SearchForm />
<>
</>
);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/7213734/bad-code.jpg)
SOLID principles to the rescue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/7866453/solid-jesus.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/7751804/rewrite.jpg)
Single Responsibility Principle
'use client';
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import SearchForm from '@local/ui/search/SearchForm';
import useHostname from '@local/router/infrastructure/react/useHostname';
export default function Homepage() {
const hostname = useHostname();
let HeroBanner = DefaultHeroBanner;
if (hostname === 'prace.cz') {
HeroBanner = HeroBannerPrace;
} else if (hostname === 'jobs.cz') {
HeroBanner = HeroBannerJobs;
}
return (
<>
<HeroBanner />
<SearchForm />
<>
</>
);
}
Single Responsibility Principle
'use client';
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import SearchForm from '@local/ui/search/SearchForm';
import useHostname from '@local/router/infrastructure/react/useHostname';
export default function Homepage() {
const hostname = useHostname();
const HeroBanner = resolveHeroBanner(hostname)
return (
<>
<HeroBanner />
<SearchForm />
<>
</>
);
}
function resolveHeroBanner(hostname: string, componentName: string) {
let HeroBanner = DefaultHeroBanner;
if (hostname === 'prace.cz') {
HeroBanner = HeroBannerPrace;
} else if (hostname === 'jobs.cz') {
HeroBanner = HeroBannerJobs;
}
return HeroBanner;
}
Single Responsibility Principle
'use client';
import SearchForm from '@local/ui/search/SearchForm';
import useHostname from '@local/router/infrastructure/react/useHostname';
import resolveHeroBanner from '@local/resolver/application/resolveBanner';
export default function Homepage() {
const hostname = useHostname();
const HeroBanner = resolveHeroBanner(hostname)
return (
<>
<HeroBanner />
<SearchForm />
</>
);
}
Single Responsibility Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
export default function resolveHeroBanner(hostname: string) {
let HeroBanner = DefaultHeroBanner;
if (hostname === 'prace.cz') {
HeroBanner = HeroBannerPrace;
} else if (hostname === 'jobs.cz') {
HeroBanner = HeroBannerJobs;
}
return HeroBanner;
}
Open-Closed Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
export default function resolveHeroBanner(hostname: string) {
let HeroBanner = DefaultHeroBanner;
if (hostname === 'prace.cz') {
HeroBanner = HeroBannerPrace;
} else if (hostname === 'jobs.cz') {
HeroBanner = HeroBannerJobs;
}
return HeroBanner;
}
Open-Closed Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
const componentsRegistry = {
'prace.cz': HeroBannerPrace,
'jobs.cz': HeroBannerJobs,
};
export default function resolveHeroBanner(hostname: string) {
if (componentsRegistry[hostname]) {
return componentsRegistry[hostname];
}
return DefaultHeroBanner;
}
Open-Closed Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
const componentsRegistry = {
'default': DefaultHeroBanner,
'prace.cz': HeroBannerPrace,
'jobs.cz': HeroBannerJobs,
};
export default function resolveHeroBanner(hostname: string) {
if (componentsRegistry[hostname]) {
return componentsRegistry[hostname];
}
return componentsRegistry.default ?? () => null;
}
Open-Closed Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
const componentsRegistry = {
'default': DefaultHeroBanner,
'prace.cz': HeroBannerPrace,
'jobs.cz': HeroBannerJobs,
};
export default function resolveComponent(hostname: string, componentName: string) {
if (componentsRegistry[hostname]) {
return componentsRegistry[hostname];
}
return componentsRegistry.default ?? () => null;
}
Open-Closed Principle
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
const componentsRegistry = {
'default': {
HeroBanner: DefaultHeroBanner,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
};
export default function resolveComponent(hostname: string, componentName: string) {
if (componentsRegistry[hostname]?.[componentName]) {
return componentsRegistry[hostname][componentName];
}
return componentsRegistry.default[componentName] ?? () => null;
}
Open-Closed Principle
import componentsRegistry from '@local/configuration/componentsRegistry';
export default function resolveComponent(hostname: string, componentName: string) {
if (componentsRegistry[hostname]?.[componentName]) {
return componentsRegistry[hostname][componentName];
}
return componentsRegistry.default[componentName] ?? () => null;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/8437460/not-bad.jpg)
![](https://media1.giphy.com/media/3orif5bpMfTJ6Fgpzi/giphy.gif)
What about different non-component services per hostname?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/4495067/question.png)
Renaming to the rescue!
import componentsRegistry from '@local/configuration/componentsRegistry';
export default function resolveComponent(hostname: string, componentName: string) {
if (componentsRegistry[hostname]?.[componentName]) {
return componentsRegistry[hostname][componentName];
}
return componentsRegistry.default[componentName] ?? () => null;
}
import serviceRegistry from '@local/configuration/serviceRegistry';
export default function resolveService(hostname: string, serviceName: string) {
if (serviceRegistry[hostname]?.[serviceName]) {
return serviceRegistry[hostname][serviceName];
}
return serviceRegistry.default[serviceName] ?? () => null;
}
⬇️
ServiceRegistry
// src/configuration/serviceRegistry
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import JobOfferRepository from '@search/jobs/repository/JobOfferRepository';
const serviceRegistry = {
'default': {
HeroBanner: DefaultHeroBanner,
jobOfferRepository: JobOfferRepository,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
};
export default serviceRegistry;
What about different parameters per hostname?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/4495067/question.png)
ServiceRegistry => Registry
// src/configuration/serviceRegistry
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const serviceRegistry = {
'default': {
HeroBanner: DefaultHeroBanner,
jobOfferRepository: jobOfferRepository,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
};
export default serviceRegistry;
ServiceRegistry => Registry
// src/configuration/serviceRegistry
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const registry = {
services: {
'default': {
HeroBanner: DefaultHeroBanner,
jobOfferRepository: jobOfferRepository,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
}
};
export default registry;
ServiceRegistry => Registry
// src/configuration/registry
import HeroBannerPrace from '@prace/ui/HeroBanner';
import HeroBannerJobs from '@jobs/ui/Homepage/HeroBanner';
import DefaultHeroBanner from '@local/ui/hero/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const registry = {
services: {
'default': {
HeroBanner: DefaultHeroBanner,
jobOfferRepository: jobOfferRepository,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
},
parameters: {
'default': {
searchEngine: 'job-matching',
},
'prace.cz': {
searchEngine: 'algolia',
},
'jobs.cz': {
searchEngine: 'elastic'
},
},
};
export default registry;
ServiceRegistry => Registry
const registry = {
components: {
'default': {
HeroBanner: DefaultHeroBanner,
},
'prace.cz': {
HeroBanner: HeroBannerPrace,
},
'jobs.cz': {
HeroBanner: HeroBannerJobs,
},
},
services: {
'default': {
jobOfferRepository: jobOfferRepository,
},
},
parameters: {
'default': {
searchEngine: 'job-matching',
},
'prace.cz': {
searchEngine: 'algolia',
},
'jobs.cz': {
searchEngine: 'elastic'
},
},
};
export default registry;
"Resolvers"
import registry from '@local/configuration/registry';
export function resolveComponent(hostname: string, componentName: string) {
const { components } = registry;
if (components[hostname]?.[componentName]) {
return components[hostname][componentName];
}
return components.default?.[componentName] ?? () => null;
}
export function resolveService(hostname: string, serviceName: string) {
const { services } = registry;
if (services[hostname]?.[serviceName]) {
return services[hostname][serviceName];
}
return services.default?.[serviceName];
}
export function getParameter(hostname: string, name: string) {
const { parameters } = registry;
if (parameters[hostname]?.[name]) {
return parameters[hostname][name];
}
return parameters.default?.[name];
}
![](https://media0.giphy.com/media/kAUtsLfsEfqaJRwe80/giphy.gif)
![](https://media1.giphy.com/media/S2whkd4LyloiI/giphy.gif)
More issues to solve
- we do not have working types on resolved components
- configuration file imports all components and services for the whole website and every domain
- how do we create a configuration file?
- what if we include a React Server Component into the configuration and use it from client component?
- how to use it from other packages?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/10824974/TT-SHIRT-Houston-I-Have-So-Many-Problems_4200x4200_SEPS-500x500.jpg)
Working TypeScript types
Working types: Naive approach
- we will introduce a requirement on developers to provide named types/interfaces on each overridable component/service
- we use this type when obtaining service from the registry
Working types: Naive approach
export function resolveComponent<T>(hostname: string, componentName: string): T {
// ...
}
export function resolveService<T>(hostname: string, serviceName: string): T {
// ...
}
'use client';
import SearchForm from '@local/ui/search/SearchForm';
import useHostname from '@local/router/infrastructure/react/useHostname';
import { ComponentType } from 'react';
import type { HeroBannerProps } from '@local/ui/homepage/HeroBanner';
export default function Homepage() {
const hostname = useHostname();
const HeroBanner = resolveComponent<ComponentType<HeroBannerProps>>(hostname, 'HeroBanner')
return (
<>
<HeroBanner title="The Best Job Offers!" />
<SearchForm />
</>
);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/11475701/450567038_897009842453901_1059835885400312122_n.jpg)
Working types: 100% correct approach
- parse configuration
- extract types from services
- build a mapping of a service name to the correct type
![](https://media0.giphy.com/media/tIeCLkB8geYtW/giphy.gif)
We will have to generate types
in a build step
All components
& services are imported in configuration
Why is this a problem?
- client-side bundle will contain a code user will not need
- services for pages not visited
- even services for another websites
- bundle size will be too big
![](https://media1.giphy.com/media/xTiTnGeUsWOEwsGoG4/giphy.gif)
Split configuration to hostname-specific files
// /src/configuration/registry/prace
import HeroBanner from '@prace/ui/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const registry = {
components: {
HeroBanner: HeroBanner,
},
services: {
jobOfferRepository: jobOfferRepository,
},
parameters: {
searchEngine: 'algolia',
},
};
export default registry;
But what about resolvers?
// /src/configuration/resolver
export async function resolveComponent(hostname: string, componentName: string) {
const registryModule = await import(`./registry/${hostname}`);
const registry = registryModule.default;
const { components } = registry;
if (components?.[componentName]) {
return components[componentName];
}
return () => null;
}
We can dynamically import only the required one
- ✅ one deployed instance can serve multiple domains
But what about resolvers?
// /src/configuration/resolver
import registry from '@local/configuration/registry'
export function resolveComponent(componentName: string) {
const { components } = registry;
if (components?.[componentName]) {
return components[componentName];
}
return () => null;
}
Or we can build only one registry during the deployment
and it will be tied to the deployed hostname-instance
- ✅ simpler programming
- ❌ one deployed instance can serve only one domain
We will have to generate registers
in a build step
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/4495067/question.png)
The registry is still too large, can we ... maybe ... lazy load some components and services?
Lazy loading of services
// /src/configuration/registry/prace
import HeroBanner from '@prace/ui/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const registry = {
components: {
HeroBanner: HeroBanner,
SearchForm: '@local/ui/SearchForm',
},
services: {
jobOfferRepository: jobOfferRepository,
},
parameters: {
searchEngine: 'algolia',
},
};
export default registry;
Lazy loading of services
// /src/configuration/resolver
import { ComponentType } from 'react';
import dynamic from 'next/dynamic'
import registry from '@local/configuration/registry'
function DefaultSkeleton() {
return null;
//return <p>Loading...</p>;
}
export function resolveComponent(
componentName: string,
skeleton: ComponentType = DefaultSkeleton
) {
const { components } = registry;
if (components?.[componentName]) {
if (typeof components[componentName] === 'string') {
return dynamic(() => import(components[componentName]), {
loading: skeleton,
});
}
return components[componentName];
}
return () => null;
}
![](https://media2.giphy.com/media/999fcCCj45Bde/giphy.gif)
Lazy loading of services
return dynamic(() => import(components[componentName]), {
loading: skeleton,
});
We can not use only variables in dynamic imports.
We need to help bundler to know what files can be loaded
But they can be placed anywhere...
Lazy loading of services
return dynamic(
() => {
return import(`@local/ui/agreed-place-1/${componentName}`)
.catch(
() => import(`@search/ui/agreed-place-2/${componentName}`)
);
}, {
loading: skeleton,
}
);
We can either restrict programmers and tell them they need to place their components in a few agreed locations
Lazy loading of services
// /src/configuration/resolver
import { ComponentType } from 'react';
import dynamic from 'next/dynamic'
import registry from '@local/configuration/registry'
function DefaultSkeleton() {
return null;
//return <p>Loading...</p>;
}
export function resolveComponent(
componentName: string,
skeleton: ComponentType = DefaultSkeleton
) {
const { components } = registry;
if (componentName === 'SearchForm') {
return dynamic(() => import('@local/ui/SearchForm'), {
loading: skeleton,
});
}
return components[componentName] ?? () => null;
}
Or we will have to generate resolvers
in a build step
- types
- registers
- resolvers
What do we need to generate?
To be able to do so, we need some form of
"recipe"
configuration
"recipe"
Configuration in JSON files
// /src/configuration/registry/prace
import HeroBanner from '@prace/ui/HeroBanner';
import jobOfferRepository from '@search/jobs/repository/jobOfferRepository';
const registry = {
components: {
HeroBanner: HeroBanner,
SearchForm: '@local/ui/SearchForm',
},
services: {
jobOfferRepository: jobOfferRepository,
},
parameters: {
searchEngine: 'algolia',
},
};
export default registry;
Configuration in JSON files
// /src/config/prace/config.json
{
"components": {
"HeroBanner": "@prace/ui/HeroBanner",
"SearchForm": [
"@local/ui/SearchForm",
{
"isLazy": true
}
]
},
"services": {
"jobOfferRepository": "@search/jobs/repository/jobOfferRepository"
},
"parameters": {
"searchEngine": "algolia"
}
}
Configuration in JSON files
- Configuration for one domain can be combined from default configuration file and configuration file with overrides for that domain
- We can even split configuration into multiple files and have one folder for "default" configuration and another folder for "domain" configuration.
![](https://media2.giphy.com/media/lKzBuY9YGNn7q/giphy.gif)
React Server Components
can not be used inside of client components
React Server Components
- even their import in registry will break the build of our application
- this is actually a good thing
- we need to provide two registries
- one for server part
- with all services
- one for client part
- with only client-side services
- one for server part
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/4495067/question.png)
React Server Components
// /src/config/prace/config.json
{
"components": {
"HeroBanner": [
"@prace/ui/HeroBanner",
{
"isServerSide": true,
}
],
"SearchForm": [
"@local/ui/SearchForm",
{
"isLazy": true
}
]
},
"services": {
"jobOfferRepository": "@search/jobs/repository/jobOfferRepository"
},
"parameters": {
"searchEngine": "algolia"
}
}
React Server Components
// /src/config/prace/config.json
{
"components": {
"HeroBanner": [
"@prace/ui/HeroBanner",
{
"isServerSide": true,
}
],
"SearchForm": [
"@local/ui/SearchForm",
{
"isLazy": true
}
]
},
"services": {
"jobOfferRepository": "@search/jobs/repository/jobOfferRepository"
},
"parameters": {
"searchEngine": "algolia"
}
}
How to use resolver from application and also from libraries?
App with register & resolver
Library
App with register
Library
Resolver
Client components
// libs/search/src/ui/Listing/Item.tsx
'use client'
import { useContext } from 'react';
import ServiceContainerContext from '@container/infrastructure/react/ServiceContainerContext';
export default function Item() {
const { resolveComponent } = useContext(ServiceContainerContext);
const OfferLabel = resolveComponent('Listing/OfferLabel');
return (
<>
{/*...*/}
<OfferLabel />
{/*...*/}
</>
);
}
Server components
// libs/search/src/ui/Listing/Item.tsx
import container from '@container/container/infrastructure/server';
export default function Item() {
const OfferLabel = container.resolveComponent('Listing/OfferLabel');
return (
<>
{/*...*/}
<OfferLabel />
{/*...*/}
</>
);
}
Server components
// libs/container/src/container/infrastructure/server.ts
import 'server-only';
import createContainer from '@local/container/application/createContainer';
import DependencyInjectionContainer, {
DependencyInjectionContainerProxy
} from '@local/container/application/types';
export function createProxyContainer(): DependencyInjectionContainerProxy {
let wrappedContainer: DependencyInjectionContainer = createContainer();
return {
setService(serviceName, service) {
wrappedContainer.setService(serviceName, service);
return this;
},
getService(serviceName) {
return wrappedContainer.getService(serviceName);
},
wrapContainer(container) {
wrappedContainer = container;
return this;
},
};
}
const container: DependencyInjectionContainerProxy = createProxyContainer();
export default container;
![](https://s3.amazonaws.com/media-p.slid.es/uploads/689274/images/7343191/something-is-not-115b5c7b49.jpg)
Problem with this solution:
- proxy container is effectively a singleton
- singletons are problem on a JS server, because of it single-threaded nature
- while we are processing one request, another one can come and replace the real container inside a proxy
- since memory is shared, it will be replaced for all currently running requests
- it will be a disaster if application would serve multiple domains
How to override components: Detailed version
By Milan Herda
How to override components: Detailed version
- 41