feat(mount): pass attributes directly to component

[sebkolind]

This is a proposal that allows passing attributes directly to a component via the mount function. It is useful for passing data to the component, that is available immediately on mount. Below is an example usage, where the parent component opens a modal at the click of a button.

The use case could also be if you fetch data from an endpoint in another component, and mounts a component with data from the response.

Usage

const Modal: Component = {
  view({ el }) {
    return div([
      p("I am the modal you are looking for."),
      // The attributes are now available on the `el`.
      p(`This is the id attribute: ${el.dataset.id}`),
      p(`This is the foo attribute: ${el.dataset.foo}`),
    ]);
  },
};

const DynamicMount: Component = {
  view() {
    return div([
      p("I am the parent component."),
      button("Open modal", {
        onclick() {
          mount(
            document.querySelector(".modal"),
            Modal,
            // Pass attributes to the component
            {
              ["data-id"]: "bar",
              ["data-foo"]: "bar",
            },
          );
        },
      }),
    ]);
  },
};