elm-pages-v3-beta/docs/7.0.0-elm-package-upgrade-guide.md

99 lines
5.5 KiB
Markdown
Raw Normal View History

2020-10-26 21:28:36 +03:00
# 7.0.0 Elm package upgrade guide
Please ensure that you're on the latest elm-pages version of both the Elm package _and_ the NPM package before following these steps.
There are two new beta features, which you can opt into by running a different build command (see 2) or calling a new generated function (see 3).
There are 3 broad areas of change in this release.
1. Breaking API changes
2. Beta build command
3. Beta Template Modules feature
You can ignore (2) and (3) if you aren't interested in beta features. And even if you do choose to try these beta features, I recommend starting with (1) and getting things compiling without using any beta features first.
## 1 - Breaking API changes
### Manifest.Config now has `icons`
- The `icons` field in the manifest config will only be used for the beta, no-webpack build (see section 2). If you aren't using it, you can simply pass in an empty list for icons. The new field in the Manifest.Config has this type `icons : List.List (Pages.Manifest.Icon pathKey)`.
- `Program model msg metadata view` changed to `Program model msg metadata view pathKey`. That means there is a new type variable in `Pages.Platform.Program`. You can fix this by adding `Pages.PathKey` (a type defined in the generated Pages.elm module) as the last type variable wherever you had an annotation using the `Pages.Platform.Program` type.
2020-10-26 21:40:15 +03:00
The following functions in `Pages.Platform.init` have also changed:
2020-10-26 21:28:36 +03:00
2020-10-26 21:40:15 +03:00
```elm
2020-10-26 21:28:36 +03:00
, onPageChange :
Maybe
(
{ path : PagePath pathKey
, query : Maybe String
, fragment : Maybe String
}
-> msg
)
, onPageChange :
Maybe.Maybe
(
{ path : Pages.PagePath.PagePath pathKey
, query : Maybe.Maybe String.String
, fragment : Maybe.Maybe String.String
, metadata : metadata
}
-> msg
)
2020-10-26 21:40:15 +03:00
, init :
2020-10-26 21:28:36 +03:00
Maybe
{ path : PagePath pathKey
, query : Maybe String
, fragment : Maybe String
}
-> ( model, Cmd msg )
2020-10-26 21:40:15 +03:00
, init :
2020-10-26 21:28:36 +03:00
Maybe.Maybe
{ path :
{ path : Pages.PagePath.PagePath pathKey
, query : Maybe.Maybe String.String
, fragment : Maybe.Maybe String.String
}
, metadata : metadata
}
-> ( model, Platform.Cmd.Cmd msg )
, subscriptions : model -> Sub msg
, subscriptions :
metadata
-> Pages.PagePath.PagePath pathKey
-> model
-> Platform.Sub.Sub msg
2020-10-26 21:40:15 +03:00
```
2020-10-26 21:28:36 +03:00
## 2 - Beta build command
2020-10-26 21:40:15 +03:00
You can run the regular build command and the beta build command side by side, and have the beta entrypoints living next to the current JS entrypoint you have (index.js). Hopefully that makes it easy to try out the beta and experiment with it without needing to change over right away.
- `elm-pages build` and `elm-pages develop` use the `index.js` entrypoint.
- A new command, `elm-pages-beta` (doesn't take any arguments) uses the `beta-index.js` and `beta-style.css` entrypoints.
Note that before you would use webpack to import CSS from the JS entrypoint (or something that was imported from there). Now there are separate entrypoints for JS and CSS.
Some key points about the no-webpack build:
- Whether you're using the beta no-webpack build or the previous build, you will see significant performance improvements for StaticHttp
- You can continue using the current elm-pages build and elm-pages develop commands. If you do that, you can just pass in icons = [] for the manifest config as the icons are only read for the new beta build.
- For the beta build, you can use the Manifest config's icons to set the PWA icon set, and you can set the favicon set using head tags an example here: https://github.com/dillonkearns/elm-pages/blob/5ad85cad0d5de9631ea06f98bba8ef1c96b1908a/examples/simple/src/Main.elm#L41-L130. Note that the beta build does not generate icons for you (I'm using cloudinary in the example, and it works way better and doesn't slow down the build). The beta build also doesn't do all of these things to remove bloat and give the user more control, while also making the elm-pages build more focused on doing a great job with the Elm code: https://github.com/dillonkearns/elm-pages/issues/148
- To use the elm-pages-beta, you just need to create beta-index.js (using ES module syntax, see this example: https://github.com/dillonkearns/elm-pages/blob/elm-to-html/examples/simple/beta-index.js), and a beta-style.css entrypoint (this only using @import syntax, see https://github.com/dillonkearns/elm-pages/blob/elm-to-html/examples/simple/beta-style.css - you can bundle CSS code to this entrypoint if you need CSS bundling).
2020-10-26 21:28:36 +03:00
---- Head - MINOR ----
Added:
appleTouchIcon :
Maybe.Maybe Basics.Int
-> Pages.ImagePath.ImagePath pathKey
-> Head.Tag pathKey
icon :
List.List ( Basics.Int, Basics.Int )
-> MimeType.MimeImage
-> Pages.ImagePath.ImagePath pathKey
-> Head.Tag pathKey
## 3 - Beta Template Modules feature