Component-launching helper functions in React.Basic.DOM.Util

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

import React.Basic.DOM.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.DOM.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

Work is being done to update the cookbook to PureScript 0.15. Is there any update on this?

I'm having a bit of trouble understanding why this helper is necessary for the cookbook to be updated to Purescript 15. Its pretty straightforward to make a non-warning version for mounting a component as can be seen in the example in the README and the classic examples.

If someone wants to make a PR, then I'm happy to consider merging it, but I also have a weak preference for staying close to the React API as much as possible.

I think the issue is that the iframe in Try PureScript won't have a div with id "root"/"container" for React to target. In the cookbook, we've just been rendering directly in the iframe's body which triggers a warning. So I think to avoid the warning, we'd first have to append a div and then mount the component in that div which would be a bit of boilerplate.

Thanks @ptrfrncsmrph, that helps fill in some gaps in context.

It seems like a problem mostly unique to the Try Purescript's setup and not something most people will face using this library, but Im happy to merge in a little helper if people find it useful. Otherwise i think its fine for it to live in the cookbook

Navigation Menu

Repository navigation

Component-launching helper functions in React.Basic.DOM.Util #8

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Component-launching helper functions in React.Basic.DOM.Util #8

Description

Activity

JordanMartinez commented on Jul 12, 2022

mjrussell commented on Jul 12, 2022

pete-murphy commented on Jul 12, 2022

mjrussell commented on Jul 12, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions