Provide & Inject for Prop Drilling Like Vue Components

[SamuNatsu]

Body

Background & Motivation

It is annoying that I should pass the props again and again from parent to their children and children's children using Astro components.

So some props drilling ways may help, Vue's Provide/Inject API is a great example.

It is not like contexts, so it would not have circular references, injects would only accept the values provided by ancestors.

For those who provides the same key, just overwrite the ancestor's value, or provide an option to deceide whether to overwrite it. Maybe some errors or warnings should be throwed when the overwrite occurs.

Example

In ancestor:

provide(/* key */ 'message', /* value */ 'hello');
provide(/* key */ 'message', /* value */ 'world', /* Options */ { overwite: true });

In descendants:

const message = inject(/* key */ 'message');

[florian-lefebvre]

There's a community package https://github.com/astro-community/context

[BeanWei]

It is only valid for static output mode.

[florian-lefebvre]

I didn't know, TIL!