app.js

const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);

function setTexts({ vars, target, all }) {
  all = all || false
  
  for (let varName in vars) {
    if (all || vars[varName].set || isFunction(vars[varName].value)) {
      console.log('Updating elements for \'' + varName + '\'a')
      
      Array.from(target.querySelectorAll('*[data-text="' + varName + '"]')).forEach(el => {
        const { value } = vars[el.dataset.text]
        let text = value
        
        if (isFunction(value)) {
          text = value({ vars: getVarsValues(vars) })
        }
        
        el.innerText = text
      })
    }
  }
}

function setValues({ vars, target, element, all }) {
  element = element || null
  all = all || false
  
  for (let varName in vars) {
    if (all || vars[varName].set) {
      [...target.querySelectorAll('*[data-value="' + varName + '"]')].forEach((el) => {
        if (element !== el) {
          el.value = vars[varName].value
        }
      })
    }
  }
}

function detectChangedVars(oldVars, newVars) {
  console.log(oldVars, newVars)
  for (let varName in oldVars) {
    if (oldVars[varName].value !== newVars[varName]) {
      let old = oldVars[varName]
      oldVars[varName] = {set: true, value: old.transformer(newVars[varName]), transformer: old.transformer}
    }
  }
}

function executeVarsEvents({ vars, target, all }) {
  all = all || false
  setTexts({ vars, target, all })
  setValues({ vars, target, all })
}

function getVarsValues(vars) {
  const newObj = {}
  
  for (let varName in vars) {
    newObj[varName] = vars[varName].value
  }
  
  return newObj
}

function setOnClicks({ vars, functions, target }) {
  [...target.querySelectorAll('*[data-click]')].forEach((el) => {
    el.addEventListener('click', () => {
      const varscpy = functions[el.dataset.click]({
        root: target,
        eventTarget: el,
        vars: getVarsValues(vars)
      })
      detectChangedVars(vars, varscpy)
      
      executeVarsEvents({ vars, target })
    })
  })
}

function setVar(vars, varName, value) {
  const newVars = {...vars}
  
  newVars[varName] = {
    set: true,
    value
  }
  
  return newVars
}

function setValueEvents({ vars, target }) {
  [...target.querySelectorAll('*[data-value]')].forEach((el) => {
    el.addEventListener('keyup', () => {
      const newVars = getVarsValues(vars)
      newVars[el.dataset.value] = el.value
      detectChangedVars(vars, newVars)
      
      executeVarsEvents({ vars, target })
    })
  })
}

function getAppVars(vars, transformers) {
  const newVars = {}
  
  Object.keys(vars).map((varName) => {
    let transformer = transformers[varName] !== undefined
      ? transformers[varName]
      : value => value
    
    newVars[varName] = {
      set: false,
      value: transformer(vars[varName]),
      transformer
    }
  })
  
  return newVars
}

function App({ appVars, functions, target, transformers }) {
  target = target || document
  transformers = transformers || {}
  
  const vars = getAppVars(appVars, transformers)
  
  executeVarsEvents({ vars, target, all: true })
  setValueEvents({ vars, target })
  setOnClicks({ vars, functions, target })
}