pdamoc/Component.elm

## Component.elm
module Component exposing (..)

import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)

import Ports exposing (..)

-- MODEL

type alias Model = Int

init : (Model, Cmd Msg)
init = 0 ! []

-- UPDATE

type Msg = Increment | Decrement | UpdateValue Int

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
  case msg of
    Increment -> model ! [toJS "Increment"]
    Decrement -> model ! [toJS "Decrement"]
    UpdateValue val -> (model + val) ! []

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [ countStyle ] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]


countStyle : Attribute Msg
countStyle =
  style
    [ ("font-size", "20px")
    , ("font-family", "monospace")
    , ("display", "inline-block")
    , ("width", "50px")
    , ("text-align", "center")
    ]

-- WIRING

subscriptions : Model -> Sub Msg
subscriptions model =
  fromJS UpdateValue

## elm-package.json
{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.0 <= v < 5.0.0",
        "elm-lang/html": "1.0.0 <= v < 2.0.0",
        "evancz/elm-http": "3.0.1 <= v < 4.0.0"
    },
    "elm-version": "0.17.0 <= v < 0.18.0"
}

## index.html
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>Elm • Counter through JS </title>
  <script type="text/javascript" src="elm.js"></script>
</head>

<body style="margin: 0px;">
</body>

<script type="text/javascript">

var app = Elm.Main.fullscreen();

app.ports.toJS.subscribe(function(state) {
    if (state == "Increment") {
        app.ports.fromJS.send(1);
    } else {
        app.ports.fromJS.send(-1);
    }
});

</script>

</html>

## Main.elm
import Html.App as App
import Html exposing (..)
import Component

import Ports

-- MODEL

type alias Model =
  { comp : Component.Model
  , snoop : String
  }

init : ( Model, Cmd Msg )
init =
  let
    (val, cmd) = Component.init
  in
    Model val "" ! [Cmd.map MainMsg cmd]
-- UPDATE

type Msg = MainMsg Component.Msg | Snoop Int

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    MainMsg compMsg ->
      let
        (newComp, cmd) = Component.update compMsg model.comp
      in
        { model | comp = newComp } ! [Cmd.map MainMsg cmd]
    Snoop val ->
      { model | snoop = "fromJS: " ++ (toString val)  } ! []

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ App.map MainMsg (Component.view model.comp)
    , div [] [text model.snoop]
    ]

-- WIRING

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.batch
    [ Sub.map MainMsg (Component.subscriptions model.comp)
    , Ports.fromJS Snoop ]

main : Program Never
main =
  App.program
    { init = init
    , update = update
    , view = view
    , subscriptions = subscriptions}

## Ports.elm
port module Ports exposing (toJS, fromJS)


port toJS : String -> Cmd msg

port fromJS : (Int -> msg) -> Sub msg
	module Component exposing (..)

	import Html exposing (..)
	import Html.Attributes exposing (style)
	import Html.Events exposing (onClick)

	import Ports exposing (..)

	-- MODEL

	type alias Model = Int

	init : (Model, Cmd Msg)
	init = 0 ! []

	-- UPDATE

	type Msg = Increment \| Decrement \| UpdateValue Int

	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	Increment -> model ! [toJS "Increment"]
	Decrement -> model ! [toJS "Decrement"]
	UpdateValue val -> (model + val) ! []

	-- VIEW

	view : Model -> Html Msg
	view model =
	div []
	[ button [ onClick Decrement ] [ text "-" ]
	, div [ countStyle ] [ text (toString model) ]
	, button [ onClick Increment ] [ text "+" ]
	]


	countStyle : Attribute Msg
	countStyle =
	style
	[ ("font-size", "20px")
	, ("font-family", "monospace")
	, ("display", "inline-block")
	, ("width", "50px")
	, ("text-align", "center")
	]

	-- WIRING

	subscriptions : Model -> Sub Msg
	subscriptions model =
	fromJS UpdateValue
	{
	"version": "1.0.0",
	"summary": "helpful summary of your project, less than 80 characters",
	"repository": "https://github.com/user/project.git",
	"license": "BSD3",
	"source-directories": [
	"."
	],
	"exposed-modules": [],
	"dependencies": {
	"elm-lang/core": "4.0.0 <= v < 5.0.0",
	"elm-lang/html": "1.0.0 <= v < 2.0.0",
	"evancz/elm-http": "3.0.1 <= v < 4.0.0"
	},
	"elm-version": "0.17.0 <= v < 0.18.0"
	}
	<!DOCTYPE HTML>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Elm • Counter through JS </title>
	<script type="text/javascript" src="elm.js"></script>
	</head>

	<body style="margin: 0px;">
	</body>

	<script type="text/javascript">

	var app = Elm.Main.fullscreen();

	app.ports.toJS.subscribe(function(state) {
	if (state == "Increment") {
	app.ports.fromJS.send(1);
	} else {
	app.ports.fromJS.send(-1);
	}
	});

	</script>

	</html>
	import Html.App as App
	import Html exposing (..)
	import Component

	import Ports

	-- MODEL

	type alias Model =
	{ comp : Component.Model
	, snoop : String
	}

	init : ( Model, Cmd Msg )
	init =
	let
	(val, cmd) = Component.init
	in
	Model val "" ! [Cmd.map MainMsg cmd]
	-- UPDATE

	type Msg = MainMsg Component.Msg \| Snoop Int

	update : Msg -> Model -> (Model, Cmd Msg)
	update msg model =
	case msg of
	MainMsg compMsg ->
	let
	(newComp, cmd) = Component.update compMsg model.comp
	in
	{ model \| comp = newComp } ! [Cmd.map MainMsg cmd]
	Snoop val ->
	{ model \| snoop = "fromJS: " ++ (toString val) } ! []

	-- VIEW

	view : Model -> Html Msg
	view model =
	div []
	[ App.map MainMsg (Component.view model.comp)
	, div [] [text model.snoop]
	]

	-- WIRING

	subscriptions : Model -> Sub Msg
	subscriptions model =
	Sub.batch
	[ Sub.map MainMsg (Component.subscriptions model.comp)
	, Ports.fromJS Snoop ]

	main : Program Never
	main =
	App.program
	{ init = init
	, update = update
	, view = view
	, subscriptions = subscriptions}
	port module Ports exposing (toJS, fromJS)


	port toJS : String -> Cmd msg

	port fromJS : (Int -> msg) -> Sub msg