Add initial version of hash history (#4311)

* Add initial version of hash history

* wip...

* more cleanups

* cleanup the web history impl and then add a playwright test

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

packages/playwright-tests/playwright.config.js

@@ -102,6 +102,15 @@ module.exports = defineConfig({
       reuseExistingServer: !process.env.CI,
       stdout: "pipe",
     },
+    {
+      cwd: path.join(process.cwd(), "web-hash-routing"),
+      command:
+        'cargo run --package dioxus-cli --release -- run --verbose --force-sequential --platform web --addr "127.0.0.1" --port 2021',
+      port: 2021,
+      timeout: 50 * 60 * 1000,
+      reuseExistingServer: !process.env.CI,
+      stdout: "pipe",
+    },
     {
       cwd: path.join(process.cwd(), "fullstack"),
       command:

packages/playwright-tests/web-hash-routing.spec.js

@@ -0,0 +1,31 @@
+// @ts-check
+const { test, expect } = require("@playwright/test");
+
+test("redirect", async ({ page }) => {
+  // Going to the root url should redirect to /other.
+  await page.goto("http://localhost:2021");
+
+  // Expect the page to the text Other
+  const main = page.locator("#other");
+  await expect(main).toContainText("Other");
+
+  // Expect the url to be /#/other
+  await expect(page).toHaveURL("http://localhost:2021/#/other");
+});
+
+test("links", async ({ page }) => {
+  await page.goto("http://localhost:2021/#/other");
+
+  // Expect clicking the link to /other/123 to navigate to /other/123
+  const link = page.locator("a[href='/#/other/123']");
+  await link.click();
+  await expect(page).toHaveURL("http://localhost:2021/#/other/123");
+});
+
+test("fallback", async ({ page }) => {
+  await page.goto("http://localhost:2021/#/my/404/route");
+
+  // Expect the page to contain the text Fallback
+  const main = page.locator("#not-found");
+  await expect(main).toContainText("NotFound");
+});

packages/playwright-tests/web-hash-routing/Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "dioxus-playwright-web-hash-routing-test"
+version = "0.0.1"
+edition = "2021"
+description = "Playwright test for Dioxus Web Routing"
+license = "MIT OR Apache-2.0"
+publish = false
+
+[dependencies]
+dioxus = { workspace = true, features = ["web", "router"]}

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

@@ -0,0 +1,61 @@
+use std::rc::Rc;
+
+use dioxus::{prelude::*, web::HashHistory};
+
+fn main() {
+    dioxus::LaunchBuilder::new()
+        .with_cfg(dioxus::web::Config::new().history(Rc::new(HashHistory::new(false))))
+        .launch(|| {
+            rsx! {
+                Router::<Route> {}
+            }
+        })
+}
+
+#[derive(Routable, Clone, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[redirect("/",|| Route::Other)]
+    #[route("/other")]
+    Other,
+    #[route("/other/:id")]
+    OtherId { id: String },
+    #[route("/:..segments")]
+    NotFound { segments: Vec<String> },
+}
+
+#[component]
+fn Other() -> Element {
+    rsx! {
+        div {
+            id: "other",
+            "Other"
+        }
+
+        Link {
+            id: "other-id-link",
+            to: Route::OtherId { id: "123".to_string() },
+            "go to OtherId"
+        }
+    }
+}
+
+#[component]
+fn OtherId(id: String) -> Element {
+    rsx! {
+        div {
+            id: "other-id",
+            "OtherId {id}"
+        }
+    }
+}
+
+#[component]
+fn NotFound(segments: Vec<String>) -> Element {
+    rsx! {
+        div {
+            id: "not-found",
+            "NotFound {segments:?}"
+        }
+    }
+}