Interesting project with similarities to Crank: Whatsup

[canadaduane]

I thought this project was interesting in its design choices, which reminded me of Crank.JS:

https://whatsup.js.org/docs/intro

Not sure if it is valuable, or directly useful, but interesting nonetheless.

[unodgs]

Looking at lifecycle example here https://whatsup.js.org/docs/components/lifecycle I would say it's a copy of crank

[brainkim]

Converted to a discussion because there’s nothing actionable for me.

Whatsup definitely seems similar to Crank! It has the generator component pattern, which is, in my humble opinion, a great idea. But it uses observables for component state. The interesting thing about saying observables are the state of the component, is that the component is still stateful, and the generator scope can still have state in it which is not tracked in an observable, so the observable is just a fancy extra layer on top of the statefulness of generators.

function* App() {
    const counter = observable(0)
    const increment = () => counter(counter() + 1)
    let i = 0;

    while (true) {
        // this is state which is not tracked by an observable
        i++;
        yield (
            <div>
                <p>You click {counter()} times</p>
                <button onClick={increment}>Click me</button>
            </div>
        )
    }
}

The advantage of using observables is that all state is formally declared. The disadvantage is that you have to use observables. But seriously, the other advantage is that observables can be threaded directly into elements to update only that prop:

function App() {
    const className = observable<'red' | 'green'>('red')
    const handleClick = () => {
        const newValue = className() === 'red' ? 'green' : 'red'
        className(newValue)
    }

    while (true) {
        yield(
            <button className={className} onClick={handleClick}>
                Click me
            </button>
        )
    }
}

render(<App />)

This is performance thing I wish we could have but we can’t. Crank has to rely on wholesale element diffing, for better or worse.

One thing I’ve implemented in Crank which vindicates my decision to use props iterators, is to have the props iterator close when components are unmounted:

function* Timer() {
  let seconds = 0;
  const interval = setInterval(() => this.refresh(() => seconds++), 1000);
  for ({} of this) {
    yield <div>Seconds: {seconds}</div>;
  }
  clearInterval(interval);
}

Relying on yields being returned and try/finally is an extra block that I don’t want to write, and while (true) is just annoying, scary, and gross looking. However, because whatsups is based on observables, you can’t have a props observable, because you can’t yield from inside the observable because it is a callback-based API. Ultimately I think generators and props iterators and manual refresh() wins out in terms of ergonomics.

Sorry for not replying sooner!