lifecycle events

[yoshuawuyts]

As mentioned in the roadmap (#3), what would the syntax for lifecycle events look like? Is it the goal to achieve event parity with React?

[anthonyshort]

They'll work in a similar way:

var Thing = component({
  afterMount() {},
  beforeMount() {},
  beforeUpdate() {},
  afterUpdate() {},
  shouldUpdate() {}
});

But they'll also be exposed as events, so instead of using a mixins array we can just do it the normal JS way.

Thing.use(myPlugin);

That might do something like:

function myPlugin(Component) {

  // Do something on mount without needing to mixin and patch functions
  Component.on('mount', function(instance, el, state, props){

  });

  // Or just add new methods to the prototype to make it available
  // to the instance
  Component.prototype.doSomething = function(){}
}

The big difference is that Components in Deku are just simple constructor functions. So you can extend them, listen to events, and even create instances without needing Deku or stubbing the require functions.

[yoshuawuyts]

👏👏👏👏👏👏👏👏👏👏👏👏

I approve of this so much.

[yoshuawuyts]

I was wondering if something like this would also be possible:

var thing = component()

module.exports = thing;

thing.on('render', function(dom, state, props) {
  return dom('button', null, ['click me']);
})

thing.on('mount', function(instance, el, state, props) {
 // do other stuff
})

If any form of child element is rendered you could pass it the this context to get access to the state and mutate it. I hope I'm making sense, haha.