Event Handling on Server-Components doesnt work

[prateekjadhwani]

I tried to run the following code

var DemoComponent = components.newElement();
DemoComponent.createdCallback = function (document) {
    this.style.color = 'blue';
    this.addEventListener('click', ()=> {
        console.log('hello');
        this.style.color = 'red';
    });
    this.innerHTML = "Hello";
};
components.registerElement("demo-component", { prototype: DemoComponent });

It did show me the Hello text in blue color, but it failed to trigger the event.

[pimterry]

If you want to use click events server-side, you definitely can, but you'll need to explicitly trigger them. There's no mouse to do the clicking otherwise. Check out https://tonicdev.com/57867105c8bce912001b80e0/57974db8e7195a1200952a76 for an example, where I'm triggering the click manually. You can do this from inside this component, or from any other component (calling document.querySelector("demo-component").click() for example) to make components that work together.

Or is it that you're expecting the click handler to be registered and working when the page loads on the client side? Server components is just a tool for building HTML; in-memory state of the HTML (such as registered event handlers) can't be carried across between the server and the client. If you want that, you'll want to register the element client and server side, and render it on both. https://github.com/pimterry/leaflet-map-server-component/blob/master/src/leaflet-map.js is an example of this (though it's a little complicated).

Does that make sense?

[prateekjadhwani]

Yes, i was think server components to be more like a full fledged web-component whose html can be built on the serverside but the events would register on the client side. I guess I got my answer for now.

Thanks for the answer

[pimterry]

Ok, sure! Yes, take a look at the leaflet-map example above to see that in action.

You can do that as there with just one file, probably using UMD as there so you can load the same file easily everywhere. Alternatively you can have write two component definitions, one that does server-side rendering (setting 'color: blue' in your example), and one that adds event handlers for later changes, and use the first server-side and the 2nd client-side.

Which is best for you most depends on whether you need to repeat the initial rendering steps later: if you do need to re-render from scratch client-side you'll usually want to share the code completely between the client and server, but if not you can keep all the rendering server-side, and just add extra interactivity separately.

Good luck! Let me know if you have other questions.