How to write PureScript react components to replace JavaScript

Re:How to write PureScript react components to replace JavaS... by noelwelsh on Thursday June 25, 2020 @05:13AM (#23638528)

FWIW here's a Purescript example from the `purescript-react-basic-hooks` homepage[1]. It's not 100% identical but it is fairly close.

  mkCounter :: Effect (ReactComponent {})
  mkCounter = do
    component "Counter" \props -> React.do
      counter /\ setCounter <- useState 0

      pure
        $ R.button
          { onClick: handler_ do
              setCounter (_ + 1)
          , children:
              [ R.text $ "Increment: " <> show counter ]
          }

Your aesthetic / background may differ from mine, but I find the Purescript version easier to read.

[1]: https://github.com/spicydonuts/purescript-react-basic-hooks

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by diggan on Thursday June 25, 2020 @07:15AM (#23639287)

Not sure I misunderstand the code that you're posting, but seems to not have the whole increment vs decrements parts in it, which would be interesting to see.

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by lalaithion on Thursday June 25, 2020 @01:19PM (#23643005)

This is a closer comparison.

    mkCounter :: String -> (Int -> Int) -> Effect (ReactComponent {})
    mkCounter label op = do
      component "Counter" \props -> React.do
        counter /\ setCounter <- useState 0

        pure
          $ R.button
            { onClick: handler_ do
                setCounter op
            , children:
                [ R.text $ label <> ": " <> show counter ]
            }

now you can call

    mkCounter "Increment" (_ + 1)

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by noelwelsh on Thursday June 25, 2020 @10:51AM (#23641416)

You are correct, which is why I said "[I]t's not 100% identical".

Although I can read Purescript reasonably well I'm not so proficient writing it (I do most of my programming in a different FP language, so I understand the concepts but not the specifics.) I didn't attempt to modify the code I pulled from the example because it would take more time than I have to install Purescript and check my modifications.

It would be simple to add this functionality. This equivalent of the `counterType` would be an algebraic data type, defined looking something like

  data counterType = Increment | Decrement

and usage something like

  case counterType of
    Increment -> ... make increment here ...
    Decrement -> ... make decrement here ...

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by TexInWien on Thursday June 25, 2020 @10:33AM (#23641184)

The following line defines a function (the syntax is known as an 'operator section'):

  (_ + 1)

Equivalent to this JS function:

  x => x + 1

Operator Sections: https://github.com/purescript/documentation/blob/master/lang...

[ Parent | on HN ]

Re:How to write PureScript react components to replace JavaS... by rkangel on Thursday June 25, 2020 @10:40AM (#23641268)

I think the parent's point is that it only includes increment and not decrement.

[ Parent | on HN ]