Skip to content

Add convert to Halogen#4

Merged
dnikolovv merged 5 commits intodnikolovv:masterfrom
deemp:master
Aug 30, 2022
Merged

Add convert to Halogen#4
dnikolovv merged 5 commits intodnikolovv:masterfrom
deemp:master

Conversation

@deemp
Copy link
Copy Markdown
Contributor

@deemp deemp commented Aug 26, 2022

First of all thank you, @dnikolovv!
Now, about PR. This version seems to work for simple cases. Also, I suggest adding tabs for switching between React and Halogen code.

Sample HTML:

<section class="a-class b-class">
  <h1>Some heading</h1>
  <p>A paragraph.</p>
</section>

<section class="a-class">
  <h1>Some heading</h1>
  <p>A paragraph.</p>
</section>

Purescript output:

import Halogen.HTML as HH
import Halogen as H
import Halogen.HTML.Properties as HP
import Web.HTML.Common as WC
import Halogen.Query.Event as HQE

node0 = HH.section [ classes_ [ "a-class", "b-class" ] ]
  [ HH.h1_ [ HH.text "Some heading" ], HH.p_ [ HH.text "A paragraph." ] ]

node1 = HH.section [ classes_ [ "a-class" ] ]
  [ HH.h1_ [ HH.text "Some heading" ], HH.p_ [ HH.text "A paragraph." ] ]

class_   (a  Row Type) (b  Type). String  HH.IProp (class  String | a) b
class_ n = HP.class_ $ WC.ClassName n

attr_   (a  Row Type) (b  Type). String  String  HH.IProp a b
attr_ k v = HP.attr (H.AttrName k) v

classes_   (a  Row Type) (b  Type). Array String  HH.IProp (class  String | a) b
classes_ n = HP.classes $ WC.ClassName <$> n

@dnikolovv
Copy link
Copy Markdown
Owner

dnikolovv commented Aug 29, 2022

Hey @br4ch1st0chr0n3! Thank you for contributing!

Looks great! The thing I'm concerned about is the unicode. What do you think about switching to ascii like: :: instead of , forall instead of , and so on.

At least in my experience, it's very rare to see projects that use unicode, so it might be best to support the more common usage (or ideally have the user choose what they want).

@deemp
Copy link
Copy Markdown
Contributor Author

deemp commented Aug 29, 2022

Sure, @dnikolovv. Fixed it

@deemp
Copy link
Copy Markdown
Contributor Author

deemp commented Aug 29, 2022

Now

<section class="a-class" b>
  <h1>Some heading</h1>
  <p>A paragraph.</p>
</section>

becomes

import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Properties as HP

-- HTML starts here

node0 :: forall (a :: Type) (b :: Type). HTML a b
node0 = HH.section [ classes_ [ "a-class" ], attr_ "b" "" ]
  [ HH.h1_ [ HH.text "Some heading" ], HH.p_ [ HH.text "A paragraph." ] ]

-- End of HTML

attr_ :: forall (a :: Row Type) (b :: Type). String -> String -> HP.IProp a b
attr_ k v = HP.attr (H.AttrName k) v

classes_
  :: forall (a :: Row Type) (b :: Type)
   . Array String
  -> HP.IProp (class :: String | a) b
classes_ n = HP.classes $ H.ClassName <$> n

@dnikolovv
Copy link
Copy Markdown
Owner

Great, thanks! I'll be merging this and maybe we can do the tabs soon.

@dnikolovv dnikolovv merged commit 95e7285 into dnikolovv:master Aug 30, 2022
@deemp
Copy link
Copy Markdown
Contributor Author

deemp commented Aug 30, 2022

Nice!

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.

2 participants