@quanticdigit/web-component

Angular component architecture: model, state, event and action handlers, plus theme and language.

Every screen is split into four roles, and BaseComponent builds them and wires them together. The separation holds from the first screen, because a structural convention adopted halfway through a project is not adopted at all.

Install

npm install @quanticdigit/web-component

Peer dependencies: @angular/common, @angular/core, @angular/router, devextreme, rxjs.

The four roles

| Role | Responsibility | |---|---| | model (BaseModelContext) | the data and nothing else: no decision about what to show | | state (BaseStateHandler) | derived state and role queries — whatever follows from something else lives here, so the model and the view never have to remember to update it | | events (BaseEventHandler) | the events. Receives model, state and actions, and has no access to the view | | actions (IActionHandler) | what the event handler may ask of the component, declared as an interface |

class PageModel extends BaseModelContext {}

class PageState extends BaseStateHandler<PageModel> {}

class PageEvents extends BaseEventHandler<PageModel, PageState, PageActions> {
  onSave(): void {
    this.actionHandler?.close();
  }
}

Before init the references are undefined, so using a role out of order is a visible error rather than a half-built object.

Roles and authorization

hasRole, hasAllRoles and hasSomeRoles delegate to an IRoleHandler you provide. Without one they allow everything, and that is deliberate: the menu is not authorization, every operation is authorized server-side, and hiding a control protects nothing. A restrictive default would only make every screen of a product that does not use roles go blind.

Language

LanguageHandler resolves texts through the DevExtreme message catalogue, under a message- or label- prefix. Prefixes are searched most recent first and fall back to the earlier ones, so a product can override a single entry of a shared catalogue without hiding the rest.

A missing key shows as <message-key> — a visible gap rather than an empty label.

The family

web-utils, web-model, web-services, web-component and web-errors are released together and always share the same version. Install them at the same version.

License

Commercial. See LICENSE.txt in the package.