1 |
3a515b92
|
cagy
|
# Tapable
|
2 |
|
|
|
3 |
|
|
The tapable package expose many Hook classes, which can be used to create hooks for plugins.
|
4 |
|
|
|
5 |
|
|
``` javascript
|
6 |
|
|
const {
|
7 |
|
|
SyncHook,
|
8 |
|
|
SyncBailHook,
|
9 |
|
|
SyncWaterfallHook,
|
10 |
|
|
SyncLoopHook,
|
11 |
|
|
AsyncParallelHook,
|
12 |
|
|
AsyncParallelBailHook,
|
13 |
|
|
AsyncSeriesHook,
|
14 |
|
|
AsyncSeriesBailHook,
|
15 |
|
|
AsyncSeriesWaterfallHook
|
16 |
|
|
} = require("tapable");
|
17 |
|
|
```
|
18 |
|
|
|
19 |
|
|
## Installation
|
20 |
|
|
|
21 |
|
|
``` shell
|
22 |
|
|
npm install --save tapable
|
23 |
|
|
```
|
24 |
|
|
|
25 |
|
|
## Usage
|
26 |
|
|
|
27 |
|
|
All Hook constructors take one optional argument, which is a list of argument names as strings.
|
28 |
|
|
|
29 |
|
|
``` js
|
30 |
|
|
const hook = new SyncHook(["arg1", "arg2", "arg3"]);
|
31 |
|
|
```
|
32 |
|
|
|
33 |
|
|
The best practice is to expose all hooks of a class in a `hooks` property:
|
34 |
|
|
|
35 |
|
|
``` js
|
36 |
|
|
class Car {
|
37 |
|
|
constructor() {
|
38 |
|
|
this.hooks = {
|
39 |
|
|
accelerate: new SyncHook(["newSpeed"]),
|
40 |
|
|
brake: new SyncHook(),
|
41 |
|
|
calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
|
42 |
|
|
};
|
43 |
|
|
}
|
44 |
|
|
|
45 |
|
|
/* ... */
|
46 |
|
|
}
|
47 |
|
|
```
|
48 |
|
|
|
49 |
|
|
Other people can now use these hooks:
|
50 |
|
|
|
51 |
|
|
``` js
|
52 |
|
|
const myCar = new Car();
|
53 |
|
|
|
54 |
|
|
// Use the tap method to add a consument
|
55 |
|
|
myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());
|
56 |
|
|
```
|
57 |
|
|
|
58 |
|
|
It's required to pass a name to identify the plugin/reason.
|
59 |
|
|
|
60 |
|
|
You may receive arguments:
|
61 |
|
|
|
62 |
|
|
``` js
|
63 |
|
|
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
|
64 |
|
|
```
|
65 |
|
|
|
66 |
|
|
For sync hooks, `tap` is the only valid method to add a plugin. Async hooks also support async plugins:
|
67 |
|
|
|
68 |
|
|
``` js
|
69 |
|
|
myCar.hooks.calculateRoutes.tapPromise("GoogleMapsPlugin", (source, target, routesList) => {
|
70 |
|
|
// return a promise
|
71 |
|
|
return google.maps.findRoute(source, target).then(route => {
|
72 |
|
|
routesList.add(route);
|
73 |
|
|
});
|
74 |
|
|
});
|
75 |
|
|
myCar.hooks.calculateRoutes.tapAsync("BingMapsPlugin", (source, target, routesList, callback) => {
|
76 |
|
|
bing.findRoute(source, target, (err, route) => {
|
77 |
|
|
if(err) return callback(err);
|
78 |
|
|
routesList.add(route);
|
79 |
|
|
// call the callback
|
80 |
|
|
callback();
|
81 |
|
|
});
|
82 |
|
|
});
|
83 |
|
|
|
84 |
|
|
// You can still use sync plugins
|
85 |
|
|
myCar.hooks.calculateRoutes.tap("CachedRoutesPlugin", (source, target, routesList) => {
|
86 |
|
|
const cachedRoute = cache.get(source, target);
|
87 |
|
|
if(cachedRoute)
|
88 |
|
|
routesList.add(cachedRoute);
|
89 |
|
|
})
|
90 |
|
|
```
|
91 |
|
|
|
92 |
|
|
The class declaring these hooks need to call them:
|
93 |
|
|
|
94 |
|
|
``` js
|
95 |
|
|
class Car {
|
96 |
|
|
/* ... */
|
97 |
|
|
|
98 |
|
|
setSpeed(newSpeed) {
|
99 |
|
|
this.hooks.accelerate.call(newSpeed);
|
100 |
|
|
}
|
101 |
|
|
|
102 |
|
|
useNavigationSystemPromise(source, target) {
|
103 |
|
|
const routesList = new List();
|
104 |
|
|
return this.hooks.calculateRoutes.promise(source, target, routesList).then(() => {
|
105 |
|
|
return routesList.getRoutes();
|
106 |
|
|
});
|
107 |
|
|
}
|
108 |
|
|
|
109 |
|
|
useNavigationSystemAsync(source, target, callback) {
|
110 |
|
|
const routesList = new List();
|
111 |
|
|
this.hooks.calculateRoutes.callAsync(source, target, routesList, err => {
|
112 |
|
|
if(err) return callback(err);
|
113 |
|
|
callback(null, routesList.getRoutes());
|
114 |
|
|
});
|
115 |
|
|
}
|
116 |
|
|
}
|
117 |
|
|
```
|
118 |
|
|
|
119 |
|
|
The Hook will compile a method with the most efficient way of running your plugins. It generates code depending on:
|
120 |
|
|
* The number of registered plugins (none, one, many)
|
121 |
|
|
* The kind of registered plugins (sync, async, promise)
|
122 |
|
|
* The used call method (sync, async, promise)
|
123 |
|
|
* The number of arguments
|
124 |
|
|
* Whether interception is used
|
125 |
|
|
|
126 |
|
|
This ensures fastest possible execution.
|
127 |
|
|
|
128 |
|
|
## Hook types
|
129 |
|
|
|
130 |
|
|
Each hook can be tapped with one or several functions. How they are executed depends on the hook type:
|
131 |
|
|
|
132 |
|
|
* Basic hook (without “Waterfall”, “Bail” or “Loop” in its name). This hook simply calls every function it tapped in a row.
|
133 |
|
|
|
134 |
|
|
* __Waterfall__. A waterfall hook also calls each tapped function in a row. Unlike the basic hook, it passes a return value from each function to the next function.
|
135 |
|
|
|
136 |
|
|
* __Bail__. A bail hook allows exiting early. When any of the tapped function returns anything, the bail hook will stop executing the remaining ones.
|
137 |
|
|
|
138 |
|
|
* __Loop__. TODO
|
139 |
|
|
|
140 |
|
|
Additionally, hooks can be synchronous or asynchronous. To reflect this, there’re “Sync”, “AsyncSeries”, and “AsyncParallel” hook classes:
|
141 |
|
|
|
142 |
|
|
* __Sync__. A sync hook can only be tapped with synchronous functions (using `myHook.tap()`).
|
143 |
|
|
|
144 |
|
|
* __AsyncSeries__. An async-series hook can be tapped with synchronous, callback-based and promise-based functions (using `myHook.tap()`, `myHook.tapAsync()` and `myHook.tapPromise()`). They call each async method in a row.
|
145 |
|
|
|
146 |
|
|
* __AsyncParallel__. An async-parallel hook can also be tapped with synchronous, callback-based and promise-based functions (using `myHook.tap()`, `myHook.tapAsync()` and `myHook.tapPromise()`). However, they run each async method in parallel.
|
147 |
|
|
|
148 |
|
|
The hook type is reflected in its class name. E.g., `AsyncSeriesWaterfallHook` allows asynchronous functions and runs them in series, passing each function’s return value into the next function.
|
149 |
|
|
|
150 |
|
|
|
151 |
|
|
## Interception
|
152 |
|
|
|
153 |
|
|
All Hooks offer an additional interception API:
|
154 |
|
|
|
155 |
|
|
``` js
|
156 |
|
|
myCar.hooks.calculateRoutes.intercept({
|
157 |
|
|
call: (source, target, routesList) => {
|
158 |
|
|
console.log("Starting to calculate routes");
|
159 |
|
|
},
|
160 |
|
|
register: (tapInfo) => {
|
161 |
|
|
// tapInfo = { type: "promise", name: "GoogleMapsPlugin", fn: ... }
|
162 |
|
|
console.log(`${tapInfo.name} is doing its job`);
|
163 |
|
|
return tapInfo; // may return a new tapInfo object
|
164 |
|
|
}
|
165 |
|
|
})
|
166 |
|
|
```
|
167 |
|
|
|
168 |
|
|
**call**: `(...args) => void` Adding `call` to your interceptor will trigger when hooks are triggered. You have access to the hooks arguments.
|
169 |
|
|
|
170 |
|
|
**tap**: `(tap: Tap) => void` Adding `tap` to your interceptor will trigger when a plugin taps into a hook. Provided is the `Tap` object. `Tap` object can't be changed.
|
171 |
|
|
|
172 |
|
|
**loop**: `(...args) => void` Adding `loop` to your interceptor will trigger for each loop of a looping hook.
|
173 |
|
|
|
174 |
|
|
**register**: `(tap: Tap) => Tap | undefined` Adding `register` to your interceptor will trigger for each added `Tap` and allows to modify it.
|
175 |
|
|
|
176 |
|
|
## Context
|
177 |
|
|
|
178 |
|
|
Plugins and interceptors can opt-in to access an optional `context` object, which can be used to pass arbitrary values to subsequent plugins and interceptors.
|
179 |
|
|
|
180 |
|
|
``` js
|
181 |
|
|
myCar.hooks.accelerate.intercept({
|
182 |
|
|
context: true,
|
183 |
|
|
tap: (context, tapInfo) => {
|
184 |
|
|
// tapInfo = { type: "sync", name: "NoisePlugin", fn: ... }
|
185 |
|
|
console.log(`${tapInfo.name} is doing it's job`);
|
186 |
|
|
|
187 |
|
|
// `context` starts as an empty object if at least one plugin uses `context: true`.
|
188 |
|
|
// If no plugins use `context: true`, then `context` is undefined.
|
189 |
|
|
if (context) {
|
190 |
|
|
// Arbitrary properties can be added to `context`, which plugins can then access.
|
191 |
|
|
context.hasMuffler = true;
|
192 |
|
|
}
|
193 |
|
|
}
|
194 |
|
|
});
|
195 |
|
|
|
196 |
|
|
myCar.hooks.accelerate.tap({
|
197 |
|
|
name: "NoisePlugin",
|
198 |
|
|
context: true
|
199 |
|
|
}, (context, newSpeed) => {
|
200 |
|
|
if (context && context.hasMuffler) {
|
201 |
|
|
console.log("Silence...");
|
202 |
|
|
} else {
|
203 |
|
|
console.log("Vroom!");
|
204 |
|
|
}
|
205 |
|
|
});
|
206 |
|
|
```
|
207 |
|
|
|
208 |
|
|
## HookMap
|
209 |
|
|
|
210 |
|
|
A HookMap is a helper class for a Map with Hooks
|
211 |
|
|
|
212 |
|
|
``` js
|
213 |
|
|
const keyedHook = new HookMap(key => new SyncHook(["arg"]))
|
214 |
|
|
```
|
215 |
|
|
|
216 |
|
|
``` js
|
217 |
|
|
keyedHook.tap("some-key", "MyPlugin", (arg) => { /* ... */ });
|
218 |
|
|
keyedHook.tapAsync("some-key", "MyPlugin", (arg, callback) => { /* ... */ });
|
219 |
|
|
keyedHook.tapPromise("some-key", "MyPlugin", (arg) => { /* ... */ });
|
220 |
|
|
```
|
221 |
|
|
|
222 |
|
|
``` js
|
223 |
|
|
const hook = keyedHook.get("some-key");
|
224 |
|
|
if(hook !== undefined) {
|
225 |
|
|
hook.callAsync("arg", err => { /* ... */ });
|
226 |
|
|
}
|
227 |
|
|
```
|
228 |
|
|
|
229 |
|
|
## Hook/HookMap interface
|
230 |
|
|
|
231 |
|
|
Public:
|
232 |
|
|
|
233 |
|
|
``` ts
|
234 |
|
|
interface Hook {
|
235 |
|
|
tap: (name: string | Tap, fn: (context?, ...args) => Result) => void,
|
236 |
|
|
tapAsync: (name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
|
237 |
|
|
tapPromise: (name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
|
238 |
|
|
intercept: (interceptor: HookInterceptor) => void
|
239 |
|
|
}
|
240 |
|
|
|
241 |
|
|
interface HookInterceptor {
|
242 |
|
|
call: (context?, ...args) => void,
|
243 |
|
|
loop: (context?, ...args) => void,
|
244 |
|
|
tap: (context?, tap: Tap) => void,
|
245 |
|
|
register: (tap: Tap) => Tap,
|
246 |
|
|
context: boolean
|
247 |
|
|
}
|
248 |
|
|
|
249 |
|
|
interface HookMap {
|
250 |
|
|
for: (key: any) => Hook,
|
251 |
|
|
tap: (key: any, name: string | Tap, fn: (context?, ...args) => Result) => void,
|
252 |
|
|
tapAsync: (key: any, name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
|
253 |
|
|
tapPromise: (key: any, name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
|
254 |
|
|
intercept: (interceptor: HookMapInterceptor) => void
|
255 |
|
|
}
|
256 |
|
|
|
257 |
|
|
interface HookMapInterceptor {
|
258 |
|
|
factory: (key: any, hook: Hook) => Hook
|
259 |
|
|
}
|
260 |
|
|
|
261 |
|
|
interface Tap {
|
262 |
|
|
name: string,
|
263 |
|
|
type: string
|
264 |
|
|
fn: Function,
|
265 |
|
|
stage: number,
|
266 |
|
|
context: boolean
|
267 |
|
|
}
|
268 |
|
|
```
|
269 |
|
|
|
270 |
|
|
Protected (only for the class containing the hook):
|
271 |
|
|
|
272 |
|
|
``` ts
|
273 |
|
|
interface Hook {
|
274 |
|
|
isUsed: () => boolean,
|
275 |
|
|
call: (...args) => Result,
|
276 |
|
|
promise: (...args) => Promise<Result>,
|
277 |
|
|
callAsync: (...args, callback: (err, result: Result) => void) => void,
|
278 |
|
|
}
|
279 |
|
|
|
280 |
|
|
interface HookMap {
|
281 |
|
|
get: (key: any) => Hook | undefined,
|
282 |
|
|
for: (key: any) => Hook
|
283 |
|
|
}
|
284 |
|
|
```
|
285 |
|
|
|
286 |
|
|
## MultiHook
|
287 |
|
|
|
288 |
|
|
A helper Hook-like class to redirect taps to multiple other hooks:
|
289 |
|
|
|
290 |
|
|
``` js
|
291 |
|
|
const { MultiHook } = require("tapable");
|
292 |
|
|
|
293 |
|
|
this.hooks.allHooks = new MultiHook([this.hooks.hookA, this.hooks.hookB]);
|
294 |
|
|
```
|