feat: <Provider/> component to fix context shadowing (closes #2038) (…

…#2040)

leptos/src/lib.rs

@@ -192,9 +192,11 @@ mod error_boundary;
 pub use error_boundary::*;
 mod animated_show;
 mod for_loop;
+mod provider;
 mod show;
 pub use animated_show::*;
 pub use for_loop::*;
+pub use provider::*;
 #[cfg(feature = "experimental-islands")]
 pub use serde;
 #[cfg(feature = "experimental-islands")]

leptos/src/provider.rs

@@ -0,0 +1,40 @@
+use leptos::*;
+
+#[component]
+/// Uses the context API to [`provide_context`] to its children and descendants,
+/// without overwriting any contexts of the same type in its own reactive scope.
+///
+/// This prevents issues related to “context shadowing.”
+///
+/// ```rust
+/// # use leptos::*;
+/// #[component]
+/// pub fn App() -> impl IntoView {
+///     // each Provider will only provide the value to its children
+///     view! {
+///         <Provider value=1u8>
+///             // correctly gets 1 from context
+///             {use_context::<u8>().unwrap_or(0)}
+///         </Provider>
+///         <Provider value=2u8>
+///             // correctly gets 2 from context
+///             {use_context::<u8>().unwrap_or(0)}
+///         </Provider>
+///         // does not find any u8 in context
+///         {use_context::<u8>().unwrap_or(0)}
+///     }
+/// }
+/// ```
+pub fn Provider<T>(
+    /// The value to be provided via context.
+    value: T,
+    children: Children,
+) -> impl IntoView
+where
+    T: Clone + 'static,
+{
+    run_as_child(move || {
+        provide_context(value);
+        children()
+    })
+}

leptos_reactive/src/context.rs

@@ -84,7 +84,29 @@ use std::any::{Any, TypeId};
 /// that was provided in `<Parent/>`, meaning that the second `<Child/>` receives the context
 /// from its sibling instead.
 ///
-/// This can be solved by introducing some additional reactivity. In this case, it’s simplest
+/// ### Solution
+///
+/// If you are using the full Leptos framework, you can use the [`Provider`](leptos::Provider)
+/// component to solve this issue.
+///
+/// ```rust
+/// # use leptos::*;
+/// #[component]
+/// fn Child() -> impl IntoView {
+///     let context = expect_context::<&'static str>();
+///     // creates a new reactive node, which means the context will
+///     // only be provided to its children, not modified in the parent
+///     view! {
+///         <Provider value="child_context">
+///             <div>{format!("child (context: {context})")}</div>
+///         </Provider>
+///     }
+/// }
+/// ```
+///
+/// ### Alternate Solution
+///
+/// This can also be solved by introducing some additional reactivity. In this case, it’s simplest
 /// to simply make the body of `<Child/>` a function, which means it will be wrapped in a
 /// new reactive node when rendered:
 /// ```rust