Suspense 与错误边界

    pub type Element = std::result::Result<VNode, RenderError>;

impl<E: Into<anyhow::Error>> From<E> for RenderError {
    fn from(e: E) -> Self {
        let anyhow_err = e.into();

        if let Some(suspended) = anyhow_err.downcast_ref::<SuspendedFuture>() {
            return Self::Suspended(suspended.clone());
        }

        if let Some(render_error) = anyhow_err.downcast_ref::<RenderError>() {
            return render_error.clone();
        }

        Self::Error(CapturedError(Arc::new(anyhow_err)))
    }
}

    fn handle_element_return(&self, node: &mut Element, scope: &Scope) {
        match node {
            Err(RenderError::Error(e)) => {
                tracing::error!("Error while rendering component `{}`: {e}", scope.name);
                self.runtime.throw_error(scope.id, e.clone());
            }
            Err(RenderError::Suspended(e)) => {
                let task = e.task();
                // Insert the task into the nearest suspense boundary if it exists
                let boundary = scope.suspense_location();
                let already_suspended = self
                    .runtime
                    .tasks
                    .borrow()
                    .get(task.id)
                    .expect("Suspended on a task that no longer exists")
                    .suspend(boundary.clone());
                if !already_suspended {
                    tracing::trace!("Suspending {:?} on {:?}", scope.id, task);
                    // Add this task to the suspended tasks list of the boundary
                    if let SuspenseLocation::UnderSuspense(boundary) = &boundary {
                        boundary.add_suspended_task(e.clone());
                    }
                    self.runtime
                        .suspended_tasks
                        .set(self.runtime.suspended_tasks.get() + 1);
                }
            }
            Ok(_) => {
                // If the render was successful, we can move the render generation forward by one
                scope.render_count.set(scope.render_count.get() + 1);
            }
        }
    }

            // First always render the children in the background. Rendering the children may cause this boundary to suspend
            suspense_context.under_suspense_boundary(&dom.runtime(), || {
                children.create(dom, parent, None::<&mut M>);
            });

            // If there are suspended futures, render the fallback
            let nodes_created = if !suspense_context.suspended_futures().is_empty() {
                let (node, nodes_created) =
                    suspense_context.in_suspense_placeholder(&dom.runtime(), || {
                        // ...
                        suspense_context.set_suspended_nodes(children.as_vnode().clone());
                        let suspense_placeholder =
                            LastRenderedNode::new(props.fallback.call(suspense_context));
                        let nodes_created = suspense_placeholder.create(dom, parent, to);
                        (suspense_placeholder, nodes_created)
                    });
                // ...
            } else {
                // Otherwise just render the children in the real dom
                debug_assert!(children.mount.get().mounted());
                let nodes_created = suspense_context
                    .under_suspense_boundary(&dom.runtime(), || children.create(dom, parent, to));
                // ...
            };

fn app() -> Element {
  rsx! {
    div {
      "before "
      SuspenseBoundary {
        fallback: |_ctx: SuspenseContext| { log("fallback runs"); rsx! { span { "loading..." } } },
        Slow {}
      }
    }
  }
}

#[component]
fn Slow() -> Element {
  let value = use_resource(|| async {
    tokio::time::sleep(Duration::from_millis(30)).await;
    42
  });
  log("Slow runs");
  let v = value.suspend()?;
  log(format!("Slow got {v}"));
  rsx! { b { "value = {v}" } }
}

fn app_no_boundary() -> Element {
  let value = use_resource(|| async {
    tokio::time::sleep(Duration::from_millis(30)).await;
    7
  });
  let v = value.suspend()?;
  rsx! { "root value = {v}" }
}

== SSR style: rebuild_in_place + wait_for_suspense
Slow runs
fallback runs
fallback runs
suspended_tasks_remaining = true
ssr: <div>before <span>loading...</span></div>
fallback runs
Slow runs
Slow got 42
suspended_tasks_remaining = false
ssr: <div>before <b>value = 42</b></div>

== client style: rebuild + wait_for_work + render_immediate
Slow runs
fallback runs
  edit: LoadTemplate index=0 id=1
fallback runs
  edit: LoadTemplate index=0 id=2
  edit: ReplacePlaceholder [1] m=1
  edit: AppendChildren id=0 m=1
-- render_immediate
fallback runs
-- render_immediate
  edit: CreatePlaceholder id=3
  edit: ReplaceWith id=2 m=1
Slow runs
Slow got 42
  edit: LoadTemplate index=0 id=2
  edit: CreateTextNode "value = 42" id=4
  edit: ReplacePlaceholder [0] m=1
  edit: ReplaceWith id=3 m=1

== no SuspenseBoundary of our own
ssr: ""
ssr: "root value = 7"

    pub async fn wait_for_suspense(&mut self) {
        loop {
            self.queue_events();

            if !self.suspended_tasks_remaining() && !self.has_dirty_scopes() {
                break;
            }

            self.wait_for_suspense_work().await;

            self.render_suspense_immediate().await;
        }
    }

#[component]
fn Slow() -> Element {
  use_hook(|| {
    spawn(async { log("  plain spawn task polled") });
  });
  let value = use_resource(|| async {
    log("  resource future polled");
    tokio::time::sleep(Duration::from_millis(10)).await;
    1
  });
  let v = value.suspend()?;
  rsx! { "v={v}" }
}

-- wait_for_suspense
  resource future polled
-- done: v=1
-- wait_for_work (client style)

pub fn ErrorBoundary(props: ErrorBoundaryProps) -> Element {
    let error_boundary = use_error_boundary_provider();
    let errors = error_boundary.error();
    let has_errors = errors.is_some();

    // Drop errors before running user code that might borrow the error lock
    drop(errors);

    if has_errors {
        (props.handle_error.0)(error_boundary.clone())
    } else {
        std::result::Result::Ok({
            // ...
            VNode::new(
                None,
                TEMPLATE,
                Box::new([(props.children).into_dyn_node()]),
                Default::default(),
            )
        })
    }
}

pub struct ErrorContext {
    error: Rc<RefCell<Option<CapturedError>>>,
    subscribers: Subscribers,
}

#[component]
fn Parse(input: String) -> Element {
  let n: i32 = input.parse()?;
  rsx! { span { "n = {n}" } }
}

fn bad_input() -> Element {
  rsx! {
    ErrorBoundary {
      handle_error: |errors: ErrorContext| rsx! { p { "caught: {errors.error().unwrap()}" } },
      Parse { input: "abc" }
    }
  }
}

fn default_handler() -> Element {
  rsx! {
    ErrorBoundary {
      Parse { input: "abc" }
    }
  }
}

fn no_boundary() -> Element {
  rsx! {
    div { "header" }
    Parse { input: "abc" }
  }
}

bad_input, after rebuild:          ""
bad_input, after render_immediate: "<p>caught: invalid digit found in string</p>"
default_handler, after rebuild:          ""
default_handler, after render_immediate: "<div style=\"color:red;\"><pre>invalid digit found in string</pre></div>"
no_boundary, after rebuild:          "<div>header</div>"
no_boundary, after render_immediate: "<div style=\"color:red;\"><pre>invalid digit found in string</pre></div>"

#[component]
fn Clicker() -> Element {
  rsx! {
    button {
      onclick: move |_| -> Result<()> {
        let n: i32 = "x".parse()?;
        log(format!("unreachable {n}"));
        Ok(())
      },
      "click"
    }
  }
}

== error thrown from an event handler
  edit: LoadTemplate index=0 id=1
  edit: CreateTextNode "n = 12" id=2
  edit: ReplacePlaceholder [0] m=1
  edit: LoadTemplate index=0 id=3
  edit: NewEventListener click id=3
  edit: AppendChildren id=0 m=2
ssr: <span>n = 12</span><button>click</button>
-- handle_event returned
handle_error runs, error = Some("invalid digit found in string")
  edit: LoadTemplate index=0 id=4
  edit: CreateTextNode "caught: invalid digit found in string" id=5
  edit: ReplacePlaceholder [0] m=1
  edit: Remove id=1
  edit: ReplaceWith id=3 m=1
ssr: <p>caught: invalid digit found in string</p>

Slow runs
inner fallback runs
inner fallback runs
inner fallback runs
inner fallback runs
ssr: inner loading