How to override components?

Milan Herda, 07/2024

The Problem

1. Design based on

the current portal

2. Different components for the same functionality

3. Different set of features

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

SOLID principles to the rescue

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

Things left to solve

  • we want to be able resolve also services and parameters, not only components
  • TypeScript types
  • registry imports all components/services for all supported domains
    • we need registry to be domain-specific
    • support for lazy loading
    • split server components and client components
    • all of this will end with the requirement for some form of configuration file
  • resolver should be available also in other packages

a Service Container

My approach to the problems was to use

ServiceContainer

  • object encapsulating the registry of services (and parameters)
  • providing access methods to these services (getService, getParameter, getComponent etc...)
  • usable as a Dependency Injection Container (good pattern) or Service Locator (antipattern in most languages)

Implementation

To minimize the work of programmers:

  • they can add/edit service in a configuration file and
    • registers and containers for each domain will be generated automatically
    • server-side and client containers will be generated automatically
    • types will be generated automatically (yet TBD)

Configuration & Generation

Configuration

// apps/container-experiment/config/*

{
	"components": {
		"Demo/Banner": "@local/ui/Banner",
		"Demo/ServerComponent": [
			"@local/ui/server/ServerComponent",
			{
				"isServer": true
			}
		],
		"Demo/ClientComponent": [
			"@local/ui/client/ClientComponent",
			{
				"isLazy": true
			}
		]
	},
    "services": {},
    "parameters": {
        "searchEngine": "algolia",
        "isUserAccountAvailable": false,
    }
}

Generate container from configuration files

// apps/container-experiment/bin/generate-container.sh

#!/bin/bash

PREV_DIR=`pwd`

__DIR__=`dirname ${BASH_SOURCE[0]}`

LOCAL_ENV_FILE=$__DIR__/../.env.local

if [ -f $LOCAL_ENV_FILE ]; then
	source $LOCAL_ENV_FILE
fi

if [ -z "$DOMAIN" ]; then
	DOMAIN=default
fi

cd $__DIR__/..

echo "Generating containers for $DOMAIN"
yarn container-generator \
	--confDir ./config/$DOMAIN/ \
	--verbose \
	--serverFile=./src/container/serverContainer.ts \
	--clientFile=./src/container/clientContainer.ts

cd $PREV_DIR

Generate container from configuration files

// apps/container-experiment/package.json

{
	"scripts": {
		"dev": "yarn generate:container && next dev",
		"build": "yarn generate:container && next build",
		"generate:container": "bash bin/generate-container.sh"
	},
	"dependencies": {
		"@almacareer/cyborg.container": "workspace:^"
	}
}

TODO

  • composing of configuration files in a way where domain-specific files define only overrrides and everything else is taken from default

Generate container from configuration files

// libs/container/src/containerGenerator/index.ts

import commandLineArgs from 'command-line-args';
import chalk from 'chalk';
import { writeFile } from 'node:fs/promises';
import { generateClientContainerCode, generateServerContainerCode } from './generator/generateContainerCode';
import parseConfiguration from './parser/parseConfiguration';
import composeConfiguration from './composer/composeConfiguration';
import findConfigurationFiles from './composer/findConfigurationFiles';

const options = commandLineArgs([
	{ name: 'confDir', alias: 'c', type: String, defaultValue: './config' },
	{ name: 'serverFile', type: String, defaultValue: 'serverContainer.ts' },
	{ name: 'clientFile', type: String, defaultValue: 'clientContainer.ts' },
	{ name: 'localConfig', alias: 'l', type: String, defaultValue: './local.services.json' },
	{ name: 'verbose', alias: 'v', type: Boolean },
]);

const { confDir, serverFile, clientFile, localConfig } = options;

const files = await findConfigurationFiles(confDir, localConfig);

const configuration = composeConfiguration(files);

const parsedConfiguration = parseConfiguration(configuration.services);
const serverCode = generateServerContainerCode(parsedConfiguration);
const clientCode = generateClientContainerCode(parsedConfiguration);

await writeFile(serverFile, serverCode);
await writeFile(clientFile, clientCode);

Container

Container: types

// libs/container/src/container/application/types.ts

export interface MutableServiceContainer {
	setService: <T>(serviceName: string, service: T) => MutableServiceContainer;
}

export interface ServiceLocator {
	getService: <T>(serviceName: string) => T | undefined;
}

interface DependencyInjectionContainer extends ServiceLocator, MutableServiceContainer {}

export interface DependencyInjectionContainerProxy extends DependencyInjectionContainer {
	wrapContainer: (container: DependencyInjectionContainer) => DependencyInjectionContainerProxy;
}

export default DependencyInjectionContainer;

✏️ TODO:

set/getComponent & set/getParameter methods

Container: context

// libs/container/src/container/infrastructure/react/client/ServiceContainerContext.tsx

import React, { createContext, PropsWithChildren, useContext } from 'react';
import createContainer from '@local/container/application/createContainer';
import DependencyInjectionContainer from '@local/container/application/types';

interface ServiceContainerContextType {
	container: DependencyInjectionContainer;
}

const defaultValue: ServiceContainerContextType = {
	container: createContainer(),
};

const ServiceContainerContext = createContext(defaultValue);

export function ServiceContainerProvider({
	container,
	children,
}: PropsWithChildren<{ container: DependencyInjectionContainer }>) {
	return (
        <ServiceContainerContext.Provider value={{ container }}>
            {children}
        </ServiceContainerContext.Provider>
    );
}

export default ServiceContainerContext;

Container: proxy

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;

Why do we need proxy?

App with container

Library

App with real container

Library

Container(proxy)

Generated Server Container

// apps/container-experiment/src/container/serverContainer.ts

import 'server-only';
import DependencyInjectionContainer from '@almacareer/cyborg.container/container/application/types';
import containerProxy from '@almacareer/cyborg.container/container/infrastructure/react/server';

export function createContainer(): DependencyInjectionContainer {
    // ...
}

const container = containerProxy.wrapContainer(createContainer());

export default container;

Generated Client Container

import DependencyInjectionContainer from '@almacareer/cyborg.container/container/application/types';
import DemoBannerc331b7bc7ac84527bf8f4f9d2ae1d20e from '@local/ui/Banner';

export function createContainer(): DependencyInjectionContainer {
	const services: Record<string, any> = {
		'Demo/Banner': DemoBannerc331b7bc7ac84527bf8f4f9d2ae1d20e,
	};

	const lazyLoadedServices: Record<string, boolean> = {};

	const container: DependencyInjectionContainer = {
		setService(serviceName, service) {
			services[serviceName] = service;

			return this;
		},
		getService(serviceName) {
			switch (serviceName) {
                // ...

				default:
					return services[serviceName];
			}
		},
	};

	return container;
}

const container = createContainer();

export default container;

Generated Client Container

import DependencyInjectionContainer from '@almacareer/cyborg.container/container/application/types';
import dynamic from 'next/dynamic';
import DemoBannerc331b7bc7ac84527bf8f4f9d2ae1d20e from '@local/ui/Banner';

export function createContainer(): DependencyInjectionContainer {
	//...
	const lazyLoadedServices: Record<string, boolean> = {};

	const container: DependencyInjectionContainer = {
		setService(serviceName, service) { /*...*/ },
		getService(serviceName) {
			switch (serviceName) {
				case 'Demo/ClientComponent':
					if (!lazyLoadedServices[serviceName]) {
						const service = dynamic(() => import('@local/ui/client/ClientComponent'));
						services[serviceName] = service;
						lazyLoadedServices[serviceName] = true;
					}

					return services[serviceName];

				default:
					return services[serviceName];
			}
		},
	};

	return container;
}

const container = createContainer();

export default container;

layout.tsx

// apps/container-experiment/src/app/layout.tsx

export default function RootLayout({
	children,
}: Readonly<{
	children: React.ReactNode;
}>) {
	return (
		<html lang="en">
			<head>
				<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" />
			</head>
			<body>
				<ContainerProvider>
					<Navigation />
					<main className="px-2 pt-2">{children}</main>
				</ContainerProvider>
			</body>
		</html>
	);
}

ContainerProvider.tsx

// apps/container-experiment/src/container/ui/ContainerProvider.tsx

'use client';

import { PropsWithChildren } from 'react';
import {
    ServiceContainerProvider
} from '@almacareer/cyborg.container/container/infrastructure/react/client/ServiceContainerContext';
import container from '@local/container/clientContainer';

export default function ContainerProvider({ children }: PropsWithChildren) {
	return (
        <ServiceContainerProvider container={container}>
			{children}
		</ServiceContainerProvider>
	);
}

Usage

From application, server-side

// apps/container-experiment/src/../SomeComponent.tsx

import container from '@local/container/serverContainer';
import { ComponentType } from 'react';

export default function SomeComponent() {
	const ServerComponent = container.getService<ComponentType>('Demo/ServerComponent');
	const ClientComponent = container.getService<ComponentType>('Demo/ClientComponent');

	return (
		<>
			<div>
				<div>
					{ServerComponent ? <ServerComponent /> : null}
				</div>
				<div>
					{ClientComponent ? <ClientComponent /> : null}
				</div>
			</div>
		</>
	);
}

From library, server-side

// libs/search/src/ui/List.tsx

import React, { ComponentType } from 'react';
import container from '@almacareer/cyborg.container/container/infrastructure/react/server';
import Item from './Item';

function NullComponent() {
	return null;
}

export default function List() {
	const items = ['Programmer', 'Product Manager', 'Delivery Manager', 'CEO', 'UX designer'];

	const HotOffers = container.getService<ComponentType>('Search/HotOffers') ?? NullComponent;

	return (
		<div>
			<HotOffers />
			<div className="message is-info">
				<div className="message-body">
					This list comes from package <code>@almacareer/cyborg.search</code> and it is server component.
				</div>
			</div>
			{items.map((item) => {
				return <Item key={`item-${item}`} title={item} />;
			})}
		</div>
	);
}

From application, client-side

// apps/container-experiment/src/../SomeComponent.tsx

'use client';

import { ComponentType } from 'react';
import { 
  useService
} from '@almacareer/cyborg.container/container/infrastructure/react/client/ServiceContainerContext';


export default function ClientPage() {
	const ClientComponent = useService<ComponentType>('Demo/ClientComponent');

	return (
		<>
			<div>
				{ClientComponent ? <ClientComponent /> : null}
			</div>
		</>
	);
}

From library, client-side

// libs/search/src/ui/HotOffers.tsx

'use client';

import React from 'react';
import Item from './Item';
import { 
    useService
} from '@almacareer/cyborg.container/container/infrastructure/react/client/ServiceContainerContext';

export default function HotOffers() {
	const items = ['Hot offer 1', 'Hot offer 2'];
	const ClientComponent = useService<ComponentType>('Demo/ClientComponent') ?? NullComponent;

	return (
		<div>
			<div className="message is-info">
				<div className="message-body">
					This Hot Offers list comes from package <code>@almacareer/cyborg.search</code>
					and it is client component
				</div>
			</div>
			{items.map((item) => {
				return <Item key={`item-${item}`} title={item} bgVariant="danger" />;
			})}
            <ClientComponent />
		</div>
	);
}
From Import Usage
application, server @local/serverContainer container.getService
library, server @container/server container.getService
application, server @container/Context useService
library, client @container/Context useService

Summary

Implications

  • programmers must know their server/client context
  • server-only services must be tagged in configuration
  • configuration is explicit
    • in order to override a component, we need to  change the configuration (json files)
    • while it is easy to make a typo, it is hard to accidentally override something we are not aware of
  • generated container can tell programmers, what component are being used

TODOs:

  • distinct between services, components and parameters in a registry (custom methods)
  • always use "default" services folder and domain-specific folders will provide only overrides
  • find a way to serve multiple domains on one running instance
    • generate a container for each one
    • add a switching layer
  • generate types from configuration

Questions?

How to override components

By Milan Herda

How to override components

  • 74

More from Milan Herda