Component state?

[Rasmus Schultz]

I'm taking another look at AppRun after more than a year. I love the component concept with the state/view/update approach! So I was pretty excited to try this out :-)

Just trying this out on the playground for now.

So I took the "parent/child" and the Counter component example from the docs, and I get something like this:

class Counter extends Component {
  state = 0;
  view = state => (
    <div>
      <h1>{state}</h1>
      <button $onclick='-1'>-1</button>
      <button $onclick='+1'>+1</button>
    </div>
  );
  update = {
    '+1': state => state + 1,
    '-1': state => state - 1
  };
}

class App extends Component {
  state = {};
  view = state => (
    <div>
      <Counter />
    </div>
  );
  update = {};
}

// new Counter().start(document.body); // works fine

new App().start(document.body); // doesn't maintain state?

I thought I was following the documentation basically straight up - but it doesn't work. The Counter instance either doesn't maintain state, doesn't update, or doesn't respond to the $onclick messages - I can't tell which. There are no error messages in the console or anything, it just doesn't update.

Inspecting the DOM, I don't see any event-handlers attached to the click event on the button elements:

Compare this with mounting the Counter component directly, which works fine:

What am I missing? 🤔

[Yiyi Sun]

It looks like the new $onclick directive is not working in the child component. The old fashion onclick:

<button onclick={_=>this.run('-1')}>-1</button>
<button onclick={_=>this.run('+1')}>+1</button>

Will fix it.

[Yiyi Sun]

It's fixed now in 1.21.6/2.21.6.
https://apprun.js.org/#play/11

[Rasmus Schultz]

That helps - but if I add some state to the parent component, if the parent component updates, all the child components seem to stop working?

    class Counter extends Component {
      state = 0;
      view = state => (
        <div>
          <h1>{state}</h1>
          <button $onclick='-1'>-1</button>
          <button $onclick='+1'>+1</button>
        </div>
      );
      update = {
        '+1': state => state + 1,
        '-1': state => state - 1
      };
    }

    class App extends Component {
      state = 0;
      view = state => (
        <div>
          <button $onclick='+1'>{state}</button>
          <hr/>
          <Counter state={100} />
          <Counter />
          <Counter />
        </div>
      );
      update = {
        '+1': state => state + 1,
      };
    }

    new App().start(document.body);

[Yiyi Sun]

Thank you again for submitting issues. It is fixed in 1.21.7/2.21.7
https://apprun.js.org/#play/11