What the Hook? Learn the basics of Tapable

What is Tapable

Tapable is a library that creates hooks for plugins. It is a core library of webpack, a popular module bundler. What makes Webpack powerful is you can write custom plugins. Tapable creates this powerful custom plugin system using hooks.

What are hooks

Hooks allow other users to get notified of important events, and run the other user’s code when that important event happens. You’ve probably seen this before. The browser exposes many hooks for you to tap into. If you wanted to run code when a click event was going to happen, you would do this

Another example of hooks are React lifecycle methods. If you’ve worked with React, you’ve probably heard of componentDidMount, componentDidUpdate, and componentWillUnmount. You can think of these lifecycle methods as hooks. I can add code to run when a lifecycle event happens.

The new React Hooks API allows you to use lifecycle methods outside of Component classes

How to create hooks with Tapable

The most basic hook Tapable provides is the `Synchronous Hook, or SyncHook. You can create a hook like so.

Tapable suggests exposing your hooks through a hook property. This allows developers to easily see what hooks are available to tap into.

This is how webpack exposes its hooks to plugin authors.

To call a hook, run its call method.

A hook will trigger all tapped functions when it is called.

Think of this like your click event listener. Calling a hook is like triggering a “click” event. All click event listener functions will fire now.

You can also pass arguments to your call method. If you do so, be sure to add argument names when instantiating your hook.

This isn’t exciting when nobody’s listening, or tapped, into the hooks.

How to tap hooks

To tap a hook, run its tap method.

The first argument is the name of your plugin. This name is used for diagnostic/debugging information.
The second argument is a callback function that is called when your hook is called. Your callback function has access to arguments passed to the hook’s call method.

Think of this like your click event listener. This callback function is triggered when a “click” event happens. The callback function has access to the event object. Our plugin has access to the arguments used in our call method.

How to intercept hooks

Your Tapable hooks may want to know when it is getting interacted with. Hooks let you intercept the tapped code. There are 3 main ways that we can intercept.

Register interceptor

This interceptor triggers each time a Plugin taps into a hook. This code is run only once. You have access to the Tap object, which has information about such as the name of the plugin, and what function the Tap will call.

You can also modify the Tap object in your register intercept code. For example, we can override the Tap function.

Call interceptor

This interceptor triggers each time a Hook is called. You have access to all the arguments that your Plugin has.

Tap interceptor

This interceptor triggers each time a Hook is called. This is different than the call interceptor because it triggers once for each Plugin that is tapped to the Hook. You have access to the Tap object, but cannot change the Tap object.

Conclusion

This was a brief introduction to Tapable Hooks. Let me know if you’ve found other useful ways to use hooks.