Replace Model with App or MyComponent (#2336)

`Model` is ambiguous and not a user-friendly name.
Some of the newer docs are already referring to the root component as
`App`.

This PR follows this naming scheme:
 - `App` for a root component
 - `MyComponent` for an arbitrary component

This naming is inspired by the React docs.

i18n references were not changed. They need a larger rewrite which will
go in a separate PR.

CHANGELOG.md

@@ -550,18 +550,18 @@ This is the main painful breaking change. It applies to both element listeners a
 
 Before:
 ```rust
-struct Model;
+struct MyComponent;
 
 enum Msg {
     Click,
 }
 
-impl Component for Model {
+impl Component for MyComponent {
     type Message = Msg;
     type Properties = ();
 
     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Model
+        MyComponent
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -581,7 +581,7 @@ impl Component for Model {
 
 After:
 ```rust
-struct Model {
+struct MyComponent {
   link: ComponentLink<Self>,
 }
 
@@ -589,12 +589,12 @@ enum Msg {
     Click,
 }
 
-impl Component for Model {
+impl Component for MyComponent {
     type Message = Msg;
     type Properties = ();
 
     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Model { link }
+        MyComponent { link }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -653,7 +653,7 @@ was confusing and restrictive and is now a thing of the past!
 
 Before:
 ```rust
-impl Component for Model {
+impl Component for MyComponent {
     // ...
 
     fn view(&self) -> Html<Self> {
@@ -664,7 +664,7 @@ impl Component for Model {
 
 After:
 ```rust
-impl Component for Model {
+impl Component for MyComponent {
     // ...
 
     fn view(&self) -> Html {
@@ -688,7 +688,7 @@ cloned is when a wrapper component re-renders nested children components.
   - The `html!` macro now accepts a `Callback` for element listeners. [[@jstarry], [#777](https://github.com/yewstack/yew/pull/777)]
 
   ```rust
-  struct Model {
+  struct MyComponent {
       onclick: Callback<ClickEvent>,
   }
 
@@ -696,12 +696,12 @@ cloned is when a wrapper component re-renders nested children components.
       Click,
   }
 
-  impl Component for Model {
+  impl Component for MyComponent {
       type Message = Msg;
       type Properties = ();
 
       fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-          Model {
+          MyComponent {
               onclick: link.callback(|_| Msg::Click),
           }
       }
@@ -875,12 +875,12 @@ cloned is when a wrapper component re-renders nested children components.
 
     Before:
     ```rust
-    impl Component for Model {
+    impl Component for MyComponent {
         type Message = Msg;
         type Properties = ();
 
         fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-            Model {}
+            MyComponent {}
         }
 
         fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -888,7 +888,7 @@ cloned is when a wrapper component re-renders nested children components.
         }
     }
 
-    impl Renderable<Model> for Model {
+    impl Renderable<MyComponent> for MyComponent {
         fn view(&self) -> Html<Self> {
             html! { "hello" }
         }
@@ -897,12 +897,12 @@ cloned is when a wrapper component re-renders nested children components.
 
     After:
     ```rust
-    impl Component for Model {
+    impl Component for MyComponent {
         type Message = Msg;
         type Properties = ();
 
         fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-            Model {}
+            MyComponent {}
         }
 
         fn update(&mut self, msg: Self::Message) -> ShouldRender {

examples/agents/src/bin/app.rs

@@ -1,4 +1,4 @@
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
-    yew::start_app::<agents::Model>();
+    yew::start_app::<agents::App>();
 }

examples/agents/src/lib.rs

@@ -9,11 +9,11 @@ pub enum Msg {
     DataReceived,
 }
 
-pub struct Model {
+pub struct App {
     worker: Box<dyn Bridge<native_worker::Worker>>,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 

examples/boids/src/main.rs

@@ -17,12 +17,12 @@ pub enum Msg {
     TogglePause,
 }
 
-pub struct Model {
+pub struct App {
     settings: Settings,
     generation: usize,
     paused: bool,
 }
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -74,7 +74,7 @@ impl Component for Model {
         }
     }
 }
-impl Model {
+impl App {
     fn view_panel(&self, link: &Scope<Self>) -> Html {
         let pause_text = if self.paused { "Resume" } else { "Pause" };
         html! {
@@ -162,5 +162,5 @@ impl Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/contexts/src/main.rs

@@ -9,7 +9,7 @@ use yew::prelude::*;
 use msg_ctx::MessageProvider;
 
 #[function_component]
-pub fn Model() -> Html {
+pub fn App() -> Html {
     html! {
         <MessageProvider>
             <Producer />
@@ -19,5 +19,5 @@ pub fn Model() -> Html {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/counter/src/main.rs

@@ -8,11 +8,11 @@ pub enum Msg {
     Decrement,
 }
 
-pub struct Model {
+pub struct App {
     value: i64, // This will store the counter value
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -72,5 +72,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/dyn_create_destroy_apps/src/main.rs

@@ -15,12 +15,12 @@ pub enum Msg {
     DestroyCounterApp(usize),
 }
 
-pub struct Model {
+pub struct App {
     apps: Slab<(Element, AppHandle<CounterModel>)>, // Contains the spawned apps and their parent div elements
     apps_container_ref: NodeRef,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -107,5 +107,5 @@ impl Component for Model {
 
 fn main() {
     // Start main app
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/file_upload/src/main.rs

@@ -15,13 +15,13 @@ pub enum Msg {
     ToggleReadBytes,
 }
 
-pub struct Model {
+pub struct App {
     readers: HashMap<String, FileReader>,
     files: Vec<String>,
     read_bytes: bool,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -115,7 +115,7 @@ impl Component for Model {
     }
 }
 
-impl Model {
+impl App {
     fn view_file(data: &str) -> Html {
         html! {
             <li>{ data }</li>
@@ -124,5 +124,5 @@ impl Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/futures/src/main.rs

@@ -63,11 +63,11 @@ enum Msg {
     GetMarkdown,
     GetError,
 }
-struct Model {
+struct App {
     markdown: FetchState<String>,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -128,5 +128,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/game_of_life/src/main.rs

@@ -16,7 +16,7 @@ pub enum Msg {
     Tick,
 }
 
-pub struct Model {
+pub struct App {
     active: bool,
     cellules: Vec<Cellule>,
     cellules_width: usize,
@@ -24,7 +24,7 @@ pub struct Model {
     _interval: Interval,
 }
 
-impl Model {
+impl App {
     pub fn random_mutate(&mut self) {
         for cellule in self.cellules.iter_mut() {
             if rand::thread_rng().gen() {
@@ -101,7 +101,7 @@ impl Model {
         }
     }
 }
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -226,5 +226,5 @@ fn wrap(coord: isize, range: isize) -> usize {
 fn main() {
     wasm_logger::init(wasm_logger::Config::default());
     log::trace!("Initializing yew...");
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/inner_html/src/main.rs

@@ -3,11 +3,11 @@ use yew::{Component, Context, Html};
 
 const HTML: &str = include_str!("document.html");
 
-pub struct Model {
+pub struct App {
     pub value: i64,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = ();
     type Properties = ();
 
@@ -26,5 +26,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/js_callback/src/main.rs

@@ -9,13 +9,13 @@ pub enum Msg {
     AsyncPayload,
 }
 
-pub struct Model {
+pub struct App {
     payload: String,
     // Pointless field just to have something that's been manipulated
     debugged_payload: String,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -73,5 +73,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/keyed_list/src/main.rs

@@ -23,7 +23,7 @@ pub enum Msg {
     Rendered(Instant),
 }
 
-pub struct Model {
+pub struct App {
     persons: Vec<PersonType>,
     last_id: usize,
     keyed: bool,
@@ -31,7 +31,7 @@ pub struct Model {
     delta_ref: NodeRef,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -152,7 +152,7 @@ impl Component for Model {
     }
 }
 
-impl Model {
+impl App {
     fn action_view(&self, link: &Scope<Self>) -> Html {
         html! {
             <>
@@ -279,5 +279,5 @@ impl Model {
 
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/mount_point/src/main.rs

@@ -8,11 +8,11 @@ pub enum Msg {
     UpdateName(String),
 }
 
-pub struct Model {
+pub struct App {
     name: String,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -73,5 +73,5 @@ fn main() {
 
     body.append_child(&mount_point).unwrap();
 
-    yew::start_app_in_element::<Model>(mount_point);
+    yew::start_app_in_element::<App>(mount_point);
 }

examples/node_refs/src/main.rs

@@ -8,18 +8,18 @@ pub enum Msg {
     HoverIndex(usize),
 }
 
-pub struct Model {
+pub struct App {
     refs: Vec<NodeRef>,
     focus_index: usize,
 }
-impl Model {
+impl App {
     fn apply_focus(&self) {
         if let Some(input) = self.refs[self.focus_index].cast::<HtmlInputElement>() {
             input.focus().unwrap();
         }
     }
 }
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -77,5 +77,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/portals/src/main.rs

@@ -67,11 +67,11 @@ impl Component for ShadowDOMHost {
     }
 }
 
-pub struct Model {
+pub struct App {
     pub style_html: Html,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = ();
     type Properties = ();
 
@@ -102,5 +102,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/router/src/main.rs

@@ -32,10 +32,10 @@ pub enum Msg {
     ToggleNavbar,
 }
 
-pub struct Model {
+pub struct App {
     navbar_active: bool,
 }
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -76,7 +76,7 @@ impl Component for Model {
         }
     }
 }
-impl Model {
+impl App {
     fn view_nav(&self, link: &Scope<Self>) -> Html {
         let Self { navbar_active, .. } = *self;
 
@@ -147,5 +147,5 @@ fn switch(routes: &Route) -> Html {
 
 fn main() {
     wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/timer/src/main.rs

@@ -13,7 +13,7 @@ pub enum Msg {
     UpdateTime,
 }
 
-pub struct Model {
+pub struct App {
     time: String,
     messages: Vec<&'static str>,
     _standalone: (Interval, Interval),
@@ -22,7 +22,7 @@ pub struct Model {
     console_timer: Option<Timer<'static>>,
 }
 
-impl Model {
+impl App {
     fn get_current_time() -> String {
         let date = js_sys::Date::new_0();
         String::from(date.to_locale_time_string("en-US"))
@@ -34,7 +34,7 @@ impl Model {
     }
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -48,7 +48,7 @@ impl Component for Model {
         };
 
         Self {
-            time: Model::get_current_time(),
+            time: App::get_current_time(),
             messages: Vec::new(),
             _standalone: (standalone_handle, clock_handle),
             interval: None,
@@ -115,7 +115,7 @@ impl Component for Model {
                 true
             }
             Msg::UpdateTime => {
-                self.time = Model::get_current_time();
+                self.time = App::get_current_time();
                 true
             }
         }
@@ -150,5 +150,5 @@ impl Component for Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/todomvc/src/main.rs

@@ -26,12 +26,12 @@ pub enum Msg {
     Focus,
 }
 
-pub struct Model {
+pub struct App {
     state: State,
     focus_ref: NodeRef,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -142,7 +142,7 @@ impl Component for Model {
     }
 }
 
-impl Model {
+impl App {
     fn view_filter(&self, filter: Filter, link: &Scope<Self>) -> Html {
         let cls = if self.state.filter == filter {
             "selected"
@@ -245,5 +245,5 @@ impl Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

examples/two_apps/src/main.rs

@@ -2,23 +2,23 @@ use yew::html::Scope;
 use yew::{html, AppHandle, Component, Context, Html};
 
 pub enum Msg {
-    SetOpposite(Scope<Model>),
+    SetOpposite(Scope<App>),
     SendToOpposite(String),
     SetTitle(String),
 }
 
-pub struct Model {
-    opposite: Option<Scope<Model>>,
+pub struct App {
+    opposite: Option<Scope<App>>,
     selector: &'static str,
     title: String,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
-        Model {
+        App {
             opposite: None,
             selector: "",
             title: "Nothing".to_owned(),
@@ -69,7 +69,7 @@ impl Component for Model {
     }
 }
 
-fn mount_app(selector: &'static str) -> AppHandle<Model> {
+fn mount_app(selector: &'static str) -> AppHandle<App> {
     let document = gloo_utils::document();
     let element = document.query_selector(selector).unwrap().unwrap();
     yew::start_app_in_element(element)

examples/web_worker_fib/src/app.rs

@@ -5,7 +5,7 @@ use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yew_agent::{Bridge, Bridged};
 
-pub struct Model {
+pub struct App {
     clicker_value: u32,
     input_ref: NodeRef,
     worker: Box<dyn Bridge<Worker>>,
@@ -18,7 +18,7 @@ pub enum Message {
     WorkerMsg(WorkerOutput),
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Message;
     type Properties = ();
 

examples/web_worker_fib/src/lib.rs

@@ -3,7 +3,7 @@
 
 pub mod agent;
 pub mod app;
-use app::Model;
+use app::App;
 use wasm_bindgen::prelude::*;
 use yew_agent::PublicWorker;
 
@@ -12,7 +12,7 @@ pub fn start() {
     use js_sys::{global, Reflect};
 
     if Reflect::has(&global(), &JsValue::from_str("window")).unwrap() {
-        yew::start_app::<Model>();
+        yew::start_app::<App>();
     } else {
         agent::Worker::register();
     }

examples/webgl/src/main.rs

@@ -8,13 +8,13 @@ pub enum Msg {
     Render(f64),
 }
 
-pub struct Model {
+pub struct App {
     gl: Option<GL>,
     node_ref: NodeRef,
     _render_loop: Option<AnimationFrame>,
 }
 
-impl Component for Model {
+impl Component for App {
     type Message = Msg;
     type Properties = ();
 
@@ -80,7 +80,7 @@ impl Component for Model {
     }
 }
 
-impl Model {
+impl App {
     fn render_gl(&mut self, timestamp: f64, link: &Scope<Self>) {
         let gl = self.gl.as_ref().expect("GL Context not initialized!");
 
@@ -134,5 +134,5 @@ impl Model {
 }
 
 fn main() {
-    yew::start_app::<Model>();
+    yew::start_app::<App>();
 }

packages/yew/src/lib.rs

@@ -24,11 +24,11 @@
 //!     AddOne,
 //! }
 //!
-//! struct Model {
+//! struct App {
 //!     value: i64,
 //! }
 //!
-//! impl Component for Model {
+//! impl Component for App {
 //!     type Message = Msg;
 //!     type Properties = ();
 //!
@@ -59,7 +59,7 @@
 //!
 //!# fn dont_execute() {
 //! fn main() {
-//!     yew::start_app::<Model>();
+//!     yew::start_app::<App>();
 //! }
 //!# }
 //! ```
@@ -218,8 +218,8 @@ pub use yew_macro::html_nested;
 ///     name: Cow<'static, str>,
 /// }
 ///
-/// struct Model(Props);
-/// impl Component for Model {
+/// struct MyComponent(Props);
+/// impl Component for MyComponent {
 /// #   type Message = ();
 ///     type Properties = Props;
 ///     // ...
@@ -232,12 +232,12 @@ pub use yew_macro::html_nested;
 /// let props = yew::props!(Props { name: Cow::from("Minka") });
 /// # assert_eq!(props.name, "Minka");
 /// // ... or build the associated properties of a component
-/// let props = yew::props!(Model::Properties { id: 2, name: Cow::from("Lemmy") });
+/// let props = yew::props!(MyComponent::Properties { id: 2, name: Cow::from("Lemmy") });
 /// # assert_eq!(props.id, 2);
 ///
 /// // Use the Rust-like struct update syntax to create a component with the props.
 /// html! {
-///     <Model key=1 ..props />
+///     <MyComponent key=1 ..props />
 /// }
 /// # }
 /// ```

website/docs/getting-started/build-a-sample-app.mdx

@@ -58,12 +58,12 @@ yew = "0.19"
 
 #### Update main.rs
 
-We need to generate a template which sets up a root Component called `Model` which renders a button that updates its value when clicked.
+We need to generate a template which sets up a root Component called `App` which renders a button that updates its value when clicked.
 Replace the contents of `src/main.rs` with the following code.
 
 :::note
-The line `yew::start_app::<Model>()` inside `main()` starts your application and mounts it to the page's `<body>` tag.
-If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props::<Model>(..)`.
+The line `yew::start_app::<App>()` inside `main()` starts your application and mounts it to the page's `<body>` tag.
+If you would like to start your application with any dynamic properties, you can instead use `yew::start_app_with_props::<App>(..)`.
 :::
 
 ```rust ,no_run, title=main.rs