elm-pages 3.0.0-beta.40 → 3.0.0-beta.41

package/src/Pages/Internal/Platform.elm

@@ -26,6 +26,7 @@ import Html.Attributes as Attr
 import Http
 import Json.Decode as Decode
 import Json.Encode
+import Pages.ConcurrentSubmission
 import Pages.ContentCache as ContentCache
 import Pages.Fetcher
 import Pages.Flags
@@ -33,15 +34,15 @@ import Pages.Internal.Msg
 import Pages.Internal.NotFoundReason exposing (NotFoundReason)
 import Pages.Internal.ResponseSketch as ResponseSketch exposing (ResponseSketch)
 import Pages.Internal.String as String
+import Pages.Navigation
 import Pages.ProgramConfig exposing (ProgramConfig)
 import Pages.StaticHttpRequest as StaticHttpRequest
-import Pages.Transition
 import PagesMsg exposing (PagesMsg)
-import Path exposing (Path)
 import QueryParams
 import Task
 import Time
 import Url exposing (Url)
+import UrlPath exposing (UrlPath)
 
 
 {-| -}
@@ -75,7 +76,7 @@ mainView config model =
                     (config.view model.pageFormState
                         (model.inFlightFetchers |> toFetcherState)
                         (model.transition |> Maybe.map Tuple.second)
-                        { path = ContentCache.pathForUrl urls |> Path.join
+                        { path = ContentCache.pathForUrl urls |> UrlPath.join
                         , route = config.urlToRoute { currentUrl | path = model.currentPath }
                         }
                         Nothing
@@ -95,14 +96,14 @@ mainView config model =
 
 urlsToPagePath :
     { currentUrl : Url, basePath : List String }
-    -> Path
+    -> UrlPath
 urlsToPagePath urls =
     urls.currentUrl.path
         |> String.chopForwardSlashes
         |> String.split "/"
         |> List.filter ((/=) "")
         |> List.drop (List.length urls.basePath)
-        |> Path.join
+        |> UrlPath.join
 
 
 {-| -}
@@ -144,7 +145,7 @@ type alias Flags =
 
 type InitKind shared page actionData errorPage
     = OkPage shared page (Maybe actionData)
-    | NotFound { reason : NotFoundReason, path : Path }
+    | NotFound { reason : NotFoundReason, path : UrlPath }
 
 
 {-| -}
@@ -198,7 +199,7 @@ init config flags url key =
                     , basePath = config.basePath
                     }
 
-                pagePath : Path
+                pagePath : UrlPath
                 pagePath =
                     urlsToPagePath urls
 
@@ -338,11 +339,11 @@ type alias Model userModel pageData actionData sharedData =
             , sharedData : sharedData
             , actionData : Maybe actionData
             }
-    , notFound : Maybe { reason : NotFoundReason, path : Path }
+    , notFound : Maybe { reason : NotFoundReason, path : UrlPath }
     , userFlags : Decode.Value
-    , transition : Maybe ( Int, Pages.Transition.Transition )
+    , transition : Maybe ( Int, Pages.Navigation.Navigation )
     , nextTransitionKey : Int
-    , inFlightFetchers : Dict String ( Int, Pages.Transition.FetcherState actionData )
+    , inFlightFetchers : Dict String ( Int, Pages.ConcurrentSubmission.ConcurrentSubmission actionData )
     , pageFormState : Form.Model
     , pendingRedirect : Bool
     , pendingData : Maybe ( pageData, sharedData, Maybe actionData )
@@ -454,9 +455,9 @@ update config appMsg model =
                                                     , { fetcherState
                                                         | status =
                                                             maybeFetcherDoneActionData
-                                                                |> Maybe.map Pages.Transition.FetcherReloading
+                                                                |> Maybe.map Pages.ConcurrentSubmission.Reloading
                                                                 -- TODO remove this bad default, FetcherSubmitting is incorrect
-                                                                |> Maybe.withDefault Pages.Transition.FetcherSubmitting
+                                                                |> Maybe.withDefault Pages.ConcurrentSubmission.Submitting
                                                       }
                                                     )
                                                 )
@@ -534,7 +535,7 @@ update config appMsg model =
                                     Just
                                         ( -- TODO remove hardcoded number
                                           -1
-                                        , Pages.Transition.Submitting payload
+                                        , Pages.Navigation.Submitting payload
                                         )
                               }
                             , Submit payload
@@ -797,7 +798,7 @@ update config appMsg model =
                                     , basePath = config.basePath
                                     }
 
-                                pagePath : Path
+                                pagePath : UrlPath
                                 pagePath =
                                     urlsToPagePath urls
 
@@ -857,7 +858,7 @@ update config appMsg model =
                         |> Dict.insert fetcherKey
                             ( transitionId
                             , { payload = fetcherData
-                              , status = Pages.Transition.FetcherSubmitting
+                              , status = Pages.ConcurrentSubmission.Submitting
                               , initiatedAt = initiatedAt
                               }
                             )
@@ -866,7 +867,7 @@ update config appMsg model =
             )
 
 
-toFetcherState : Dict String ( Int, Pages.Transition.FetcherState actionData ) -> Dict String (Pages.Transition.FetcherState actionData)
+toFetcherState : Dict String ( Int, Pages.ConcurrentSubmission.ConcurrentSubmission actionData ) -> Dict String (Pages.ConcurrentSubmission.ConcurrentSubmission actionData)
 toFetcherState inFlightFetchers =
     inFlightFetchers
         |> Dict.map (\_ ( _, fetcherState ) -> fetcherState)
@@ -1050,7 +1051,7 @@ startFetcher fetcherKey transitionId options model =
             , tracker = Nothing
             , body = Http.stringBody "application/x-www-form-urlencoded" encodedBody
             , headers = options.headers |> List.map (\( name, value ) -> Http.header name value)
-            , url = options.url |> Maybe.withDefault (Path.join [ model.url.path, "content.dat" ] |> Path.toAbsolute)
+            , url = options.url |> Maybe.withDefault (UrlPath.join [ model.url.path, "content.dat" ] |> UrlPath.toAbsolute)
             , method = "POST"
             , timeout = Nothing
             }
@@ -1129,7 +1130,7 @@ startFetcher2 config fromPageReload fetcherKey transitionId formData model =
             , headers = []
 
             -- TODO use formData.method to do either query params or POST body
-            , url = formData.action |> Url.fromString |> Maybe.map (\{ path } -> Path.join [ path, "content.dat" ] |> Path.toAbsolute) |> Maybe.withDefault "/"
+            , url = formData.action |> Url.fromString |> Maybe.map (\{ path } -> UrlPath.join [ path, "content.dat" ] |> UrlPath.toAbsolute) |> Maybe.withDefault "/"
             , method = formData.method |> methodToString
             , timeout = Nothing
             }
@@ -1143,14 +1144,14 @@ cancelStaleFetchers model =
         |> List.filterMap
             (\( _, ( id, fetcher ) ) ->
                 case fetcher.status of
-                    Pages.Transition.FetcherReloading _ ->
+                    Pages.ConcurrentSubmission.Reloading _ ->
                         Http.cancel (String.fromInt id)
                             |> Just
 
-                    Pages.Transition.FetcherSubmitting ->
+                    Pages.ConcurrentSubmission.Submitting ->
                         Nothing
 
-                    Pages.Transition.FetcherComplete _ ->
+                    Pages.ConcurrentSubmission.Complete _ ->
                         Nothing
             )
         |> Cmd.batch
@@ -1207,7 +1208,7 @@ application config =
                         in
                         Sub.batch
                             [ config.subscriptions (model.url |> config.urlToRoute)
-                                (urls.currentUrl |> config.urlToRoute |> config.routeToPath |> Path.join)
+                                (urls.currentUrl |> config.urlToRoute |> config.routeToPath |> UrlPath.join)
                                 pageData.userModel
                                 |> Sub.map (Pages.Internal.Msg.UserMsg >> UserMsg)
                             , config.hotReloadData
@@ -1256,9 +1257,9 @@ withUserMsg config userMsg ( model, effect ) =
             ( model, effect )
 
 
-urlPathToPath : Url -> Path
+urlPathToPath : Url -> UrlPath
 urlPathToPath urls =
-    urls.path |> Path.fromString
+    urls.path |> UrlPath.fromString
 
 
 fetchRouteData :
@@ -1407,7 +1408,7 @@ startNewGetLoad urlToGet toMsg ( model, effect ) =
         cancelIfStale : Effect userMsg pageData actionData sharedData userEffect errorPage
         cancelIfStale =
             case model.transition of
-                Just ( transitionKey, Pages.Transition.Loading _ _ ) ->
+                Just ( transitionKey, Pages.Navigation.Loading _ _ ) ->
                     CancelRequest transitionKey
 
                 _ ->
@@ -1418,22 +1419,22 @@ startNewGetLoad urlToGet toMsg ( model, effect ) =
         , transition =
             ( model.nextTransitionKey
             , case model.transition of
-                Just ( _, Pages.Transition.LoadAfterSubmit submitData _ _ ) ->
-                    Pages.Transition.LoadAfterSubmit
+                Just ( _, Pages.Navigation.LoadAfterSubmit submitData _ _ ) ->
+                    Pages.Navigation.LoadAfterSubmit
                         submitData
-                        (urlToGet.path |> Path.fromString)
-                        Pages.Transition.Load
+                        (urlToGet.path |> UrlPath.fromString)
+                        Pages.Navigation.Load
 
-                Just ( _, Pages.Transition.Submitting submitData ) ->
-                    Pages.Transition.LoadAfterSubmit
+                Just ( _, Pages.Navigation.Submitting submitData ) ->
+                    Pages.Navigation.LoadAfterSubmit
                         submitData
-                        (urlToGet.path |> Path.fromString)
-                        Pages.Transition.Load
+                        (urlToGet.path |> UrlPath.fromString)
+                        Pages.Navigation.Load
 
                 _ ->
-                    Pages.Transition.Loading
-                        (urlToGet.path |> Path.fromString)
-                        Pages.Transition.Load
+                    Pages.Navigation.Loading
+                        (urlToGet.path |> UrlPath.fromString)
+                        Pages.Navigation.Load
             )
                 |> Just
       }
@@ -1459,9 +1460,9 @@ clearLoadingFetchersAfterDataLoad completedTransitionId model =
                         -- TODO fetchers are never removed from the list. Need to decide how and when to remove them.
                         --(fetcherState.status /= Pages.Transition.FetcherReloading) || (transitionId > completedTransitionId)
                         case ( transitionId > completedTransitionId, fetcherState.status ) of
-                            ( False, Pages.Transition.FetcherReloading actionData ) ->
+                            ( False, Pages.ConcurrentSubmission.Reloading actionData ) ->
                                 ( transitionId
-                                , { fetcherState | status = Pages.Transition.FetcherComplete actionData }
+                                , { fetcherState | status = Pages.ConcurrentSubmission.Complete actionData }
                                 )
 
                             _ ->

package/src/Pages/Internal/ResponseSketch.elm

@@ -7,7 +7,7 @@ module Pages.Internal.ResponseSketch exposing (ResponseSketch(..))
 -}
 
 import Pages.Internal.NotFoundReason exposing (NotFoundReason)
-import Path exposing (Path)
+import UrlPath exposing (UrlPath)
 
 
 {-| -}
@@ -15,5 +15,5 @@ type ResponseSketch data action shared
     = RenderPage data (Maybe action)
     | HotUpdate data shared (Maybe action)
     | Redirect String
-    | NotFound { reason : NotFoundReason, path : Path }
+    | NotFound { reason : NotFoundReason, path : UrlPath }
     | Action action

package/src/Pages/Manifest.elm

@@ -11,8 +11,8 @@ module Pages.Manifest exposing
 {-| Represents the configuration of a
 [web manifest file](https://developer.mozilla.org/en-US/docs/Web/Manifest).
 
-You pass your `Pages.Manifest.Config` record into the `Pages.application` function
-(from your generated `Pages.elm` file).
+You pass your `Pages.Manifest.Config` record into the `Pages.Manifest.generator`
+in your `app/Api.elm` module to define a file generator that will build a `manifest.json` file as part of your build.
 
     import Pages.Manifest as Manifest
     import Pages.Manifest.Category
@@ -77,7 +77,7 @@ import LanguageTag.Language
 import MimeType
 import Pages.Manifest.Category as Category exposing (Category)
 import Pages.Url
-import Path exposing (Path)
+import UrlPath exposing (UrlPath)
 
 
 
@@ -114,7 +114,7 @@ type Orientation
 init :
     { description : String
     , name : String
-    , startUrl : Path
+    , startUrl : UrlPath
     , icons : List Icon
     }
     -> Config
@@ -253,7 +253,7 @@ type alias Config =
     , themeColor : Maybe Color
 
     -- https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url
-    , startUrl : Path
+    , startUrl : UrlPath
 
     -- https://developer.mozilla.org/en-US/docs/Web/Manifest/short_name
     , shortName : Maybe String
@@ -343,7 +343,23 @@ nonEmptyList list =
         Just list
 
 
-{-| A generator for Api.elm to include a manifest.json.
+{-| A generator for `Api.elm` to include a manifest.json. The String argument is the canonical URL of the site.
+
+    module Api exposing (routes)
+
+    import ApiRoute
+    import Pages.Manifest
+
+    routes :
+        BackendTask FatalError (List Route)
+        -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
+        -> List (ApiRoute.ApiRoute ApiRoute.Response)
+    routes getStaticRoutes htmlToString =
+        [ Pages.Manifest.generator
+            Site.canonicalUrl
+            Manifest.config
+        ]
+
 -}
 generator : String -> BackendTask FatalError Config -> ApiRoute.ApiRoute ApiRoute.Response
 generator canonicalSiteUrl config =
@@ -430,7 +446,7 @@ toJson canonicalSiteUrl config =
             |> Maybe.map Encode.string
       )
     , ( "start_url"
-      , Path.toAbsolute config.startUrl
+      , UrlPath.toAbsolute config.startUrl
             |> Encode.string
             |> Just
       )

package/src/Pages/Navigation.elm

@@ -0,0 +1,87 @@
+module Pages.Navigation exposing (Navigation(..), LoadingState(..))
+
+{-| `elm-pages` maintains a single `Maybe Navigation` state which is accessible from your `Route` modules through `app.navigation`.
+
+You can use it to show a loading indicator while a page is loading:
+
+    import Pages.Navigation as Navigation
+
+    pageLoadingIndicator app =
+        case app.navigation of
+            Just (Navigation.Loading path _) ->
+                Spinner.view
+
+            Nothing ->
+                emptyView
+
+    emptyView : Html msg
+    emptyView =
+        Html.text ""
+
+You can also use it to derive Pending UI or Optimistic UI from a pending form submission:
+
+    import Form
+    import Form.Handler
+    import Pages.Navigation as Navigation
+
+    view app =
+        let
+            optimisticProduct : Maybe Product
+            optimisticProduct =
+                case app.navigation of
+                    Just (Navigation.Submitting formData) ->
+                        formHandler
+                            |> Form.Handler.run formData
+                            |> Form.toResult
+                            |> Result.toMaybe
+
+                    Just (Navigation.LoadAfterSubmit formData path _) ->
+                        formHandler
+                            |> Form.Handler.run formData
+                            |> Form.toResult
+                            |> Result.toMaybe
+
+                    Nothing ->
+                        Nothing
+        in
+        -- our `productsView` function could show a loading spinner (Pending UI),
+        -- or it could assume the product will be created successfully (Optimistic UI) and
+        -- display it as a regular product in the list
+        productsView optimisticProduct app.data.products
+
+    allForms : Form.Handler.Handler String Product
+    allForms =
+        Form.Handler.init identity productForm
+
+    editItemForm : Form.HtmlForm String Product input msg
+    editItemForm =
+        Debug.todo "Form definition here"
+
+@docs Navigation, LoadingState
+
+-}
+
+import Form
+import Pages.FormData exposing (FormData)
+import Time
+import UrlPath exposing (UrlPath)
+
+
+{-| Represents the global page navigation state of the app.
+
+  - `Loading` - navigating to a page, for example from a link click, or from a programmatic navigation with `Browser.Navigation.pushUrl`.
+  - `Submitting` - submitting a form using the default submission strategy (note that Forms rendered with the [`Pages.Form.withConcurrent`](Pages-Form#withConcurrent) Option have their state managed in `app.concurrentSubmissions` instead of `app.navigation`).
+  - `LoadAfterSubmit` - the state immediately after `Submitting` - allows you to continue using the `FormData` from a submission while a data reload or redirect is occurring.
+
+-}
+type Navigation
+    = Submitting FormData
+    | LoadAfterSubmit FormData UrlPath LoadingState
+    | Loading UrlPath LoadingState
+
+
+{-| -}
+type LoadingState
+    = Redirecting
+    | Load
+    | ActionRedirect

package/src/Pages/PageUrl.elm

@@ -13,9 +13,9 @@ the query params are parsed into a `Dict String (List String)`.
 -}
 
 import Dict exposing (Dict)
-import Path exposing (Path)
 import QueryParams
 import Url
+import UrlPath exposing (UrlPath)
 
 
 {-| -}
@@ -23,7 +23,7 @@ type alias PageUrl =
     { protocol : Url.Protocol
     , host : String
     , port_ : Maybe Int
-    , path : Path
+    , path : UrlPath
     , query : Dict String (List String)
     , fragment : Maybe String
     }
@@ -35,7 +35,7 @@ toUrl url =
     { protocol = url.protocol
     , host = url.host
     , port_ = url.port_
-    , path = url.path |> Path.toRelative
+    , path = url.path |> UrlPath.toRelative
     , query =
         if url.query |> Dict.isEmpty then
             Nothing

package/src/Pages/ProgramConfig.elm

@@ -15,18 +15,19 @@ import Http
 import Json.Decode as Decode
 import Json.Encode
 import PageServerResponse exposing (PageServerResponse)
+import Pages.ConcurrentSubmission
 import Pages.Fetcher
 import Pages.Flags
 import Pages.Internal.NotFoundReason exposing (NotFoundReason)
 import Pages.Internal.Platform.ToJsPayload
 import Pages.Internal.ResponseSketch exposing (ResponseSketch)
 import Pages.Internal.RoutePattern exposing (RoutePattern)
+import Pages.Navigation
 import Pages.PageUrl exposing (PageUrl)
 import Pages.SiteConfig exposing (SiteConfig)
-import Pages.Transition
 import PagesMsg exposing (PagesMsg)
-import Path exposing (Path)
 import Url exposing (Url)
+import UrlPath exposing (UrlPath)
 
 
 type alias ProgramConfig userMsg userModel route pageData actionData sharedData effect mappedMsg errorPage =
@@ -38,7 +39,7 @@ type alias ProgramConfig userMsg userModel route pageData actionData sharedData
         ->
             Maybe
                 { path :
-                    { path : Path
+                    { path : UrlPath
                     , query : Maybe String
                     , fragment : Maybe String
                     }
@@ -46,18 +47,18 @@ type alias ProgramConfig userMsg userModel route pageData actionData sharedData
                 , pageUrl : Maybe PageUrl
                 }
         -> ( userModel, effect )
-    , update : Form.Model -> Dict String (Pages.Transition.FetcherState actionData) -> Maybe Pages.Transition.Transition -> sharedData -> pageData -> Maybe Browser.Navigation.Key -> userMsg -> userModel -> ( userModel, effect )
-    , subscriptions : route -> Path -> userModel -> Sub userMsg
+    , update : Form.Model -> Dict String (Pages.ConcurrentSubmission.ConcurrentSubmission actionData) -> Maybe Pages.Navigation.Navigation -> sharedData -> pageData -> Maybe Browser.Navigation.Key -> userMsg -> userModel -> ( userModel, effect )
+    , subscriptions : route -> UrlPath -> userModel -> Sub userMsg
     , sharedData : BackendTask FatalError sharedData
     , data : Decode.Value -> route -> BackendTask FatalError (PageServerResponse pageData errorPage)
     , action : Decode.Value -> route -> BackendTask FatalError (PageServerResponse actionData errorPage)
     , onActionData : actionData -> Maybe userMsg
     , view :
         Form.Model
-        -> Dict String (Pages.Transition.FetcherState actionData)
-        -> Maybe Pages.Transition.Transition
+        -> Dict String (Pages.ConcurrentSubmission.ConcurrentSubmission actionData)
+        -> Maybe Pages.Navigation.Navigation
         ->
-            { path : Path
+            { path : UrlPath
             , route : route
             }
         -> Maybe PageUrl
@@ -81,7 +82,7 @@ type alias ProgramConfig userMsg userModel route pageData actionData sharedData
         { protocol : Url.Protocol
         , host : String
         , port_ : Maybe Int
-        , path : Path
+        , path : UrlPath
         , query : Maybe String
         , fragment : Maybe String
         , metadata : route

package/src/Pages/Script.elm

@@ -6,10 +6,15 @@ module Pages.Script exposing
     , Error(..)
     )
 
-{-|
+{-| An elm-pages Script is a way to execute an `elm-pages` `BackendTask`.
+
+Read more about using the `elm-pages` CLI to run (or bundle) scripts, plus a brief tutorial, at <https://elm-pages-v3.netlify.app/docs/elm-pages-scripts>.
 
 @docs Script
 
+
+## Defining Scripts
+
 @docs withCliOptions, withoutCliOptions
 
 
@@ -40,18 +45,37 @@ import Json.Encode as Encode
 import Pages.Internal.Script
 
 
-{-| -}
+{-| The type for your `run` function that can be executed by `elm-pages run`.
+-}
 type alias Script =
     Pages.Internal.Script.Script
 
 
-{-| -}
+{-| The recoverable error type for file writes. You can use `BackendTask.allowFatal` if you want to allow the program to crash
+with an error message if a file write is unsuccessful.
+-}
 type Error
     = --TODO make more descriptive
       FileWriteError
 
 
-{-| -}
+{-| Write a file to the file system.
+
+    module MyScript exposing (run)
+
+    import BackendTask
+    import Pages.Script as Script
+
+    run =
+        Script.withoutCliOptions
+            (Script.writeFile
+                { path = "hello.json"
+                , body = """{ "message": "Hello, World!" }"""
+                }
+                |> BackendTask.allowFatal
+            )
+
+-}
 writeFile : { path : String, body : String } -> BackendTask { fatal : FatalError, recoverable : Error } ()
 writeFile { path, body } =
     BackendTask.Internal.Request.request
@@ -69,7 +93,20 @@ writeFile { path, body } =
         }
 
 
-{-| -}
+{-| Log to stdout.
+
+    module MyScript exposing (run)
+
+    import BackendTask
+    import Pages.Script as Script
+
+    run =
+        Script.withoutCliOptions
+            (Script.log "Hello!"
+                |> BackendTask.allowFatal
+            )
+
+-}
 log : String -> BackendTask error ()
 log message =
     BackendTask.Internal.Request.request
@@ -84,7 +121,20 @@ log message =
         }
 
 
-{-| -}
+{-| Define a simple Script (no CLI Options).
+
+    module MyScript exposing (run)
+
+    import BackendTask
+    import Pages.Script as Script
+
+    run =
+        Script.withoutCliOptions
+            (Script.log "Hello!"
+                |> BackendTask.allowFatal
+            )
+
+-}
 withoutCliOptions : BackendTask FatalError () -> Script
 withoutCliOptions execute =
     Pages.Internal.Script.Script
@@ -99,7 +149,14 @@ withoutCliOptions execute =
         )
 
 
-{-| -}
+{-| Same as [`withoutCliOptions`](#withoutCliOptions), but allows you to define a CLI Options Parser so the user can
+pass in additional options for the script.
+
+Uses <https://package.elm-lang.org/packages/dillonkearns/elm-cli-options-parser/latest/>.
+
+Read more at <https://elm-pages-v3.netlify.app/docs/elm-pages-scripts/#adding-command-line-options>.
+
+-}
 withCliOptions : Program.Config cliOptions -> (cliOptions -> BackendTask FatalError ()) -> Script
 withCliOptions config execute =
     Pages.Internal.Script.Script

package/src/Pages/Url.elm

@@ -12,7 +12,7 @@ If you refer to a local page, like `Route.Index |> Route.toPath |> Pages.Url.fro
 -}
 
 import Pages.Internal.String as String
-import Path exposing (Path)
+import UrlPath exposing (UrlPath)
 
 
 {-| -}
@@ -22,9 +22,9 @@ type Url
 
 
 {-| -}
-fromPath : Path -> Url
+fromPath : UrlPath -> Url
 fromPath path =
-    path |> Path.toAbsolute |> Internal
+    path |> UrlPath.toAbsolute |> Internal
 
 
 {-| -}

package/src/PagesMsg.elm

@@ -27,6 +27,8 @@ type alias PagesMsg userMsg =
 
 {-|
 
+    import Form
+    import Pages.Form
     import PagesMsg exposing (PagesMsg)
 
     type Msg
@@ -46,10 +48,14 @@ type alias PagesMsg userMsg =
                 [ onClick (PagesMsg.fromMsg ToggleMenu) ]
                 []
 
-            -- `Form.renderHtml` gives us `Html (PagesMsg msg)`, so we don't need to wrap its Msg type
+            -- `Pages.Form.renderHtml` gives us `Html (PagesMsg msg)`, so we don't need to wrap its Msg type
             , logoutForm
-                |> Form.withOnSubmit (\_ -> NewItemSubmitted)
-                |> Form.renderHtml "logout" [] (\_ -> Nothing) app Nothing
+                |> Pages.Form.renderHtml []
+                    Pages.Form.Serial
+                    (Form.options "logout"
+                        |> Form.withOnSubmit (\_ -> NewItemSubmitted)
+                    )
+                    app
             ]
         }