Hop is not yet Elm 0.17 compatible.
,-------. ,---. ,---.
|History| |Hop| |App|
`---+---' `-+-' `-+-'
|1 location change | |
|----------------->| |
| | |
| |2 (Route, Location) |
| |------------------->|
,---+---. ,-+-. ,-+-.
|History| |Hop| |App|
`-------' `---' `---'
- Routes are defined as union types e.g.
User Int - You define path matchers e.g.
match2 User "/users/ int. This matches a path like/users/1. - (1) When the browser location changes, Hop will match the path e.g.
/users/1->User 1. - (2) Hop provides a signal that you application consumes, this signal carries the matched routes and information about the current location.
,---. ,---. ,---. ,-------.
|Elm| |App| |Hop| |History|
`-+-' `-+-' `-+-' `---+---'
| |1 navigateTo path | |
| |----------------->| |
| | | |
| | | 2 change path |
| | |--------------->|
| | | |
| | | 3 Task |
| | |<- - - - - - - -|
| | | |
| | 4 Effects | |
| |<- - - - - - - - -| |
| | | |
| 5 Task | | |
|<-------------| | |
,-+-. ,-+-. ,-+-. ,---+---.
|Elm| |App| |Hop| |History|
`---' `---' `---' `-------'
- (1-2) To change the browser location you call
Hop.Navigate.navigateTo. - (3-5) This will return an effect that your application must run via ports.
- When the task is run by Elm the browser location changes.
Hop works with StartApp out of the box. From v4 Hop supports push state or hash routing.
A proper url should have the query before the hash e.g. ?keyword=Ja#/users/1,
but when using hash routing, query parameters are appended after the hash path e.g. #/users/1?keyword=Ja.
This is done for aesthetics and so the router is fully controlled by the hash fragment.
See examples/basic and examples/full folders. To run the example apps:
- Clone this repo
- Go to example folder
- Follow the readme in that folder
- Navigate needs functions to:
- Change path only (without changing the query)
- Navigate without adding to history
- Redirects e.g. "/" -> "/dashboard"
-
In order to match the initial route we need to manually send tasks to a port. Done via
route.run. This is one more thing for the user to do. Is this really necessary, can this be removed? Maybe in Elm 0.17. -
Remove the need to pass the current url to query methods. At the moment we need to send
setQuery location dictbecause Hop cannot figure out the current query by itself. This project could be the solution.
Thanks to @etaque and @Bogdanp for the inspiration to make this better.