SSR Hydration

.github/workflows/main-checks.yml

@@ -89,7 +89,6 @@ jobs:
           args: --doc --features doc_test --features wasm_test
 
 
-
   integration_tests:
     name: Integration Tests on ${{ matrix.toolchain }}
     runs-on: ubuntu-latest
@@ -156,9 +155,39 @@ jobs:
         uses: actions-rs/cargo@v1
         with:
           command: test
-          args: --all-targets --workspace --exclude yew --exclude website-test
+          args: --all-targets --workspace --exclude website-test
 
 
+  ssr_tests:
+    name: SSR Tests on ${{ matrix.toolchain }}
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        toolchain:
+          # anyway to dynamically grep the MSRV from Cargo.toml?
+          - 1.56.0 # MSRV
+          - stable
+          - nightly
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ matrix.toolchain }}
+          override: true
+          profile: minimal
+
+      - uses: Swatinem/rust-cache@v1
+
+      - name: Run tests
+        uses: actions-rs/cargo@v1
+        with:
+          command: test
+          args: --workspace ssr_tests --features ssr
+
 
   test-lints:
     name: Test lints on nightly
@@ -180,4 +209,3 @@ jobs:
         with:
           command: test
           args: -p yew-macro test_html_lints --features lints
-

.github/workflows/publish-examples.yml

@@ -58,6 +58,11 @@ jobs:
               continue
             fi
 
+            # ssr does not need trunk
+            if [[ "$example" == "ssr_router" ]]; then
+              continue
+            fi
+
             echo "building: $example"
             (
               cd "$path"

Cargo.toml

@@ -15,6 +15,7 @@ members = [
   "examples/dyn_create_destroy_apps",
   "examples/file_upload",
   "examples/function_memory_game",
+  "examples/function_router",
   "examples/function_todomvc",
   "examples/futures",
   "examples/game_of_life",
@@ -28,6 +29,7 @@ members = [
   "examples/portals",
   "examples/router",
   "examples/simple_ssr",
+  "examples/ssr_router",
   "examples/timer",
   "examples/todomvc",
   "examples/two_apps",

Makefile.toml

@@ -82,7 +82,7 @@ dependencies = ["test"]
 [tasks.test]
 private = true
 command = "cargo"
-args = ["test", "--all-targets", "--workspace", "--exclude", "website-test"]
+args = ["test", "--all-targets", "--workspace", "--exclude", "website-test", "--exclude", "changelog"]
 
 [tasks.doc-test-flow]
 private = true

examples/function_router/Cargo.toml

@@ -0,0 +1,23 @@
+[package]
+name = "function_router"
+version = "0.1.0"
+edition = "2021"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+lipsum = "0.8"
+log = "0.4"
+rand = { version = "0.8", features = ["small_rng"] }
+yew = { path = "../../packages/yew" }
+yew-router = { path = "../../packages/yew-router" }
+serde = { version = "1.0", features = ["derive"] }
+lazy_static = "1.4.0"
+gloo-timers = "0.2"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+getrandom = { version = "0.2", features = ["js"] }
+instant = { version = "0.1", features = ["wasm-bindgen"] }
+wasm-logger = "0.2"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+instant = { version = "0.1" }

examples/function_router/README.md

@@ -0,0 +1,49 @@
+# Function Router Example
+
+This is identical to the router example, but written in function
+components.
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Ffunction_router)](https://examples.yew.rs/function_router)
+
+A blog all about yew.
+The best way to figure out what this example is about is to just open it up.
+It's mobile friendly too!
+
+## Running
+
+While not strictly necessary, this example should be built in release mode:
+
+```bash
+trunk serve --release
+```
+
+Content generation can take up quite a bit of time in debug builds.
+
+## Concepts
+
+This example involves many different parts, here are just the Yew specific things:
+
+- Uses [`yew-router`] to render and switch between multiple pages.
+
+The example automatically adapts to the `--public-url` value passed to Trunk.
+This allows it to be hosted on any path, not just at the root.
+For example, our demo is hosted at [/router](https://examples.yew.rs/router).
+
+This is achieved by adding `<base data-trunk-public-url />` to the [index.html](index.html) file.
+Trunk rewrites this tag to contain the value passed to `--public-url` which can then be retrieved at runtime.
+Take a look at [`Route`](src/main.rs) for the implementation.
+
+## Improvements
+
+- Use a special image component which shows a progress bar until the image is loaded.
+- Scroll back to the top after switching route
+- Run content generation in a dedicated web worker
+- Use longer Markov chains to achieve more coherent results
+- Make images deterministic (the same seed should produce the same images)
+- Show posts by the author on their page
+  (this is currently impossible because we need to find post seeds which in turn generate the author's seed)
+- Show other posts at the end of a post ("continue reading")
+- Home (`/`) should include links to the post list and the author introduction
+- Detect sub-path from `--public-url` value passed to Trunk. See: thedodd/trunk#51
+
+[`yew-router`]: https://docs.rs/yew-router/latest/yew_router/

examples/function_router/data/keywords.txt

@@ -0,0 +1,34 @@
+allergenics
+archaeology
+austria
+berries
+birds
+color
+conservation
+cosmology
+culture
+europe
+evergreens
+fleshy
+france
+guides
+horticulture
+ireland
+landscaping
+medicine
+music
+poison
+religion
+rome
+rust
+scotland
+seeds
+spain
+taxonomy
+toxics
+tradition
+trees
+wasm
+wood
+woodworking
+yew

examples/function_router/data/syllables.txt

@@ -0,0 +1,20 @@
+ald
+ber
+fe
+ger
+jo
+jus
+kas
+lix
+lu
+mon
+mour
+nas
+ridge
+ry
+si
+star
+tey
+tim
+tin
+yew