elm-pages 3.0.0-beta.10 → 3.0.0-beta.12

package/generator/src/request-cache.js

@@ -24,6 +24,7 @@ function fullPath(portsHash, request, hasFsAccess) {
   if (hasFsAccess) {
     return path.join(
       process.cwd(),
+      // TODO use parameter or something other than global for this `global.isRunningGenerator` condition
       ".elm-pages",
       "http-response-cache",
       requestToString(requestWithPortHash)

package/generator/src/rewrite-elm-json.js

@@ -1,14 +1,14 @@
 const fs = require("fs");
 
-module.exports = async function () {
+module.exports = async function (sourceElmJsonPath, targetElmJsonPath) {
   var elmJson = JSON.parse(
-    (await fs.promises.readFile("./elm.json")).toString()
+    (await fs.promises.readFile(sourceElmJsonPath)).toString()
   );
 
   // write new elm.json
 
   await writeFileIfChanged(
-    "./elm-stuff/elm-pages/elm.json",
+    targetElmJsonPath,
     JSON.stringify(rewriteElmJson(elmJson))
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elm-pages",
-  "version": "3.0.0-beta.10",
+  "version": "3.0.0-beta.12",
   "homepage": "https://elm-pages.com",
   "moduleResolution": "node",
   "description": "Type-safe static sites, written in pure elm with your own custom elm-markup syntax.",
@@ -26,14 +26,14 @@
   "dependencies": {
     "busboy": "^1.0.0",
     "chokidar": "^3.5.3",
-    "commander": "^9.4.0",
+    "commander": "9.4.1",
     "connect": "^3.7.0",
     "cookie-signature": "^1.1.0",
     "cross-spawn": "7.0.3",
     "devcert": "^1.2.2",
     "elm-doc-preview": "^5.0.5",
     "elm-hot": "^1.1.6",
-    "esbuild": "^0.15.5",
+    "esbuild": "^0.15.14",
     "fs-extra": "^10.1.0",
     "globby": "11.0.4",
     "gray-matter": "^4.0.3",
@@ -44,26 +44,26 @@
     "node-fetch": "^2.6.7",
     "object-hash": "^2.2.0",
     "serve-static": "^1.15.0",
-    "terser": "^5.14.2",
-    "vite": "^3.1.8",
+    "terser": "^5.15.1",
+    "vite": "^3.2.4",
     "which": "^2.0.2"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.2",
     "@types/fs-extra": "^9.0.13",
     "@types/micromatch": "^4.0.2",
-    "@types/node": "12.20.12",
+    "@types/node": "^18.11.9",
     "@types/serve-static": "^1.15.0",
-    "cypress": "^10.6.0",
+    "cypress": "^11.1.0",
     "elm-codegen": "^0.2.0",
-    "elm-optimize-level-2": "^0.1.5",
-    "elm-review": "^2.7.4",
-    "elm-test": "^0.19.1-revision9",
-    "elm-tooling": "^1.8.0",
+    "elm-optimize-level-2": "^0.3.5",
+    "elm-review": "^2.8.2",
+    "elm-test": "^0.19.1-revision10",
+    "elm-tooling": "^1.10.0",
     "elm-verify-examples": "^5.2.0",
     "elmi-to-json": "^1.2.0",
     "mocha": "^10.0.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.3"
   },
   "files": [
     "generator/src/",

package/src/ApiRoute.elm

@@ -1,8 +1,9 @@
 module ApiRoute exposing
-    ( ApiRoute, ApiRouteBuilder, Response
+    ( single, preRender
+    , serverRender
+    , preRenderWithFallback
+    , ApiRoute, ApiRouteBuilder, Response
     , capture, literal, slash, succeed
-    , single, preRender
-    , preRenderWithFallback, serverRender
     , withGlobalHeadTags
     , toJson, getBuildTimeRoutes, getGlobalHeadTagsDataSource
     )
@@ -11,19 +12,153 @@ module ApiRoute exposing
 to a DataSource so you can pull in HTTP data, etc. Because ApiRoutes don't hydrate into Elm apps (like pages in elm-pages do), you can pull in as much data as you want in
 the DataSource for your ApiRoutes, and it won't effect the payload size. Instead, the size of an ApiRoute is just the content you output for that route.
 
-@docs ApiRoute, ApiRouteBuilder, Response
-
-@docs capture, literal, slash, succeed
+Similar to your elm-pages Route Modules, ApiRoute's can be either server-rendered or pre-rendered. Let's compare the differences between pre-rendered and server-rendered ApiRoutes, and the different
+use cases they support.
 
 
 ## Pre-Rendering
 
+A pre-rendered ApiRoute is just a generated file. For example:
+
+  - [An RSS feed](https://github.com/dillonkearns/elm-pages/blob/131f7b750cdefb2ba7a34a06be06dfbfafc79a86/examples/docs/app/Api.elm#L77-L84) ([Output file](https://elm-pages.com/blog/feed.xml))
+  - [A calendar feed in the ical format](https://github.com/dillonkearns/incrementalelm.com/blob/d4934d899d06232dc66dcf9f4b5eccc74bbc60d3/src/Api.elm#L51-L60) ([Output file](https://incrementalelm.com/live.ics))
+  - A redirect file for a hosting provider like Netlify
+
+You could even generate a JavaScript file, an Elm file, or any file with a String body! It's really just a way to generate files, which are typically used to serve files to a user or Browser, but you execute them, copy them, etc. The only limit is your imagination!
+The beauty is that you have a way to 1) pull in type-safe data using DataSource's, and 2) write those files, and all in pure Elm!
+
 @docs single, preRender
 
 
 ## Server Rendering
 
-@docs preRenderWithFallback, serverRender
+You could use server-rendered ApiRoutes to do a lot of similar things, the main difference being that it will be served up through a URL and generated on-demand when that URL is requested.
+So for example, for an RSS feed or ical calendar feed like in the pre-rendered examples, you could build the same routes, but you would be pulling in the list of posts or calendar events on-demand rather
+than upfront at build-time. That means you can hit your database and serve up always-up-to-date data.
+
+Not only that, but your server-rendered ApiRoutes have access to the incoming HTTP request payload just like your server-rendered Route Modules do. Just as with server-rendered Route Modules,
+a server-rendered ApiRoute accesses the incoming HTTP request through a [Server.Request.Parser](Server-Request). Consider the use cases that this opens up:
+
+  - Serve up protected assets. For example, gated content, like a paid subscriber feed for a podcast that checks authentication information in a query parameter to authenticate that a user has an active paid subscription before serving up the Pro RSS feed.
+  - Serve up user-specific content, either through a cookie or other means of authentication
+  - Look at the [accepted content-type in the request headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept) and use that to choose a response format, like XML or JSON ([full example](https://github.com/dillonkearns/elm-pages/blob/131f7b750cdefb2ba7a34a06be06dfbfafc79a86/examples/end-to-end/app/Api.elm#L76-L107)).
+  - Look at the [accepted language in the request headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Language) and use that to choose a language for the response data.
+
+@docs serverRender
+
+You can also do a hybrid approach using `preRenderWithFallback`. This allows you to pre-render a set of routes at build-time, but build additional routes that weren't rendered at build-time on the fly on the server.
+Conceptually, this is just a delayed version of a pre-rendered route. Because of that, you _do not_ have access to the incoming HTTP request (no `Server.Request.Parser` like in server-rendered ApiRoute's).
+The strategy used to build these routes will differ depending on your hosting provider and the elm-pages adapter you have setup, but generally ApiRoute's that use `preRenderWithFallback` will be cached on the server
+so within a certain time interval (or in the case of [Netlify's DPR](https://www.netlify.com/blog/2021/04/14/distributed-persistent-rendering-a-new-jamstack-approach-for-faster-builds/), until a new build is done)
+that asset will be served up if that URL was already served up by the server.
+
+@docs preRenderWithFallback
+
+
+## Defining ApiRoute's
+
+You define your ApiRoute's in `app/Api.elm`. Here's a simple example:
+
+    module Api exposing (routes)
+
+    import ApiRoute
+    import DataSource exposing (DataSource)
+    import Server.Request
+
+    routes :
+        DataSource (List Route)
+        -> (Maybe { indent : Int, newLines : Bool } -> Html Never -> String)
+        -> List (ApiRoute.ApiRoute ApiRoute.Response)
+    routes getStaticRoutes htmlToString =
+        [ preRenderedExample
+        , requestPrinterExample
+        ]
+
+    {-| Generates the following files when you
+    run `elm-pages build`:
+
+      - `dist/users/1.json`
+      - `dist/users/2.json`
+      - `dist/users/3.json`
+
+    When you host it, these static assets will
+    be served at `/users/1.json`, etc.
+
+    -}
+    preRenderedExample : ApiRoute.ApiRoute ApiRoute.Response
+    preRenderedExample =
+        ApiRoute.succeed
+            (\userId ->
+                DataSource.succeed
+                    (Json.Encode.object
+                        [ ( "id", Json.Encode.string userId )
+                        , ( "name", "Data for user " ++ userId |> Json.Encode.string )
+                        ]
+                        |> Json.Encode.encode 2
+                    )
+            )
+            |> ApiRoute.literal "users"
+            |> ApiRoute.slash
+            |> ApiRoute.capture
+            |> ApiRoute.literal ".json"
+            |> ApiRoute.preRender
+                (\route ->
+                    DataSource.succeed
+                        [ route "1"
+                        , route "2"
+                        , route "3"
+                        ]
+                )
+
+    {-| This returns a JSON response that prints information about the incoming
+    HTTP request. In practice you'd want to do something useful with that data,
+    and use more of the high-level helpers from the Server.Request API.
+    -}
+    requestPrinterExample : ApiRoute ApiRoute.Response
+    requestPrinterExample =
+        ApiRoute.succeed
+            (Server.Request.map4
+                (\rawBody method cookies queryParams ->
+                    Encode.object
+                        [ ( "rawBody"
+                          , rawBody
+                                |> Maybe.map Encode.string
+                                |> Maybe.withDefault Encode.null
+                          )
+                        , ( "method"
+                          , method
+                                |> Server.Request.methodToString
+                                |> Encode.string
+                          )
+                        , ( "cookies"
+                          , cookies
+                                |> Encode.dict
+                                    identity
+                                    Encode.string
+                          )
+                        , ( "queryParams"
+                          , queryParams
+                                |> Encode.dict
+                                    identity
+                                    (Encode.list Encode.string)
+                          )
+                        ]
+                        |> Response.json
+                        |> DataSource.succeed
+                )
+                Server.Request.rawBody
+                Server.Request.method
+                Server.Request.allCookies
+                Server.Request.queryParams
+            )
+            |> ApiRoute.literal "api"
+            |> ApiRoute.slash
+            |> ApiRoute.literal "request-test"
+            |> ApiRoute.serverRender
+
+@docs ApiRoute, ApiRouteBuilder, Response
+
+@docs capture, literal, slash, succeed
 
 
 ## Including Head Tags
@@ -54,7 +189,9 @@ type alias ApiRoute response =
     Internal.ApiRoute.ApiRoute response
 
 
-{-| -}
+{-| Same as [`preRender`](#preRender), but for an ApiRoute that has no dynamic segments. This is just a bit simpler because
+since there are no dynamic segments, you don't need to provide a DataSource with the list of dynamic segments to pre-render because there is only a single possible route.
+-}
 single : ApiRouteBuilder (DataSource String) (List String) -> ApiRoute Response
 single handler =
     handler
@@ -235,7 +372,8 @@ toJson ((ApiRoute { kind }) as apiRoute) =
         ]
 
 
-{-| -}
+{-| A literal String segment of a route.
+-}
 literal : String -> ApiRouteBuilder a constructor -> ApiRouteBuilder a constructor
 literal segment (ApiRouteBuilder patterns pattern handler toString constructor) =
     ApiRouteBuilder

package/src/DataSource/Env.elm

@@ -1,6 +1,28 @@
 module DataSource.Env exposing (get, expect)
 
-{-|
+{-| Because DataSource's in `elm-pages` never run in the browser (see [the DataSource docs](DataSource)), you can access environment variables securely. As long as the environment variable isn't sent
+down into the final `Data` value, it won't end up in the client!
+
+    import DataSource exposing (DataSource)
+    import DataSource.Env
+
+    type alias EnvVariables =
+        { sendGridKey : String
+        , siteUrl : String
+        }
+
+    sendEmail : Email -> DataSource ()
+    sendEmail email =
+        DataSource.map2 EnvVariables
+            (DataSource.Env.expect "SEND_GRID_KEY")
+            (DataSource.Env.get "BASE_URL"
+                |> DataSource.map (Maybe.withDefault "http://localhost:1234")
+            )
+            |> DataSource.andThen (sendEmailDataSource email)
+
+    sendEmailDataSource : Email -> EnvVariables -> DataSource ()
+    sendEmailDataSource email envVariables =
+        Debug.todo "Not defined here"
 
 @docs get, expect
 
@@ -13,7 +35,8 @@ import Json.Decode as Decode
 import Json.Encode as Encode
 
 
-{-| -}
+{-| Get an environment variable, or Nothing if there is no environment variable matching that name.
+-}
 get : String -> DataSource (Maybe String)
 get envVariableName =
     DataSource.Internal.Request.request
@@ -25,7 +48,8 @@ get envVariableName =
         }
 
 
-{-| -}
+{-| Get an environment variable, or a DataSource failure if there is no environment variable matching that name.
+-}
 expect : String -> DataSource String
 expect envVariableName =
     envVariableName

package/src/DataSource.elm

@@ -38,38 +38,27 @@ So why not just get the data the old-fashioned way, with `elm/http`, for example
 A few reasons:
 
 1.  DataSource's allow you to pull in data that you wouldn't normally be able to access from an Elm app, like local files, or listings of files in a folder. Not only that, but the dev server knows to automatically hot reload the data when the files it depends on change, so you can edit the files you used in your DataSource and see the page hot reload as you save!
-2.  Because `elm-pages` has a build step, you know that your `DataSource.Http` requests succeeded, your decoders succeeded, your custom DataSource validations succeeded, and everything went smoothly. If something went wrong, you get a build failure and can deal with the issues before the site goes live. That means your users won't see those errors, and as a developer you don't need to handle those error cases in your code! Think of it as "parse, don't validate", but for your entire build.
-3.  You don't have to worry about an API being down, or hitting it repeatedly. You can build in data and it will end up as JSON files served up with all the other assets of your site. If your CDN (static site host) is down, then the rest of your site is probably down anyway. If your site host is up, then so is all of your `DataSource` data. Also, it will be served up extremely quickly without needing to wait for any database queries to be performed, `andThen` requests to be resolved, etc., because all of that work and waiting was done at build-time!
-4.  You can pre-render pages, including the SEO meta tags, with all that rich, well-typed Elm data available! That's something you can't accomplish with a vanilla Elm app, and it's one of the main use cases for elm-pages.
+2.  You can pre-render HTML for your pages, including the SEO meta tags, with all that rich, well-typed Elm data available! That's something you can't accomplish with a vanilla Elm app, and it's one of the main use cases for elm-pages.
+3.  Because `elm-pages` has a build step, you know that your `DataSource.Http` requests succeeded, your decoders succeeded, your custom DataSource validations succeeded, and everything went smoothly. If something went wrong, you get a build failure and can deal with the issues before the site goes live. That means your users won't see those errors, and as a developer you don't need to handle those error cases in your code! Think of it as "parse, don't validate", but for your entire build. In the case of server-rendered routes, a DataSource failure will render a 500 page, so more care needs to be taken to make sure all common errors are handled properly, but the tradeoff is that you can use DataSource's to pull in highly dynamic data and even render user-specific pages.
+4.  For static routes, you don't have to worry about an API being down, or hitting it repeatedly. You can build in data and it will end up as optimized binary-encoded data served up with all the other assets of your site. If your CDN (static site host) is down, then the rest of your site is probably down anyway. If your site host is up, then so is all of your `DataSource` data. Also, it will be served up extremely quickly without needing to wait for any database queries to be performed, `andThen` requests to be resolved, etc., because all of that work and waiting was done at build-time!
 
 
 ## Mental Model
 
 You can think of a DataSource as a declarative (not imperative) definition of data. It represents where to get the data from, and how to transform it (map, combine with other DataSources, etc.).
 
-Even though an HTTP request is non-deterministic, you should think of it that way as much as possible with a DataSource because elm-pages will only perform a given DataSource.Http request once, and
-it will share the result between any other DataSource.Http requests that have the exact same URL, Method, Body, and Headers.
 
-So calling a function to increment a counter on a server through an HTTP request would not be a good fit for a `DataSource`. Let's imagine we have an HTTP endpoint that gives these stateful results when called repeatedly:
+## How do I actually use a DataSource?
 
-<https://my-api.example.com/increment-counter>
--> Returns 1
-<https://my-api.example.com/increment-counter>
--> Returns 2
-<https://my-api.example.com/increment-counter>
--> Returns 3
+This is very similar to Cmd's in Elm. You don't perform a Cmd just by running that code, as you might in a language like JavaScript. Instead, a Cmd _will not do anything_ unless you pass it to The Elm Architecture to have it perform it for you.
+You pass a Cmd to The Elm Architecture by returning it in `init` or `update`. So actually a `Cmd` is just data describing a side-effect that the Elm runtime can perform, and how to build a `Msg` once it's done.
 
-If we define a `DataSource` that hits that endpoint:
+`DataSource`'s are very similar. A `DataSource` doesn't do anything just by "running" it. Just like a `Cmd`, it's only data that describes a side-effect to perform. Specifically, it describes a side-effect that the _elm-pages runtime_ can perform.
+There are a few places where we can pass a `DataSource` to the `elm-pages` runtime so it can perform it. Most commonly, you give a field called `data` in your Route Module's definition. Instead of giving a `Msg` when the side-effects are complete,
+the page will render once all of the side-effects have run and all the data is resolved. `elm-pages` makes the resolved data available your Route Module's `init`, `view`, `update`, and `head` functions, similar to how a regular Elm app passes `Msg`'s in
+to `update`.
 
-    data =
-        DataSource.Http.get
-            "https://my-api.example.com/increment-counter"
-            Decode.int
-
-No matter how many places we use that `DataSource`, its response will be "locked in" (let's say the response was `3`, then every page would have the same value of `3` for that request).
-
-So even though HTTP requests, JavaScript code, etc. can be non-deterministic, a `DataSource` always represents a single snapshot of a resource, and those values will be re-used as if they were a deterministic, declarative resource.
-So it's best to use that mental model to avoid confusion.
+Any place in your `elm-pages` app where the framework lets you pass in a value of type `DataSource` is a place where you can give `elm-pages` a DataSource to perform (for example, `Site.head` where you define global head tags for your site).
 
 
 ## Basics

package/src/Form.elm

@@ -272,7 +272,7 @@ import Dict exposing (Dict)
 import Form.Field as Field exposing (Field(..))
 import Form.FieldStatus as FieldStatus exposing (FieldStatus)
 import Form.FieldView
-import Form.Validation as Validation exposing (Combined, Validation)
+import Form.Validation as Validation exposing (Combined)
 import Html exposing (Html)
 import Html.Attributes as Attr
 import Html.Lazy
@@ -332,7 +332,7 @@ dynamic :
      ->
         Form
             error
-            { combine : Validation error parsed named constraints1
+            { combine : Validation.Validation error parsed named constraints1
             , view : subView
             }
             data
@@ -341,7 +341,7 @@ dynamic :
         Form
             error
             --((decider -> Validation error parsed named) -> combined)
-            ({ combine : decider -> Validation error parsed named constraints1
+            ({ combine : decider -> Validation.Validation error parsed named constraints1
              , view : decider -> subView
              }
              -> combineAndView
@@ -674,14 +674,14 @@ hiddenField name (Field fieldParser _) (Form definitions parseFn toInitialValues
 toServerForm :
     Form
         error
-        { combine : Validation error combined kind constraints
+        { combine : Validation.Validation error combined kind constraints
         , view : viewFn
         }
         data
     ->
         Form
             error
-            { combine : Validation error (DataSource (Validation error combined kind constraints)) kind constraints
+            { combine : Validation.Validation error (DataSource (Validation.Validation error combined kind constraints)) kind constraints
             , view : viewFn
             }
             data
@@ -694,7 +694,7 @@ toServerForm (Form a b c) =
                 { result : Dict String (List error)
                 , isMatchCandidate : Bool
                 , combineAndView :
-                    { combine : Validation error (DataSource (Validation error combined kind constraints)) kind constraints
+                    { combine : Validation.Validation error (DataSource (Validation.Validation error combined kind constraints)) kind constraints
                     , view : viewFn
                     }
                 }
@@ -844,7 +844,7 @@ parse :
     String
     -> AppContext app actionData
     -> data
-    -> Form error { info | combine : Validation error parsed named constraints } data
+    -> Form error { info | combine : Validation.Validation error parsed named constraints } data
     -> ( Maybe parsed, Dict String (List error) )
 parse formId app data (Form _ parser _) =
     -- TODO Get transition context from `app` so you can check if the current form is being submitted
@@ -883,7 +883,7 @@ insertIfNonempty key values dict =
 {-| -}
 runServerSide :
     List ( String, String )
-    -> Form error (Validation error parsed kind constraints) data
+    -> Form error (Validation.Validation error parsed kind constraints) data
     -> ( Bool, ( Maybe parsed, Dict String (List error) ) )
 runServerSide rawFormData (Form _ parser _) =
     let
@@ -989,7 +989,7 @@ renderHtml :
     ->
         FinalForm
             error
-            (Validation error parsed named constraints)
+            (Validation.Validation error parsed named constraints)
             data
             (Context error data
              -> List (Html (Pages.Msg.Msg msg))
@@ -1025,14 +1025,14 @@ toDynamicFetcher :
     ->
         Form
             error
-            { combine : Validation error parsed field constraints
+            { combine : Validation.Validation error parsed field constraints
             , view : Context error data -> view
             }
             data
     ->
         FinalForm
             error
-            (Validation error parsed field constraints)
+            (Validation.Validation error parsed field constraints)
             data
             (Context error data -> view)
             userMsg
@@ -1098,14 +1098,14 @@ toDynamicTransition :
     ->
         Form
             error
-            { combine : Validation error parsed field constraints
+            { combine : Validation.Validation error parsed field constraints
             , view : Context error data -> view
             }
             data
     ->
         FinalForm
             error
-            (Validation error parsed field constraints)
+            (Validation.Validation error parsed field constraints)
             data
             (Context error data -> view)
             userMsg
@@ -1126,7 +1126,7 @@ toDynamicTransition name (Form a b c) =
                 { result : Dict String (List error)
                 , isMatchCandidate : Bool
                 , combineAndView :
-                    { combine : Validation error parsed field constraints
+                    { combine : Validation.Validation error parsed field constraints
                     , view : Context error data -> view
                     }
                 }
@@ -1136,7 +1136,7 @@ toDynamicTransition name (Form a b c) =
                  -> FormState
                  ->
                     { result :
-                        ( Validation error parsed field constraints
+                        ( Validation.Validation error parsed field constraints
                         , Dict String (List error)
                         )
                     , isMatchCandidate : Bool
@@ -1150,7 +1150,7 @@ toDynamicTransition name (Form a b c) =
                         { result : Dict String (List error)
                         , isMatchCandidate : Bool
                         , combineAndView :
-                            { combine : Validation error parsed field constraints
+                            { combine : Validation.Validation error parsed field constraints
                             , view : Context error data -> view
                             }
                         }
@@ -1190,7 +1190,7 @@ renderStyledHtml :
     ->
         FinalForm
             error
-            (Validation error parsed named constraints)
+            (Validation.Validation error parsed named constraints)
             data
             (Context error data
              -> List (Html.Styled.Html (Pages.Msg.Msg msg))
@@ -1219,7 +1219,7 @@ renderHelper :
     -> RenderOptions msg
     -> AppContext app actionData
     -> data
-    -> FormInternal error (Validation error parsed named constraints) data (Context error data -> List (Html (Pages.Msg.Msg msg)))
+    -> FormInternal error (Validation.Validation error parsed named constraints) data (Context error data -> List (Html (Pages.Msg.Msg msg)))
     -> Html (Pages.Msg.Msg msg)
 renderHelper attrs maybe options formState data form =
     -- TODO Get transition context from `app` so you can check if the current form is being submitted
@@ -1261,7 +1261,7 @@ renderStyledHelper :
     -> RenderOptions msg
     -> AppContext app actionData
     -> data
-    -> FormInternal error (Validation error parsed named constraints) data (Context error data -> List (Html.Styled.Html (Pages.Msg.Msg msg)))
+    -> FormInternal error (Validation.Validation error parsed named constraints) data (Context error data -> List (Html.Styled.Html (Pages.Msg.Msg msg)))
     -> Html.Styled.Html (Pages.Msg.Msg msg)
 renderStyledHelper attrs maybe options formState data form =
     -- TODO Get transition context from `app` so you can check if the current form is being submitted
@@ -1304,7 +1304,7 @@ helperValues :
     -> AppContext app actionData
     -> data
     ---> Form error parsed data view
-    -> FormInternal error (Validation error parsed named constraints) data (Context error data -> List view)
+    -> FormInternal error (Validation.Validation error parsed named constraints) data (Context error data -> List view)
     -> { formId : String, hiddenInputs : List view, children : List view, isValid : Bool }
 helperValues toHiddenInput maybe options formState data (FormInternal fieldDefinitions parser toInitialValues) =
     let
@@ -1343,18 +1343,18 @@ helperValues toHiddenInput maybe options formState data (FormInternal fieldDefin
                 |> Dict.union part2
 
         parsed :
-            { result : ( Validation error parsed named constraints, Dict String (List error) )
+            { result : ( Validation.Validation error parsed named constraints, Dict String (List error) )
             , isMatchCandidate : Bool
             , view : Context error data -> List view
             }
         parsed =
             parser (Just data) thisFormState
 
-        withoutServerErrors : Validation error parsed named constraints
+        withoutServerErrors : Validation.Validation error parsed named constraints
         withoutServerErrors =
             parsed |> mergeResults
 
-        withServerErrors : Validation error parsed named constraints
+        withServerErrors : Validation.Validation error parsed named constraints
         withServerErrors =
             mergeResults
                 { parsed
@@ -1498,7 +1498,7 @@ initCombined :
         Form
             error
             { combineAndView
-                | combine : Validation error parsed kind constraints
+                | combine : Validation.Validation error parsed kind constraints
             }
             input
     -> ServerForms error combined
@@ -1511,7 +1511,7 @@ initCombined mapFn (Form _ parseFn _) =
                     foo :
                         { result : Dict String (List error)
                         , isMatchCandidate : Bool
-                        , combineAndView : { combineAndView | combine : Validation error parsed kind constraints }
+                        , combineAndView : { combineAndView | combine : Validation.Validation error parsed kind constraints }
                         }
                     foo =
                         parseFn Nothing formState
@@ -1532,7 +1532,7 @@ combine :
         Form
             error
             { combineAndView
-                | combine : Validation error parsed kind constraints
+                | combine : Validation.Validation error parsed kind constraints
             }
             input
     -> ServerForms error combined
@@ -1546,7 +1546,7 @@ combine mapFn (Form _ parseFn _) (ServerForms serverForms) =
                             foo :
                                 { result : Dict String (List error)
                                 , isMatchCandidate : Bool
-                                , combineAndView : { combineAndView | combine : Validation error parsed kind constraints }
+                                , combineAndView : { combineAndView | combine : Validation.Validation error parsed kind constraints }
                                 }
                             foo =
                                 parseFn Nothing formState
@@ -1568,10 +1568,10 @@ initCombinedServer :
         Form
             error
             { combineAndView
-                | combine : Combined error (DataSource (Validation error parsed kind constraints))
+                | combine : Combined error (DataSource (Validation.Validation error parsed kind constraints))
             }
             input
-    -> ServerForms error (DataSource (Validation error combined kind constraints))
+    -> ServerForms error (DataSource (Validation.Validation error combined kind constraints))
 initCombinedServer mapFn serverForms =
     initCombined (DataSource.map (Validation.map mapFn)) serverForms
 
@@ -1584,11 +1584,11 @@ combineServer :
             error
             { combineAndView
                 | combine :
-                    Combined error (DataSource (Validation error parsed kind constraints))
+                    Combined error (DataSource (Validation.Validation error parsed kind constraints))
             }
             input
-    -> ServerForms error (DataSource (Validation error combined kind constraints))
-    -> ServerForms error (DataSource (Validation error combined kind constraints))
+    -> ServerForms error (DataSource (Validation.Validation error combined kind constraints))
+    -> ServerForms error (DataSource (Validation.Validation error combined kind constraints))
 combineServer mapFn a b =
     combine (DataSource.map (Validation.map mapFn)) a b