mirror of https://github.com/ryannhg/elm-spa.git synced 2024-11-22 17:52:33 +03:00

single page apps made easy

elm elm-spa starred-repo starred-ryannhg-repo web

Go to file

Ryan Haskell-Glatz 7a6c3de0a8 i feel much better about the elm docs now 🙂		2019-11-01 00:30:18 -05:00
cli	write up some docs for the package	2019-10-31 22:06:59 -05:00
examples	i feel much better about the elm docs now 🙂	2019-11-01 00:30:18 -05:00
src	i feel much better about the elm docs now 🙂	2019-11-01 00:30:18 -05:00
.gitignore	cli generates things for you	2019-10-31 00:05:55 -05:00
.npmignore	prepare for npm	2019-10-31 15:42:44 -05:00
docs.json	i feel much better about the elm docs now 🙂	2019-11-01 00:30:18 -05:00
elm-analyse.json	a fresh start :)	2019-10-15 23:52:54 -05:00
elm.json	write up some docs for the package	2019-10-31 22:06:59 -05:00
netlify.toml	a fresh start :)	2019-10-15 23:52:54 -05:00
package.json	write up some docs for the package	2019-10-31 22:06:59 -05:00
README.md	i feel much better about the elm docs now 🙂	2019-11-01 00:30:18 -05:00

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!)

Pages.Index

page =
    Page.static
        { title = title
        , view = view
        }

Pages.Counter

page =
    Page.sandbox
        { title = title
        , init = init
        , update = update
        , view = view
        }

Pages.Random

page =
    Page.element
        { title = title
        , init = init
        , update = update
        , subscriptions = subscriptions
        , view = view
        }

Pages.SignIn

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