https://github.com/kodedninja/morfine
Pure, stateless wrapper around nanomorph
https://github.com/kodedninja/morfine
Last synced: 11 months ago
JSON representation
Pure, stateless wrapper around nanomorph
- Host: GitHub
- URL: https://github.com/kodedninja/morfine
- Owner: kodedninja
- Created: 2019-03-02T11:02:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-09T21:27:49.000Z (about 7 years ago)
- Last Synced: 2025-04-19T00:41:26.874Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# morfine
Pure, stateless wrapper around [nanomorph](https://github.com/choojs/nanomorph).
## Installation
```
npm i morfine
```
## Usage
```javascript
var morfine = require('morfine')
var html = require('nanohtml')
window.text = 'hello'
function render () {
return html`
`
}
var wrapper = morfine(render)
document.body.appendChild(wrapper.el)
// attach optional lifecycle methods
wrapper.beforerender = function (el) {
console.log(el, ' will be rendered')
}
wrapper.afterrender = function (el) {
console.log(el, ' was rerendered')
}
// attach the function to window for testing purposes
window.rerender = wrapper.rerender
```
## API
#### `wrapper = morfine(renderer[, beforerender, afterrender])`
Takes a `renderer` function that returns a `Node` (manually defined or from [`nanohtml`](https://github.com/choojs/nanohtml) for example). Optionally you can set the lifecycle methods here. You must do this if calling `afterrender` on the first render is needed. Returns a `wrapper` object.
#### `wrapper.el`
The `Node` itself. This is what you add to the `body`.
#### `wrapper.rerender()`
Calls the `renderer` again and morphs the DOM.
#### `wrapper.r()`
Alias for `wrapper.rerender()`
#### `wrapper.beforerender(el)`
Optional lifecycle method. Called after the new tree has been generated, but before the wrapper update. You can directly access and modify `el`.
#### `wrapper.afterrender(el)`
Optional lifecycle method. Called after the wrapper has been updated. You can directly access and modify `el`, the current element in the DOM.
Note: [`nanocomponent`](https://github.com/choojs/nanocomponent) uses the `afterupdate` name instead of `afterrender`, but in this case we always try to update, so let's stick to render.
## Why?
Similar to what I've tried to achieve in [`bik`](https://github.com/kodedninja/bik), using the power of `nanomorph` on the lowest level possible in a non-Choo environment. Plus lifecycle methods, because they might come handy.
## See Also
- [choojs/nanomorph](https://github.com/choojs/nanomorph)
- [choojs/nanocomponent](https://github.com/choojs/nanocomponent)
- [tornqvist/fun-component](https://github.com/tornqvist/fun-component)