Merge branch 'master' into jk/remove-dioxus-bin

playwright-tests/fullstack.spec.js

@@ -0,0 +1,32 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('button click', async ({ page }) => {
+  await page.goto('http://localhost:3333');
+
+  // Expect the page to contain the counter text.
+  const main = page.locator('#main');
+  await expect(main).toContainText('hello axum! 12345');
+
+  // Click the increment button.
+  let button = await page.locator('button.increment-button');
+  await button.click();
+
+  // Expect the page to contain the updated counter text.
+  await expect(main).toContainText('hello axum! 12346');
+});
+
+test('fullstack communication', async ({ page }) => {
+  await page.goto('http://localhost:3333');
+
+  // Expect the page to contain the counter text.
+  const main = page.locator('#main');
+  await expect(main).toContainText('Server said: ...');
+
+  // Click the increment button.
+  let button = await 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!');
+});

playwright-tests/fullstack/.gitignore

@@ -0,0 +1,2 @@
+dist
+target

playwright-tests/fullstack/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "dioxus-playwright-fullstack-test"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus-web = { path = "../../packages/web", features=["hydrate"], optional = true }
+dioxus = { path = "../../packages/dioxus" }
+dioxus-fullstack = { path = "../../packages/fullstack" }
+axum = { version = "0.6.12", optional = true }
+tokio = { version = "1.27.0", features = ["full"], optional = true }
+serde = "1.0.159"
+execute = "0.2.12"
+
+[features]
+default = []
+ssr = ["axum", "tokio", "dioxus-fullstack/axum"]
+web = ["dioxus-web"]

playwright-tests/fullstack/src/main.rs

@@ -0,0 +1,96 @@
+// This test is used by playwright configured in the root of the repo
+// Tests:
+// - Server functions
+// - SSR
+// - Hydration
+
+#![allow(non_snake_case)]
+use dioxus::prelude::*;
+use dioxus_fullstack::prelude::*;
+use serde::{Deserialize, Serialize};
+
+fn main() {
+    #[cfg(feature = "web")]
+    dioxus_web::launch_with_props(
+        app,
+        get_root_props_from_document().unwrap_or_default(),
+        dioxus_web::Config::new().hydrate(true),
+    );
+    #[cfg(feature = "ssr")]
+    {
+        // Start hot reloading
+        hot_reload_init!(dioxus_hot_reload::Config::new().with_rebuild_callback(|| {
+            execute::shell("dx build --features web")
+                .spawn()
+                .unwrap()
+                .wait()
+                .unwrap();
+            execute::shell("cargo run --features ssr").spawn().unwrap();
+            true
+        }));
+
+        tokio::runtime::Runtime::new()
+            .unwrap()
+            .block_on(async move {
+                let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 3333));
+                axum::Server::bind(&addr)
+                    .serve(
+                        axum::Router::new()
+                            .serve_dioxus_application(
+                                "",
+                                ServeConfigBuilder::new(app, AppProps { count: 12345 }).build(),
+                            )
+                            .into_make_service(),
+                    )
+                    .await
+                    .unwrap();
+            });
+    }
+}
+
+#[derive(Props, PartialEq, Debug, Default, Serialize, Deserialize, Clone)]
+struct AppProps {
+    count: i32,
+}
+
+#[allow(unused)]
+fn app(cx: Scope<AppProps>) -> Element {
+    let mut count = use_state(cx, || cx.props.count);
+    let text = use_state(cx, || "...".to_string());
+
+    cx.render(rsx! {
+        h1 { "hello axum! {count}" }
+        button {
+            class: "increment-button",
+            onclick: move |_| count += 1,
+            "Increment"
+        }
+        button {
+            class: "server-button",
+            onclick: move |_| {
+                to_owned![text];
+                async move {
+                    if let Ok(data) = get_server_data().await {
+                        println!("Client received: {}", data);
+                        text.set(data.clone());
+                        post_server_data(data).await.unwrap();
+                    }
+                }
+            },
+            "Run a server function!"
+        }
+        "Server said: {text}"
+    })
+}
+
+#[server(PostServerData)]
+async fn post_server_data(data: String) -> Result<(), ServerFnError> {
+    println!("Server received: {}", data);
+
+    Ok(())
+}
+
+#[server(GetServerData)]
+async fn get_server_data() -> Result<String, ServerFnError> {
+    Ok("Hello from the server!".to_string())
+}

playwright-tests/liveview.spec.js

@@ -0,0 +1,72 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('button click', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the counter text.
+  const main = page.locator('#main');
+  await expect(main).toContainText('hello axum! 0');
+
+  // Click the increment button.
+  await page.getByRole('button', { name: 'Increment' }).click();
+
+  // Expect the page to contain the updated counter text.
+  await expect(main).toContainText('hello axum! 1');
+});
+
+test('svg', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the svg.
+  const svg = page.locator('svg');
+
+  // Expect the svg to contain the circle.
+  const circle = svg.locator('circle');
+  await expect(circle).toHaveAttribute('cx', '50');
+  await expect(circle).toHaveAttribute('cy', '50');
+  await expect(circle).toHaveAttribute('r', '40');
+  await expect(circle).toHaveAttribute('stroke', 'green');
+  await expect(circle).toHaveAttribute('fill', 'yellow');
+});
+
+test('raw attribute', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the div with the raw attribute.
+  const div = page.locator('div.raw-attribute-div');
+  await expect(div).toHaveAttribute('raw-attribute', 'raw-attribute-value');
+});
+
+test('hidden attribute', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the div with the hidden attribute.
+  const div = page.locator('div.hidden-attribute-div');
+  await expect(div).toHaveAttribute('hidden', 'true');
+});
+
+test('dangerous inner html', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the div with the dangerous inner html.
+  const div = page.locator('div.dangerous-inner-html-div');
+  await expect(div).toContainText('hello dangerous inner html');
+});
+
+test('input value', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the input with the value.
+  const input = page.locator('input');
+  await expect(input).toHaveValue('hello input');
+});
+
+test('style', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3030');
+
+  // Expect the page to contain the div with the style.
+  const div = page.locator('div.style-div');
+  await expect(div).toHaveText('colored text');
+  await expect(div).toHaveCSS('color', 'rgb(255, 0, 0)');
+});

playwright-tests/liveview/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "dioxus-playwright-liveview-test"
+version = "0.0.1"
+edition = "2021"
+description = "Playwright test for Dioxus Liveview"
+license = "MIT/Apache-2.0"
+publish = false
+
+[dependencies]
+dioxus = { path = "../../packages/dioxus" }
+dioxus-liveview = { path = "../../packages/liveview", features = ["axum"] }
+tokio = { version = "1.19.2", features = ["full"] }
+axum = { version = "0.6.1", features = ["ws"] }

playwright-tests/liveview/src/main.rs

@@ -0,0 +1,78 @@
+// This test is used by playwright configured in the root of the repo
+
+use axum::{extract::ws::WebSocketUpgrade, response::Html, routing::get, Router};
+use dioxus::prelude::*;
+
+fn app(cx: Scope) -> Element {
+    let mut num = use_state(cx, || 0);
+
+    cx.render(rsx! {
+        div {
+            "hello axum! {num}"
+            button { onclick: move |_| num += 1, "Increment" }
+        }
+        svg {
+            circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
+        }
+        div {
+            class: "raw-attribute-div",
+            "raw-attribute": "raw-attribute-value",
+        }
+        div {
+            class: "hidden-attribute-div",
+            hidden: true,
+        }
+        div {
+            class: "dangerous-inner-html-div",
+            dangerous_inner_html: "<p>hello dangerous inner html</p>",
+        }
+        input {
+            value: "hello input",
+        }
+        div {
+            class: "style-div",
+            color: "red",
+            "colored text"
+        }
+    })
+}
+
+#[tokio::main]
+async fn main() {
+    let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
+
+    let view = dioxus_liveview::LiveViewPool::new();
+
+    let app = Router::new()
+        .route(
+            "/",
+            get(move || async move {
+                Html(format!(
+                    r#"
+            <!DOCTYPE html>
+            <html>
+                <head> <title>Dioxus LiveView with axum</title>  </head>
+                <body> <div id="main"></div> </body>
+                {glue}
+            </html>
+            "#,
+                    glue = dioxus_liveview::interpreter_glue(&format!("ws://{addr}/ws"))
+                ))
+            }),
+        )
+        .route(
+            "/ws",
+            get(move |ws: WebSocketUpgrade| async move {
+                ws.on_upgrade(move |socket| async move {
+                    _ = view.launch(dioxus_liveview::axum_socket(socket), app).await;
+                })
+            }),
+        );
+
+    println!("Listening on http://{addr}");
+
+    axum::Server::bind(&addr.to_string().parse().unwrap())
+        .serve(app.into_make_service())
+        .await
+        .unwrap();
+}

playwright-tests/web.spec.js

@@ -0,0 +1,94 @@
+// @ts-check
+const { test, expect, defineConfig } = require('@playwright/test');
+
+test('button click', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the counter text.
+  const main = page.locator('#main');
+  await expect(main).toContainText('hello axum! 0');
+
+  // Click the increment button.
+  let button = await page.locator('button.increment-button');
+  await button.click();
+
+  // Expect the page to contain the updated counter text.
+  await expect(main).toContainText('hello axum! 1');
+});
+
+test('svg', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the svg.
+  const svg = page.locator('svg');
+
+  // Expect the svg to contain the circle.
+  const circle = svg.locator('circle');
+  await expect(circle).toHaveAttribute('cx', '50');
+  await expect(circle).toHaveAttribute('cy', '50');
+  await expect(circle).toHaveAttribute('r', '40');
+  await expect(circle).toHaveAttribute('stroke', 'green');
+  await expect(circle).toHaveAttribute('fill', 'yellow');
+});
+
+test('raw attribute', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the div with the raw attribute.
+  const div = page.locator('div.raw-attribute-div');
+  await expect(div).toHaveAttribute('raw-attribute', 'raw-attribute-value');
+});
+
+test('hidden attribute', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the div with the hidden attribute.
+  const div = page.locator('div.hidden-attribute-div');
+  await expect(div).toHaveAttribute('hidden', 'true');
+});
+
+test('dangerous inner html', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the div with the dangerous inner html.
+  const div = page.locator('div.dangerous-inner-html-div');
+  await expect(div).toContainText('hello dangerous inner html');
+});
+
+test('input value', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the input with the value.
+  const input = page.locator('input');
+  await expect(input).toHaveValue('hello input');
+});
+
+test('style', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the div with the style.
+  const div = page.locator('div.style-div');
+  await expect(div).toHaveText('colored text');
+  await expect(div).toHaveCSS('color', 'rgb(255, 0, 0)');
+});
+
+test('eval', async ({ page }) => {
+  await page.goto('http://localhost:8080');
+
+  // Expect the page to contain the div with the eval and have no text.
+  const div = page.locator('div.eval-result');
+  await expect(div).toHaveText('');
+
+  // Click the button to run the eval.
+  let button = await page.locator('button.eval-button');
+  await button.click();
+
+  // Check that the title changed.
+  await expect(page).toHaveTitle('Hello from Dioxus Eval!');
+
+  // Check that the div has the eval value.
+  await expect(div).toHaveText('returned eval value');
+
+});
+
+// Shutdown the li

playwright-tests/web/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "dioxus-playwright-web-test"
+version = "0.0.1"
+edition = "2021"
+description = "Playwright test for Dioxus Web"
+license = "MIT/Apache-2.0"
+publish = false
+
+[dependencies]
+dioxus = { path = "../../packages/dioxus" }
+dioxus-web = { path = "../../packages/web" }
+serde_json = "1.0.96"

playwright-tests/web/src/main.rs

@@ -0,0 +1,63 @@
+// This test is used by playwright configured in the root of the repo
+
+use dioxus::prelude::*;
+use dioxus_web::use_eval;
+
+fn app(cx: Scope) -> Element {
+    let mut num = use_state(cx, || 0);
+    let eval = use_eval(cx);
+    let eval_result = use_state(cx, String::new);
+
+    cx.render(rsx! {
+        div {
+            "hello axum! {num}"
+            button {
+                class: "increment-button",
+                onclick: move |_| num += 1, "Increment"
+            }
+        }
+        svg {
+            circle { cx: 50, cy: 50, r: 40, stroke: "green", fill: "yellow" }
+        }
+        div {
+            class: "raw-attribute-div",
+            "raw-attribute": "raw-attribute-value",
+        }
+        div {
+            class: "hidden-attribute-div",
+            hidden: true,
+        }
+        div {
+            class: "dangerous-inner-html-div",
+            dangerous_inner_html: "<p>hello dangerous inner html</p>",
+        }
+        input {
+            value: "hello input",
+        }
+        div {
+            class: "style-div",
+            color: "red",
+            "colored text"
+        }
+        button {
+            class: "eval-button",
+            onclick: move |_| {
+                // Set the window title
+                let result = eval(r#"window.document.title = 'Hello from Dioxus Eval!';
+                return "returned eval value";"#.to_string());
+                if let Ok(serde_json::Value::String(string)) = result.get() {
+                    eval_result.set(string);
+                }
+            },
+            "Eval"
+        }
+        div {
+            class: "eval-result",
+            "{eval_result}"
+        }
+    })
+}
+
+fn main() {
+    dioxus_web::launch(app);
+}