mirror of
https://github.com/ryannhg/elm-spa.git
synced 2024-11-22 17:52:33 +03:00
single page apps made easy
cli | ||
examples | ||
src | ||
.gitignore | ||
.npmignore | ||
docs.json | ||
elm-analyse.json | ||
elm.json | ||
LICENSE | ||
netlify.toml | ||
package.json | ||
README.md |
ryannhg/elm-spa
an experiment for creating single page apps with Elm!
trying it out
Note: the API is still experimental! (hoping to post on discourse soon for community feedback)
elm install ryannhg/elm-spa
overview
module Main exposing (main)
import Application
import Generated.Pages as Pages
import Generated.Route as Route
import Global
main =
Application.create
{ ui = Application.usingHtml
, routing =
{ routes = Route.routes
, toPath = Route.toPath
, notFound = Route.NotFound ()
}
, global =
{ init = Global.init
, update = Global.update
, subscriptions = Global.subscriptions
}
, page = Pages.page
}
keep your pages simple
(Instead of making everything an elm-fork-knife!)
page =
Page.static
{ title = title
, view = view
}
page =
Page.sandbox
{ title = title
, init = init
, update = update
, view = view
}
page =
Page.element
{ title = title
, init = init
, update = update
, subscriptions = subscriptions
, view = view
}
page =
Page.component
{ title = title
, init = init
, update = update
, subscriptions = subscriptions
, view = view
}
while the top level stays easy to read!
init appRoute =
case appRoute of
Route.Index route ->
index.init route
Route.Counter route ->
counter.init route
Route.Random route ->
random.init route
( It's like magic, but actually it's just functions. )
run the example
this project comes with an example in examples/html.
Here's how to run it:
-
git clone https://github.com/ryannhg/elm-spa.git && cd elm-spa
-
npm install
-
npm run dev