// 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;
}