hdom recipes

@thi.ng/hdom recipes

About

This page describes some re-usable @thi.ng/hdom components and patterns of working with such components in general. Some of these might be refactored and integrated into the @thi.ng/hdom-components package in the future.

Unless otherwise stated, all recipes are utilizing the base project structure & types defined by the create-hdom-app project generator. Please see detailed comments in the generated source code to learn more about the structure and role of the types used here.

In short, AppContext is an object automatically passed to all component functions embedded in an hdom tree. The project generator defines a minimal version as shown below, but it's free extensible by the user:

interface AppContext {
    bus: EventBus;
    ui: UIAttribs;
    views: AppViews;
}

AppViews serves as pre-declaration of derived views of certain values in the central app state atom. It too is freely editable. The views are actually defined in the generated src/config.ts file and instantiated automatically when the app starts.

interface AppViews extends Record<keyof AppViews, IView<any>> {
    route: IView<RouteMatch>;
    routeComponent: IView<any>;
    ...
}

Last but not least, UIAttribs is a pre-definition of UI styling attributes used to a) provide a single source of truth for styling info and b) ensures component functions refer to known style IDs. The structure of UIAttribs is completely free and users are not required to use this interface at all. create-hdom-app utilizes the Tachyons CSS library, since it's IMHO perfectly suited, but it's no hard requirement, just a recommendation.

A concrete implementation might look like:

interface UIAttribs {
   root: any;
   label: any;
   input: any;
   ...
}

const ui: UIAttribs = {
    root: { class: "w-100 vh-100 overflow-hidden flex" },
    label: { class: "w5" },
    input: { class: "w5 ttu bg-transparent" }
    ...
};

Recipes

Cancelable text input field