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/playwright-tests/fullstack.spec.js

@@ -1,34 +1,38 @@
 // @ts-check
-const { test, expect } = require('@playwright/test');
+const { test, expect } = require("@playwright/test");
 
-test('button click', async ({ page }) => {
-  await page.goto('http://localhost:3333');
+test("button click", async ({ page }) => {
+  await page.goto("http://localhost:3333");
   await page.waitForTimeout(1000);
 
   // Expect the page to contain the counter text.
-  const main = page.locator('#main');
-  await expect(main).toContainText('hello axum! 12345');
+  const main = page.locator("#main");
+  await expect(main).toContainText("hello axum! 12345");
+  // Expect the title to contain the counter text.
+  await expect(page).toHaveTitle("hello axum! 12345");
 
   // Click the increment button.
-  let button = page.locator('button.increment-button');
+  let button = page.locator("button.increment-button");
   await button.click();
 
   // Expect the page to contain the updated counter text.
-  await expect(main).toContainText('hello axum! 12346');
+  await expect(main).toContainText("hello axum! 12346");
+  // Expect the title to contain the updated counter text.
+  await expect(page).toHaveTitle("hello axum! 12346");
 });
 
-test('fullstack communication', async ({ page }) => {
-  await page.goto('http://localhost:3333');
+test("fullstack communication", async ({ page }) => {
+  await page.goto("http://localhost:3333");
   await page.waitForTimeout(1000);
 
   // Expect the page to contain the counter text.
-  const main = page.locator('#main');
-  await expect(main).toContainText('Server said: ...');
+  const main = page.locator("#main");
+  await expect(main).toContainText("Server said: ...");
 
   // Click the increment button.
-  let button = page.locator('button.server-button');
+  let button = page.locator("button.server-button");
   await button.click();
 
   // Expect the page to contain the updated counter text.
-  await expect(main).toContainText('Server said: Hello from the server!');
+  await expect(main).toContainText("Server said: Hello from the server!");
 });

packages/playwright-tests/fullstack/src/main.rs

@@ -17,6 +17,7 @@ fn app() -> Element {
 
     rsx! {
         h1 { "hello axum! {count}" }
+        Title { "hello axum! {count}" }
         button { class: "increment-button", onclick: move |_| count += 1, "Increment" }
         button {
             class: "server-button",

packages/playwright-tests/nested-suspense.spec.js

@@ -17,6 +17,9 @@ test("nested suspense resolves", async ({ page }) => {
     "The robot becomes sentient and says hello world"
   );
 
+  // And expect the title to have resolved on the client
+  await expect(page).toHaveTitle("The robot says hello world");
+
   // And more loading text for the nested suspense
   await expect(mainMessageDiv).toContainText("Loading 1...");
   await expect(mainMessageDiv).toContainText("Loading 2...");

packages/playwright-tests/nested-suspense/src/main.rs

@@ -17,6 +17,10 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
+        SuspenseBoundary {
+            fallback: move |_| rsx! {},
+            LoadTitle {}
+        }
         MessageWithLoader { id: 0 }
     }
 }
@@ -33,6 +37,17 @@ fn MessageWithLoader(id: usize) -> Element {
     }
 }
 
+#[component]
+fn LoadTitle() -> Element {
+    let title = use_server_future(move || server_content(0))?()
+        .unwrap()
+        .unwrap();
+
+    rsx! {
+        Title { "{title.title}" }
+    }
+}
+
 #[component]
 fn Message(id: usize) -> Element {
     let message = use_server_future(move || server_content(id))?()

packages/playwright-tests/web.spec.js

@@ -7,6 +7,8 @@ test("button click", async ({ page }) => {
   // Expect the page to contain the counter text.
   const main = page.locator("#main");
   await expect(main).toContainText("hello axum! 0");
+  // Expect the title to contain the counter text.
+  await expect(page).toHaveTitle("hello axum! 0");
 
   // Click the increment button.
   let button = page.locator("button.increment-button");
@@ -14,6 +16,8 @@ test("button click", async ({ page }) => {
 
   // Expect the page to contain the updated counter text.
   await expect(main).toContainText("hello axum! 1");
+  // Expect the title to contain the updated counter text.
+  await expect(page).toHaveTitle("hello axum! 1");
 });
 
 test("svg", async ({ page }) => {

packages/playwright-tests/web/src/main.rs

@@ -9,6 +9,7 @@ fn app() -> Element {
     rsx! {
         div {
             "hello axum! {num}"
+            Title { "hello axum! {num}" }
             button { class: "increment-button", onclick: move |_| num += 1, "Increment" }
         }
         svg { circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" } }