Purescript: Halogen HTML DSL only Renders "id" tags

Question

I'm using purescript-halogen v0.12.0, and I can't figure out why only the id tag is rendering.

This occurs even with supposedly well supported elements, like div.

Example:

render = div [ id_ "some-id", name "some-name ] []

A div will be created, but only with an id attribute. This occurs with elements in Halogen.HTML as well as Halogen.HTML.Indexed.

Any help in the right direction would be appreciated.

=============================================================

Reproduce the issue with the following.

pulp init
bower i purescript-halogen
npm i virtual-dom

============

module Main where

import Prelude
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)

import Halogen as H
import Halogen.HTML (div, text)
import Halogen.HTML.Properties (id_, name, pixels, height, width)
import Halogen.Util (awaitBody, runHalogenAff)

type State = Int
data Query a = Toggle a

ui :: forall g. (Functor g) => H.Component State Query g
ui = H.component { render, eval }
  where
    render :: State -> H.ComponentHTML Query
    render st = div [ id_ "my-id", name "my-name", height (pixels 3), width (pixels 4) ] [ text "here!" ]

    eval :: Query ~> H.ComponentDSL State Query g
    eval (Toggle next) = pure next

main :: forall e. Eff (H.HalogenEffects e) Unit
main = runHalogenAff $ do
  body <- awaitBody
  H.runUI ui 0 body

Answer 1

This is occurring as name is not a valid property to apply to a div, nor are width or height - if you're using the Indexed elements and properties you'll see there's a type error when trying to set width or height. Try changing the div for an input and you'll see the properties applied as they should be.

The indexed elements do allow setting a name on the div however, which is a bug.

The reason these properties do not show in the rendered HTML is they are being set as properties rather than attributes. Properties must exist in the javascript interface for the element otherwise they are ignored. This isn't a Halogen thing so much as the DOM.