fluxxu / elm-hot-loader Goto Github PK
View Code? Open in Web Editor NEWHot Module Replacement for Elm using webpack.
License: MIT License
Hot Module Replacement for Elm using webpack.
License: MIT License
I'm very excited about the hotloading and want to use your project as a starter, but your setup is confusing, given that I know nothing about webpack (some of the key config info is at the root level, and some at the /example
level).
I'd rather you set up the code with a /src
(rather than /example
) directory and have a production script available for final deployment (that perhaps copies the compiled assets into an /dist
) in the root package.json file.
I have had a go at https://github.com/simonh1000/elm-hot-loader.
What do you think?
It seems hot loading only retains state if you use programWithFlags ? (couldn't get it to keep state if using Html.program
).
If that's intentional (which is fine by me btw), maybe worth mentioning that limitation in the readme ?
tx again for a great tool :-)
Feature Request:
Optional flag to have the hot loader only swap modules after the compiler compiles successfully. I also work with Typescript + Redux w/ HMR and it has always annoyed me when I make a small syntax mistake and HMR runs even though the compiler catches the error. At that point I have to navigate again to the proper view and replace state, as a result of a small error (or sometimes even a linting error)!
It would be great if I got a chance to look at the compiler error and make the quick change before elm-hot-loader kicks in.
Let me know if you need clarification.
PS: This package is amazing, thanks!!!
The error I see:
elm-hot-loader is incompatible with this version of Elm.
My environment:
$ npm ls --depth 0 | grep elm
├── [email protected]
├── [email protected]
├── [email protected]
Example code (App.elm)
module App exposing (..)
import Html exposing (..)
main =
Html.program
{ init = initialState
, update = update
, subscriptions = (always Sub.none)
, view = view
}
type alias Model =
Int
type Msg
= X
initialState : ( Model, Cmd Msg )
initialState =
( 3, Cmd.none )
update : msg -> Model -> ( Model, Cmd Msg )
update msg model =
( model, Cmd.none )
view : Model -> Html Msg
view model =
span [] [ text "Hello world!" ]
With this code, webpack will fail with the error message pasted above.
Now, if I add this line...
import Html.Events
...the loader stops complaining and everything works.
I just upgraded webpack-dev-server to v2.3.0 and followed webpack migration guide. HMR looks normal when code changes but all histories are gone and back to initial model.
Hi,
Object.assign
is not compatible with IE (all versions.)
Would you consider including an Object.assign
pollyfill?
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
Hi. I'm not sure if this is a problem with elm-hot-loader, but here it goes.
I load my app using the following snippet:
var Elm = require('Main.elm');
Elm.embed(Elm.Main, document.getElementById('app'), {swap:false});
in the index.html I have a div like this: <div id="app"></div>
This works great. However, when I create a change which hotloads the app. The id="app" portion of the div disappears. This has some unfortunate results when it comes to css styling, and it seems like a bug.
The issue: Main.elm imports MyComponent.elm. When I save a change in MyComponent.elm, the page does not hot reload. When I save a change in Main.elm, the page does reload.
Is this an error that's been encountered before?
Additional note: I'm using elm-css, and when I save a change to an elm css file (even if it's not the entry point), the CSS gets correctly reloaded.
File tree:
project root
My project is slightly customized (ejected) from the create-elm-app boilerplate
Index.js
require('./elm/MainCss.elm');
var Elm = require('./elm/Main.elm');
var root = document.getElementById('root');
Elm.Main.embed(root);
My Webpack config (basically create-elm-app but with elm-css added in): https://gist.github.com/egauderman/c94cd24e9aedbcc0c2d0501121ec9645
Relevant NPM package versions:
"elm": "^0.18.0",
"elm-css-webpack-loader": "^3.1.0",
"elm-hot-loader": "0.5.4",
"elm-webpack-loader": "4.3.0",
Relevant lines of elm-package.json:
"source-directories": [
"src/elm"
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.0.0 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0",
"rtfeldman/elm-css": "8.2.0 <= v < 9.0.0",
"rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0",
"scottcorgan/elm-css-normalize": "1.1.7 <= v < 2.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
I have a simple app with a websocket subscription. When I reload the app, the connection is closed (which is reasonable I would suppose), but then my websocket server receives two open requests rather than one. The next time I reload I get a close event for the first of the two from the previous round, followed by another 2 open requests. Over time this ends up with a bunch of sockets (which I can easily see in the network tab in devtools). This is obviously problematic :-)
Of course I can't be sure it's due to elm-hot-loader, but looking at the behavior it seems it's not entirely improbable either ?
devServer: {
stats: 'errors-only',
proxy: {
'/ws/*': {
target: 'ws://localhost:3333/ws',
ws: true,
},
},
}
type Msg
= ServerMsg String
| SavePredictions String
subscriptions : Model -> Sub Msg
subscriptions model =
WebSocket.listen "ws://localhost:3333/ws" ServerMsg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
ServerMsg msg ->
let
_ = Debug.log "Msg from server" msg
in
( model, Cmd.none )
SavePredictions str ->
(model, WebSocket.send "ws://localhost:3333/ws" str)
view : Model -> Html.Html Msg
view model =
div [ class "container" ]
[ div [class "row"]
[ button
[ class "btn btn-success"
, onClick (SavePredictions "Scorepredictions coming soonish!")
]
[text "Send WS message"]
]
When you have a Main module nested a few folders deep it doesn't seem to pick up on changes.
For example
app/
/src
elm-package.json
/Components
/ComponentA
Main.elm
var Elm = require('./src/Components/ComponentA/Main')
var elm = Elm.fullscreen(Elm.Components.ComponentA.Main, { swap: false })
The above file configuration doesn't work. However, if I move the Main.elm up a few directories HMR works.
app/
/src
elm-package.json
Main.elm
/Components
/ComponentA
Can you remove the peer dependency on elm-webpack-loader
?
I have a project that combines multiple main modules into a single output:
https://github.com/joeandaverde/elm-project-loader
I use this project but do not use elm-webpack-loader
.
Hello. I'm the author of elm-webpack-starter, and I've now received several requests to integrate your hot-loader into it (on GitHub and the Elm Google group). Ironically, even though it's my most popular repo, I'm not very familiar with Elm -- I've only tried it over a weekend, which is when I created the build setup. Any interest doing a PR, so it's done correctly? Specifically, the port/swap/Signal shenanigans.. Thanks!
On start up, my app randomizes its state as part of its init command:
main =
let
startupCmd =
Random.generate NewModel modelGenerator
in
Html.program
{ init = ( emptyModel, startupCmd )
, update = update
, view = view
, subscriptions = subscriptions
}
The problem here is that its NewModel
message ticks after the app's previous state is injected.
Is this something that can be worked around by elm-hot-reload? If not, what about a way to signal to the app that it has been hot reloaded? That way I could simply not issue the startup command in those cases. e.g. :
main =
let
startupCmd =
Random.generate NewModel modelGenerator
init flags =
if flags.hotSwapped then
( emptyModel, Cmd.none )
else
( emptyModel, startupCmd )
in
Html.programWithFlags
{ init = init
, update = update startupCmd discoCmd
, view = view
, subscriptions = subscriptions
}
Uncaught TypeError: Cannot convert undefined or null to object
// Stack trace points here
function wrapPorts(elm, portSubscribes) {
var portNames = Object.keys(elm.ports);
Simple PR incoming
Currently, Elm Hot Loader has elm-webpack-loader@^3.0.6
in peer dependencies.
elm-webpack-loader was recently updated to version 4.0.0
It looks like hot reloading does not work with new version of the loader.
The change seems to work but I am getting recursion errors in the log?
GET
http://localhost:1000/ [HTTP/1.1 200 OK 0ms]
GET
http://localhost:1000/js/index.js [HTTP/1.1 200 OK 0ms]
[HMR] Waiting for update signal from WDS... index.js:18562:2
[elm-hot] Elm version: 0.18 index.js:17917:5
[elm-hot] ports.alert.subscribe called. index.js:18166:17
GET
XHR
http://localhost:3000/sockjs-node/info [HTTP/1.1 200 OK 14ms]
GET
http://localhost:3000/sockjs-node/617/o0lwocda/websocket [HTTP/1.1 101 Switching Protocols 11ms]
[WDS] Hot Module Replacement enabled. index.js:18363:10
[WDS] App updated. Recompiling... index.js:18363:10
[WDS] App hot update... index.js:18363:10
[HMR] Checking for updates on the server... index.js:18558:4
GET
XHR
http://localhost:1000/c0fc6b3396a422cc27f4.hot-update.json [HTTP/1.1 304 Not Modified 3ms]
GET
http://localhost:1000/1.c0fc6b3396a422cc27f4.hot-update.js [HTTP/1.1 304 Not Modified 5ms]
[elm-hot] Killing 1 running processes... index.js:17970:9
[elm-hot] Elm version: 0.18 1.c0fc6b3396a422cc27f4.hot-update.js:13022:5
[elm-hot] Hot-swapping module: Main 1.c0fc6b3396a422cc27f4.hot-update.js:13211:7
elm-hot event: swap index.js:24010:3
[elm-hot] Reconnect 1 handler(s) to port 'alert' (Main). 1.c0fc6b3396a422cc27f4.hot-update.js:13241:13
[HMR] Updated modules: index.js:23974:3
[HMR] - 36 index.js:23976:4
[HMR] Consider using the NamedModulesPlugin for module names. index.js:23982:4
too much recursion[Learn More] index.js:8:12
GET
XHR
http://localhost:1000/6b43cfbcdca9e1cf6723.hot-update.json [HTTP/1.1 304 Not Modified 1ms]
GET
http://localhost:1000/1.6b43cfbcdca9e1cf6723.hot-update.js [HTTP/1.1 304 Not Modified 2ms]
[elm-hot] Killing 1 running processes... 1.c0fc6b3396a422cc27f4.hot-update.js:13075:9
[elm-hot] Elm version: 0.18 1.6b43cfbcdca9e1cf6723.hot-update.js:13022:5
[elm-hot] Hot-swapping module: Main 1.6b43cfbcdca9e1cf6723.hot-update.js:13211:7
elm-hot event: swap index.js:24010:3
[elm-hot] Reconnect 1 handler(s) to port 'alert' (Main). 1.6b43cfbcdca9e1cf6723.hot-update.js:13241:13
[HMR] Updated modules: index.js:23974:3
[HMR] - 36 index.js:23976:4
[HMR] Consider using the NamedModulesPlugin for module names. index.js:23982:4
too much recursion[Learn More] index.js:888:15
GET
XHR
http://localhost:1000/d13c1713622423730d40.hot-update.json [HTTP/1.1 304 Not Modified 1ms]
GET
http://localhost:1000/1.d13c1713622423730d40.hot-update.js [HTTP/1.1 304 Not Modified 2ms]
[elm-hot] Killing 1 running processes... 1.6b43cfbcdca9e1cf6723.hot-update.js:13075:9
[elm-hot] Elm version: 0.18 1.d13c1713622423730d40.hot-update.js:13022:5
[elm-hot] Hot-swapping module: Main 1.d13c1713622423730d40.hot-update.js:13211:7
elm-hot event: swap index.js:24010:3
[elm-hot] Reconnect 1 handler(s) to port 'alert' (Main). 1.d13c1713622423730d40.hot-update.js:13241:13
[HMR] Updated modules: index.js:23974:3
[HMR] - 36 index.js:23976:4
[HMR] Consider using the NamedModulesPlugin for module names. index.js:23982:4
too much recursion[Learn More] index.js:888:15
GET
XHR
http://localhost:1000/520fd9242c5cf752e344.hot-update.json [HTTP/1.1 200 OK 2ms]
GET
http://localhost:1000/1.520fd9242c5cf752e344.hot-update.js [HTTP/1.1 200 OK 25ms]
[elm-hot] Killing 1 running processes... 1.d13c1713622423730d40.hot-update.js:13075:9
[elm-hot] Elm version: 0.18 1.520fd9242c5cf752e344.hot-update.js:13022:5
[elm-hot] Hot-swapping module: Main 1.520fd9242c5cf752e344.hot-update.js:13211:7
elm-hot event: swap index.js:24010:3
[elm-hot] Reconnect 1 handler(s) to port 'alert' (Main). 1.520fd9242c5cf752e344.hot-update.js:13241:13
[HMR] Updated modules: index.js:23974:3
[HMR] - 36 index.js:23976:4
[HMR] Consider using the NamedModulesPlugin for module names. index.js:23982:4
[HMR] App is up to date. index.js:18540:5
too much recursion[Learn More] index.js:888:15
Would be great to have control over logging to console such as
console.log('[elm-hot] ports.' + portName + '.subscribe called.');
at some point is just clutters up the console and it becomes harder to use it
Hello, I have folder structure similar like here:
https://github.com/rogeriochaves/structured-elm-todomvc/tree/modular
The problem is: when I change my model in some Module, it will reload, but the changes are not applied to the model (view and update are working properly, but the model isn't).
When I try it without elm-hot-loader
, it works.
Hi
Like react-hot-reload, we can use if (NODE_ENV=production)
to clean hot reload code in production, how to do this in elm-hot-loader?
thanks
Playing around with https://github.com/fluxxu/elm-hot-loader-starter, it seems that state is only maintained until a compile error is encountered.
To reproduce:
update
fnFirst reported here:
halfzebra/create-elm-app#97
Hi,
I had an issue however using it with that latest version of https://github.com/rtfeldman/elm-webpack-loader (version 3.0.1). After failing a build (due to compiler error) it does not try to recompile the bundle on file updates.
You can reproduce it by installing the https://github.com/fluxxu/elm-hot-loader-starter project.
Thanks for the awesome stuff!
Since I'm using Webstorm, i leave it to it to compile the elm code. What I get as a result, obviously, is a js module that i'm including in my webpack config like so:
resolve: {
extensions: ['.js'],
alias: {
Elm: resolve('builds/intellij/scripts/elm-program.js')
}
}
Right now, a change in elm-program.js causes total reload.
This project looks very cool, but it's a pity compiler errors don't show up in the browser. Figwheel for ClojureScript does this and it's very nice :P
I think I followed the instructions completely, but ended up with this in my browser.
and this in the terminal console. (I am using Ubuntu latest). It looks as though the elm code is not being compiled, but I know nothing about webpack so there is little I can do at present but post here
webpack-dev-server --hot --inline --port 3000
http://localhost:3000/
webpack result is served from /
content is served from /home/sim/code/btsync/Elm/practise/hot-loading/example
ERROR in Cannot find module 'loader-utils'
@ ./src/index.js 4:10-27
webpack: bundle is now VALID.
With the following config
module: {
loaders: [
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-hot!elm-webpack?cache=true&verbose=true&warn=false'
},
changes are only detected in Main.elm. If I remove the cache option they're detected in any elm file. I don't know webpack well enough to know whether this is an inevitable consequence of enabling the cache option.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.