ng-librarian v0.0.12

ng-librarian

Micro-framework for component library abstraction.

• framework: standard component abstractions
• structure: domain-driven project folder structure
• databinds: simplified databinding directives
• extension: productive prototype extensions
• samplings: template-driven encapsulation
• lifecycle: unified lifecycle methods
• servicing: jwt, api and idb services

Structure

Isolated app screen components (branching) from lib control components (tranversal) for reuse purpose.

APP                             LIB
 ├ home/                         ├ classes/
 │  ├ home.component.html        │  ├ sample.ts
 │  ├ home.component.css         │  └ index.ts   
 │  ├ home.component.ts          ├ components/
 │  └ index.ts                   ├ directives/
 ├ app.component.html            ├ extensions/
 ├ app.component.css             ├ services/
 ├ app.component.ts              └ shareds/
 ├ app.service.ts                   ├ interfaces.ts
 └ app.module.ts                    ├ modules.ts
                                    └ index.ts  

Abstractions

Lean component abstractions useful facade resources in base ControlComponent and specialized abstraction as below.

                   [ControlComponent]  
                           ▲
          ┌────────────────┼─────────────────┐
   [InputComponent] [OutputComponent] [ThruputComponent]
      read-write        read-only       wrapper/parent

Example of component abstraction usage.

@Component({selector: 'field', template: '<b>It works!</b>' })
export class FieldComponent extends InputComponent  { ... }

Control components with its main attributes:

• InputComponent (name, fail, info, rows)
• OutputComponent (that, wrap, path)
• ThruputComponent (side, gaps)

The base control component contains guid, html, data, bind, size, click, style, class, hidden, disabled, on(stage), fix(attrs), render(...). Some those members is a facade for some usual resources:

• guid: autogenerated id attribute
• html: the current HTML element
• bind: formControlName equivalent
• data: ngModel/formGroup equivalent
• on(stage): facade for life-cycle hooks
• fix(attrs): fix boolean attributes as HTML flags
• render(...): easy page refresh with changeDetectorRef.detectChanges

Bindings

Simplified reactive form data binding directives with data and bind (it doesn't require to tranform data in FormGroup), and also works as template-driven.

<!-- simplified reactive form -->
<form [(data)]="car"> 
   <input bind="model">
</form>

<!-- template-driven -->
<input bind="car.model">

Stylings

All components inherits class and style hostbinding and is based in those CSS variables --default, --primary, --inverse, --success, --warning, --failure, also with some font variables as font-size, font-name, font-color. Default styles could be add in angular.json as './node_modules/ng-librarian/lib/index.css' in "styles".

...
"styles": ["./app/styles.css", "./node_modules/ng-librarian/lib/index.css"],
...

Extension

It has self-generate unique id for each HTML element of component (extensible by guidfy method) and prototype extensions helpers

Also some static class members helpers

// global label to render boolean values
Boolean.TRUE = "yes"
Boolean.FALSE = "no"

// validate any kind of data as Date
Date.isDate(value)

// some static object key helpers
Object.hasKeys(obj, 'field1', 'field2')
Object.hasTypeOf(obj, 'field1', 'string')
Object.hasInstanceOf(obj, 'field2', Date)

Servicing

Some common service already implemented.

• idb: IndexedDB async facade
• jwt: HTTP interceptor for Axios
• sso: authentication service
• app: alerts and loading state
• api: common API service

Lifecycle

Hooks are unified in 'on' method with Stage argument as aliases for Angular life-cycle hooks:

public override on(stage: Stage): void { if (stage == "gone") { /* Something in ngOnDestroy */ }  }

Samplings

Sample library for template-driven component library abstraction by concrete class extensions.

a) InputComponent (name, fail, info, rows)

b) OutputComponent (that, wrap, path)

c) ThruputComponent (side, gaps)