Reusable component with private and public handlers

[malya80]

Hello!
First of all thanks for the good framework.

Taking into account the basic example on the first page of Github, could you explain how can I create reusable component that will have private handlers and public, please.
For example I want to create a Counter component. After that I want to create a set of these Counters.
Each of the counters should have internal handlers and several public. If I need increment only one counter I invoke private or personal handler and if I want to increment all counters I invoke public handler that affects all counters via app.run.

Thank you in advance.

[yysun]

You can use this.run for private handlers in component and can use app.run and the event name with # for public handlers.

class CounterComponent extends Component {
  state = 0;
  view = (state) => <div>
    <h1>{state}</h1>
    <button onclick={() => this.run("-1")}>-1</button>
    <button onclick={() => this.run("+1")}>+1</button>
    <button onclick={() => app.run("#-1")}>-1 All</button>
    <button onclick={() => app.run("#+1")}>+1 All</button>
  </div>;
  update = {
    '+1': (state) => state + 1,
    '-1': (state) => state - 1,
    '#+1': (state) => state + 1,
    '#-1': (state) => state - 1
  };
}

[malya80]

I am using HTML string. I was not able to invoke a handler via this.run.

    class Counter extends Component {
      constructor() {
        super();
        this.state = 0;
        this.view = state => `<div>
          <h1>${state}</h1>
          <button onclick="${(e)=>this.run('-1')}">-1</button>
          <button onclick='counter.run("+1")'>+1</button>
          </div>`;
        this.update = {
          '+1': state => state + 1,
          '-1': state => state - 1
        };
      }
    }
    app.webComponent('my-app', Counter);

Can I do the same with HTML strings?

Thanks!

[yysun]

Yes, you can. Check out this example:
https://best-canid.glitch.me/

[malya80]

Excellent example!
Many thanks for your help!

[malya80]

One more question.
Can I implement the same functionality not using Component class and classes?

[yysun]

Component makes the events private. Without using Component, all events are global and public. You will need to define and handle the events carefully.
https://funny-era.glitch.me/

[malya80]

Thank you!