This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Elm Ports Driver
version 4.0.0
license MIT
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 4.0.0
Committed At 2018-02-13 11:32:09 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.0.0 <= v < 6.0.0 5.1.1

Modules

README

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)