Behavior Es6 class refactor
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 preferthis.init()
as a method call to keep logic out of constructor -
super(elem)
- !!!this is required!!,super(...args)
allows a component to extendBaseComponent.js
andEventLayer
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