FromElm Ports

<- FlagsEncoding Custom Types ->
  1. 1. What Is elm-ts-interop?
    2:57
  2. 2. Setup
    2:10
  3. 3. Flags
    2:52
  4. 4. FromElm Ports
    5:44
  5. 5. Encoding Custom Types
    9:54
  6. 6. Exhaustive Ports
    6:30
  7. 7. ToElm Ports
    11:10
  8. 8. Migrating to Pro
    9:32

Chapter Notes

Replace our Vanilla port with our FromElm elm-ts-interop port:

LogMessage kind ->
    ( model
-   , alert model.input
+   , InteropPorts.fromElm ( InteropPorts.Alert model.input )
    )

Subscribe to the port from TypeScript using our single FromElm port:

app.ports.interopFromElm.subscribe((fromElm) => {
  alert(fromElm.data.message);
});

Use elm-ts-json to the Alert port. Then add logKind:

fromElm : Encoder FromElm
fromElm =
    TsEncode.union
        (\vAlert value ->
            case value of
                Alert string ->
                    vAlert string
        )
        |> TsEncode.variantTagged "alert"
            (TsEncode.object
                [ required "message" (\value -> value.message) TsEncode.string
                , required "logKind" (\value -> value.kind) Log.encoder
                ]
            )
        |> TsEncode.buildUnion