[QUESTION] Reusable Components

[go4cas]

Very interesting concept! How would one create reusable named components?

[crutchcorn]

Nothing yet! I have some ideas on this, but it requires a bit of fiddling, truth be told.

I'm leaning towards Web Components + HTML string templates being the way to go.

Using Vite, it might look something like:

<!-- counter.component.html -->
<button data-on-click="updateCount()">Add one to {{count.value}}</button>

/* counter.component.ts */
import template from "./counter.component.html?raw";
function Counter() {
  let count = createState(
    0
  );

  function updateCount() {
    count.value++;
  }

  return {
    count,
    updateCount
  }
}

Counter.selector = "app-counter";
Counter.template = template;
registerComponent(Counter);

/* app.component.ts */
function App() {
}

// Register with the same name as `data-island-comp`
App.selector = "app-app";
App.template = `<app-counter></app-counter>`;
registerComponent(App);
render()