evancz/Ports.js

mgold · 2015-12-29T16:03:46Z

You'd now use elm make Shanghai.elm --output=elm.js, where the file extension controls whether HTML or JS is written.

booch · 2016-02-02T23:34:16Z

I had to change Shanghai.elm, mostly to replace the map operator in @cakesmith's version:

module Shanghai where

import Signal exposing (..)
import Dict
import List exposing (sum)

 -- Input ports

port coordinates  : (Int,Int)
port incomingShip : Signal { name:String, capacity:Int }
port outgoingShip : Signal String

ships = merge (Signal.map Ok incomingShip) (Signal.map Err outgoingShip)

updateDocks ship docks =
    case ship of
      Ok {name,capacity} -> Dict.insert name capacity docks
      Err name -> Dict.remove name docks

dock = foldp updateDocks Dict.empty ships

 -- Output ports

port totalCapacity : Signal Int
port totalCapacity = Signal.map (sum << Dict.values) dock

trotha01 · 2016-04-25T02:07:27Z

just for completeness, if elm make Shanghai.elm --output=elm.js is used to compile, index.html will need
<script type="text/javascript" src="elm.js"></script>

shamansir · 2016-11-15T18:12:01Z

The example with Elm v0.18, ports, headless program and sending a single value to JS from the start of the program (no Html at all): https://gist.github.com/shamansir/1e9b22851f1c5d97ad9e66682f95b754 (not reliable anymore)

Since you can not send some value just immediately from the headless program (or else subscriber won't receive it), I was required to trigger sending it with incoming port from JS, just after the subscription was performed.

peerreynders · 2017-01-09T14:20:16Z

An attempt at a remaster for 0.18:

port module Shanghai exposing (..)
{-  Shanghai.elm - Updated for 0.18
    Build with: $elm-make --warn --output Shanghai.js Shanghai.elm
 -}

import Json.Decode
-- https://github.com/elm-lang/elm-make/issues/127

import Dict exposing (Dict)

type alias Model =
    Dict String Int

type alias ShipInfo =
    { name : String
    , capacity : Int
    }

-- Browser-bound (-> Cmd msg)
port totalCapacity : Int -> Cmd msg

-- Elm-bound (-> Sub msg)
port incomingShip : (ShipInfo -> msg) -> Sub msg
port outgoingShip : (String -> msg) -> Sub msg

type Msg            -- see also "subscriptions" below
    = Dock ShipInfo -- ShipInfo as specified by incomingShip
    | Sail String   -- ship name as specified by outgoingShip

{-
    Specify which Msg data constructors to use for
    the various Elm-bound port values
-}
subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ incomingShip Dock
        , outgoingShip Sail
        ]

tallyCapacity : Model -> Int
tallyCapacity  =
    List.sum << Dict.values

{-  1. "regular" boring version
    tallyCapacity model =
        List.sum (Dict.values model)
    2. Use backward function application (<|) to "avoid parentheses"
    tallyCapacity model =
        List.sum <| Dict.values model
    3. Use function composition (<<) for a "pointfree style"
       representation (parameter is implied and therefore "unseen")
    tallyCapacity  =
        List.sum << Dict.values
    4. Alternately with (>>) 
    tallyCapacity  =
        Dict.values >> List.sum
-}

dock : ShipInfo -> Model -> ( Model , Cmd Msg )
dock info model =
    let
        newModel = Dict.insert info.name info.capacity model
    in
        ( newModel, totalCapacity <| tallyCapacity newModel )

sail : String -> Model -> ( Model, Cmd Msg )
sail name model =
    let
        newModel = Dict.remove name model
    in
        ( newModel, tallyCapacity newModel |> totalCapacity )
        -- alternately used forward function application (|>) instead

{-  Alternately Platform.programWithFlags
    accepts initialization data to be passed
    to "init" function
-}
init : ( Model, Cmd msg )
init =
    ( Dict.empty, totalCapacity 0 )
--  ( Dict.empty, Cmd.none )
--  as an alternate if initial capacity report is not desired. 

-- Process the incoming values and dispatch the updated capacity
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Dock info ->
            dock info model

        Sail name ->
            sail name model

{-
  Platform.program is "headless" - it does not
  generate an HTML view
-}
main : Program Never Model Msg
main =
    Platform.program
        { init = init
        , update = update
        , subscriptions = subscriptions
        }

/* ports.js - Chrome 55.0.2883.95 (64-bit)

   It is assumed that "this.Elm" is set
   and valid for this IIFE (i.e. "Window.Elm.Shanghai"
   was set by Shanghai.js beforehand).
 */
; (function() {

  function connectElmWorker(elm) {
    function logDockedCapacity (value) {
      console.log(
        '[' + (new Date).toISOString() + ']: ' + value
      );
    }

    /*  "Elm.Shanghai" as in "module Shanghai"
           from file "Shanghai.elm""
           compiled into file "Shanghai.js.
     */
    let elmWorker = elm.Shanghai.worker();

    // log docked capacity changes
    elmWorker.ports.totalCapacity.subscribe(logDockedCapacity);

    return elmWorker;
  }

  function dock(worker, name, capacity) {
    worker.ports.incomingShip.send({
      name: name,
      capacity: capacity
    });
  }

  function sail(worker, name) {
    worker.ports.outgoingShip.send(name);
  }

  function scheduleActions(shanghai) {
    function dockAt(worker, name, capacity){
      return dock.bind(null, worker, name, capacity);
    }
    function sailFrom(worker, name) {
      return sail.bind(null, worker, name);
    }
    function at(delay, func) {
      setTimeout(func, delay);
    }

    const mary = 'Mary Mærsk',
          emma = 'Emma Mærsk';

    // send some ships to the port of Shanghai
    at(500, dockAt(shanghai, mary, 18270));
    at(1000, dockAt(shanghai, emma, 15500));

    // have these ships leave the port of Shanghai
    at(1500, sailFrom(shanghai, mary));
    at(2000, sailFrom(shanghai, emma));
  }


  const moduleName = 'shanghaiPorts';
  let elmWorker = connectElmWorker(this.Elm);
  scheduleActions(elmWorker);

  if (typeof this[moduleName] === 'undefined') {
    this[moduleName] = {
      dock: dock.bind(null, elmWorker),
      sail: sail.bind(null, elmWorker),
      shanghai: elmWorker
    };
  }

}).call(this);

<!DOCTYPE html>
<!-- shanghai.html -->
<html>
  <head>
    <title>Embedding Elm in HTML!</title>
  </head>
  <body>
    <h1>Ports of Shanghai</h1>
    <p>Check out the developer console, Try sending values to <code>shanghai.ports.incomingShip</code></p>
    <script type="text/javascript" src="Shanghai.js"></script>
    <script type="text/javascript" src="ports.js"></script>
    <script type="text/javascript">
      ; (function() {

        // Allow access to "shanghai" via the developer console
        const propName = 'shanghai';
        let module = this['shanghaiPorts']; 

        if (typeof module === 'object'
            && propName in module
            && typeof this[propName] === 'undefined') {

            this[propName] = module[propName];

        } else {
          console.log(
            'Any one or more of the following PROBLEMS were encountered:\
            \n  - "shanghai" is ALREADY DEFINED.\
            \n  - "shanghaiPorts" is NOT DEFINED or isn\'t an "object".\
            \n  - "shanghaiPorts.shanghai" is NOT DEFINED.'
          );
        }

        /*  In the developer console try:
          shanghai.ports.incomingShip.send({ name: 'Mary Mærsk',capacity: 18270 });
          shanghai.ports.incomingShip.send({ name: 'Emma Mærsk', capacity: 15500 });
          shanghai.ports.outgoingShip.send('Mary Mærsk');
          shanghai.ports.outgoingShip.send('Emma Mærsk');

            Or:
          shanghaiPorts.dock('Mary Mærsk', 18270);
          shanghaiPorts.dock('Emma Mærsk', 15500);
          shanghaiPorts.sail('Mary Mærsk');
          shanghaiPorts.sail('Emma Mærsk');
         */

      }).call(this);
    </script>
  </body>
</html>

shamansir · 2017-12-13T13:40:43Z

I messed up my example, sorry, @peerreynders yours is awesome!

cdaringe · 2017-12-19T04:10:34Z

what's not clear to me in the docs or this example is when you have a Main "app" already, but then want to add a port module within that existing app. That is to say, all of the examples i've yet seen are as though the port module is also the entrypoint itself

	// initialize the Shanghai component which keeps track of
	// shipping data in and out of the Port of Shanghai.
	var shanghai = Elm.worker(Elm.Shanghai, {
	coordinates:[0,0],
	incomingShip: { name:"", capacity:0 },
	outgoingShip: ""
	});

	function logger(x) { console.log(x) }

	shanghai.ports.totalCapacity.subscribe(logger);

	// send some ships to the port of Shanghai
	shanghai.ports.incomingShip.send({
	name:"Mary Mærsk",
	capacity:18270
	});
	shanghai.ports.incomingShip.send({
	name:"Emma Mærsk",
	capacity:15500
	});

	// have those ships leave the port of Shanghai
	shanghai.ports.outgoingShip.send("Mary Mærsk");
	shanghai.ports.outgoingShip.send("Emma Mærsk");

evancz/Ports.js

mgold commented Dec 29, 2015

booch commented Feb 2, 2016

trotha01 commented Apr 25, 2016

shamansir commented Nov 15, 2016 •

edited

Loading

peerreynders commented Jan 9, 2017

shamansir commented Dec 13, 2017

cdaringe commented Dec 19, 2017

	module Shanghai where

	import Either (..)
	import Dict

	port coordinates : (Int,Int)
	port incomingShip : Signal { name:String, capacity:Int }
	port outgoingShip : Signal String

	ships = merge (Right <~ incomingShip) (Left <~ outgoingShip)

	updateDocks ship docks =
	case ship of
	Right {name,capacity} -> Dict.insert name capacity docks
	Left name -> Dict.remove name docks

	dock = foldp updateDocks Dict.empty ships

	port totalCapacity : Signal Int
	port totalCapacity = lift (sum . Dict.values) dock

	<html>

	<head>
	<title>Embedding Elm in HTML!</title>
	<script type="text/javascript" src="http://elm-lang.org/elm-runtime.js"></script>
	<script type="text/javascript" src="build/Shanghai.js"></script>
	</head>

	<body>
	<h1>Ports of Shanghai</h1>
	<p>Check out the developer console. Try sending values to <code>shanghai.ports.incomingShip</code>.</p>
	</body>

	<script type="text/javascript" src="Ports.js"></script>

	</html>

evancz/Ports.js

mgold commented Dec 29, 2015

booch commented Feb 2, 2016

trotha01 commented Apr 25, 2016

shamansir commented Nov 15, 2016 • edited Loading

peerreynders commented Jan 9, 2017

shamansir commented Dec 13, 2017

cdaringe commented Dec 19, 2017

shamansir commented Nov 15, 2016 •

edited

Loading