Webcomponent example from https://apprun.js.org/ fails
StefanLiebig opened this issue · comments
I naively pasted the web component example (https://apprun.js.org/) into a somefile.html and than opened it with the browser.
The counter and the buttons will be displayed but clicking the buttons does not have an effect. In the console log I see an error when loading the html:
TypeError: this._component.mounted is not a function
and when clicking the buttons I get:
TypeError: counter.run is not a function
There is probably something that I am missing.
There was an error 1.20.0/2.20.0 release. It is now fixed (cdbd098). Please try again.
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?
Yes, please take a look at this example:
https://apprun-web-component.glitch.me
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>