nav tabs on admin dashboard
This commit is contained in:
+280
-137
@@ -1,151 +1,294 @@
|
||||
# Tapable
|
||||
|
||||
``` javascript
|
||||
var Tapable = require("tapable");
|
||||
```
|
||||
|
||||
`Tapable` is a class for plugin binding and applying.
|
||||
|
||||
Just extend it.
|
||||
The tapable package expose many Hook classes, which can be used to create hooks for plugins.
|
||||
|
||||
``` javascript
|
||||
function MyClass() {
|
||||
Tapable.call(this);
|
||||
}
|
||||
|
||||
MyClass.prototype = Object.create(Tapable.prototype);
|
||||
|
||||
MyClass.prototype.method = function() {};
|
||||
const {
|
||||
SyncHook,
|
||||
SyncBailHook,
|
||||
SyncWaterfallHook,
|
||||
SyncLoopHook,
|
||||
AsyncParallelHook,
|
||||
AsyncParallelBailHook,
|
||||
AsyncSeriesHook,
|
||||
AsyncSeriesBailHook,
|
||||
AsyncSeriesWaterfallHook
|
||||
} = require("tapable");
|
||||
```
|
||||
|
||||
Or mix it in.
|
||||
## Installation
|
||||
|
||||
``` javascript
|
||||
function MyClass2() {
|
||||
EventEmitter.call(this);
|
||||
Tapable.call(this);
|
||||
}
|
||||
|
||||
MyClass2.prototype = Object.create(EventEmitter.prototype);
|
||||
Tapable.mixin(MyClass2.prototype);
|
||||
|
||||
MyClass2.prototype.method = function() {};
|
||||
``` shell
|
||||
npm install --save tapable
|
||||
```
|
||||
|
||||
## Public functions
|
||||
## Usage
|
||||
|
||||
### apply
|
||||
|
||||
``` javascript
|
||||
void apply(plugins: Plugin...)
|
||||
```
|
||||
|
||||
Attaches all plugins passed as arguments to the instance, by calling `apply` on them.
|
||||
|
||||
### plugin
|
||||
|
||||
``` javascript
|
||||
void plugin(names: string|string[], handler: Function)
|
||||
```
|
||||
|
||||
`names` are the names (or a single name) of the plugin interfaces the class provides.
|
||||
|
||||
`handler` is a callback function. The signature depends on the class. `this` is the instance of the class.
|
||||
|
||||
## Protected functions
|
||||
|
||||
### applyPlugins
|
||||
|
||||
``` javascript
|
||||
void applyPlugins(name: string, args: any...)
|
||||
```
|
||||
|
||||
Synchronously applies all registered handlers for `name`. The handler functions are called with all args.
|
||||
|
||||
### applyPluginsWaterfall
|
||||
|
||||
``` javascript
|
||||
any applyPluginsWaterfall(name: string, init: any, args: any...)
|
||||
```
|
||||
|
||||
Synchronously applies all registered handlers for `name`. The handler functions are called with the return value of the previous handler and all args. For the first handler `init` is used and the return value of the last handler is return by `applyPluginsWaterfall`
|
||||
|
||||
### applyPluginsAsync
|
||||
|
||||
``` javascript
|
||||
void applyPluginsAsync(
|
||||
name: string,
|
||||
args: any...,
|
||||
callback: (err?: Error) -> void
|
||||
)
|
||||
```
|
||||
|
||||
Asynchronously applies all registered handlers for `name`. The handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The handler functions are called in order of registration.
|
||||
|
||||
`callback` is called after all handlers are called.
|
||||
|
||||
### applyPluginsBailResult
|
||||
|
||||
``` javascript
|
||||
any applyPluginsBailResult(name: string, args: any...)
|
||||
```
|
||||
|
||||
Synchronously applies all registered handlers for `name`. The handler function are called with all args. If a handler function returns something `!== undefined`, the value is returned and no more handlers are applied.
|
||||
|
||||
### applyPluginsAsyncWaterfall
|
||||
|
||||
``` javascript
|
||||
applyPluginsAsyncWaterfall(
|
||||
name: string,
|
||||
init: any,
|
||||
callback: (err: Error, result: any) -> void
|
||||
)
|
||||
```
|
||||
|
||||
Asynchronously applies all registered handlers for `name`. The handler functions are called with the current value and a callback function with the signature `(err: Error, nextValue: any) -> void`. When called, `nextValue` is the current value for the next handler. The current value for the first handler is `init`. After all handlers are applied, `callback` is called with the last value. If any handler passes a value for `err`, the `callback` is called with this error and no more handlers are called.
|
||||
|
||||
### applyPluginsAsyncSeries
|
||||
|
||||
``` javascript
|
||||
applyPluginsAsyncSeries(
|
||||
name: string,
|
||||
args: any...,
|
||||
callback: (err: Error, result: any) -> void
|
||||
)
|
||||
```
|
||||
|
||||
Asynchronously applies all registered handlers for `name`. The handler functions are called with all `args` and a callback function with the signature `(err: Error) -> void`. The handlers are called in series, one at a time. After all handlers are applied, `callback` is called. If any handler passes a value for `err`, the `callback` is called with this error and no more handlers are called.
|
||||
|
||||
### applyPluginsParallel
|
||||
|
||||
``` javascript
|
||||
applyPluginsParallel(
|
||||
name: string,
|
||||
args: any...,
|
||||
callback: (err?: Error) -> void
|
||||
)
|
||||
```
|
||||
|
||||
Applies all registered handlers for `name` in parallel. The handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. The `callback` function is called when all handlers have called the callback without `err`. If any handler calls the callback with `err`, `callback` is invoked with this error and the other handlers are ignored.
|
||||
|
||||
### applyPluginsParallelBailResult
|
||||
|
||||
``` javascript
|
||||
applyPluginsParallelBailResult(
|
||||
name: string,
|
||||
args: any...,
|
||||
callback: (err: Error, result: any) -> void
|
||||
)
|
||||
```
|
||||
|
||||
Applies all registered handlers for `name` in parallel. The handler functions are called with all args and a callback function with the signature `(err?: Error) -> void`. Handler functions must call the callback. They can either pass an error, pass undefined, or pass a value. The first result (either error or value) which is not undefined is passed to the `callback`. The order is defined by registration, not by the speed of the handler function.
|
||||
|
||||
### hasPlugins
|
||||
All Hook constructors take one optional argument, which is a list of argument names as strings.
|
||||
|
||||
``` js
|
||||
hasPlugins(
|
||||
name: string
|
||||
)
|
||||
const hook = new SyncHook(["arg1", "arg2", "arg3"]);
|
||||
```
|
||||
|
||||
Returns true, if plugins are registered for this name.
|
||||
The best practice is to expose all hooks of a class in a `hooks` property:
|
||||
|
||||
``` js
|
||||
class Car {
|
||||
constructor() {
|
||||
this.hooks = {
|
||||
accelerate: new SyncHook(["newSpeed"]),
|
||||
brake: new SyncHook(),
|
||||
calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"])
|
||||
};
|
||||
}
|
||||
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
Other people can now use these hooks:
|
||||
|
||||
``` js
|
||||
const myCar = new Car();
|
||||
|
||||
// Use the tap method to add a consument
|
||||
myCar.hooks.brake.tap("WarningLampPlugin", () => warningLamp.on());
|
||||
```
|
||||
|
||||
It's required to pass a name to identify the plugin/reason.
|
||||
|
||||
You may receive arguments:
|
||||
|
||||
``` js
|
||||
myCar.hooks.accelerate.tap("LoggerPlugin", newSpeed => console.log(`Accelerating to ${newSpeed}`));
|
||||
```
|
||||
|
||||
For sync hooks, `tap` is the only valid method to add a plugin. Async hooks also support async plugins:
|
||||
|
||||
``` js
|
||||
myCar.hooks.calculateRoutes.tapPromise("GoogleMapsPlugin", (source, target, routesList) => {
|
||||
// return a promise
|
||||
return google.maps.findRoute(source, target).then(route => {
|
||||
routesList.add(route);
|
||||
});
|
||||
});
|
||||
myCar.hooks.calculateRoutes.tapAsync("BingMapsPlugin", (source, target, routesList, callback) => {
|
||||
bing.findRoute(source, target, (err, route) => {
|
||||
if(err) return callback(err);
|
||||
routesList.add(route);
|
||||
// call the callback
|
||||
callback();
|
||||
});
|
||||
});
|
||||
|
||||
// You can still use sync plugins
|
||||
myCar.hooks.calculateRoutes.tap("CachedRoutesPlugin", (source, target, routesList) => {
|
||||
const cachedRoute = cache.get(source, target);
|
||||
if(cachedRoute)
|
||||
routesList.add(cachedRoute);
|
||||
})
|
||||
```
|
||||
|
||||
The class declaring these hooks need to call them:
|
||||
|
||||
``` js
|
||||
class Car {
|
||||
/* ... */
|
||||
|
||||
setSpeed(newSpeed) {
|
||||
this.hooks.accelerate.call(newSpeed);
|
||||
}
|
||||
|
||||
useNavigationSystemPromise(source, target) {
|
||||
const routesList = new List();
|
||||
return this.hooks.calculateRoutes.promise(source, target, routesList).then(() => {
|
||||
return routesList.getRoutes();
|
||||
});
|
||||
}
|
||||
|
||||
useNavigationSystemAsync(source, target, callback) {
|
||||
const routesList = new List();
|
||||
this.hooks.calculateRoutes.callAsync(source, target, routesList, err => {
|
||||
if(err) return callback(err);
|
||||
callback(null, routesList.getRoutes());
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The Hook will compile a method with the most efficient way of running your plugins. It generates code depending on:
|
||||
* The number of registered plugins (none, one, many)
|
||||
* The kind of registered plugins (sync, async, promise)
|
||||
* The used call method (sync, async, promise)
|
||||
* The number of arguments
|
||||
* Whether interception is used
|
||||
|
||||
This ensures fastest possible execution.
|
||||
|
||||
## Hook types
|
||||
|
||||
Each hook can be tapped with one or several functions. How they are executed depends on the hook type:
|
||||
|
||||
* Basic hook (without “Waterfall”, “Bail” or “Loop” in its name). This hook simply calls every function it tapped in a row.
|
||||
|
||||
* __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.
|
||||
|
||||
* __Bail__. A bail hook allows exiting early. When any of the tapped function returns anything, the bail hook will stop executing the remaining ones.
|
||||
|
||||
* __Loop__. TODO
|
||||
|
||||
Additionally, hooks can be synchronous or asynchronous. To reflect this, there’re “Sync”, “AsyncSeries”, and “AsyncParallel” hook classes:
|
||||
|
||||
* __Sync__. A sync hook can only be tapped with synchronous functions (using `myHook.tap()`).
|
||||
|
||||
* __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.
|
||||
|
||||
* __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.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## Interception
|
||||
|
||||
All Hooks offer an additional interception API:
|
||||
|
||||
``` js
|
||||
myCar.hooks.calculateRoutes.intercept({
|
||||
call: (source, target, routesList) => {
|
||||
console.log("Starting to calculate routes");
|
||||
},
|
||||
register: (tapInfo) => {
|
||||
// tapInfo = { type: "promise", name: "GoogleMapsPlugin", fn: ... }
|
||||
console.log(`${tapInfo.name} is doing its job`);
|
||||
return tapInfo; // may return a new tapInfo object
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**call**: `(...args) => void` Adding `call` to your interceptor will trigger when hooks are triggered. You have access to the hooks arguments.
|
||||
|
||||
**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.
|
||||
|
||||
**loop**: `(...args) => void` Adding `loop` to your interceptor will trigger for each loop of a looping hook.
|
||||
|
||||
**register**: `(tap: Tap) => Tap | undefined` Adding `register` to your interceptor will trigger for each added `Tap` and allows to modify it.
|
||||
|
||||
## Context
|
||||
|
||||
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.
|
||||
|
||||
``` js
|
||||
myCar.hooks.accelerate.intercept({
|
||||
context: true,
|
||||
tap: (context, tapInfo) => {
|
||||
// tapInfo = { type: "sync", name: "NoisePlugin", fn: ... }
|
||||
console.log(`${tapInfo.name} is doing it's job`);
|
||||
|
||||
// `context` starts as an empty object if at least one plugin uses `context: true`.
|
||||
// If no plugins use `context: true`, then `context` is undefined.
|
||||
if (context) {
|
||||
// Arbitrary properties can be added to `context`, which plugins can then access.
|
||||
context.hasMuffler = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
myCar.hooks.accelerate.tap({
|
||||
name: "NoisePlugin",
|
||||
context: true
|
||||
}, (context, newSpeed) => {
|
||||
if (context && context.hasMuffler) {
|
||||
console.log("Silence...");
|
||||
} else {
|
||||
console.log("Vroom!");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## HookMap
|
||||
|
||||
A HookMap is a helper class for a Map with Hooks
|
||||
|
||||
``` js
|
||||
const keyedHook = new HookMap(key => new SyncHook(["arg"]))
|
||||
```
|
||||
|
||||
``` js
|
||||
keyedHook.tap("some-key", "MyPlugin", (arg) => { /* ... */ });
|
||||
keyedHook.tapAsync("some-key", "MyPlugin", (arg, callback) => { /* ... */ });
|
||||
keyedHook.tapPromise("some-key", "MyPlugin", (arg) => { /* ... */ });
|
||||
```
|
||||
|
||||
``` js
|
||||
const hook = keyedHook.get("some-key");
|
||||
if(hook !== undefined) {
|
||||
hook.callAsync("arg", err => { /* ... */ });
|
||||
}
|
||||
```
|
||||
|
||||
## Hook/HookMap interface
|
||||
|
||||
Public:
|
||||
|
||||
``` ts
|
||||
interface Hook {
|
||||
tap: (name: string | Tap, fn: (context?, ...args) => Result) => void,
|
||||
tapAsync: (name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
|
||||
tapPromise: (name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
|
||||
intercept: (interceptor: HookInterceptor) => void
|
||||
}
|
||||
|
||||
interface HookInterceptor {
|
||||
call: (context?, ...args) => void,
|
||||
loop: (context?, ...args) => void,
|
||||
tap: (context?, tap: Tap) => void,
|
||||
register: (tap: Tap) => Tap,
|
||||
context: boolean
|
||||
}
|
||||
|
||||
interface HookMap {
|
||||
for: (key: any) => Hook,
|
||||
tap: (key: any, name: string | Tap, fn: (context?, ...args) => Result) => void,
|
||||
tapAsync: (key: any, name: string | Tap, fn: (context?, ...args, callback: (err, result: Result) => void) => void) => void,
|
||||
tapPromise: (key: any, name: string | Tap, fn: (context?, ...args) => Promise<Result>) => void,
|
||||
intercept: (interceptor: HookMapInterceptor) => void
|
||||
}
|
||||
|
||||
interface HookMapInterceptor {
|
||||
factory: (key: any, hook: Hook) => Hook
|
||||
}
|
||||
|
||||
interface Tap {
|
||||
name: string,
|
||||
type: string
|
||||
fn: Function,
|
||||
stage: number,
|
||||
context: boolean
|
||||
}
|
||||
```
|
||||
|
||||
Protected (only for the class containing the hook):
|
||||
|
||||
``` ts
|
||||
interface Hook {
|
||||
isUsed: () => boolean,
|
||||
call: (...args) => Result,
|
||||
promise: (...args) => Promise<Result>,
|
||||
callAsync: (...args, callback: (err, result: Result) => void) => void,
|
||||
}
|
||||
|
||||
interface HookMap {
|
||||
get: (key: any) => Hook | undefined,
|
||||
for: (key: any) => Hook
|
||||
}
|
||||
```
|
||||
|
||||
## MultiHook
|
||||
|
||||
A helper Hook-like class to redirect taps to multiple other hooks:
|
||||
|
||||
``` js
|
||||
const { MultiHook } = require("tapable");
|
||||
|
||||
this.hooks.allHooks = new MultiHook([this.hooks.hookA, this.hooks.hookB]);
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user