domimick

domimick

Quick and dirty view library based on rxjs. Syntax inspired by angular2.

The simple example/demo completely renders in under 200ms. DOM updates are done asyncronously and only updates the nodes with the changes.

// app.ts
import { Component } from 'domimick'

@Component({
  selector: 'app-root',
  template: `<div>{{ this.name }}</div>`,
})
export class App  {
  name = `app-${Math.random()}`
}

// index.ts
import { bootstrap } from 'domimick'

import { App } from './app'

document.addEventListener(document, 'DOMContentLoaded', () => {
  bootstrap(App)
})

Adding new components will just require a simple import into index.ts

// app/myComponent.ts
import { Component } from 'domimick'

@Component({
  selector: 'my-component',
  template: `<div>{{ this.name }}</div>`,
})
export class MyComponent  {
  name = `app-${Math.random()}`
}

// index.ts
...
import './app/myComponent'
...

No need to inject or provide it. The component is automatically registered by the library. It will auto-mount when ever it encounters a my-component custom element.

TODO

• Component actions
• Component inputs
• Form elements
• Complex template expressions
• Seriously clean up the code
• Remove dependency on experimental decorators
• Decouple from the DOM
• Server side rendering
• Debounce and batch dom updates