Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including elm-ports-driver with all npm packages installed. Try it out:

var elmPortsDriver = require("elm-ports-driver")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

elm-ports-driver v2.1.3

Elm ports helper library

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 dependency npm install elm-ports-driver --save

  • install the elm-ports-driver elm package elm-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)

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free