add in afterNavigate hook

examples/complex/public/ports.js

@@ -12,6 +12,8 @@ window.addEventListener('load', _ => {
 
 // maps actions to functions!
 const actions = {
+  'ALERT': message =>
+      window.alert(message),
   'SCROLL_TO': id =>
     document.getElementById(id) &&
       window.scrollTo({

examples/complex/src/Global.elm

@@ -8,6 +8,7 @@ module Global exposing
     )
 
 import Generated.Routes as Routes exposing (Route, routes)
+import Ports
 
 
 type alias Flags =
@@ -22,6 +23,10 @@ type alias Model =
 type Msg
     = SignIn String
     | SignOut
+    | AfterNavigate
+        { old : Route
+        , new : Route
+        }
 
 
 type alias Commands msg =
@@ -40,6 +45,16 @@ init _ _ =
 update : Commands msg -> Msg -> Model -> ( Model, Cmd Msg, Cmd msg )
 update commands msg model =
     case msg of
+        AfterNavigate routes ->
+            ( model
+            , Cmd.none
+            , if routes.new == Routes.routes.guide then
+                Ports.alert "Global: You're on the guide!"
+
+              else
+                Cmd.none
+            )
+
         SignIn user ->
             ( { model | user = Just user }
             , Cmd.none

examples/complex/src/Main.elm

@@ -16,6 +16,7 @@ main =
             { routes = Routes.parsers
             , toPath = Routes.toPath
             , notFound = Routes.routes.notFound
+            , afterNavigate = Just Global.AfterNavigate
             }
         , global =
             { init = Global.init

examples/complex/src/Ports.elm

@@ -1,4 +1,4 @@
-port module Ports exposing (scrollTo)
+port module Ports exposing (alert, scrollTo)
 
 import Json.Encode as Json
 
@@ -12,3 +12,11 @@ scrollTo id =
         { action = "SCROLL_TO"
         , data = Json.string id
         }
+
+
+alert : String -> Cmd msg
+alert message =
+    outgoing
+        { action = "ALERT"
+        , data = Json.string message
+        }

package-lock.json

@@ -1076,7 +1076,7 @@
       "dev": true
     },
     "get-value": {
-      "version":"2.0.9",
+      "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
       "dev": true

package.json

@@ -5,12 +5,12 @@
   "main": "cli/src/index.js",
   "bin": "./cli/src/index.js",
   "scripts": {
-    "start": "npm run dev",
+    "start": "npm install && npm run dev",
     "build": "npm link && (cd cli && npm run build)",
     "dev": "npm run build && npm run example",
     "docs": "elm-doc-preview",
     "build:example": "npm run build && (cd examples/docs && npm install && npm run build)",
-    "example": "npm run examples:docs",
+    "example": "npm run examples:complex",
     "examples:docs": "(cd examples/docs && npm install && npm run dev)",
     "examples:complex": "(cd examples/complex && npm install && npm run dev)"
   },

src/Spa.elm

@@ -32,9 +32,10 @@ as the entrypoint to your app.
                 { routes = Routes.parsers
                 , toPath = Routes.toPath
                 , notFound = routes.notFound
+                , afterNavigate = Nothing
                 }
             , transitions = Transitions.transitions
-            , ui = Spa.usingElmUi   
+            , ui = Spa.usingElmUi
             }
 
 @docs create, Program
@@ -150,6 +151,7 @@ create :
         { routes : List (Parser (route -> route) route)
         , toPath : route -> String
         , notFound : route
+        , afterNavigate : Maybe ({ old : route, new : route } -> globalMsg)
         }
     , transitions :
         { layout : Transition ui_msg
@@ -194,6 +196,7 @@ create config =
                     { fromUrl = fromUrl config.routing
                     , toPath = config.routing.toPath
                     , routes = config.routing.routes
+                    , afterNavigate = config.routing.afterNavigate
                     , transitions = pageTransitions config.transitions
                     }
                 , init = page.init
@@ -331,6 +334,7 @@ update :
         { fromUrl : Url -> route
         , toPath : route -> String
         , routes : Routes route a
+        , afterNavigate : Maybe ({ old : route, new : route } -> globalMsg)
         , transitions :
             List
                 { path : Path
@@ -426,6 +430,17 @@ update config msg model =
                 [ Utils.delay
                     duration
                     (FadeInPage url)
+                , case config.routing.afterNavigate of
+                    Just toMsg ->
+                        (Utils.send >> Cmd.map Global)
+                            (toMsg
+                                { old = config.routing.fromUrl model.url
+                                , new = config.routing.fromUrl url
+                                }
+                            )
+
+                    Nothing ->
+                        Cmd.none
                 ]
             )