Prop constructors -> add documentation

[srghma]

trafficstars

Could someone please add documentation about what each constructor is used for? What's the difference between Attribute and Property?

tnx, If I'll find first - I will add

https://github.com/slamdata/purescript-halogen-vdom/blob/34c032aa5f72b600d69ab970e2737ca533c6c118/src/Halogen/VDom/DOM/Prop.purs#L34-L38

[garyb]

Attributes and properties are a distinction that exists because of the DOM API: https://stackoverflow.com/a/19246773/139614

Attributes are only strictly necessary for custom attributes in HTML - everything else can be done through properties (as far as I know), but if the VDOM is being used to render SVG then everything is an attribute, since there isn't an SVG DOM the same way there is the HTML DOM.

Attributes and properties can differ quite a bit in their values. Consider the difference between setting a data-foo attribute vs dealing with the DOMStringMap typed dataset property with a foo field.

edit: That's also another differences, all attributes are only string typed, no so with properties. As well as the dataset example, consider enabled for form elements, etc.

[srghma]

tnx, what is the Namespace used for?

[garyb]

XML namespaces can apply to attributes and elements in HTML and in SVG, check out MDN or something for a better explanation than that. :wink:

[safareli]

if you look at this snippet you will see how namespace/atributes are used in halogen

module App.Render.Icon.Helpers where

import Prelude

import Data.Newtype (un)
import Data.String (joinWith)
import Halogen.HTML as H
import Halogen.HTML.Properties.ARIA as ARIA

newtype Icon = Icon { viewBox :: String, id :: String }

render :: forall p i. Array H.ClassName -> Icon -> H.HTML p i
render classes (Icon { viewBox, id }) =
  svgElem (H.ElemName "svg")
    [ H.attr (H.AttrName "viewBox") viewBox
    , H.attr (H.AttrName "class") (joinWith " " $ map (un H.ClassName) $ [ H.ClassName "Icon" ] <> classes)
    , ARIA.hidden "true"
    ]
    [ svgElem (H.ElemName "use")
      [ xlinkAttr (H.AttrName "xlink:href") $ "#" <> id ]
      [ ]
    ]
  where
  svgElem = H.elementNS $ H.Namespace "http://www.w3.org/2000/svg"
  xlinkAttr = H.attrNS $ H.Namespace "http://www.w3.org/1999/xlink"

note i can't use regular HP.classes as it's implemented with prop and it just will not work when you are dealing with SVG