Can we remove tap from hook？

[wangzongxu]

var hook = new SyncHook(['param'])
var fn = param => console.log(param)

hook.tap('example', fn)
hook.call('frist')
// frist

setTimeout(() => {
   hook.remove(fn)
}, 3000)

[alexander-akait]

Why? I can't undestand, also it is internal module for webpack, what is use case using this without webpack?

[wangzongxu]

Why? I can't undestand, also it is internal module for webpack, what is use case using this without webpack?

Because I using it in my Vue Component,
When I need to notify multiple components，
I need to add a tap when each component is mounted，
and need to remove a tap when each component is destroyed，

But I can't find anything as good as tapable for handling the flow of events.

I wanted to submit PR, but the 'lib/ hookcodefactory.js' file seemed too hard to understand.

[montogeek]

How are you using this with Vue components?

[wangzongxu]

How are you using this with Vue components?

const hook = new SyncHook()

// After a while
hook.call()

// dialog-a.vue
export default {
  methdos: {
     someMethod(){}
  }
  created() {
    hook.tap('If the dialog appears', this.someMethod)
  }
  destroyed() {
      // I want to remove it...
  }
}

[mengjian-github]

#71 (comment)

@wangzongxu

[sokra]

Due to internal optimizations done which depends on the taps called, it would be very inefficient to remove plugins. Therefore it it's not in the API. Avoid removing plugins.

Note that tapable is optimized for a call flow like: 1. attach to hooks, 2. call hooks at lot.
It's not an general purpose event emitter.

You could still handle your use case this way:

const hook = new SyncHook()

// After a while
hook.call()

const hookMethods = new Set();
hook.tap("dialog-a", () => { for(const m of hookMethods) m(); });

// dialog-a.vue
export default {
  methdos: {
     someMethod(){}
  }
  created() {
    hookMethods.add(this.someMethod);
  }
  destroyed() {
    hookMethods.delete(this.someMethod);
  }
}

but other solutions might be better for this

[Hypercubed]

@sokra Actually this is a real shame. tapable has a great API that's useful outside webpack. Lacking the ability to remove a tap really diminishes it's value.

[dabanlee]

why don't you use event hub?

const eventHub = new Vue()

export default {
    created() {
        eventHub.$on('some-action', this.addTodo)
    },
    destroyed() {
        eventHub.$off('some-action', this.addTodo)
    },
    methods: {
        addTodo() {},
    },
}

[wangzongxu]

why don't you use event hub?

const eventHub = new Vue()

export default {
    created() {
        eventHub.$on('some-action', this.addTodo)
    },
    destroyed() {
        eventHub.$off('some-action', this.addTodo)
    },
    methods: {
        addTodo() {},
    },
}

因为当应用变得复杂的时候，tapable覆盖的场景更全面

[keifergu]

need this feature

[keifergu]

@wangzongxu I find a method to remove tap:

var hook = new SyncHook(['param'])
var fn = param => console.log(param)

hook.tap('example', fn)
hook.call('frist')
// frist

setTimeout(() => {
   removeTapFromHook(hook, 'example');
}, 3000)

// remove
function removeTapFromHook(hook, tapName) {
    const index = hooks.taps.findIndex(tap => tap.name === tapName);
    if (index > -1) {
        hooks.taps.splice(index, 1);
    }
}

We only need remove the tap from the private variable taps.

[sokra]

That's private.

But anyway if you do that call hook._resetCompilation() to update the generated code.