switch to a Document trait and introduce Script/Head/Style/Meta components (#2635)

* switch to a Document trait and introduce Script/Head/Style/Meta components

* Fix desktop title

* Insert special elements into the head during the inital SSR render

* Make all head component attributes optional

* hydrate head elements

* improve the server streaming head warning

* Document fullstack head hydration approach

* deduplicate head elements by href

* move Link into head::Link

* document head components

* add meta and title examples

* Fix a few doc examples

* fix formatting

* Add title to playwright tests

* serde is optional on web, but it is enabled by hydrate

* remove leftover console log

packages/desktop/src/config.rs

@@ -211,8 +211,8 @@ impl Config {
     /// Sets the menu the window will use. This will override the default menu bar.
     ///
     /// > Note: Menu will be hidden if
-    /// [`with_decorations`](tao::window::WindowBuilder::with_decorations)
-    /// is set to false and passed into [`with_window`](Config::with_window)
+    /// > [`with_decorations`](tao::window::WindowBuilder::with_decorations)
+    /// > is set to false and passed into [`with_window`](Config::with_window)
     #[allow(unused)]
     pub fn with_menu(mut self, menu: impl Into<Option<DioxusMenu>>) -> Self {
         #[cfg(not(any(target_os = "ios", target_os = "android")))]

packages/desktop/src/document.rs

@@ -1,23 +1,27 @@
-use dioxus_html::prelude::{EvalError, EvalProvider, Evaluator};
+use dioxus_html::document::{Document, EvalError, Evaluator};
 use generational_box::{AnyStorage, GenerationalBox, UnsyncStorage};
 
 use crate::{query::Query, DesktopContext};
 
 /// Represents the desktop-target's provider of evaluators.
-pub struct DesktopEvalProvider {
+pub struct DesktopDocument {
     pub(crate) desktop_ctx: DesktopContext,
 }
 
-impl DesktopEvalProvider {
+impl DesktopDocument {
     pub fn new(desktop_ctx: DesktopContext) -> Self {
         Self { desktop_ctx }
     }
 }
 
-impl EvalProvider for DesktopEvalProvider {
+impl Document for DesktopDocument {
     fn new_evaluator(&self, js: String) -> GenerationalBox<Box<dyn Evaluator>> {
         DesktopEvaluator::create(self.desktop_ctx.clone(), js)
     }
+
+    fn set_title(&self, title: String) {
+        self.desktop_ctx.window.set_title(&title);
+    }
 }
 
 /// Represents a desktop-target's JavaScript evaluator.

packages/desktop/src/lib.rs

@@ -7,9 +7,9 @@ mod app;
 mod assets;
 mod config;
 mod desktop_context;
+mod document;
 mod edits;
 mod element;
-mod eval;
 mod event_handlers;
 mod events;
 mod file_upload;

packages/desktop/src/protocol.rs

@@ -1,5 +1,5 @@
 use crate::{assets::*, edits::EditQueue};
-use dioxus_interpreter_js::eval::NATIVE_EVAL_JS;
+use dioxus_html::document::NATIVE_EVAL_JS;
 use dioxus_interpreter_js::unified_bindings::SLEDGEHAMMER_JS;
 use dioxus_interpreter_js::NATIVE_JS;
 use std::path::{Component, Path, PathBuf};

packages/desktop/src/webview.rs

@@ -1,11 +1,11 @@
 use crate::menubar::DioxusMenu;
 use crate::{
-    app::SharedContext, assets::AssetHandlerRegistry, edits::EditQueue, eval::DesktopEvalProvider,
+    app::SharedContext, assets::AssetHandlerRegistry, document::DesktopDocument, edits::EditQueue,
     file_upload::NativeFileHover, ipc::UserWindowEvent, protocol, waker::tao_waker, Config,
     DesktopContext, DesktopService,
 };
 use dioxus_core::{ScopeId, VirtualDom};
-use dioxus_html::prelude::EvalProvider;
+use dioxus_html::document::Document;
 use futures_util::{pin_mut, FutureExt};
 use std::{rc::Rc, task::Waker};
 use wry::{RequestAsyncResponder, WebContext, WebViewBuilder};
@@ -214,8 +214,7 @@ impl WebviewInstance {
             file_hover,
         ));
 
-        let provider: Rc<dyn EvalProvider> =
-            Rc::new(DesktopEvalProvider::new(desktop_context.clone()));
+        let provider: Rc<dyn Document> = Rc::new(DesktopDocument::new(desktop_context.clone()));
 
         dom.in_runtime(|| {
             ScopeId::ROOT.provide_context(desktop_context.clone());