This is unreleased documentation for Yew Next version.
For up-to-date documentation, see the latest version on docs.rs.

Struct yew::html::PhantomComponent

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

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§

source§

impl<T> BaseComponent for PhantomComponent<T>
where T: BaseComponent + 'static, Self: 'static,

source§

type Message = ()

The Component’s Message.
source§

type Properties = ChildrenProps

The Component’s Properties.
source§

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

Creates a component.
source§

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

Updates component’s internal state.
source§

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

React to changes of component properties.
source§

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

Returns a component layout to be rendered.
source§

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

Notified after a layout is rendered.
source§

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

Notified before a component is destroyed.
source§

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

Prepares the server-side state.
source§

impl<T> Debug for PhantomComponent<T>
where T: BaseComponent,

source§

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

Formats the value using the given formatter. Read more
source§

impl<T> FunctionProvider for PhantomComponent<T>
where T: BaseComponent,

source§

type Properties = ChildrenProps

Properties for the Function Component.
source§

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

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

Auto Trait Implementations§

§

impl<T> !Freeze for PhantomComponent<T>

§

impl<T> !RefUnwindSafe for PhantomComponent<T>

§

impl<T> !Send for PhantomComponent<T>

§

impl<T> !Sync for PhantomComponent<T>

§

impl<T> Unpin for PhantomComponent<T>
where T: Unpin,

§

impl<T> !UnwindSafe for PhantomComponent<T>

Blanket Implementations§

source§

impl<T> Any for T
where T: 'static + ?Sized,

source§

fn type_id(&self) -> TypeId

Gets the TypeId of self. Read more
source§

impl<T> Borrow<T> for T
where T: ?Sized,

source§

fn borrow(&self) -> &T

Immutably borrows from an owned value. Read more
source§

impl<T> BorrowMut<T> for T
where T: ?Sized,

source§

fn borrow_mut(&mut self) -> &mut T

Mutably borrows from an owned value. Read more
source§

impl<T> From<T> for T

source§

fn from(t: T) -> T

Returns the argument unchanged.

§

impl<T> Instrument for T

§

fn instrument(self, span: Span) -> Instrumented<Self>

Instruments this type with the provided [Span], returning an Instrumented wrapper. Read more
§

fn in_current_span(self) -> Instrumented<Self>

Instruments this type with the current Span, returning an Instrumented wrapper. Read more
source§

impl<T, U> Into<U> for T
where U: From<T>,

source§

fn into(self) -> U

Calls U::from(self).

That is, this conversion is whatever the implementation of From<T> for U chooses to do.

source§

impl<T> IntoPropValue<Option<T>> for T

source§

fn into_prop_value(self) -> Option<T>

Convert self to a value of a Properties struct.
source§

impl<T> IntoPropValue<T> for T

source§

fn into_prop_value(self) -> T

Convert self to a value of a Properties struct.
source§

impl<T, U> TryFrom<U> for T
where U: Into<T>,

source§

type Error = Infallible

The type returned in the event of a conversion error.
source§

fn try_from(value: U) -> Result<T, <T as TryFrom<U>>::Error>

Performs the conversion.
source§

impl<T, U> TryInto<U> for T
where U: TryFrom<T>,

source§

type Error = <U as TryFrom<T>>::Error

The type returned in the event of a conversion error.
source§

fn try_into(self) -> Result<U, <U as TryFrom<T>>::Error>

Performs the conversion.
§

impl<T> WithSubscriber for T

§

fn with_subscriber<S>(self, subscriber: S) -> WithDispatch<Self>
where S: Into<Dispatch>,

Attaches the provided Subscriber to this type, returning a [WithDispatch] wrapper. Read more
§

fn with_current_subscriber(self) -> WithDispatch<Self>

Attaches the current default Subscriber to this type, returning a [WithDispatch] wrapper. Read more