Enable ssg renderering (#120)

* patch dioxus

* use ssg in the CI workflow

* bump dioxus version

* bump to rc.1

* fix incremental config path

* bump dx version

* pass --web instead of --platform web

Author: ealmloff

.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

.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/[email protected]
-      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/[email protected]
+        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

.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 🚀

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

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,

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<Vec<String>, 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<bool>, dark_mode: Option<bool>, name: String) -> Element {
+    let route = router().current::<Route>();
+    tracing::info!("route: {route}");
     let Some(demo) = components::DEMOS
         .iter()
         .find(|demo| demo.name == name)

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",