Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a simplified version of the dom elements #41

Merged
merged 3 commits into from
Jul 8, 2022

Conversation

sigma-andex
Copy link
Member

@sigma-andex sigma-andex commented Jun 24, 2022

This adds a simplified version of the dom elements (insipired by how elmish-html does it) to make it less boilerplatey to work with simple html elements. I added them in a separate module to avoid backwards-compatibility issues. Basically, this change allows you to write elements like this:

import React.Basic.DOM.Simplified.Generated as R

-- chaining multiple elements
myDiv = 
  R.div { style: style1 }
     $ R.div { style: style2 }
     $ R.div { style: style3 }
     $ R.text "Bla"
     
     
--  A string is automatically converted to an jsx 
myDiv2 = 
  R.div { style: style1 } "text"
  
--- And one can still use arrays in case of multiple html elements:
myDiv3 = 
  R.div { style: style1 }
     $ R.div { style: style2 }
     $ R.div { style: style3 } [
           R.div {} "a"
        ,  R.div {} "b"
        ,  R.div {} "c"
      ]

import Unsafe.Coerce (unsafeCoerce)

-- | Create a text node.
text :: String -> JSX
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This already exists, right?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes but I couldn't just import it because this would result in a cyclic dependency. I think I could just move the unsafeCoerce into the typeclass anyway

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

@sigma-andex
Copy link
Member Author

@mjrussell can you have a look at this?

@mjrussell
Copy link
Member

Thanks for the ping, sorry this has lagged a bit. I think the overall proposal is good and it looks like a nice improvement. Definitely 👍 on a different module.

Does this have any changes when moving to React 18? I was hoping to try to get #44 in first and then merge this

@sigma-andex
Copy link
Member Author

Does this have any changes when moving to React 18? I was hoping to try to get #44 in first and then merge this

As far as I can tell this PR is pretty much independent from #44

@mjrussell mjrussell merged commit d149306 into purescript-react:main Jul 8, 2022
@sigma-andex sigma-andex deleted the add-simplified-dom branch July 8, 2022 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants