Hybrids SSR about hybrids HOT 4 CLOSED

An example if you need

// hello.js
class Hello extends HTMLElement {
  constructor() {
    super();
    if (!this.shadowRoot) {
      this.attachShadow({ mode: "open" }).innerHTML = `
        Hello World from SSR Web Components <slot></slot>!
      `;
    }
  }
}
customElements.define("x-hello", Hello);
module.exports = Hello;

server.route({
  method: "GET",
  path: "/hello",
  handler(request, response) {
    const hello = `./pages/hello.js`;
    const Hello = fs.existsSync(hello)
      ? require(hello)
      : require("./pages/404.js");
    return render(Object.assign(new Hello(), request.params));
  }
});

This is how we do with Web Components, but I need a class to do it, if hybrids' define methods returned a class, this would be easy

from hybrids.

Yes, it does, but only if you use define function. However, it not only creates a class, but also use customElements.define to register it in the document. I think you want to avoid it on the server side.

When I was designing API, I haven't SSR in mind, so I assumed that the library will be only executed in the browser environment. Because of that, some of the factories calls DOM APIs on the module level, for example parent factory here. Also, I encourage you to look at the #18 issue. It explains lazy approach to render in the hybrids. I think that your skatejs solution would produce empty internal structure (if you would have your required class).

Of course, you can experiment with SSR if you want. With the current code you need to polyfill document.addEventListener and customElements.define methods - they don't have to do anything, just define them in the global scope. With those changes, you can call define function from the hybrids, and this function returns class constructor, which you want.

from hybrids.

I tried doing it with Hybrids, and an error was thrown

from hybrids.

I didn't mean that it is easy :P. Unfortunately, I have no time now to focus on SSR. I am in the middle of a big rewrite of the documentation.

What I can recommend you is to follow errors and try to create structures that will fix them. The attached screenshot shows that event listener callback requires the event argument to support composedPath method.

I think you may try to use dom-js or another project, which adds DOM API to the nodejs.

If you find a solution feel free to re-open and show your results! Happy coding!

from hybrids.