[Feature Request] Implement a dependency injection system (Context)

[askbeka]

When developing applications, often I find that I need to pass some property down to the children, that are very deeply nested, so I have to pass those properties duplicating in each component in the tree, ugly but doable.

But there are cases when I do not know which children, my component will have in author time, so I have to provide some sort of a context for those child components, when they are injected to the DOM, so that they are be able to access those properties.

I have two solutions in mind:

1. Events

DOM has a very nice feature solving this. Events, especially CustomEvents which are unlike just Events are synchronous and can pass along some data, which can be an object, which means it can be used as shared memory for message passing.

consumer

const data = { /* messages go here */};
this.dispatchEvent(new CustomEvent('gimme-something', { detail: data }));
if (data.message) {
  console.log(data.message);
  console.log('thanks');
} else {
  console.log('no one responded')
}

provider

this.addEventListener('gimme-something', (e) => {
  e.detail.message = 'here you go';
  e.stopPropagation();
});

This is very powerful concept. It can be used in all sorts of ways:

• Theme
• Localisation
• Analytics
• any many other ways.
  It can be a whole different way of implementing components.
  Some can have components shipped with analytics, themeing, localisation implemented,
  And when injected in DOM, they will operate based on the context. And applications can do all sorts of logic like optimizations and migrations on upper level, since there is an extra layer of indirection in child parent communication.

We already do that a lot in browsers, but we just use events directly.
I want to have something generic, with well defined API and predictable logic.

There are some solutions, like React Context API, which has proven this concept to be useful.

2. import-maps

There is another way to inject dependencies, using import maps. Apps can control what each module gets. But API is not stable yet.
But this approach is flat (does not use hierarchical info, DOM). So parent has to have some knowledge about parent child relationship somewhere else.

[erikkroes]

Hi,

We are closing this issue because we're changing the way we handle feature requests. Your issue will get the "votes needed" label, and people can add 👍 reactions to vote and show interest. It will be reopened when this feature gets picked up.

This we way we clearly focus on bugs in our open issues. At the same time we can see what community interest there is for new features.

Thanks!