Reactive HyperText Markup Language
npm install @rhtml/renderer#### Installation
``bash`
npm i @rhtml/renderer
#### Usage
`typescript
import { LitElement, Component, html } from '@rxdi/lit-html';
import '@rxdi/renderer';
interface State { counter: number; }
@Component({
selector: 'r-html-view',
template(this: RHtmlViewComponent) {
return html
state: { counter: 1 },
render: (res: State, setState: (res: State) => State) =>
html,
@click=${() => setState({ counter: res.counter + res.counter })}
>
Increment
${res.counter}
loading: () =>
html,
Loading...
error: () =>
html
Error
}}
>
;`
}
})
export class RHtmlViewComponent extends LitElement {}
##### Can be provided also observable value
`typescript
import { LitElement, Component, html } from '@rxdi/lit-html';
import { BehaviorSubject } from 'rxjs';
import '@rxdi/renderer';
interface State { counter: number; }
@Component({
selector: 'r-html-view',
template(this: RHtmlViewComponent) {
return html
state: new BehaviorSubject({ counter: 1 }),
render: (res: State, setState: (res: State) => State) =>
html,
@click=${() => setState({ counter: res.counter + res.counter })}
>
Increment
${res.counter}
loading: () =>
html,
Loading...
error: () =>
html
Error
}}
>
;``
}
})
export class RHtmlViewComponent extends LitElement {}