https://github.com/kodedninja/nanoparts
Emit render for specific parts of the DOM
https://github.com/kodedninja/nanoparts
choo
Last synced: 12 months ago
JSON representation
Emit render for specific parts of the DOM
- Host: GitHub
- URL: https://github.com/kodedninja/nanoparts
- Owner: kodedninja
- Created: 2019-05-20T22:22:51.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-20T22:24:27.000Z (about 7 years ago)
- Last Synced: 2025-05-29T19:34:18.058Z (about 1 year ago)
- Topics: choo
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# nanoparts
Emit render for specific parts of the DOM.
Gives you more control over what to re-render on `emit('render')` with `emit('renderPart', 'somePart')`, so the update can be done faster.
Basically, it just connects `emit('renderPart', id)` to `state.cache(Nanopart, id)`, giving a quick way to use simple [`Nanocomponents`](https://github.com/choojs/nanocomponent). _It lives somewhere between a render function and a stateful component._
## Installation
```
npm i nanoparts
```
## Usage
```javascript
var choo = require('choo')
var html = require('choo/html')
var nanoparts = require('nanoparts')
var app = choo()
app.use(nanoparts())
app.route('*', function (state, emit) {
return html`
${state.nanopart('header', () => html`
header ${state.count}
`)}
body ${state.count}
`
})
```
Then later call `emitter.emit(state.events.RENDER_PART, 'header')` to re-render only the header.
## API
#### `nanoparts()`
Initializes the store and applies events. Adds the `nanopart` function to the `state`.
#### `state.nanopart(id, renderer, opts)`
Renders and caches a new part with `id` and returns `renderer(state, emit)`. Pass `shouldUpdate: false` in the options to don't update the part on normal DOM updates.
#### `emitter.emit('renderPart', id)`
Triggers the re-render of part `id`.