WebComponentStateManager v2

by amindunited

HTML

<state-lee>
  <div>
    <input id="name-input" />
    <input id="value-input" />
    <button id="add-button">
      Add
    </button>
  </div>
  <div>
    <select id="select-items">

    </select>
  </div>
  <div>
    <h3>
      State:
    </h3>
    <code></code>
  </div>

</state-lee>

CSS

code {
  padding: 1rem;
}

JavaScript

class StateLee extends HTMLElement {

 static states = [];
 static actions;
 constructor () {
 	super();
  this.actions = new Map();
  this.states = [];
  console.log('Loaded');
 }
 
 set state(newState) {
   console.log('updating state', newState, this.state);
   console.log('states:', this.states);
   const statesCount = this.states.length;
   if (newState !== this.states[statesCount - 1]) {
	   this.states.push(newState); 
   }
 }
 
 get state () {
   const statesCount = this.states.length;
   return this.states[statesCount - 1];
 }
 
 
 // config ['name', fn]
 set action (config) {
 	console.log('config', config);
 	this.actions.set(config[0], () => {
  	const newState = config[1](this.state);
    this.state = newState;
    return this.state;
  });
 }
 
  addAction (key, reducer) {
    // console.log('config', config);
    /*
    this.actions.set(key, () => {
      const newState = reducer(this.state);
      this.state = newState;
      return this.state;
    });
    */
 }
 
 action (key) {
 	actions.get(key)();
 }
 /*
 runActions() {
 	this.actions.forEach((key) => {
  	console.log('for eact action', key);
  })
 }
 */
}

customElements.define(`state-lee`, StateLee, []);

const stateEl = document.querySelector('state-lee');
/*
stateEl.action = ['START', (state) => {
	console.log('start got ', state);
}]
*/
stateEl.addAction('START', (state) => {
	console.log('start got ', state);
});
console.log('stateEl', stateEl, stateEl.actions);
console.log('stateEl', stateEl, stateEl.actions);

stateEl.state = { count: 0, init: true}
stateEl.state = { count: 0, init: true, additional: 'yes'}
console.log('stateEl', stateEl, 'state', stateEl.state, 'actions');
// stateEl.actions.get('START')();
stateEl.action('START');


/* const stateLee */
const addButton = document.querySelector('#add-button');
const nameInput = document.querySelector('#name-input');
const valueInput = document.querySelector('#value-input');
const selectItems =...