dnikolovv / purescriptify

HTML to PureScript converter.
https://purescriptify.web.app
30 stars 3 forks source link

Add convert to Halogen #4

Closed deemp closed 2 years ago

deemp commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Sure, @dnikolovv. Fixed it

deemp commented 2 years ago

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 commented 2 years ago

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

deemp commented 2 years ago

Nice!