1
1
# picoapp
2
- 🐣 Tiny no-framework component toolkit. ** 800b gzipped.**
2
+ 🐣 Tiny no-framework component toolkit. ** 900b gzipped.**
3
3
4
4
> tl;dr - this library automatically instantiates JavaScript modules on specific
5
5
> DOM elements in a website if they exist on the page. This is helpful for
@@ -91,10 +91,11 @@ ctx.emit('increment', state => {
91
91
```
92
92
93
93
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:
95
95
``` javascript
96
- ctx .on ([ ' count' , ' otherProp' ], state => {}) // fires on `count` & `someProp `
96
+ ctx .on ([ ' count' , ' otherProp' ], state => {}) // fires on `count` & `otherProp `
97
97
ctx .on (' *' , state => {}) // fires on all state updates
98
+ ctx .on (' someProp' , ({ someProp }) => {}) // fires on all someProp updates
98
99
```
99
100
100
101
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) => {
105
106
})
106
107
```
107
108
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
-
118
109
## Un-mounting
119
110
` picoapp ` components are instantiated as soon as they're found in the DOM after
120
111
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
147
138
app .unmount ()
148
139
```
149
140
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
151
145
[ operator] ( https://github.com/estrattonbailey/operator ) , you can do this * after*
152
146
every route transition:
153
147
``` javascript
@@ -158,12 +152,22 @@ router.on('after', state => {
158
152
```
159
153
160
154
## 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:
162
156
``` javascript
163
157
app .emit (' event' , { data: ' global' })
164
158
app .on (' event' , state => {})
165
159
```
166
160
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
+
167
171
If you need to add components – maybe asynchronously – you can use ` add ` :
168
172
``` javascript
169
173
app .add ({
0 commit comments