Elements

This is a microframework that tries to use the latest API's from HTML, Javascript and CSS to run web apps.

Using Custom elements and a few other
features, like dependency injection, change detection and lifecycle hooks.

Lifecycle hooks

Every custome element can implement one of the following hooks: OnInit, OnDestroy, onChanges, OnBeforeCheck

Change detection

Every instance has its own change detection context, but when a component changes something, the
change detection looks at all observed properties in that context and all children, starting from the root element.

This is to ensure that changes that affect the parent elements can also be checked.

> As an alternative, change detection (via Zone.js) can be used as well.

Examples

A minimalistic todo app:

``typescript
// app.component.ts
import { Component } from '@homebots/elements';

@Component({
tag: 'todo-app',
template:

add

,
})
export class TodoApp extends HTMLElement {
tasks = [];

addTask(title: string) {
return this.tasks.push({ done: false, title });
}
}
`

Then bootstrap the application:

`typescript
// index.ts
import { Bootstrap } from '@homebots/elements';
import './app.component.ts';

Bootstrap.createApplication();
`

Then finally put all together:

`html














`

Syntax

Most of the syntax is shamelessly copied from Angular and Alpine.js:

`html











click me















Lorem ipsum


`

Dependency Injection

`typescript
// injectable class
@Injectable()
export class UserService {}

@Injectable()
export class AppService {
// injected service
@Inject() userService: UserService;

// injected with symbol
@Inject(ChangeDetector) userService: ChangeDetector;
}
`

Dependencies

The Reflect API for Typescript metadata.

`html

``