jc00ke/Main.elm

## index.html
<html>
<head>
  <style>
    /* you can style your program here */
  </style>
</head>
<body>
  <main></main>
  <script>
    var app = Elm.Main.init({ node: document.querySelector('main') })
    app.ports.jsonConsole.subscribe(function(json) {
      console.log(json)
    })
    // you can use ports and stuff here
  </script>
</body>
</html>

## Main.elm
port module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Json.Encode as E exposing (Value, int, object, string)


type alias Model =
    { count : Int
    , name : String
    }


initialModel : Model
initialModel =
    { count = 0
    , name = "Foo"
    }


encodeModel : Model -> Value
encodeModel model =
    object
        [ ( "count", int model.count )
        , ( "name", string model.name )
        ]


port jsonConsole : Value -> Cmd msg


type Msg
    = ConsoleLogJson


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ConsoleLogJson ->
            let
                json =
                    encodeModel model
            in
            ( model, jsonConsole json )


view : Model -> Html Msg
view model =
    div [] [ button [ onClick ConsoleLogJson ] [ text "Log to console" ] ]


subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.batch []


init : () -> ( Model, Cmd msg )
init flags =
    ( initialModel, Cmd.none )


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , subscriptions = subscriptions
        , view = view
        , update = update
        }
	<html>
	<head>
	<style>
	/* you can style your program here */
	</style>
	</head>
	<body>
	<main></main>
	<script>
	var app = Elm.Main.init({ node: document.querySelector('main') })
	app.ports.jsonConsole.subscribe(function(json) {
	console.log(json)
	})
	// you can use ports and stuff here
	</script>
	</body>
	</html>
	port module Main exposing (main)

	import Browser
	import Html exposing (Html, button, div, text)
	import Html.Events exposing (onClick)
	import Json.Encode as E exposing (Value, int, object, string)


	type alias Model =
	{ count : Int
	, name : String
	}


	initialModel : Model
	initialModel =
	{ count = 0
	, name = "Foo"
	}


	encodeModel : Model -> Value
	encodeModel model =
	object
	[ ( "count", int model.count )
	, ( "name", string model.name )
	]


	port jsonConsole : Value -> Cmd msg


	type Msg
	= ConsoleLogJson


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	ConsoleLogJson ->
	let
	json =
	encodeModel model
	in
	( model, jsonConsole json )


	view : Model -> Html Msg
	view model =
	div [] [ button [ onClick ConsoleLogJson ] [ text "Log to console" ] ]


	subscriptions : Model -> Sub Msg
	subscriptions _ =
	Sub.batch []


	init : () -> ( Model, Cmd msg )
	init flags =
	( initialModel, Cmd.none )


	main : Program () Model Msg
	main =
	Browser.element
	{ init = init
	, subscriptions = subscriptions
	, view = view
	, update = update
	}