Refactor Idea: Alpine can be added to custom elements, with Ponys you get single file vue-like components.

[dschissler]

Alpine.js in custom elements

Combined with Ponys design you get single file vue-like components. The Ponys source is tiny and very easy to understand.

Also HTMX 2.0 alpha 1 supports shadow dom.

document.addEventListener("alpine:init", () => {

  const template = document.createElement("template");
  template.innerHTML = `
    <style>
      span, button {
        font-size: 120%;
      }

      span {
        width: 2rem;
        display: inline-block;
        text-align: center;
      }

      button {
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 6px;
        background-color: blue;
        color: white;
      }
    </style>
    <button @click="dec">-</button>
    <span x-text="counter"></span>
    <button @click="$wc.inc()">+</button>
  `;

  class MyComponent extends HTMLElement {

    // The state must be defined as an object to be reactive
    state = Alpine.reactive({
      counter: this.hasAttribute("start") ? parseInt(this.getAttribute('start')) : 0,
      inc: this.inc.bind(this),
      dec: this.dec.bind(this),
    });

    constructor() {
      super();

      const shadow = this.attachShadow({ mode: "open" });
      shadow.appendChild(template.content.cloneNode(true));

      Alpine.addScopeToNode(shadow,this.state);
      Alpine.initTree(shadow);
    }

    connectedCallback() {
    }

    inc() {
      this.state.counter++;
    }
    dec() {
      this.state.counter--;
    }
  }

  customElements.define("my-reactive-shadow", MyComponent);
});

[gedw99]

Hey, thats 3 things all working together. I agree it can be a powerful pattern.

I think a basic example needs to be done somewhere to see.

I think the pocketbase maintainer propped moving away form Svelte for the PB Admin too, so maybe this is viable pattern for that

[dschissler]

I combined Alpine with the Ponys loader.

[ndt080]

No, not that. It is not necessary to use dubious technologies that 2.5 people use for such projects.
For web components, use Lit.js .

At the same time, what is wrong with Svelte?
Yes, it is problematic to create state change functions (hooks, composables, whatever you want to call them) because reactive variables are bound to the svelte component and cannot be moved outside. But it's still a good, community-supported framework with a lot of developers using it

In my opinion, using web components not to build a library of custom components is a bad idea. Applications built purely on them are too big. Style encapsulation causes a lot of code duplication in open source projects. For example, openremote. At the same time, the very customization of components when reusing them is possible only through css variables or a huge number of html attributes.

Use more commonly known and supported technologies, e.g. React, Preact, Vue, Solid.js