Giter Club home page Giter Club logo

tapable-ts's Introduction

tapable-ts

npm npm bundle size NPM

A TypeScript rewrite of tapable

Tapable

tapable is a great plugin system from webpack that enables users to expose hooks from modules within your app that plugins can tap into and customize the behavior. I use it in almost all of my projects, but there are a few quirks with the original that made it hard to use in other applications.

After using it in a bunch of projects, I wanted a bit more control over what's possible; like custom tap execution order, the ability to untap a hook, higher level abstractions, PluginManagers, etc -- and the performance tradeoffs made in the original library also didn't always align with how I end up using the library.

API

Hooks

Hooks are constructed by importing and instantiating a class:

import { SyncHook } from "tapable-ts";

const hook = new SyncHook();

if using TypeScript, pass a tuple that represents the arguments as the first type param (and a return type if applicable for the second)

const hook = new SyncHook<[string, number]>();

you can also use named tuples for better editor support:

const hook = new SyncHook<[name: string, age: number]>();

Hook Types

The tapable docs do a good job going over the different types of hooks. There are 9 in total:

  • SyncHook
  • SyncBailHook
  • SyncWaterfallHook
  • SyncLoopHook
  • AsyncParallelHook
  • AsyncParallelBailHook
  • AsyncSeriesHook
  • AsyncSeriesBailHook
  • AsyncSeriesWaterfallHook

Interceptions

The intercept API closely resembles the original tapable implementation. There are 6 events an interceptor can register for.

3 are applicable to all hooks:

  • tap - Called when a new tap is registered
  • call - Called when the hook is first called
  • error - Called when a hook is going to throw

1 only applies for looping hooks:

  • loop - Called during each new iteration of a looping hook

and either of the following will be called:

  • result - Called when a hook is going to return a value
  • done - Called when a hook is finished executing, but no value is returned. This includes Bail hooks that don't return a value.

tapable-ts's People

Contributors

adierkens avatar ketanreddy avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

tapable-ts's Issues

Create a Plugin manager

Often times with the tapable interface used projects, they are paired with a set of plugins.

By default we typically just construct a list of them, and apply() them onto the main entry to the library:

class MyThing {
  constructor(conf: { plugins: Array<Plugin> }) {
     conf.plugins.forEach(p => p.apply(this));
  }
}

This works fine for most use-cases, but as projects grow there are often needs for plugins to communicate with each other. It would be helpful to create a manager that handles all of the register, find, applyTo calls for a set of plugins and be able to reuse that across multiple projects.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.