Compose function

type DisplayConstructor = Constructor<Display>

interface ComposeOptions<T extends DisplayConstructor> {
  display: T
  layouts?: (LayoutConstructor & {type: string})[]
  scriptName: string

export function Compose<TBase extends DisplayConstructor>(
		options: ComposeOptions<TBase>
): TBase


The compose function is a fundamental part of the framework architecture. It leverages a mixin pattern to merge one display with an array of one or more layouts. A scriptName is also required as an argument.

To create an Unless component, classes need to extend from this mixin.


import {Compose} from '@unless/component-library.utils.compose'


displayDisplayContructorThe constructor for the display
layouts(LayoutConstructor & {type: string})[]An array of constructors for the layouts. If one or fewer layouts are provided, the component will render as a single-step component. Otherwise, it will render as a multistep.
scriptNamestringThis must be unique and is used by the Unless script to launch the component. By convention, we use [Name of Display][Name of first layout] as such: ‘OverlayOneColumn’.


This mixin provides a class constructor that combines the display and layouts. Due to TypeScript's limitations, it will be returned as a typeof Display with the display being the constructor that was provided. While this isn't technically accurate because it will actually be a class derived from that display, it will behave in much the same way.

What’s Next