Exhaustive Ports

  1. 1. What Is elm-ts-interop?
  2. 2. Setup
  3. 3. Flags
  4. 4. FromElm Ports
  5. 5. Encoding Custom Types
  6. 6. Exhaustive Ports
  7. 7. ToElm Ports
  8. 8. Migrating to Pro

Chapter Notes

  • We add a variant to our InteropDefinitions.FromElm type

Wiring in a new FromElm variant#

Add a variant to our FromElm

We now have an inexhaustive case expression in our fromElm Encoder.

To handle the additional variant in our Encoder, the steps are:

  • Add a parameter, we can call it vAttemptLogIn (v is short for variant). This parameter will be an encoder that we can use in our case expression.
  • Use vAttemptLogIn for the AttemptLogIn record -> clause in our case expression
  • Add another |> TsEncode.variantTagged to the pipeline (this is the Encoder we get as the vAttemptLogIn parameter).

All the code together looks like:

fromElm : Encoder FromElm
fromElm =
        (\vAlert vAttemptLogIn value ->
            case value of
                Alert string ->
                    vAlert string

                AttemptLogIn record ->
                    vAttemptLogIn record
        |> TsEncode.variantTagged "alert"
                [ required "message" (\value -> value.message) TsEncode.string
                , required "logKind" (\value -> value.kind) Log.encoder
        |> TsEncode.variantTagged "attemptLogIn"
                [ required "username" (\value -> value.username) TsEncode.string
        |> TsEncode.buildUnion

Hands on with Encoding Discriminated Unions#

ellie-app fQY3tzjQDRRa1

Handle the new variant in TypeScript#

The fromElm value we receive in interopFromElm.subscribe is a TypeScript Discriminated Union.

Set up ESLint to catch inexhaustive switch statements#