purescript-react / purescript-react-basic

An opinionated set of bindings to the React library, optimizing for the most basic use cases
https://pursuit.purescript.org/packages/purescript-react-basic
Apache License 2.0
281 stars 40 forks source link

Component-launching helper functions in React.Basic.Util #131

Closed milesfrain closed 4 years ago

milesfrain commented 4 years ago

Proposing that we add a renderInRoot helper function to make this common pattern easier:

import React.Basic.Util (renderInRoot)

myComponent :: Component {}
myComponent = do
  component "MyComponentName" \_ -> React.do
    -- ...

main :: Effect Unit 
main = renderInRoot $ myComponent {}

A slightly more verbose option is:

import React.Basic.Util (createRootElement)

mkMyComponent :: Component {}
mkMyComponent = do
  component "MyComponentName" \_ -> React.do
    -- ...

main :: Effect Unit 
main = do
  root <- createRootElement
  myComponent <- mkMyComponent
  render (myComponent {}) root

We could support both options, and reuse createRootElement in renderInRoot.

For context, Halogen has some convenient helper functions for launching components, such as awaitBody in Halogen.Aff.Util:

hookComponent = Hooks.component \_ _ -> Hooks.do
  -- ...

main :: Effect Unit
main =
  HA.runHalogenAff do
    body <- HA.awaitBody
    void $ runUI hookComponent Nothing body
megamaddu commented 4 years ago

@milesfrain Can you move this to purescript-react-basic-dom?

milesfrain commented 4 years ago

Created https://github.com/lumihq/purescript-react-basic-dom/issues/8