Sabado 3AM

ahre.js

// Stato - State managment - Since javascript is non-reactive

function createStore(reducer, initialState) {
  var store = {};
  store.state = initialState;
  store.listeners = [];

  function subscribe(listener) {
    store.listeners.push(listener);
  }

  function dispatch(action) {
    store.state = reducer(store.state, action);
    store.listeners.forEach((listener) => {
      listener(action);
    });
  }

  function getState() {
    return store.state;
  }

  return {
    state: store.state,
    subscribe,
    dispatch,
    getState,
  };
}

// Slomo

var eventTypes = {
  onClick: {
    registrationName: 'click',
  },
};

var attrs = ['class'];

function createElement(tag, props, children) {
  var element = document.createElement(tag);

  if (typeof children === 'number') {
    return String(children);
  }

  if (props && typeof props === 'object') {
    Object.keys(props).map((p) => {
      if (Object.keys(eventTypes).indexOf(p) !== -1) {
        // Add event
        element.addEventListener(eventTypes[p].registrationName, props[p]);
      }

      if (attrs.indexOf(p) !== -1) {
        // Add attr
        element.setAttribute(p, props[p]);
      }
    });
  }

  if (typeof children === 'string') {
    element.innerText = children;
    return element;
  }

  if (Array.isArray(children)) {
    for (var i = 0; i < children.length; i++) {
      element.appendChild(createElement('div', null, children[i]));
    }
  } else {
    element.appendChild(children);
  }

  return element;
}

function render(nodeList, element) {
  element.appendChild(nodeList);
}

var slomo = {
  createElement,
  render,
};

// App

const getInitialState = () => {
  return {
    count: 0,
  };
};

const reducer = (state = getInitialState(), action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        count: state.count - 1,
      };
    default:
      return state;
  }
};

var store = createStore(reducer, getInitialState());

// ---- Actions

function increment() {
  return {
    type: 'INCREMENT',
  };
}

function decrement() {
  return {
    type: 'DECREMENT',
  };
}

// ----

function renderDOM() {
  slomo.render(
    slomo.createElement('div', null, [
      slomo.createElement('h1', null, 'Counter'),
      slomo.createElement('div', null, [
        slomo.createElement('span', null, store.getState().count),
        slomo.createElement(
          'button',
          {
            class: 'btn',
            onClick: function() {
              store.dispatch(increment());
            },
          },
          'Increment'
        ),
        slomo.createElement(
          'button',
          {
            class: 'btn',
            onClick: function() {
              store.dispatch(decrement());
            },
          },
          'Decrement'
        ),
      ]),
    ]),
    document.getElementById('root')
  );
}

store.subscribe(function(action) {
  console.log(action);
  var rootNode = document.getElementById('root');
  rootNode.removeChild(rootNode.firstChild);
  renderDOM();
});

renderDOM();