1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
//! Components wrapped with context including properties, state, and link
mod children;
mod lifecycle;
mod properties;
mod scope;
use super::Html;
pub use children::*;
pub use properties::*;
pub(crate) use scope::Scoped;
pub use scope::{AnyScope, Scope, SendAsMessage};
use std::rc::Rc;
/// The [`Component`]'s context. This contains component's [`Scope`] and and props and
/// is passed to every lifecycle method.
#[derive(Debug)]
pub struct Context<COMP: Component> {
pub(crate) scope: Scope<COMP>,
pub(crate) props: Rc<COMP::Properties>,
}
impl<COMP: Component> Context<COMP> {
/// The component scope
#[inline]
pub fn link(&self) -> &Scope<COMP> {
&self.scope
}
/// The component's props
#[inline]
pub fn props(&self) -> &COMP::Properties {
&*self.props
}
}
/// Components are the basic building blocks of the UI in a Yew app. Each Component
/// chooses how to display itself using received props and self-managed state.
/// Components can be dynamic and interactive by declaring messages that are
/// triggered and handled asynchronously. This async update mechanism is inspired by
/// Elm and the actor model used in the Actix framework.
pub trait Component: Sized + 'static {
/// Messages are used to make Components dynamic and interactive. Simple
/// Component's can declare their Message type to be `()`. Complex Component's
/// commonly use an enum to declare multiple Message types.
type Message: 'static;
/// The Component's properties.
///
/// When the parent of a Component is re-rendered, it will either be re-created or
/// receive new properties in the context passed to the `changed` lifecycle method.
type Properties: Properties;
/// Called when component is created.
fn create(ctx: &Context<Self>) -> Self;
/// Called when a new message is sent to the component via it's scope.
///
/// Components handle messages in their `update` method and commonly use this method
/// to update their state and (optionally) re-render themselves.
///
/// Returned bool indicates whether to render this Component after update.
#[allow(unused_variables)]
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
false
}
/// Called when properties passed to the component change
///
/// Returned bool indicates whether to render this Component after changed.
#[allow(unused_variables)]
fn changed(&mut self, ctx: &Context<Self>) -> bool {
true
}
/// Components define their visual layout using a JSX-style syntax through the use of the
/// `html!` procedural macro. The full guide to using the macro can be found in [Yew's
/// documentation](https://yew.rs/concepts/html).
///
/// Note that `view()` calls do not always follow a render request from `update()` or
/// `changed()`. Yew may optimize some calls out to reduce virtual DOM tree generation overhead.
/// The `create()` call is always followed by a call to `view()`.
fn view(&self, ctx: &Context<Self>) -> Html;
/// The `rendered` method is called after each time a Component is rendered but
/// before the browser updates the page.
///
/// Note that `rendered()` calls do not always follow a render request from `update()` or
/// `changed()`. Yew may optimize some calls out to reduce virtual DOM tree generation overhead.
/// The `create()` call is always followed by a call to `view()` and later `rendered()`.
#[allow(unused_variables)]
fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {}
/// Called right before a Component is unmounted.
#[allow(unused_variables)]
fn destroy(&mut self, ctx: &Context<Self>) {}
}