wip: redesign csr

EqualMa · EqualMa · commit f3effed3b4f5 · 2024-12-14T04:49:11.000+08:00
diff --git a/packages/frender-csr-ext/src/lib.rs b/packages/frender-csr-ext/src/lib.rs
@@ -1,11 +1,20 @@
-pub use frender_html::{CsrComponent, CsrElement, RenderState};
+pub use frender_html::{CsrComponent, CsrElement};
 pub use into_render_element_ext::IntoRenderElementExt;
 pub use render_element::RenderElement;
 
 mod render_element;
 
 mod into_render_element_ext {
-    use frender_html::{dom::ProvideRenderContext, CsrElement as Element, RenderHtml};
+    use std::{future::Future, pin::pin};
+
+    use frender_html::{
+        dom::ProvideRenderContext,
+        experimental::{
+            PinMutRenderInitStates, PinnedRenderStateKind, PinnedRenderStateKindPollRender,
+            RenderStates,
+        },
+        CsrElement as Element, RenderHtml, StateUnmount,
+    };
 
     pub trait IntoRenderElementExt: ProvideRenderContext {
         fn into_render_element<E: Element>(self, element: E) -> crate::RenderElement<Self, E>
@@ -22,6 +31,74 @@ mod into_render_element_ext {
         {
             crate::RenderElement::new(self, element)
         }
+
+        /// The caller could then unmount the ui handle or just drop it without unmounting.
+        fn into_render_element_until_non_reactive<E: Element>(
+            mut self,
+            element: E,
+        ) -> impl Future<
+            Output = <E::RenderStateKind as PinnedRenderStateKind>::PinnedUiHandle<Self::Renderer>,
+        >
+        where
+            Self: Sized,
+            Self::Renderer: RenderHtml,
+        {
+            async move {
+                let mut non_reactive_state = pin!(
+                    <<E::RenderStateKind as PinnedRenderStateKind>::PinnedNonReactiveState<
+                        Self::Renderer,
+                    >>::default()
+                );
+                let mut reactive_state = pin!(
+                    <<E::RenderStateKind as PinnedRenderStateKind>::PinnedReactiveState>::default()
+                );
+                let mut ui_handle = self.provide_render_context(|render_context| {
+                    element.pinned_render_init(
+                        render_context,
+                        PinMutRenderInitStates {
+                            non_reactive_state: non_reactive_state.as_mut(),
+                            reactive_state: reactive_state.as_mut(),
+                        },
+                    )
+                });
+
+                std::future::poll_fn(|cx| {
+                    <E::RenderStateKind as PinnedRenderStateKindPollRender>::pinned_poll_render(
+                        self.renderer_mut(),
+                        RenderStates {
+                            ui_handle: &mut ui_handle,
+                            non_reactive_state: non_reactive_state.as_mut(),
+                            reactive_state: reactive_state.as_mut(),
+                        },
+                        cx,
+                    )
+                })
+                .await;
+
+                // now the ui is no longer reactive
+
+                // The unmount order is the same as EitherElement accidentally
+                // (This is not considered as a feature and might change in the future)
+                non_reactive_state.set(Default::default());
+                reactive_state.as_mut().state_unmount();
+                reactive_state.set(Default::default());
+
+                ui_handle
+            }
+        }
+
+        fn render_element_until_non_reactive<E: Element>(
+            &mut self,
+            element: E,
+        ) -> impl Future<
+            Output = <E::RenderStateKind as PinnedRenderStateKind>::PinnedUiHandle<Self::Renderer>,
+        >
+        where
+            Self: Sized,
+            Self::Renderer: RenderHtml,
+        {
+            self.into_render_element_until_non_reactive(element)
+        }
     }
 
     impl<R: ?Sized + ProvideRenderContext> IntoRenderElementExt for R {}
diff --git a/packages/frender-csr-ext/src/render_element.rs b/packages/frender-csr-ext/src/render_element.rs
@@ -1,23 +1,76 @@
-use std::future::Future;
+use std::{future::Future, task::Poll};
 
-use frender_html::{dom::ProvideRenderContext, CsrElement as Element, RenderHtml, RenderState};
+use frender_html::{
+    dom::{ui_handle::UiHandle as _, ProvideRenderContext},
+    experimental::{
+        PinMutRenderInitStates, PinnedRenderStateKind, PinnedRenderStateKindPollRender as _,
+        RenderStates,
+    },
+    CsrElement, RenderHtml, StateUnmount as _,
+};
+
+enum ElementOrUiHandle<E, UH> {
+    Taken,
+    Element(E),
+    UiHandle(UH),
+}
+
+impl<E, UH> ElementOrUiHandle<E, UH> {
+    fn as_mut_ui_handle_or_insert(&mut self, f: impl FnOnce(E) -> UH) -> &mut UH {
+        match self {
+            ElementOrUiHandle::Taken => unreachable!(),
+            ElementOrUiHandle::Element(_) => {
+                let this = std::mem::replace(self, Self::Taken);
+                let Self::Element(element) = this else {
+                    unreachable!()
+                };
+
+                *self = Self::UiHandle(f(element));
+
+                if let ElementOrUiHandle::UiHandle(this) = self {
+                    this
+                } else {
+                    unreachable!()
+                }
+            }
+            ElementOrUiHandle::UiHandle(this) => this,
+        }
+    }
+
+    fn take_ui_handle(&mut self) -> UH {
+        if let ElementOrUiHandle::UiHandle(this) = std::mem::replace(self, Self::Taken) {
+            this
+        } else {
+            unreachable!()
+        }
+    }
+}
 
 pin_project_lite::pin_project!(
-    pub struct RenderElement<P: ProvideRenderContext, E: Element, Stop = std::future::Pending<()>>
+    pub struct RenderElement<
+        P: ProvideRenderContext,
+        E: CsrElement,
+        Stop = std::future::Pending<()>,
+    >
     where
         P::Renderer: RenderHtml,
     {
         p: P,
-        element: Option<E>,
+        element: ElementOrUiHandle<
+            E,
+            <E::RenderStateKind as PinnedRenderStateKind>::PinnedUiHandle<P::Renderer>,
+        >,
+        #[pin]
+        non_reactive_state:
+            <E::RenderStateKind as PinnedRenderStateKind>::PinnedNonReactiveState<P::Renderer>,
         #[pin]
-        state:
-            <E::RenderStateKind as frender_html::RenderStateKindPinned>::RenderState<P::Renderer>,
+        reactive_state: <E::RenderStateKind as PinnedRenderStateKind>::PinnedReactiveState,
         #[pin]
         stop: Stop,
     }
 );
 
-impl<P: ProvideRenderContext, E: Element> RenderElement<P, E>
+impl<P: ProvideRenderContext, E: CsrElement> RenderElement<P, E>
 where
     P::Renderer: RenderHtml,
 {
@@ -26,49 +79,69 @@ where
     }
 }
 
-impl<P: ProvideRenderContext, E: Element, Stop> RenderElement<P, E, Stop>
+impl<P: ProvideRenderContext, E: CsrElement, Stop> RenderElement<P, E, Stop>
 where
     P::Renderer: RenderHtml,
 {
     pub fn new_with_stop(render_context: P, element: E, stop: Stop) -> Self {
         Self {
             p: render_context,
-            element: Some(element),
-            state: Default::default(),
+            element: ElementOrUiHandle::Element(element),
+            non_reactive_state: Default::default(),
+            reactive_state: Default::default(),
             stop,
         }
     }
 }
 
-impl<P: ProvideRenderContext, E: Element, Stop: Future<Output = ()>> std::future::Future
+impl<P: ProvideRenderContext, E: CsrElement, Stop: Future<Output = ()>> std::future::Future
     for RenderElement<P, E, Stop>
 where
     P::Renderer: RenderHtml,
 {
     type Output = ();
 
-    fn poll(
-        self: std::pin::Pin<&mut Self>,
-        cx: &mut std::task::Context<'_>,
-    ) -> std::task::Poll<Self::Output> {
+    fn poll(self: std::pin::Pin<&mut Self>, cx: &mut std::task::Context<'_>) -> Poll<Self::Output> {
         let mut this = self.project();
 
-        if let Some(element) = this.element.take() {
-            this.p.provide_render_context(|render_context| {
-                element.render_update(render_context, this.state.as_mut())
-            });
+        if let ElementOrUiHandle::Taken = this.element {
+            return Poll::Ready(());
         }
 
-        if let std::task::Poll::Pending = this.state.as_mut().poll_render(this.p.renderer_mut(), cx)
-        {
-            return std::task::Poll::Pending;
+        let ui_handle = this.element.as_mut_ui_handle_or_insert(|element| {
+            this.p.provide_render_context(|render_context| {
+                element.pinned_render_init(
+                    render_context,
+                    PinMutRenderInitStates {
+                        non_reactive_state: this.non_reactive_state.as_mut(),
+                        reactive_state: this.reactive_state.as_mut(),
+                    },
+                )
+            })
+        });
+
+        if let Poll::Pending = <E::RenderStateKind>::pinned_poll_render(
+            this.p.renderer_mut(),
+            RenderStates {
+                ui_handle,
+                non_reactive_state: this.non_reactive_state.as_mut(),
+                reactive_state: this.reactive_state.as_mut(),
+            },
+            cx,
+        ) {
+            return Poll::Pending;
         }
 
-        if let std::task::Poll::Ready(()) = this.stop.poll(cx) {
-            this.state.unmount(this.p.renderer_mut());
-            return std::task::Poll::Ready(());
+        if let Poll::Ready(()) = this.stop.poll(cx) {
+            // The unmount order is the same as EitherElement accidentally
+            // (This is not considered as a feature and might change in the future)
+            this.non_reactive_state.set(Default::default());
+            this.reactive_state.as_mut().state_unmount();
+            this.reactive_state.set(Default::default());
+            this.element.take_ui_handle().unmount(this.p.renderer_mut());
+            return Poll::Ready(());
         }
 
-        std::task::Poll::Pending
+        Poll::Pending
     }
 }
diff --git a/packages/frender-csr-web/src/renderer.rs b/packages/frender-csr-web/src/renderer.rs
@@ -243,4 +243,22 @@ impl frender_html::dom::csr::web::Renderer for Renderer {
 
         node.unchecked_ref::<Removable>().remove()
     }
+
+    fn assert_cursor_if_at_node(render_context: &Self::RenderContext<'_>, node: &web_sys::Node)
+    where
+        Self: RenderWithContext,
+    {
+        debug_assert!(render_context.cursor.cursor_is_at_node(node))
+    }
+
+    fn reposition_node(render_context: &mut Self::RenderContext<'_>, node: &web_sys::Node)
+    where
+        Self: RenderWithContext,
+    {
+        render_context.cursor.force_add_node(node)
+    }
+
+    fn mount_node(render_context: &mut Self::RenderContext<'_>, node: &web_sys::Node) {
+        render_context.cursor.force_add_node(node)
+    }
 }
diff --git a/packages/frender-dom/src/csr/web.rs b/packages/frender-dom/src/csr/web.rs
@@ -177,6 +177,23 @@ impl<'a> Cursor<'a> {
         .map_or(false, |c| *node == c)
     }
 
+    pub fn force_add_node(&mut self, node: &web_sys::Node) {
+        match &self.position {
+            CursorPosition::FirstChildOf(parent) => {
+                parent.prepend_with_node_1(node).unwrap_throw();
+            }
+            CursorPosition::After(pre) => {
+                pre.parent_node()
+                    .expect_throw("the previous node should have a parent node")
+                    .insert_before(node, pre.next_sibling().as_ref())
+                    .unwrap_throw();
+            }
+        }
+
+        self.position = CursorPosition::After(Cow::Owned(node.clone()));
+        self.skipped = false;
+    }
+
     pub fn readd_node(&mut self, node: &web_sys::Node, force_reposition: bool) {
         if force_reposition {
             // #[cfg(debug_assertions)]
diff --git a/packages/frender-dom/src/csr/web/cursor_place_holder.rs b/packages/frender-dom/src/csr/web/cursor_place_holder.rs
@@ -1,10 +1,56 @@
-use crate::{behaviors, render::RenderWithContext};
+use crate::{
+    behaviors,
+    render::RenderWithContext,
+    ui_handle::{UiHandle, UnmountedUiHandle},
+};
 
 use super::Renderer;
 
 #[derive(Debug)]
 pub struct CursorPlaceholder(web_sys::Comment);
 
+impl<R: ?Sized + Renderer> UnmountedUiHandle<R> for CursorPlaceholder {
+    type Mounted = Self;
+
+    fn mount(self, render_context: &mut <R>::RenderContext<'_>) -> Self::Mounted
+    where
+        R: crate::render::RenderWithContext,
+    {
+        R::mount_node(render_context, &self.0);
+        self
+    }
+}
+
+impl<R: ?Sized + Renderer> UiHandle<R> for CursorPlaceholder {
+    type Unmounted = Self;
+
+    fn unmount(self, renderer: &mut R) -> Self::Unmounted {
+        renderer.remove_node(&self.0);
+        self
+    }
+
+    fn reposition(&mut self, render_context: &mut <R>::RenderContext<'_>)
+    where
+        R: crate::render::RenderWithContext,
+    {
+        R::reposition_node(render_context, &self.0)
+    }
+
+    fn check_and_move_cursor(&self, render_context: &mut <R>::RenderContext<'_>)
+    where
+        R: crate::render::RenderWithContext,
+    {
+        R::check_and_move_cursor_after_node(render_context, &self.0)
+    }
+
+    fn assert_cursor_if_at_self(&self, render_context: &<R>::RenderContext<'_>)
+    where
+        R: crate::render::RenderWithContext,
+    {
+        R::assert_cursor_if_at_node(render_context, &self.0)
+    }
+}
+
 impl<R: ?Sized + Renderer> behaviors::Node<R> for CursorPlaceholder {
     fn log_self(&self, _: &mut R) {
         web_sys::console::log_2(&"CursorPlaceholder".into(), &self.0);
diff --git a/packages/frender-render-with/Cargo.toml b/packages/frender-render-with/Cargo.toml
@@ -8,5 +8,15 @@ async-str-iter = { version = "0.1.0", path = "../async-str-iter", default-featur
 frender-html = { version = "0.1.0", path = "../frender-html" }
 frender-ssr = { version = "0.1.0", path = "../frender-ssr" }
 
+[dev-dependencies]
+frender-html = { version = "0.1.0", path = "../frender-html", features = [
+    "web",
+] }
+frender-common = { version = "0.1.0", path = "../frender-common" }
+frender-elements = { version = "0.1.0", path = "../frender-elements" }
+hooks = { version = "3.0.0-alpha", default-features = false, features = [
+    "Signal",
+] }
+
 [features]
 nightly = []
diff --git a/packages/frender-render-with/src/lib.rs b/packages/frender-render-with/src/lib.rs
diff --git a/packages/frender-render-with/src/not_nightly_impl.rs b/packages/frender-render-with/src/not_nightly_impl.rs
diff --git a/packages/frender-render-with/tests/render_with.rs b/packages/frender-render-with/tests/render_with.rs
