Struct PhantomComponent

pub struct PhantomComponent<T>
where
    T: BaseComponent,
{ /* private fields */ }

A Component to represent a component that does not exist in current implementation.

During Hydration, Yew expected the Virtual DOM hierarchy to match the layout used in server-side rendering. However, sometimes it is possible / reasonable to omit certain components from one side of the implementation. This component is used to represent a component as if a component “existed” in the place it is defined.

Warning

The Real DOM hierarchy must also match the server-side rendered artifact. This component is only usable when the original component does not introduce any additional elements. (e.g.: Context Providers)

A generic parameter is provided to help identify the component to be substituted. The type of the generic parameter is not required to be the same component that was in the other implementation. However, this behaviour may change in the future if more debug assertions were to be introduced. It is recommended that the generic parameter represents the component in the other implementation.

Example

use yew::prelude::*;

#[function_component]
fn ServerApp() -> Html {
    // The Server Side Rendering Application has 3 Providers.
    html! {
        <Provider1>
            <Provider2>
                <Provider3>
                    <Comp />
                </Provider3>
            </Provider2>
        </Provider1>
    }
}

#[function_component]
fn App() -> Html {
    // The Client Side Rendering Application has 4 Providers.
    html! {
        <Provider1>
            <Provider2>
                <Provider3>

                    // This provider does not exist on the server-side
                    // Hydration will fail due to Virtual DOM layout mismatch.
                    <Provider4>
                        <Comp />
                    </Provider4>

                </Provider3>
            </Provider2>
        </Provider1>
    }
}

To mitigate this, we can use a PhantomComponent:

use yew::prelude::*;

#[function_component]
fn ServerApp() -> Html {
    html! {
        <Provider1>
            <Provider2>
                <Provider3>
                    // We add a PhantomComponent for Provider4,
                    // it acts if a Provider4 component presents in this position.
                    <PhantomComponent<Provider4>>
                        <Comp />
                    </PhantomComponent<Provider4>>
                </Provider3>
            </Provider2>
        </Provider1>
    }
}

#[function_component]
fn App() -> Html {
    html! {
        <Provider1>
            <Provider2>
                <Provider3>

                    // Hydration will succeed as the PhantomComponent in the server-side
                    // implementation will represent a Provider4 component in this position.
                    <Provider4>
                        <Comp />
                    </Provider4>

                </Provider3>
            </Provider2>
        </Provider1>
    }
}

Trait Implementations

impl<T> BaseComponent for PhantomComponent<T>

where T: BaseComponent + 'static, Self: 'static,

type Message = ()

The Component’s Message.

type Properties = ChildrenProps

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl<T> Debug for PhantomComponent<T>

where T: BaseComponent,

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl<T> FunctionProvider for PhantomComponent<T>

where T: BaseComponent,

type Properties = ChildrenProps

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.