The Elm Architecture, JSON and ports

module Counter exposing (Model, Msg(..), init, main, update, view)

{-| A counter of cups of chai, as a Browser.element: The Elm Architecture in
one module.
-}

import Browser
import Html exposing (Html, button, div, p, text)
import Html.Events exposing (onClick)


type alias Model =
    { cups : Int }


type Msg
    = Add
    | Remove
    | Reset


init : () -> ( Model, Cmd Msg )
init _ =
    ( { cups = 0 }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Add ->
            ( { model | cups = model.cups + 1 }, Cmd.none )

        Remove ->
            ( { model | cups = max 0 (model.cups - 1) }, Cmd.none )

        Reset ->
            ( { model | cups = 0 }, Cmd.none )


view : Model -> Html Msg
view model =
    div []
        [ p [] [ text (cupsOfChai model.cups) ]
        , button [ onClick Remove ] [ text "Remove one" ]
        , button [ onClick Add ] [ text "Add one" ]
        , button [ onClick Reset ] [ text "Reset" ]
        ]


cupsOfChai : Int -> String
cupsOfChai cups =
    if cups == 1 then
        "1 cup of chai"

    else
        String.fromInt cups ++ " cups of chai"


main : Program () Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

port module Replay exposing (main)

{-| Plays a list of messages through Counter.update, the way the runtime would
after clicks, and reports the model after each one.
-}

import Counter exposing (Msg(..))


port out : String -> Cmd msg


clicks : List Msg
clicks =
    [ Add, Add, Remove, Reset, Remove ]


label : Msg -> String
label msg =
    case msg of
        Add ->
            "Add"

        Remove ->
            "Remove"

        Reset ->
            "Reset"


step : Msg -> ( List String, Counter.Model ) -> ( List String, Counter.Model )
step msg ( lines, model ) =
    let
        ( next, _ ) =
            Counter.update msg model
    in
    ( lines ++ [ String.padRight 8 ' ' (label msg) ++ "cups = " ++ String.fromInt next.cups ], next )


report : String
report =
    let
        ( start, _ ) =
            Counter.init ()

        ( lines, _ ) =
            List.foldl step ( [ "init    cups = " ++ String.fromInt start.cups ], start ) clicks
    in
    String.join "\n" lines


main : Program () () Never
main =
    Platform.worker
        { init = \_ -> ( (), out report )
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

"""Builds the Counter element and measures it, replays five clicks through its update function headlessly, and sends
three commands through one port with Cmd.batch (session.py plays it)."""

from session import cache, run

cache()
run("""
cd tea
elm make src/Counter.elm --optimize --output=build/counter.js
wc -c < build/counter.js
elm make src/Replay.elm --optimize --output=build/replay.js
node run.cjs Replay
elm make src/Batch.elm --optimize --output=build/batch.js
node run.cjs Batch
""")

$ cd tea
$ elm make src/Counter.elm --optimize --output=build/counter.js
Dependencies ready!
Success! Compiled 1 module.

    Counter ───> build/counter.js
$ wc -c < build/counter.js
  110515
$ elm make src/Replay.elm --optimize --output=build/replay.js
Success! Compiled 1 module.

    Replay ───> build/replay.js
$ node run.cjs Replay
init    cups = 0
Add     cups = 1
Add     cups = 2
Remove  cups = 1
Reset   cups = 0
Remove  cups = 0
$ elm make src/Batch.elm --optimize --output=build/batch.js
Success! Compiled 1 module.

    Batch ───> build/batch.js
$ node run.cjs Batch
third
second
first

port module Batch exposing (main)

{-| Three commands for one port, handed to the runtime in one Cmd.batch.
-}


port out : String -> Cmd msg


main : Program () () Never
main =
    Platform.worker
        { init = \_ -> ( (), Cmd.batch [ out "first", out "second", out "third" ] )
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

module OrderDecoder exposing (Item, Order, decoder, encode, looseDecoder)

{-| Decoders for an order sent by a server as JSON, in two versions, and an
encoder for sending one back.
-}

import Json.Decode as Decode exposing (Decoder)
import Json.Encode as Encode


type alias Item =
    { name : String
    , paise : Int
    , quantity : Int
    }


type alias Order =
    { id : String
    , items : List Item
    , note : Maybe String
    }


{-| Reads "version" first, then the fields of that version.
-}
decoder : Decoder Order
decoder =
    Decode.field "version" Decode.int
        |> Decode.andThen forVersion


forVersion : Int -> Decoder Order
forVersion version =
    case version of
        1 ->
            Decode.map3 Order
                (Decode.field "id" Decode.string)
                (Decode.field "lines" (Decode.list itemV1))
                (Decode.succeed Nothing)

        2 ->
            Decode.map3 Order
                (Decode.field "id" Decode.string)
                (Decode.field "items" (Decode.list item))
                (optionalField "note" Decode.string)

        _ ->
            Decode.fail ("version " ++ String.fromInt version ++ " is not one this app reads")


itemV1 : Decoder Item
itemV1 =
    Decode.map3 Item
        (Decode.field "item" Decode.string)
        (Decode.field "paise" Decode.int)
        (Decode.field "qty" Decode.int)


item : Decoder Item
item =
    Decode.map3 Item
        (Decode.field "name" Decode.string)
        (Decode.field "paise" Decode.int)
        (Decode.field "quantity" Decode.int)


{-| A field that may be missing or null; when it is there, it must decode.
-}
optionalField : String -> Decoder a -> Decoder (Maybe a)
optionalField name inner =
    Decode.keyValuePairs Decode.value
        |> Decode.andThen
            (\pairs ->
                if List.any (\( key, _ ) -> key == name) pairs then
                    Decode.field name (Decode.nullable inner)

                else
                    Decode.succeed Nothing
            )


{-| The same version 2 order, read with Decode.maybe for the note: a note of the
wrong type is quietly dropped.
-}
looseDecoder : Decoder Order
looseDecoder =
    Decode.map3 Order
        (Decode.field "id" Decode.string)
        (Decode.field "items" (Decode.list item))
        (Decode.maybe (Decode.field "note" Decode.string))


encode : Order -> Encode.Value
encode order =
    Encode.object
        [ ( "version", Encode.int 2 )
        , ( "id", Encode.string order.id )
        , ( "items"
          , Encode.list
                (\i -> Encode.object [ ( "name", Encode.string i.name ), ( "paise", Encode.int i.paise ), ( "quantity", Encode.int i.quantity ) ])
                order.items
          )
        , ( "note", Maybe.map Encode.string order.note |> Maybe.withDefault Encode.null )
        ]

{"version": 2, "id": "A-19", "items": [{"name": "chai", "paise": 1200, "quantity": 2}, {"name": "samosa", "paise": "1450", "quantity": 3}]}

// The order of samples/order-4-text-price.json, added up in JavaScript with no decoder in between.
import { readFileSync } from 'node:fs';

const order = JSON.parse(readFileSync(new URL('./samples/order-4-text-price.json', import.meta.url), 'utf8'));

const total = order.items.reduce((sum, item) => sum + item.paise * item.quantity, 0);
const prices = order.items.reduce((sum, item) => sum + item.paise, 0);

console.log(`total of the lines: ${total}`);
console.log(`sum of the prices:  ${prices}`);

total of the lines: 6750
sum of the prices:  12001450

"""Moves elm/json from the indirect to the direct dependencies with elm install, offline, then builds DecodeDemo and
decodes the six documents of samples/ with it (session.py plays it). elm install asks before it changes elm.json, and
the session answers y."""

from session import cache, run

cache()
run("""
cd json
elm install elm/json
elm make src/DecodeDemo.elm --optimize --output=build/decode.js
node run.cjs
""", stdin="y\n")

$ cd json
$ elm install elm/json
I found it in your elm.json file, but in the "indirect" dependencies.
Should I move it into "direct" dependencies for more general use? [Y/n]: Success!
$ elm make src/DecodeDemo.elm --optimize --output=build/decode.js
Success! Compiled 2 modules.

    DecodeDemo ───> build/decode.js
$ node run.cjs
order-1-v2.json
  Ok A-17: 2 items, 6750 paise, note "less sugar"
order-2-v1.json
  Ok A-9: 1 item, 1200 paise, no note
order-3-no-note.json
  Ok A-18: 1 item, 1200 paise, no note
order-4-text-price.json
  Err Problem with the value at json.items[1].paise:

      "1450"

  Expecting an INT
order-5-note-number.json
  Err The Json.Decode.oneOf at json.note failed in the following 2 ways:



  (1) Problem with the given value:

      42

      Expecting null



  (2) Problem with the given value:

      42

      Expecting a STRING
order-6-version-3.json
  Err Problem with the given value:

  {
          "version": 3,
          "id": "A-21",
          "items": []
      }

  version 3 is not one this app reads
order-5-note-number.json with Decode.maybe
  Ok A-20: 0 items, 0 paise, no note
encoded again
  {"version":2,"id":"A-17","items":[{"name":"chai","paise":1200,"quantity":2},{"name":"samosa","paise":1450,"quantity":3}],"note":"less sugar"}

port module Till exposing (main)

{-| A till without a screen. JavaScript gives the shop's name as a flag, sends
prices in paise through the port prices, and hears the running total through
the port totals.
-}


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


port totals : { count : Int, paise : Int } -> Cmd msg


type alias Flags =
    { shop : String }


type alias Model =
    { shop : String
    , count : Int
    , paise : Int
    }


type Msg
    = Scanned Int


init : Flags -> ( Model, Cmd Msg )
init flags =
    ( { shop = flags.shop, count = 0, paise = 0 }, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg )
update (Scanned price) model =
    let
        next =
            { model | count = model.count + 1, paise = model.paise + price }
    in
    ( next, totals { count = next.count, paise = next.paise } )


main : Program Flags Model Msg
main =
    Platform.worker
        { init = init
        , update = update
        , subscriptions = \_ -> prices Scanned
        }

// The typed till: three prices, then a price sent as text, then a start with a flag of the wrong type.
const { Elm } = require('./build/till.js');

const app = Elm.Till.init({ flags: { shop: 'Corner Cafe' } });
app.ports.totals.subscribe((t) => console.log(`${t.count} item${t.count === 1 ? '' : 's'}, ${t.paise} paise`));
for (const price of [1200, 1450, 1450]) app.ports.prices.send(price);
console.log('sent three prices');
try {
  app.ports.prices.send('1450');
} catch (error) {
  console.log(`send('1450') threw: ${error.message}`);
}
try {
  Elm.Till.init({ flags: { shop: 42 } });
} catch (error) {
  console.log(`init with { shop: 42 } threw: ${error.message}`);
}

"""Builds the two tills of till/ in development mode, so that errors carry their full messages, and runs each with the
same prices, one of them sent as text (session.py plays it)."""

from session import cache, run

cache()
run("""
cd till
elm make src/Till.elm --output=build/till.js
node run.cjs
elm make src/TillSafe.elm --output=build/tillsafe.js
node safe.cjs
""")

$ cd till
$ elm make src/Till.elm --output=build/till.js
Dependencies ready!
Success! Compiled 1 module.

    Till ───> build/till.js
$ node run.cjs
Compiled in DEV mode. Follow the advice at https://elm-lang.org/0.19.3/optimize for better performance and smaller assets.
sent three prices
send('1450') threw: Trying to send an unexpected type of value through port `prices`:
[object Object]
init with { shop: 42 } threw: Problem with the flags given to your Elm program on initialization.

Problem with the value at json.shop:

    42

Expecting a STRING
1 item, 1200 paise
2 items, 2650 paise
3 items, 4100 paise
$ elm make src/TillSafe.elm --output=build/tillsafe.js
Success! Compiled 1 module.

    TillSafe ───> build/tillsafe.js
$ node safe.cjs
Compiled in DEV mode. Follow the advice at https://elm-lang.org/0.19.3/optimize for better performance and smaller assets.
1 item, 1200 paise
2 items, 2650 paise
rejected: Problem with the given value: "1450" Expecting an INT
3 items, 4100 paise

port module TillSafe exposing (main)

{-| The till with a port that takes any JavaScript value and decodes it in Elm,
so a value of the wrong type becomes a message instead of an exception.
-}

import Json.Decode as Decode


port prices : (Decode.Value -> msg) -> Sub msg


port totals : String -> Cmd msg


type alias Model =
    { count : Int
    , paise : Int
    }


type Msg
    = Scanned Decode.Value


update : Msg -> Model -> ( Model, Cmd Msg )
update (Scanned value) model =
    case Decode.decodeValue Decode.int value of
        Ok price ->
            let
                next =
                    { count = model.count + 1, paise = model.paise + price }
            in
            ( next, totals (items next.count ++ ", " ++ String.fromInt next.paise ++ " paise") )

        Err error ->
            ( model, totals ("rejected: " ++ String.join " " (String.words (Decode.errorToString error))) )


items : Int -> String
items count =
    if count == 1 then
        "1 item"

    else
        String.fromInt count ++ " items"


main : Program () Model Msg
main =
    Platform.worker
        { init = \_ -> ( { count = 0, paise = 0 }, Cmd.none )
        , update = update
        , subscriptions = \_ -> prices Scanned
        }

// Two ways a port subscriber could put a message from a user on the page, and a check that tells them apart.
const message = 'Asha <b>VIP</b>';

// Weak: joins strings into HTML, as el.innerHTML = '<p>' + message + '</p>' would.
const weak = (text) => '<p>' + text + '</p>';

// Fixed: escapes the characters HTML reads as markup, so the text stays text, as el.textContent = message does.
const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => ESCAPES[c]);
const fixed = (text) => '<p>' + escapeHtml(text) + '</p>';

// The check: the only element in the result is the <p> the code itself wrote.
const elements = (html) => (html.match(/<[a-z]/gi) ?? []).length;

for (const [name, render] of [['weak', weak], ['fixed', fixed]]) {
  const html = render(message);
  const verdict = elements(html) === 1 ? 'PASS: one element, the message is text' : `FAIL: ${elements(html)} elements, the message added markup`;
  console.log(`${name.padEnd(5)} ${html}`);
  console.log(`      ${verdict}`);
}

weak  <p>Asha <b>VIP</b></p>
      FAIL: 2 elements, the message added markup
fixed <p>Asha &lt;b&gt;VIP&lt;/b&gt;</p>
      PASS: one element, the message is text