Elm Ports Driver
A combo of JavaScript code and Elm code to automate some of the JavaScript interop
Installation
-
add
elm-ports-driver
as a dependencynpm install elm-ports-driver --save
-
install the
elm-ports-driver
elm packageelm-package install pdamoc/elm-ports-driver
inside your Elm's project index.js
(the app's entrypoint) use something like :
var elm_ports_driver = require( 'elm-ports-driver' ); // the actual driver
var Elm = require( '../../src/Main' );
var app = Elm.Main.fullscreen();
// custom plugin for the elm_ports_driver.
var custom =
{ "MyLog": function(input, payload) { console.log("MyLog: ", payload)}
}
elm_ports_driver.install(app.ports.output, app.ports.input,
[ elm_ports_driver.file_reader
, elm_ports_driver.log
, elm_ports_driver.set_title
, elm_ports_driver.update_css
, elm_ports_driver.local_storage
, elm_ports_driver.local_storage_listener
, custom
]
);
You can use only the plugins you need.
Inside your Main Elm file create a configuration record that holds your app's input and output ports as well as a message generator for the messages that are unrecognized. If you receive messages from JavaScript make sure you subscrible using the provided decoders.
config : Config Msg
config =
{ output = Ports.output
, input = Ports.input
, fail = Fail
}
subscriptions : Model -> Sub Msg
subscriptions _ =
PortsDriver.subscriptions config
[ PortsDriver.receiveFileAsDataURL ReceiveFile
, PortsDriver.receiveLocalStorageItem ReceiveStorageItem
, PortsDriver.receiveLocalStorageChange ReceiveStorageItem
-- handler for the custom event listener installed in JS
, PortsDriver.inputDecoder "WindowResize" (Decode.map Resize windowResizeDecoder)
]
Please see the example
folder for a full example. (Inside the example
folder run npm start
)