Introduce a Render trait, make views implement it

Don't pass a render function separately from the view.

Co-authored-by: Nathan Sobo <nathan@zed.dev>
Co-authored-by: Mikayla <mikayla@zed.dev>
Co-authored-by: Antonio <as-cii@zed.dev>

crates/ui2/src/components/assistant_panel.rs

@@ -1,7 +1,6 @@
-use gpui2::{rems, AbsoluteLength};
-
 use crate::prelude::*;
 use crate::{Icon, IconButton, Label, Panel, PanelSide};
+use gpui2::{rems, AbsoluteLength};
 
 #[derive(Component)]
 pub struct AssistantPanel {
@@ -76,15 +75,15 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
-
-    #[derive(Component)]
+    use crate::Story;
+    use gpui2::{Div, Render};
     pub struct AssistantPanelStory;
 
-    impl AssistantPanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for AssistantPanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, AssistantPanel>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/breadcrumb.rs

@@ -73,21 +73,17 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use super::*;
+    use crate::Story;
+    use gpui2::Render;
     use std::str::FromStr;
 
-    use crate::Story;
-
-    use super::*;
-
-    #[derive(Component)]
     pub struct BreadcrumbStory;
 
-    impl BreadcrumbStory {
-        fn render<V: 'static>(
-            self,
-            view_state: &mut V,
-            cx: &mut ViewContext<V>,
-        ) -> impl Component<V> {
+    impl Render for BreadcrumbStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let theme = theme(cx);
 
             Story::container(cx)

crates/ui2/src/components/buffer.rs

@@ -233,20 +233,19 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use gpui2::rems;
-
+    use super::*;
     use crate::{
         empty_buffer_example, hello_world_rust_buffer_example,
         hello_world_rust_buffer_with_status_example, Story,
     };
+    use gpui2::{rems, Div, Render};
 
-    use super::*;
-
-    #[derive(Component)]
     pub struct BufferStory;
 
-    impl BufferStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for BufferStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let theme = theme(cx);
 
             Story::container(cx)

crates/ui2/src/components/buffer_search.rs

@@ -1,4 +1,4 @@
-use gpui2::{AppContext, Context, View};
+use gpui2::{Div, Render, View, VisualContext};
 
 use crate::prelude::*;
 use crate::{h_stack, Icon, IconButton, IconColor, Input};
@@ -21,15 +21,15 @@ impl BufferSearch {
         cx.notify();
     }
 
-    pub fn view(cx: &mut AppContext) -> View<Self> {
-        {
-            let state = cx.build_model(|cx| Self::new());
-            let render = Self::render;
-            View::for_handle(state, render)
-        }
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.build_view(|cx| Self::new())
     }
+}
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
+impl Render for BufferSearch {
+    type Element = Div<Self>;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
         let theme = theme(cx);
 
         h_stack().bg(theme.toolbar).p_2().child(

crates/ui2/src/components/chat_panel.rs

@@ -108,16 +108,18 @@ pub use stories::*;
 #[cfg(feature = "stories")]
 mod stories {
     use chrono::DateTime;
+    use gpui2::{Div, Render};
 
     use crate::{Panel, Story};
 
     use super::*;
 
-    #[derive(Component)]
     pub struct ChatPanelStory;
 
-    impl ChatPanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ChatPanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, ChatPanel>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/collab_panel.rs

@@ -89,15 +89,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
+    use crate::Story;
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct CollabPanelStory;
 
-    impl CollabPanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for CollabPanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, CollabPanel>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/command_palette.rs

@@ -27,15 +27,18 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::Story;
 
     use super::*;
 
-    #[derive(Component)]
     pub struct CommandPaletteStory;
 
-    impl CommandPaletteStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for CommandPaletteStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, CommandPalette>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/context_menu.rs

@@ -68,15 +68,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::story::Story;
-
     use super::*;
+    use crate::story::Story;
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct ContextMenuStory;
 
-    impl ContextMenuStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ContextMenuStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, ContextMenu>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/copilot.rs

@@ -25,15 +25,18 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::Story;
 
     use super::*;
 
-    #[derive(Component)]
     pub struct CopilotModalStory;
 
-    impl CopilotModalStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for CopilotModalStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, CopilotModal>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/editor_pane.rs

@@ -1,6 +1,6 @@
 use std::path::PathBuf;
 
-use gpui2::{AppContext, Context, View};
+use gpui2::{Div, Render, View, VisualContext};
 
 use crate::prelude::*;
 use crate::{
@@ -20,7 +20,7 @@ pub struct EditorPane {
 
 impl EditorPane {
     pub fn new(
-        cx: &mut AppContext,
+        cx: &mut ViewContext<Self>,
         tabs: Vec<Tab>,
         path: PathBuf,
         symbols: Vec<Symbol>,
@@ -42,15 +42,15 @@ impl EditorPane {
         cx.notify();
     }
 
-    pub fn view(cx: &mut AppContext) -> View<Self> {
-        {
-            let state = cx.build_model(|cx| hello_world_rust_editor_with_status_example(cx));
-            let render = Self::render;
-            View::for_handle(state, render)
-        }
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.build_view(|cx| hello_world_rust_editor_with_status_example(cx))
     }
+}
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
+impl Render for EditorPane {
+    type Element = Div<Self>;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
         v_stack()
             .w_full()
             .h_full()

crates/ui2/src/components/facepile.rs

@@ -31,15 +31,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::{static_players, Story};
-
     use super::*;
+    use crate::{static_players, Story};
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct FacepileStory;
 
-    impl FacepileStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for FacepileStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let players = static_players();
 
             Story::container(cx)

crates/ui2/src/components/keybinding.rs

@@ -158,17 +158,17 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use super::*;
+    use crate::Story;
+    use gpui2::{Div, Render};
     use itertools::Itertools;
 
-    use crate::Story;
-
-    use super::*;
-
-    #[derive(Component)]
     pub struct KeybindingStory;
 
-    impl KeybindingStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for KeybindingStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let all_modifier_permutations = ModifierKey::iter().permutations(2);
 
             Story::container(cx)

crates/ui2/src/components/language_selector.rs

@@ -38,15 +38,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
+    use crate::Story;
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct LanguageSelectorStory;
 
-    impl LanguageSelectorStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for LanguageSelectorStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, LanguageSelector>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/multi_buffer.rs

@@ -40,15 +40,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::{hello_world_rust_buffer_example, Story};
-
     use super::*;
+    use crate::{hello_world_rust_buffer_example, Story};
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct MultiBufferStory;
 
-    impl MultiBufferStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for MultiBufferStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let theme = theme(cx);
 
             Story::container(cx)

crates/ui2/src/components/notifications_panel.rs

@@ -48,15 +48,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::{Panel, Story};
-
     use super::*;
+    use crate::{Panel, Story};
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct NotificationsPanelStory;
 
-    impl NotificationsPanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for NotificationsPanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, NotificationsPanel>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/palette.rs

@@ -152,58 +152,71 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::{ModifierKeys, Story};
 
     use super::*;
 
-    #[derive(Component)]
     pub struct PaletteStory;
 
-    impl PaletteStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
-            Story::container(cx)
-                .child(Story::title_for::<_, Palette>(cx))
-                .child(Story::label(cx, "Default"))
-                .child(Palette::new("palette-1"))
-                .child(Story::label(cx, "With Items"))
-                .child(
-                    Palette::new("palette-2")
-                        .placeholder("Execute a command...")
-                        .items(vec![
-                            PaletteItem::new("theme selector: toggle").keybinding(
-                                Keybinding::new_chord(
-                                    ("k".to_string(), ModifierKeys::new().command(true)),
-                                    ("t".to_string(), ModifierKeys::new().command(true)),
+    impl Render for PaletteStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+            {
+                Story::container(cx)
+                    .child(Story::title_for::<_, Palette>(cx))
+                    .child(Story::label(cx, "Default"))
+                    .child(Palette::new("palette-1"))
+                    .child(Story::label(cx, "With Items"))
+                    .child(
+                        Palette::new("palette-2")
+                            .placeholder("Execute a command...")
+                            .items(vec![
+                                PaletteItem::new("theme selector: toggle").keybinding(
+                                    Keybinding::new_chord(
+                                        ("k".to_string(), ModifierKeys::new().command(true)),
+                                        ("t".to_string(), ModifierKeys::new().command(true)),
+                                    ),
                                 ),
-                            ),
-                            PaletteItem::new("assistant: inline assist").keybinding(
-                                Keybinding::new(
-                                    "enter".to_string(),
-                                    ModifierKeys::new().command(true),
+                                PaletteItem::new("assistant: inline assist").keybinding(
+                                    Keybinding::new(
+                                        "enter".to_string(),
+                                        ModifierKeys::new().command(true),
+                                    ),
                                 ),
-                            ),
-                            PaletteItem::new("assistant: quote selection").keybinding(
-                                Keybinding::new(">".to_string(), ModifierKeys::new().command(true)),
-                            ),
-                            PaletteItem::new("assistant: toggle focus").keybinding(
-                                Keybinding::new("?".to_string(), ModifierKeys::new().command(true)),
-                            ),
-                            PaletteItem::new("auto update: check"),
-                            PaletteItem::new("auto update: view release notes"),
-                            PaletteItem::new("branches: open recent").keybinding(Keybinding::new(
-                                "b".to_string(),
-                                ModifierKeys::new().command(true).alt(true),
-                            )),
-                            PaletteItem::new("chat panel: toggle focus"),
-                            PaletteItem::new("cli: install"),
-                            PaletteItem::new("client: sign in"),
-                            PaletteItem::new("client: sign out"),
-                            PaletteItem::new("editor: cancel").keybinding(Keybinding::new(
-                                "escape".to_string(),
-                                ModifierKeys::new(),
-                            )),
-                        ]),
-                )
+                                PaletteItem::new("assistant: quote selection").keybinding(
+                                    Keybinding::new(
+                                        ">".to_string(),
+                                        ModifierKeys::new().command(true),
+                                    ),
+                                ),
+                                PaletteItem::new("assistant: toggle focus").keybinding(
+                                    Keybinding::new(
+                                        "?".to_string(),
+                                        ModifierKeys::new().command(true),
+                                    ),
+                                ),
+                                PaletteItem::new("auto update: check"),
+                                PaletteItem::new("auto update: view release notes"),
+                                PaletteItem::new("branches: open recent").keybinding(
+                                    Keybinding::new(
+                                        "b".to_string(),
+                                        ModifierKeys::new().command(true).alt(true),
+                                    ),
+                                ),
+                                PaletteItem::new("chat panel: toggle focus"),
+                                PaletteItem::new("cli: install"),
+                                PaletteItem::new("client: sign in"),
+                                PaletteItem::new("client: sign out"),
+                                PaletteItem::new("editor: cancel").keybinding(Keybinding::new(
+                                    "escape".to_string(),
+                                    ModifierKeys::new(),
+                                )),
+                            ]),
+                    )
+            }
         }
     }
 }

crates/ui2/src/components/panel.rs

@@ -128,17 +128,18 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::{Label, Story};
-
     use super::*;
+    use crate::{Label, Story};
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct PanelStory;
 
-    impl PanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for PanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
-                .child(Story::title_for::<_, Panel<V>>(cx))
+                .child(Story::title_for::<_, Panel<Self>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("panel", cx).child(

crates/ui2/src/components/panes.rs

@@ -1,4 +1,4 @@
-use gpui2::{hsla, red, AnyElement, ElementId, ExternalPaths, Hsla, Length, Size};
+use gpui2::{hsla, red, AnyElement, ElementId, ExternalPaths, Hsla, Length, Size, View};
 use smallvec::SmallVec;
 
 use crate::prelude::*;
@@ -18,13 +18,6 @@ pub struct Pane<V: 'static> {
     children: SmallVec<[AnyElement<V>; 2]>,
 }
 
-// impl<V: 'static> IntoAnyElement<V> for Pane<V> {
-//     fn into_any(self) -> AnyElement<V> {
-//         (move |view_state: &mut V, cx: &mut ViewContext<'_, '_, V>| self.render(view_state, cx))
-//             .into_any()
-//     }
-// }
-
 impl<V: 'static> Pane<V> {
     pub fn new(id: impl Into<ElementId>, size: Size<Length>) -> Self {
         // Fill is only here for debugging purposes, remove before release
@@ -57,8 +50,8 @@ impl<V: 'static> Pane<V> {
                     .z_index(1)
                     .id("drag-target")
                     .drag_over::<ExternalPaths>(|d| d.bg(red()))
-                    .on_drop(|_, files: ExternalPaths, _| {
-                        dbg!("dropped files!", files);
+                    .on_drop(|_, files: View<ExternalPaths>, cx| {
+                        dbg!("dropped files!", files.read(cx));
                     })
                     .absolute()
                     .inset_0(),

crates/ui2/src/components/project_panel.rs

@@ -57,15 +57,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::{Panel, Story};
-
     use super::*;
+    use crate::{Panel, Story};
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct ProjectPanelStory;
 
-    impl ProjectPanelStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ProjectPanelStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, ProjectPanel>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/recent_projects.rs

@@ -34,15 +34,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
+    use crate::Story;
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct RecentProjectsStory;
 
-    impl RecentProjectsStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for RecentProjectsStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, RecentProjects>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/tab.rs

@@ -1,5 +1,6 @@
 use crate::prelude::*;
 use crate::{Icon, IconColor, IconElement, Label, LabelColor};
+use gpui2::{black, red, Div, ElementId, Render, View, VisualContext};
 
 #[derive(Component, Clone)]
 pub struct Tab {
@@ -19,6 +20,14 @@ struct TabDragState {
     title: String,
 }
 
+impl Render for TabDragState {
+    type Element = Div<Self>;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+        div().w_8().h_4().bg(red())
+    }
+}
+
 impl Tab {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
@@ -118,12 +127,10 @@ impl Tab {
 
         div()
             .id(self.id.clone())
-            .on_drag(move |_view, _cx| {
-                Drag::new(drag_state.clone(), |view, cx| div().w_8().h_4().bg(red()))
-            })
+            .on_drag(move |_view, cx| cx.build_view(|cx| drag_state.clone()))
             .drag_over::<TabDragState>(|d| d.bg(black()))
-            .on_drop(|_view, state: TabDragState, cx| {
-                dbg!(state);
+            .on_drop(|_view, state: View<TabDragState>, cx| {
+                dbg!(state.read(cx));
             })
             .px_2()
             .py_0p5()
@@ -160,23 +167,21 @@ impl Tab {
     }
 }
 
-use gpui2::{black, red, Drag, ElementId};
 #[cfg(feature = "stories")]
 pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use super::*;
+    use crate::{h_stack, v_stack, Icon, Story};
     use strum::IntoEnumIterator;
 
-    use crate::{h_stack, v_stack, Icon, Story};
-
-    use super::*;
-
-    #[derive(Component)]
     pub struct TabStory;
 
-    impl TabStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for TabStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let git_statuses = GitStatus::iter();
             let fs_statuses = FileSystemStatus::iter();
 

crates/ui2/src/components/tab_bar.rs

@@ -92,15 +92,16 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
+    use crate::Story;
+    use gpui2::{Div, Render};
 
-    #[derive(Component)]
     pub struct TabBarStory;
 
-    impl TabBarStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for TabBarStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, TabBar>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/terminal.rs

@@ -83,15 +83,15 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
-
-    #[derive(Component)]
+    use crate::Story;
+    use gpui2::{Div, Render};
     pub struct TerminalStory;
 
-    impl TerminalStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for TerminalStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, Terminal>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/theme_selector.rs

@@ -39,15 +39,18 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::Story;
 
     use super::*;
 
-    #[derive(Component)]
     pub struct ThemeSelectorStory;
 
-    impl ThemeSelectorStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ThemeSelectorStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, ThemeSelector>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/title_bar.rs

@@ -1,7 +1,7 @@
 use std::sync::atomic::AtomicBool;
 use std::sync::Arc;
 
-use gpui2::{AppContext, Context, ModelContext, View};
+use gpui2::{Div, Render, View, VisualContext};
 
 use crate::prelude::*;
 use crate::settings::user_settings;
@@ -28,7 +28,7 @@ pub struct TitleBar {
 }
 
 impl TitleBar {
-    pub fn new(cx: &mut ModelContext<Self>) -> Self {
+    pub fn new(cx: &mut ViewContext<Self>) -> Self {
         let is_active = Arc::new(AtomicBool::new(true));
         let active = is_active.clone();
 
@@ -80,15 +80,15 @@ impl TitleBar {
         cx.notify();
     }
 
-    pub fn view(cx: &mut AppContext, livestream: Option<Livestream>) -> View<Self> {
-        {
-            let state = cx.build_model(|cx| Self::new(cx).set_livestream(livestream));
-            let render = Self::render;
-            View::for_handle(state, render)
-        }
+    pub fn view(cx: &mut WindowContext, livestream: Option<Livestream>) -> View<Self> {
+        cx.build_view(|cx| Self::new(cx).set_livestream(livestream))
     }
+}
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
+impl Render for TitleBar {
+    type Element = Div<Self>;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
         let theme = theme(cx);
         let settings = user_settings(cx);
 
@@ -187,26 +187,25 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use crate::Story;
-
     use super::*;
+    use crate::Story;
 
     pub struct TitleBarStory {
         title_bar: View<TitleBar>,
     }
 
     impl TitleBarStory {
-        pub fn view(cx: &mut AppContext) -> View<Self> {
-            {
-                let state = cx.build_model(|cx| Self {
-                    title_bar: TitleBar::view(cx, None),
-                });
-                let render = Self::render;
-                View::for_handle(state, render)
-            }
+        pub fn view(cx: &mut WindowContext) -> View<Self> {
+            cx.build_view(|cx| Self {
+                title_bar: TitleBar::view(cx, None),
+            })
         }
+    }
 
-        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
+    impl Render for TitleBarStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
             Story::container(cx)
                 .child(Story::title_for::<_, TitleBar>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/toast.rs

@@ -72,17 +72,20 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::{Label, Story};
 
     use super::*;
 
-    #[derive(Component)]
     pub struct ToastStory;
 
-    impl ToastStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ToastStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
-                .child(Story::title_for::<_, Toast<V>>(cx))
+                .child(Story::title_for::<_, Toast<Self>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Toast::new(ToastOrigin::Bottom).child(Label::new("label")))
         }

crates/ui2/src/components/toolbar.rs

@@ -75,19 +75,22 @@ mod stories {
     use std::path::PathBuf;
     use std::str::FromStr;
 
+    use gpui2::{Div, Render};
+
     use crate::{Breadcrumb, HighlightedText, Icon, IconButton, Story, Symbol};
 
     use super::*;
 
-    #[derive(Component)]
     pub struct ToolbarStory;
 
-    impl ToolbarStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for ToolbarStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Toolbar<V>>(cx))
+                .child(Story::title_for::<_, Toolbar<Self>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Toolbar::new()

crates/ui2/src/components/traffic_lights.rs

@@ -77,15 +77,18 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
+    use gpui2::{Div, Render};
+
     use crate::Story;
 
     use super::*;
 
-    #[derive(Component)]
     pub struct TrafficLightsStory;
 
-    impl TrafficLightsStory {
-        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+    impl Render for TrafficLightsStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
             Story::container(cx)
                 .child(Story::title_for::<_, TrafficLights>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/workspace.rs

@@ -1,7 +1,7 @@
 use std::sync::Arc;
 
 use chrono::DateTime;
-use gpui2::{px, relative, rems, AppContext, Context, Size, View};
+use gpui2::{px, relative, rems, Div, Render, Size, View, VisualContext};
 
 use crate::{prelude::*, NotificationsPanel};
 use crate::{
@@ -44,7 +44,7 @@ pub struct Workspace {
 }
 
 impl Workspace {
-    pub fn new(cx: &mut AppContext) -> Self {
+    pub fn new(cx: &mut ViewContext<Self>) -> Self {
         Self {
             title_bar: TitleBar::view(cx, None),
             editor_1: EditorPane::view(cx),
@@ -170,15 +170,15 @@ impl Workspace {
         cx.notify();
     }
 
-    pub fn view(cx: &mut AppContext) -> View<Self> {
-        {
-            let state = cx.build_model(|cx| Self::new(cx));
-            let render = Self::render;
-            View::for_handle(state, render)
-        }
+    pub fn view(cx: &mut WindowContext) -> View<Self> {
+        cx.build_view(|cx| Self::new(cx))
     }
+}
 
-    pub fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
+impl Render for Workspace {
+    type Element = Div<Self>;
+
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Div<Self> {
         let theme = theme(cx);
 
         // HACK: This should happen inside of `debug_toggle_user_settings`, but
@@ -355,9 +355,8 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use gpui2::VisualContext;
-
     use super::*;
+    use gpui2::VisualContext;
 
     pub struct WorkspaceStory {
         workspace: View<Workspace>,
@@ -365,12 +364,17 @@ mod stories {
 
     impl WorkspaceStory {
         pub fn view(cx: &mut WindowContext) -> View<Self> {
-            cx.build_view(
-                |cx| Self {
-                    workspace: Workspace::view(cx),
-                },
-                |view, cx| view.workspace.clone(),
-            )
+            cx.build_view(|cx| Self {
+                workspace: Workspace::view(cx),
+            })
+        }
+    }
+
+    impl Render for WorkspaceStory {
+        type Element = Div<Self>;
+
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+            div().child(self.workspace.clone())
         }
     }
 }