I naively pasted the web component example (<a href="https://apprun.js.org/" rel="nofo

There was an error 1.20.0/2.20.0 release. It is now fixed (<a class="commit-link" data

Yes, please take a look at this example: <a href="https://apprun-web-component.gli

Nice! I think that should be part of the web site. <p dir="auto"

Webcomponent example from https://apprun.js.org/ fails about apprun HOT 4 CLOSED

yysun commented on May 24, 2024

Webcomponent example from https://apprun.js.org/ fails

from apprun.

Comments (4)

yysun commented on May 24, 2024

There was an error 1.20.0/2.20.0 release. It is now fixed (cdbd098). Please try again.

from apprun.

StefanLiebig commented on May 24, 2024

Great now it works. Thanks!

My next attempt was to reuse the web component by creating a second element to get two independent working counters.

...
<body>
  <my-app id='counter'></my-app>
  <my-app id='counter2'></my-app>
  ...

But this does not work as expected. There are now two counters but they are - of course - not independent.
Can the template string approach in the example extended so that it works?

from apprun.

yysun commented on May 24, 2024

Yes, please take a look at this example:
https://apprun-web-component.glitch.me

from apprun.

StefanLiebig commented on May 24, 2024

Nice!

I think that should be part of the web site.

Is that correct?

<html>
<head>
  <meta charset="utf-8">
  <title>Counter as web component</title>
</head>
<body>
  <my-app id='counter1'></my-app>
  <my-app id='counter2'></my-app>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/custom-elements/1.1.2/custom-elements.min.js"></script>
  <script src="https://unpkg.com/apprun@es6/dist/apprun-html.js"></script>
  <script>
    class Counter extends Component {
      constructor({id}) {
        super();
        this.state = 0;
        this.view = state => `<div>
          <h1>${state}</h1>
          <button onclick='${id}.run("-1")'>-1</button>
          <button onclick='${id}.run("+1")'>+1</button>
          </div>`;
        this.update = {
          '+1': state => state + 1,
          '-1': state => state - 1
        };
      }
    }
    app.webComponent('my-app', Counter);
  </script>
</body>
</html>

from apprun.

Recommend Projects