Component support feature

[raghav00p]

Imagine Alpine.js had native support for component imports:

index.html

<x-component src="counter.html"></x-component>

counter.html

<div x-data="{count: 0}">
  <button @click="count++">Increment</button>
  <div x-text="count"></div>
</div>

Below is tiny helper that will just work fine

// add this file to index.html
// create x-components with directory
// nesting available
/* innerHTML will kill inline js but Alpine.data(), Alpine.bind(), Alpine.store().... will work
Additionally for single Alpine.store() use ->
contribute('store-name' , {object piece that will contribute to Alpine.store('store-name')})
 Persists, usefull for components */

const ran = new Set();

function contribute(name, slice) {
  if (!Alpine.store(name)) Alpine.store(name, {});
  const store = Alpine.store(name);
  Object.assign(store, slice);
  if (store.init) { store.init(); delete store.init; } // run once, then drop it
}
window.contribute = contribute;

class Component extends HTMLElement {
  async connectedCallback() {
    const src = this.getAttribute("src");
    this.innerHTML = await fetch(src).then(r => r.text());

    this.querySelectorAll("script").forEach((script, i) => {
      const key = `${src}#${i}`;
      script.remove();
      if (!ran.has(key)) {
        ran.add(key);
        new Function("Alpine", "contribute", script.textContent)(Alpine, contribute);
      }
    });

    //if (window.Alpine) Alpine.initTree(this);
  }
}
customElements.define("x-component", Component);

[ekwoka]

seems weird to check if Alpine exists after already using it lol

But anyway, yeah, it could be nice, but there's a lot of differences in how people would want it to work.

Like should it be based on html imports or just script imports? As the primary design?

You also wouldn't need to call initTree explicitely, since it will be handled by the mutation observer...

though potentially asynchronously...