• This repository has been archived on 09/Mar/2018
  • Stars
    star
    293
  • Rank 141,748 (Top 3 %)
  • Language
    Elm
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[Deprecated] Navigation and routing helpers for single page applications in Elm

Hop: Navigation and routing helpers for Elm SPAs

Build Status

alt Hop

With the release of Elm 0.18 the official libraries Navigation and UrlParser have become a lot more robust and useful. They now integrate a lot of the functionality that Hop used to provide for previous versions of Elm. For example UrlParser now has parseHash and parsePath. Because of this I'm not convinced that Hop needs to be upgraded to Elm 0.18. I'll wait and see if this library could provide value in 0.18.

Hop is a helper library meant to be used with:

  • Navigation v1 for listening to location changes in the browser and pushing changes to it.
  • UrlParser v1 for constructing routes and parsing URLs.

What Hop provides

On top of these two packages above, Hop helps with:

  • Abstracting the differences between push or hash routing
  • Providing helpers for working with the query string
  • Encode / Decode the location path
  • Encode / Decode the query string

Getting Started

Please see this example app. It explains how to wire everything in the comments.

Docs

Building routes

Nesting routes

Matching routes

Navigating

Reverse routing

API

Changelog

Testing Hop

More docs

Upgrade guide 5 to 6

Upgrade guide 4 to 5

Upgrade guide 3 to 4

Upgrade guide 2.1 to 3.0

Version 5 documentation

Version 4 documentation

Version 3 documentation

Version 2 documentation

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.

Examples

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

More Repositories

1

awesome-elm

A curated list of useful Elm tutorials, libraries and software. Inspired by awesome list. Feel free to contribute. 🚀
3,607
star
2

elm-example-app

An example Elm single page application
Elm
441
star
3

elm-tutorial

A guide to building web applications using Elm 0.18
Elm
397
star
4

planetproto

Understanding JavaScript Prototypes - Workshop
JavaScript
219
star
5

jquery_io.js

A jQuery plug-in for transforming data between different formats
JavaScript
138
star
6

elm-patterns

A collection of common patterns for Elm
Elm
108
star
7

elm-select

A selection input with auto-complete
Elm
49
star
8

rails-go-to-spec-sublime

Sublime Text plug-in for jumping to Rails spec files
Python
30
star
9

erl

URL parsing library for ELM
Elm
28
star
10

elm-navigation-pushstate-example

Example Elm application with push state navigation
Elm
26
star
11

hugo-remark

A theme for using remark.js with hugo
CSS
22
star
12

imm

Immutable collections built on top of seamless-immutable
JavaScript
19
star
13

gleam-validator

Validation library for Gleam
Erlang
14
star
14

elm-workshop

An introductory workshop to learn Elm
Elm
14
star
15

elm-shooter

Side scroll shooter in Elm
Elm
13
star
16

elm-dropdown

A dropdown component for Elm
Elm
12
star
17

namespacer.js

namespacer.js
JavaScript
10
star
18

rails-elm-integration

rails-elm-integration
JavaScript
9
star
19

elm-tutorial-assets

Code for elm-tutorial.org
Elm
8
star
20

rails-go-to-spec-vscode

rails-go-to-spec-vscode
TypeScript
8
star
21

bliss

Experiment on building a micro web framework for Gleam
Gleam
7
star
22

gleam_string_builder

A Gleam library for building strings
Erlang
7
star
23

save-up

SaveUp
Elm
5
star
24

rocket-graphql

A simple example of GraphQL using Rocket in Rust
Rust
5
star
25

exercism

Exercism answers
F#
5
star
26

qs

Query String parser for Elm
Elm
5
star
27

elm-crud

Testing elm
Elm
4
star
28

collaborator

A simple gem for injecting dependencies into classes. I got bored of copying the same code again and again so I made this simple gem.
Ruby
4
star
29

be_taskable

Be Taskable - A Ruby Gem for managing user tasks
Ruby
4
star
30

canjs_demo_photos

A CanJS demo app - basic photo browser
JavaScript
3
star
31

giraffe-graphql-poc

Trying F#
F#
3
star
32

PHP-Table-Creator

PHP
3
star
33

advent-of-code-2022

advent-of-code-2022
Gleam
3
star
34

explore-graph-ocaml

Trying Ocaml
OCaml
2
star
35

flash_video_player

FLV video player
2
star
36

cloneit.js

A simple utility for creating objects with prototype inheritance
JavaScript
2
star
37

gleam_qs

A query string parser for Gleam
Erlang
2
star
38

dataset

CRUD helpers for Elm
Elm
2
star
39

time-distance

Elm time distance
Elm
2
star
40

test-coverage

Test coverage is a lie
Python
2
star
41

devtalks.net

Source code for devtalks.net
JavaScript
2
star
42

repro-postcss-mixin

repro-postcss-mixin
JavaScript
2
star
43

advent-of-code-2017

advent-of-code-2017
Nim
1
star
44

canjs_demo

A small CanJS demo app
JavaScript
1
star
45

components_strategies

JavaScript
1
star
46

service_objects

service_objects
Go
1
star
47

gleam_codec

Gleam Codec
Erlang
1
star
48

progressive-js-example

A progressive JS example
JavaScript
1
star
49

mixable.js

A simple mixins utility for javascript
JavaScript
1
star
50

nathan_uni

JavaScript
1
star
51

js_image_carousel

A JS slideshow / image slider
JavaScript
1
star
52

lambda-rust-example

Rust
1
star
53

RoadTripPlanner

JavaScript
1
star
54

euler-problems

https://projecteuler.net
OCaml
1
star
55

kic-go

Kids Investment Company
JavaScript
1
star
56

validator.js

A generic validator for javascript (Not for forms)
JavaScript
1
star
57

ocaml_validator

A validator library for OCaml
OCaml
1
star
58

grunt-goserver

Grunt task to spawn and reload a Go server
JavaScript
1
star
59

elm-foundations

Elm
1
star
60

elm-number-input

An Elm input that allows only numbers
Elm
1
star
61

node-videoinfo

A node module for retrieving video information from popular services
JavaScript
1
star
62

awesome-dev-tools

A collection of great tools for web development
1
star
63

collec

JS Model collection
JavaScript
1
star
64

publisher.js

A Publish/Subscribe / Observer library in Javascript
JavaScript
1
star
65

node-confreaks

A node module for scraping confreaks
JavaScript
1
star
66

unison-wordle

1
star
67

elm-graphql-experiment

elm-graphql-experiment
Elm
1
star
68

elm-autocomplete

Unmaintained: Use https://github.com/sporto/elm-select instead
Elm
1
star
69

ember-vs-can

ember-vs-can
JavaScript
1
star
70

advent-of-code-2020

Advent of code 2020 in Gleam
Erlang
1
star
71

polylinear-scale

A polylinear scale for Elm
Elm
1
star
72

explore-graphql-haskell

Exploring GraphQl with Haskell
Haskell
1
star