Feature: Lifecycle Methods

[wavesoft]

This PR is a work in progress towards implementing two lifecycle methods that can be used to accessing the DOM and binding event handlers:

• didMount : Called when the component is mounted to the DOM
• didUnmount : Called when the component is unmounted from the DOM

NOTE: This is WIP because I want the result to be at most 512 bytes 😄

[SilentCicero]

Would this be used in props?

[wavesoft]

Currently the planning is to use this as a fourth callback function on the functional component. For example:

function Component(props, state, setState, setLifecycleCallback) {
  setLifecycleCallback((prevDOM, nextDOM) => {
    if (!prevDOM && nextDOM) {
      // mounted
    } else if (prevDOM & !nextDOM) {
      // unmounted
    } else {
      // changed
    }
  });

  return div( ... )
}

[wavesoft]

Ok, so managed to bring it down to 512 bytes by doing something that I am not 100% OK with:

• Removing [symbol] property with the unicode letter σ, that is a legit javascript name, yet something nobody will ever use.
• Using the global object as the global state storage instead of using a local variable. State values are always prefixed with an empty character ' ', so they will never collide with an existing property, yet we are leaking in the global scope the state.

I am going to continue working on this, but I am open on ideas/suggestions 😄

[wavesoft]

And to comment on my thoughts:

• Using ª as the symbol character to make it more rare.
• I could use the object of the wrapClassProxy as the state store since its only used privately in the function. This way I don't leak the state in the global object. :+1: