Skip to content

Behavior Es6 class refactor

Kyle Goines requested to merge es6-class-refactor into master

This is a es6 refactor of behaviors into a class based structure currently called components

The base structure - components, like behaviors are housed in /components In that folder I've included a complete rewrite of /beahviors/DummyBehavior.js as DummyComponent.js EVery component is build up of 2 proto components, BaseComponent which houses all dispatch functions of the lifecycle functions and base configs, here is where we would extend to add more props, configs, and methods we want to use throughout every component.

The second is EventLayer.js, this adds custom event management though out the component, allowing for components to listen to custom events with this.on('eventName', ()=>{}) pattern.

Both proto-components have tests included in them.

This also includes a refacor of manageBehaviors.js to manageComponents.js,

  • Currently this implementation allows it to concurrently run alongside behaviors and should see no functional changes to any behaviors created in the old method.

the anatomy of an es6 class

  • constructor - we use for a onMount lifecycle method, in constructor you can trigger any functions, I prefer this.init() as a method call to keep logic out of constructor

  • super(elem) - !!!this is required!!, super(...args) allows a component to extend BaseComponent.js and EventLayer

Triggering lifecycle methods:

For example, any component can init its own lifecycle methods now. If a component needs to watch resizing a component now has access to this.initResizeLifeCycle() then can listen to these updates with this.on('resize', function)

You are also able to trigger direct lifecycle events, for whatever reason using, this.dispatchResize(), this.dispatchDisable(), this.dispatchEnable() ect. These lifecycle triggers are in BaseComponent

What this removes:

Overall this is a es6 rewrite, but i have not rewrote the mutation observer pattern in manageBehaviors, I feel this pattern might have some unintended features causing lifecycle methods being triggered unexpectedly. If this is a pattern we for sure want to keep i believe we should include it as a lifecycle method in BaseComponent.js

Edited by Kyle Goines

Merge request reports