Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
estrattonbailey committed Jun 4, 2019
1 parent 23938f2 commit e3a858b
Showing 1 changed file with 19 additions and 15 deletions.
34 changes: 19 additions & 15 deletions README.md
@@ -1,5 +1,5 @@
# picoapp
🐣 Tiny no-framework component toolkit. **800b gzipped.**
🐣 Tiny no-framework component toolkit. **900b gzipped.**

> tl;dr - this library automatically instantiates JavaScript modules on specific
> DOM elements in a website if they exist on the page. This is helpful for
Expand Down Expand Up @@ -91,10 +91,11 @@ ctx.emit('increment', state => {
```

Just like [evx](https://github.com/estrattonbailey/evx), `picoapp` supports
multi-subscribe and wildcard events as well:
multi-subscribe, wildcard, and property keyed events as well:
```javascript
ctx.on([ 'count', 'otherProp' ], state => {}) // fires on `count` & `someProp`
ctx.on([ 'count', 'otherProp' ], state => {}) // fires on `count` & `otherProp`
ctx.on('*', state => {}) // fires on all state updates
ctx.on('someProp', ({ someProp }) => {}) // fires on all someProp updates
```

If you need to update state, but don't need to fire an event, you can use
Expand All @@ -105,16 +106,6 @@ export default component((node, ctx) => {
})
```

Additionally, you can add arbitrary state to the global `state` object directly:
```javascript
app.hydrate({ count: 5 })
```

And then access it from anywhere:
```javascript
app.getState() // { count: 5 }
```

## Un-mounting
`picoapp` components are instantiated as soon as they're found in the DOM after
calling `mount()`. Sometimes you'll also need to *un-mount* a component, say to
Expand Down Expand Up @@ -147,7 +138,10 @@ And then, call `unmount()`. If the component no longer exists in the DOM, its
app.unmount()
```

`unmount()` is synchronous, so given a PJAX library like
Regardless of if you define an `unmount` handler, any event subscriptions you
made in your component will be destroyed.

`unmount()` is also synchronous, so given a PJAX library like
[operator](https://github.com/estrattonbailey/operator), you can do this *after*
every route transition:
```javascript
Expand All @@ -158,12 +152,22 @@ router.on('after', state => {
```

## Other Stuff
The `picoapp` instance also has access to the event bus:
The `picoapp` instance also has access to start and the event bus:
```javascript
app.emit('event', { data: 'global' })
app.on('event', state => {})
```

So you can add arbitrary state to the global `state` object directly:
```javascript
app.hydrate({ count: 5 })
```

And then access it from anywhere:
```javascript
app.getState() // { count: 5 }
```

If you need to add components – maybe asynchronously – you can use `add`:
```javascript
app.add({
Expand Down

0 comments on commit e3a858b

Please sign in to comment.