Skip to content

Edit guide to match JS DSL snippet #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 10, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 14 additions & 8 deletions GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ data MyRoute
= PostIndex
| Post PostId
| PostEdit PostId
| PostBrowse String String
| PostBrowse Int String
```

By using a data type, we can use `case` analysis to guarantee that we've
Expand Down Expand Up @@ -111,7 +111,7 @@ And now finally, we need to extract multiple segments for `PostBrowse`.
```purescript
postBrowse :: Match MyRoute
postBrowse =
PostBrowse <$> (lit "posts" *> str) <*> str
PostBrowse <$> (lit "posts" *> lit "browse" *> int) <*> str
```

The `<*>` combinator has arrows on both sides because we want both values.
Expand Down Expand Up @@ -150,7 +150,7 @@ myRoute = oneOf
[ PostIndex <$ lit "posts"
, Post <$> (lit "posts" *> int)
, PostEdit <$> (lit "posts" *> int) <* lit "edit"
, PostBrowse <$> (lit "posts" *> str) <*> str
, PostBrowse <$> (lit "posts" *> lit "browse" *> int) <*> str
]
```

Expand All @@ -166,7 +166,7 @@ myRoute =
[ pure PostIndex
, Post <$> int
, PostEdit <$> int <* lit "edit"
, PostBrowse <$> str <*> str
, PostBrowse <$> (lit "browse" *> int) <*> str
]
```

Expand All @@ -185,7 +185,7 @@ myRoute =
[ PostIndex <$ end
, Post <$> int <* end
, PostEdit <$> int <* lit "edit" <* end
, PostBrowse <$> str <*> str <* end
, PostBrowse <$> (lit "browse" *> int) <*> str <* end
]
```

Expand All @@ -199,7 +199,7 @@ myRoute =
lit "posts" *> oneOf
[ PostEdit <$> int <* lit "edit"
, Post <$> int
, PostBrowse <$> str <*> str
, PostBrowse <$> (lit "browse" *> int) <*> str
, pure PostIndex
] <* end
```
Expand All @@ -217,7 +217,7 @@ myRoute =
root *> lit "posts" *> oneOf
[ PostEdit <$> int <* lit "edit"
, Post <$> int
, PostBrowse <$> str <*> str
, PostBrowse <$> (lit "browse" *> int) <*> str
, pure PostIndex
] <* end
```
Expand All @@ -234,14 +234,17 @@ matchMyRoute = match myRoute
test1 = matchMyRoute "/posts"
test2 = matchMyRoute "/posts/12"
test3 = matchMyRoute "/posts/12/edit"
test3 = matchMyRoute "/posts/browse/2004/June"
test4 = matchMyRoute "/psots/bad"
```

## Routing events with `Routing.Hash`

Now that we have a parser, we'll want to respond to events and fire a
callback like in our original example. `purescript-routing` supports
hash-based routing via `Routing.Hash`.
hash-based routing via `Routing.Hash`. Hash-based routing uses anchors
(`#` or "hash" character) to specify the routes.
For example: `www.example.com/#posts/12/edit`.

```purescript
import Routing.Hash (matches)
Expand Down Expand Up @@ -285,6 +288,9 @@ Alternatively, we could explicitly add a `NotFound` constructor to `MyRoute`.

## Routing events with `Routing.PushState`

PushState-based routing *avoids* the use of anchors (`#`) to specify the routes.
For example: `www.example.com/posts/12/edit`.

Routing with `Routing.PushState` is similar to hash-based routing except that
we must first create an interface. Browsers don't handle location events
directly, so the interface needs to do some bookkeeping of it's own for
Expand Down