feat: Implementation of context protocol

[TheCelavi]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Lit implements context protocol, see:

• Context protocol: https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
• Lit implementation: https://lit.dev/docs/data/context

Maybe it is a time for StencilJS to join the club and provide its own implementation.

Describe the Use Case

Use cases are well described here: https://lit.dev/docs/data/context/#example-use-cases there is no need to repeat those, just to emphasise that context would be mostly used as replacement for state tunnel when defining local context state in order to avoid prop drilling.

Further possibilities are to create bindings for popular frameworks. Per example, in Angular, Stencil components could query context from DI, in Vue from provider and so on...

Of course - how awesome would be to have both Lit and Stencil components on same page using same context state/service?

Describe Preferred Solution

Implementation could be copied from Lit, with exception that for stencil preferred way to query context would be by using @State() instead of @prop()

@State()
@Consumer(MyService)
public prop?: MyService;

However, this must be allowed too because developer should be allowed to pass dependency as prop :

@Prop()
@Consumer(MyService)
public prop?: MyService;

Describe Alternatives

Alternative approach would be to provide external library with implementation of such functionality.

Related Code

See Lit.

Additional Information

No response

[alicewriteswrongs]

Hey @TheCelavi thanks for filing this feature request! It's an interesting idea and for sure is something to consider how this would fit in to Stencil. I've just labelled this as a feature request so we can gauge community interest in the feature.

Thanks for writing this up!

[TheCelavi]

@alicewriteswrongs we decided to build it, it should not be hard. However, certain changes are required to provide library with consistent behaviour.

Therefore, I have opened discussion explaining everything: #4872

Would you be willing to check it out and tell me what you think? Thanks.