Skip to content

Commit e3a858b

Browse files
update docs
1 parent 23938f2 commit e3a858b

File tree

1 file changed

+19
-15
lines changed

1 file changed

+19
-15
lines changed

README.md

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# picoapp
2-
🐣 Tiny no-framework component toolkit. **800b gzipped.**
2+
🐣 Tiny no-framework component toolkit. **900b gzipped.**
33

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

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

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

108-
Additionally, you can add arbitrary state to the global `state` object directly:
109-
```javascript
110-
app.hydrate({ count: 5 })
111-
```
112-
113-
And then access it from anywhere:
114-
```javascript
115-
app.getState() // { count: 5 }
116-
```
117-
118109
## Un-mounting
119110
`picoapp` components are instantiated as soon as they're found in the DOM after
120111
calling `mount()`. Sometimes you'll also need to *un-mount* a component, say to
@@ -147,7 +138,10 @@ And then, call `unmount()`. If the component no longer exists in the DOM, its
147138
app.unmount()
148139
```
149140

150-
`unmount()` is synchronous, so given a PJAX library like
141+
Regardless of if you define an `unmount` handler, any event subscriptions you
142+
made in your component will be destroyed.
143+
144+
`unmount()` is also synchronous, so given a PJAX library like
151145
[operator](https://github.com/estrattonbailey/operator), you can do this *after*
152146
every route transition:
153147
```javascript
@@ -158,12 +152,22 @@ router.on('after', state => {
158152
```
159153

160154
## Other Stuff
161-
The `picoapp` instance also has access to the event bus:
155+
The `picoapp` instance also has access to start and the event bus:
162156
```javascript
163157
app.emit('event', { data: 'global' })
164158
app.on('event', state => {})
165159
```
166160

161+
So you can add arbitrary state to the global `state` object directly:
162+
```javascript
163+
app.hydrate({ count: 5 })
164+
```
165+
166+
And then access it from anywhere:
167+
```javascript
168+
app.getState() // { count: 5 }
169+
```
170+
167171
If you need to add components – maybe asynchronously – you can use `add`:
168172
```javascript
169173
app.add({

0 commit comments

Comments
 (0)