Potch's Cool Framework

potchs-cool-framework.js

// potch's cool framework!

export const signal = value => {
  const subs = new Set();
  const set = v => {
    value = v;
    subs.forEach(s => s(value));
  };
  return {
    set value(v) { set(v) },
    get value() { return value },
    watch: fn => {
      subs.add(fn);
      return () => subs.delete(fn);
    }
  }
};
export const computed = (fn, ...deps) => {
  const s = signal(fn(...deps));
  deps.forEach(d => d.watch(v => s.value = fn(...deps)));
  return s;
}

export const text = signal => el => {
  const node = document.createTextNode(signal.value);
  signal.watch(v => node.textContent = v);
  el.append(node);
};
export const prop = (prop, signal) => el => {
  el[prop] = signal.value;
  signal.watch(v => el[prop] = v);
}

export const $ = (selector, scope = document) => scope.querySelector(selector);
export const $$ = (selector, scope = document) => [...scope.querySelectorAll(selector)];
export const _ = (tag, props, ...children) => {
  const el = Object.assign(document.createElement(tag), props);
  children.forEach(c => typeof c === 'function' ? c(el) : el.append(c));
  return el;
}

sample-app.js

import { _, text, prop, signal, computed } from './potchs-cool-framework.js'

const score = signal(0);
const name = signal("potch");
const color = computed(score => {
  return score.value >= 5 ? 'color: green' : 'color: red'
}, score);

document.body.append(
  _('div', { href: '#' },
    _('input', {
      value: name.value,
      type: 'text',
      oninput: e => name.value = e.target.value
  	}),
    _('p', {},
      prop('style', color),
      'hi ',
      text(name),
      ', your score is ',
      text(score)
     ),
    _('button', {
      onclick: e => score.value = score.value + 1
    }, 'click me')
  )
);