matschik / component-party.dev

🎉 Web component JS frameworks overview by their syntax and features
https://component-party.dev
MIT License
2.56k stars 229 forks source link

Content: add `Component Composition > Context` #42

Open matschik opened 2 years ago

matschik commented 2 years ago

React: https://fr.reactjs.org/docs/hooks-reference.html#usecontext Svelte: https://svelte.dev/tutorial/context-api Vue 3: SolidJS: https://www.solidjs.com/tutorial/stores_context

stondbringa commented 2 years ago

The equivalent for Vue 3 is Provide/Inject: https://vuejs.org/guide/components/provide-inject.html

matschik commented 1 year ago

React & Svelte examples are now available

mroeling commented 1 year ago

Hi @matschik ,

Was trying to understand the goal of these code snippets. Could you give a bit more context (no pun intended) of what is the goal of this example? From a Aurelia point of view, since it is class based, things can be done by using Dependency Injection. Another option is using the Event system. Using aurelia-store (i.e. RxJs state management) it is also possible.

matschik commented 1 year ago

Explained by React docs: https://beta.reactjs.org/learn/passing-data-deeply-with-context Explained by Svelte docs: https://svelte.dev/tutorial/context-api Explained by Vue docs: https://vuejs.org/guide/components/provide-inject.html

Context VS Store (from Svelte link)

Contexts and Stores seem similar. They differ in that stores are available to any part of an app, while a context is only available to a component and its descendants. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others. In fact, you might use the two together.

Additionnally,store is planned for Component Party.

harshilparmar commented 1 year ago

For Angular , Is it to good to mention service in this place? Yeah there is no such concept of context but using service we can eventually achieve that behavior.