Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/terotests/doremifa
Reactive DOM library based on template literals
https://github.com/terotests/doremifa
appengine dom engine javascript rendering template-literals ui
Last synced: 10 days ago
JSON representation
Reactive DOM library based on template literals
- Host: GitHub
- URL: https://github.com/terotests/doremifa
- Owner: terotests
- Created: 2018-05-27T11:10:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-06-14T22:30:41.000Z (over 6 years ago)
- Last Synced: 2025-01-16T16:07:15.069Z (21 days ago)
- Topics: appengine, dom, engine, javascript, rendering, template-literals, ui
- Language: JavaScript
- Size: 393 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Doremifa
Reactive view library based on tagged template literals. It is special compared to other similar libraries in that it implements it's own XHTML/HTML parser.
The main features are
- Reactive template literals where only changed parts are re-rendered
- Event handler support
- SVG support
- Has reactive global state, which can be used (not mandatory)
- Router baked in (or you can use your own)
A simple TypeScript example
```javascript
import * as Doremifa from 'doremifa'
const html = Doremifa.html;
const setState = Doremifa.setState
Doremifa.setState({
time:(new Date).toTimeString(),
})
Doremifa.mount(document.body, state => html`
Hello World! ${state.time}`)
setInterval( _ => { setState({time:(new Date).toTimeString()})},1000)
```
[Hello World in CodePen](https://codepen.io/tero_koodia/pen/RJKogo)
[Router Example in CodePen](https://codepen.io/tero_koodia/full/eKWvYJ/)
## Usage and Install
```
npm i doremifa
```
And then
```typescript
import { mount, router, getState, setState, html, drmfComponent, drmfTemplate } from 'doremifa';
// or
import * as Doremifa from './index';
```
## html -literal
To construct a Template you can write JavaScript template literal
```javascript
html`
${"Hello World"}`
```
## Doremifa.mount
Mount render function to some element
```javascript
Doremifa.mount(document.body, state => html`
Hello World!`)
```
## Functions
Any function which returns `drmfTemplate` can be used as a component
```javascript
function message(txt) {
return html`
${txt}`
}
const example = html`${message(txt)}`
```
## Objects
Objects which implement `render()` -function and inherit from `drmfComponent` can be used as part of templates.
```javascript
class Hello extends drmfComponent {
render() {
return html`
Hello World `
}
}
const obj = new Hello(); // create and re-use if needed
Doremifa.mount(document.body, state => html`${obj}`)
```
## Attributes can be set by value without quotes
```javascript
const style='color:blue;'
html`
`
```
## Events
Event handlers get two params:
- `e` the HTML event
- `tpl` the `drmfTemplate` -object which can old ID or list values
```javascript
html` {
// tpl holds the template object
}}>Click me!`
```
## References
References are collected from templates to two colletions:
- `ids` holds elements having "id" attribute set
- `list` holds elements having `list="something"` set
The are also available to event handlers.
```javascript
html`
{
alert(tpl.ids.name) // value of input
alert(tpl.list.divs.length) // 2
}}>Click me!
`
```
## Event after template is assigned
Sometimes you want to manipulate DOM after the template has been rendered
```javascript
html`
`.onReady( tpl => {
// tpl.ids
// tpl.list
})
```
## Custom Tags?
There are no custom tags, just functions or objects.
## State and rendering
The application has a global state which is accessed using
- `getState()`
- `setState({...})`
When state is updated, rendering is triggered and all parts of the application are processed. This should be extremely fast, since templates are cached and only changed parts are updated.
## Promises inside View?
No. Promises are not part of view tree. Just update state and view changes reactively.
## Doremifa.router
Build -in router router uses `window.location.hash` and acceptse links in format
```html
Link to page 1
Link to page 2
```
Then you can define router anywhere in templates like
```javascript
html`
${Doremifa.router({
page1 : (state) => html`page1`,
page2 : (state) => html`page2`,
})
`
```
The router component gets the `state` having following variables set
```
{
"page": "page2",
"params": {
param1 : value1,
param2 : value2
}
}
```
# Other Similar libraries
- hyperHTML
- lit-html
- YallaJS
# Tutorials on similar subjects
- https://www.twilio.com/blog/2018/05/building-a-chat-with-twilio-lit-html-parcel-and-typescript.html
- https://itnext.io/a-tiny-disastrous-ecmascript-change-fadc05c83e69
# License
MIT.