Add SSR to the multipage example #51

bryanjswift · 2020-10-17T05:08:45Z

The RouteDispatcher is likely overkill for this example (after I paired it down) but it encapsulates the functionality of pushing state into browser history which I think is still useful to do. The SSR parts are cobbled together from some examples but does the job.

This has a pile of commits because it started as an experiment for interacting with a server I have defined in a separate repository but once I got SSR working I thought it could be paired down to a useful extension of the multipage example.

Refs #32

schell

This is great! I just had a couple comments and a couple questions. Also, I wrote a similar component for the mogwai-realworld demo (WIP) that I think is worth a gander:

route.rs
nav.rs dispatches Routes
lib.rs where view messages from nav.rs are bound to model messages for App in lib.rs

examples/multipage/src/app.rs

examples/multipage/src/lib.rs

examples/multipage/src/main.rs

The game renders as a constant set of cells but update them once the game loads.

`Transmitter` and `Receiver` always have a `'static` lifetime (?) so can be safely passed as references throughout the applicaiton.

Each `<li>` in the `GameList` (from `GameList::game_li`) should be clickable and trigger a message which can be translated to a `Route::Game`.

Change the "Games" link to navigate to a `GameList`.

Implement `get_game` and get_game_list` in terms of `fetch`.

Clicking a cell triggers a PATCH to the server, the server responds with an updated board state. The board view is replaced on each update.

Using `Uuid` means `Copy` can be derived for structs and enums as well because `Uuid` is `Copy`.

Use the `From` trait to turn a `String` into a `Route` and the `Display` trait to turn a `Route` into a `String`.

`RouteDispatcher::push_state` more closely resembles the underlying browser based implementation which uses `History::push_state_with_url` to add to the history stack.

Pass the initial route to the `App` setup.

bryanjswift · 2020-10-23T02:37:39Z

This is great! I just had a couple comments and a couple questions. Also, I wrote a similar component for the mogwai-realworld demo (WIP) that I think is worth a gander:

route.rs

nav.rs dispatches Routes

lib.rs where view messages from nav.rs are bound to model messages for App in lib.rs

I was looking at how you were handling things in the mogwai-realworld project while I was doing this exploration. I landed on not being able to use the same pattern for navigation as you use in nav.rs because I wanted to use the history API rather than "hashchange" events. The history API has a "popstate" event (that I didn't implement, oops) but that only works when going back not when navigating to a new screen.

Move `view_builder` function from `RouteDispatcher` to `From<Route>` implementation for `ViewBuilder<HtmlElement>`. Remove the `RouteDispatcher` struct.

Or rather, let `Gizmo::from` do it for us.

bryanjswift · 2020-10-23T03:03:50Z

I've stripped away some of the things you pointed out that didn't make sense any more for the example. I think it's ready for another look!

schell

LGTM. Are you ready for a merge?

bryanjswift · 2020-10-23T19:49:47Z

LGTM. Are you ready for a merge?

Yep!

schell requested changes Oct 22, 2020

View reviewed changes

examples/multipage/src/app.rs Outdated Show resolved Hide resolved

examples/multipage/src/lib.rs Outdated Show resolved Hide resolved

examples/multipage/src/main.rs Show resolved Hide resolved

bryanjswift added 29 commits October 22, 2020 22:11

Start to add additional complexity to the home route

8c83f6c

Add "game" components to display minesweeper (like) game board

90e4f64

Add "route" for displaying minesweeper (like) game board

d92018b

Add MIT license to multipage example

5de8ab0

Add description and repository metadata to multipage example

d55fb27

Change KeyboardEvent feature for MouseEvent

8f53ec4

Use usize rather than u16 for coordinates

9396721

Enable "bulk updates" to board view

eb3db71

Add a way to fetch game state from a local server

a460067

Fetch game state when starting to render the game

5abcac1

The game renders as a constant set of cells but update them once the game loads.

Change board function to take references

8476345

`Transmitter` and `Receiver` always have a `'static` lifetime (?) so can be safely passed as references throughout the applicaiton.

Add a GameList component to render list of game ids

6015c4b

Each `<li>` in the `GameList` (from `GameList::game_li`) should be clickable and trigger a message which can be translated to a `Route::Game`.

Rename GetGameError to FetchError

47c9e5c

Add api::get_game_list to retrieve list of game ids

f046634

Render the GameList component rather than a default Game

171f261

Change the "Games" link to navigate to a `GameList`.

Use namespaces to clarify intent

3813452

Use <slot> with patch:children to replace views

aed6c6a

Create RouteDispatcher to facilitate passing Transmitter<Route>

1c4e6af

Create a more general fetch function

1e21e18

Implement `get_game` and get_game_list` in terms of `fetch`.

Add patch_game function to update remote game

fe98770

Enable playing the game

dc28d82

Clicking a cell triggers a PATCH to the server, the server responds with an updated board state. The board view is replaced on each update.

Use Uuid rater than String to represent ids

c9ccb3f

Using `Uuid` means `Copy` can be derived for structs and enums as well because `Uuid` is `Copy`.

Only include the web-sys features used

5f15c4e

Include init JS function from the server root

a90def1

Implement traits to translate Route <-> String

7cfb8ec

Use the `From` trait to turn a `String` into a `Route` and the `Display` trait to turn a `Route` into a `String`.

Change RouteDispatcher::navigate to ::push_state

36d16b8

`RouteDispatcher::push_state` more closely resembles the underlying browser based implementation which uses `History::push_state_with_url` to add to the history stack.

Load initial route from the browser location

4db0637

Pass the initial route to the `App` setup.

Make hydration work for the home page

a9736bc

Only include mogwai::utils in the functions using it

45eb2f4

bryanjswift added 8 commits October 22, 2020 22:11

Create a Route from anything that can be treated as a str ref

5e64be9

Only use the API during initial view if on wasm32

c9b8f4f

Add a way to create SSR view of the application

c9d4290

Add a "barebones" SSR implementation

b231f89

Remove the complexities of "Game" related functionality

7c97246

Remove unused features from web-sys dependency

ee73b0e

Remove unused crates from multipage example

459b76f

Add doc block for tera::Tera TEMPLATES definition

fd3b3ff

bryanjswift force-pushed the multipage-ssr branch from b740114 to fd3b3ff Compare October 23, 2020 02:19

bryanjswift added 3 commits October 22, 2020 22:42

Clone a Transmitter from a given reference in RouteDispatcher::new

9d55ca0

Move push_state to a route_dispatch module

f7497ad

Move `view_builder` function from `RouteDispatcher` to `From<Route>` implementation for `ViewBuilder<HtmlElement>`. Remove the `RouteDispatcher` struct.

Do not create Transmitter and Receiver for App

725a2ac

Or rather, let `Gizmo::from` do it for us.

bryanjswift requested a review from schell October 23, 2020 03:03

schell approved these changes Oct 23, 2020

View reviewed changes

schell merged commit 9c6b280 into schell:master Oct 23, 2020

bryanjswift deleted the multipage-ssr branch October 23, 2020 21:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add SSR to the multipage example #51

Add SSR to the multipage example #51

bryanjswift commented Oct 17, 2020 •

edited

Loading

schell left a comment

bryanjswift commented Oct 23, 2020

bryanjswift commented Oct 23, 2020

schell left a comment

bryanjswift commented Oct 23, 2020

Add SSR to the multipage example #51

Add SSR to the multipage example #51

Conversation

bryanjswift commented Oct 17, 2020 • edited Loading

schell left a comment

Choose a reason for hiding this comment

bryanjswift commented Oct 23, 2020

bryanjswift commented Oct 23, 2020

schell left a comment

Choose a reason for hiding this comment

bryanjswift commented Oct 23, 2020

bryanjswift commented Oct 17, 2020 •

edited

Loading