diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 04931f08..a560df85 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -31,9 +31,9 @@ jobs: cache-on-failure: "false" - uses: cargo-bins/cargo-binstall@main - name: Install CLI - run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.0 + run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.1 - name: Build - run: cd preview && dx build --platform web --release --base-path "components" + run: cd preview && dx build --web --features fullstack --fullstack --ssg --release --base-path "components" - name: Copy output run: cp -r target/dx/preview/release/web/public docs - name: Add gh pages 404 diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 9d9de5e9..b969b879 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -41,32 +41,32 @@ jobs: shardIndex: [1, 2, 3, 4] shardTotal: [4] steps: - # Do our best to cache the toolchain and node install steps - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version: lts/* - - name: Install Rust - uses: dtolnay/rust-toolchain@1.88.0 - with: - targets: x86_64-unknown-linux-gnu,wasm32-unknown-unknown - - uses: Swatinem/rust-cache@v2 - with: - cache-all-crates: "true" - cache-on-failure: "true" - - uses: cargo-bins/cargo-binstall@main - - name: Install CLI - run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.0 - - name: Install dependencies - run: cd ./playwright && npm ci - - name: Install Playwright Browsers - run: cd ./playwright && npx playwright install --with-deps - - name: Run Playwright tests - run: cd ./playwright && npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} - - name: Upload blob report to GitHub Actions Artifacts - if: ${{ !cancelled() }} - uses: actions/upload-artifact@v4 - with: - name: blob-report-${{ matrix.shardIndex }} - path: blob-report - retention-days: 1 + # Do our best to cache the toolchain and node install steps + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install Rust + uses: dtolnay/rust-toolchain@1.88.0 + with: + targets: x86_64-unknown-linux-gnu,wasm32-unknown-unknown + - uses: Swatinem/rust-cache@v2 + with: + cache-all-crates: "true" + cache-on-failure: "true" + - uses: cargo-bins/cargo-binstall@main + - name: Install CLI + run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.1 + - name: Install dependencies + run: cd ./playwright && npm ci + - name: Install Playwright Browsers + run: cd ./playwright && npx playwright install --with-deps + - name: Run Playwright tests + run: cd ./playwright && npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + - name: Upload blob report to GitHub Actions Artifacts + if: ${{ !cancelled() }} + uses: actions/upload-artifact@v4 + with: + name: blob-report-${{ matrix.shardIndex }} + path: blob-report + retention-days: 1 diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml index 0ef2e745..7fc8a95f 100644 --- a/.github/workflows/preview.yml +++ b/.github/workflows/preview.yml @@ -45,7 +45,7 @@ jobs: - name: Install CLI run: cargo binstall dioxus-cli -y --force --version 0.7.0-rc.0 - name: Build - run: cd preview && dx build --platform web --release --base-path "components/pr-preview/pr-${{ github.event.pull_request.number }}/" + run: cd preview && dx build --web --release --base-path "components/pr-preview/pr-${{ github.event.pull_request.number }}/" - name: Copy output run: cp -r target/dx/preview/release/web/public docs - name: Deploy 🚀 diff --git a/README.md b/README.md index 9ddc5a85..f950e463 100644 --- a/README.md +++ b/README.md @@ -75,8 +75,8 @@ cargo run -p preview --features desktop or for the web build ``` -cargo binstall dioxus-cli -y --force --version 0.7.0-rc.0 -dx run -p preview --platform web +cargo binstall dioxus-cli -y --force --version 0.7.0-rc.1 +dx run -p preview --web ``` ## License diff --git a/playwright/playwright.config.ts b/playwright/playwright.config.ts index 8adafb6e..9f0c2465 100644 --- a/playwright/playwright.config.ts +++ b/playwright/playwright.config.ts @@ -78,7 +78,7 @@ export default defineConfig({ /* Run your local dev server before starting the tests */ webServer: { cwd: path.join(process.cwd(), "../preview"), - command: "dx run --platform web", + command: "dx run --web", port: 8080, timeout: 50 * 60 * 1000, reuseExistingServer: !process.env.CI, diff --git a/preview/src/main.rs b/preview/src/main.rs index 0c2fa070..d9c24c04 100644 --- a/preview/src/main.rs +++ b/preview/src/main.rs @@ -28,7 +28,28 @@ struct ComponentVariantDemoData { } fn main() { - dioxus::launch(App); + dioxus::LaunchBuilder::new() + // Set the server config only if we are building the server target + .with_cfg(server_only! { + ServeConfig::builder() + // Enable incremental rendering + .incremental( + dioxus::server::IncrementalRendererConfig::new() + // Store static files in the public directory where other static assets like wasm are stored + .static_dir( + std::env::current_exe() + .unwrap() + .parent() + .unwrap() + .join("public") + ) + // Don't clear the public folder on every build. The public folder has other files including the wasm + // binary and static assets required for the app to run + .clear_cache(false) + ) + .enable_out_of_order_streaming() + }) + .launch(App); } #[component] @@ -104,6 +125,16 @@ impl Route { } } +#[cfg(feature = "fullstack")] +#[server(endpoint = "static_routes", output = server_fn::codec::Json)] +async fn static_routes() -> Result, ServerFnError> { + // The `Routable` trait has a `static_routes` method that returns all static routes in the enum + Ok(Route::static_routes() + .iter() + .map(ToString::to_string) + .collect()) +} + #[component] fn NavigationLayout() -> Element { use_effect(move || { @@ -660,6 +691,8 @@ fn ColapsibleCodeBlock(highlighted: HighlightedCode) -> Element { #[component] fn ComponentDemo(iframe: Option, dark_mode: Option, name: String) -> Element { + let route = router().current::(); + tracing::info!("route: {route}"); let Some(demo) = components::DEMOS .iter() .find(|demo| demo.name == name) diff --git a/primitives/src/scroll_area.rs b/primitives/src/scroll_area.rs index 3366a0e3..87338051 100644 --- a/primitives/src/scroll_area.rs +++ b/primitives/src/scroll_area.rs @@ -99,27 +99,23 @@ pub fn ScrollArea(props: ScrollAreaProps) -> Element { let scroll_type = props.scroll_type; let always_show = props.always_show_scrollbars; - let overflow_style = use_memo(move || match scroll_type() { + let (overflow_x, overflow_y, scrollbar_width) = match scroll_type() { ScrollType::Auto => match direction() { - ScrollDirection::Vertical => "overflow-y: auto; overflow-x: hidden;", - ScrollDirection::Horizontal => "overflow-x: auto; overflow-y: hidden;", - ScrollDirection::Both => "overflow: auto;", + ScrollDirection::Vertical => (Some("hidden"), Some("auto"), None), + ScrollDirection::Horizontal => (Some("auto"), Some("hidden"), None), + ScrollDirection::Both => (Some("auto"), Some("auto"), None), }, ScrollType::Always => match direction() { - ScrollDirection::Vertical => "overflow-y: scroll; overflow-x: hidden;", - ScrollDirection::Horizontal => "overflow-x: scroll; overflow-y: hidden;", - ScrollDirection::Both => "overflow: scroll;", + ScrollDirection::Vertical => (Some("hidden"), Some("scroll"), None), + ScrollDirection::Horizontal => (Some("scroll"), Some("hidden"), None), + ScrollDirection::Both => (Some("scroll"), Some("scroll"), None), }, ScrollType::Hidden => match direction() { - ScrollDirection::Vertical => { - "overflow-y: scroll; overflow-x: hidden; scrollbar-width: none;" - } - ScrollDirection::Horizontal => { - "overflow-x: scroll; overflow-y: hidden; scrollbar-width: none;" - } - ScrollDirection::Both => "overflow: scroll; scrollbar-width: none;", + ScrollDirection::Vertical => (Some("hidden"), Some("scroll"), Some("none")), + ScrollDirection::Horizontal => (Some("scroll"), Some("hidden"), Some("none")), + ScrollDirection::Both => (Some("scroll"), Some("scroll"), Some("none")), }, - }); + }; let visibility_class = use_memo(move || { if always_show() { @@ -132,7 +128,9 @@ pub fn ScrollArea(props: ScrollAreaProps) -> Element { rsx! { div { class: "{visibility_class}", - style: "{overflow_style}", + overflow_x, + overflow_y, + "scrollbar-width": scrollbar_width, "data-scroll-direction": match direction() { ScrollDirection::Vertical => "vertical", ScrollDirection::Horizontal => "horizontal",