Add support for SVG DOM attributes

[84564221]

• Extend the list of DOM attributes in the descriptor fn
• Add a new colonCase string formatter (requires the camelcase package from #47), to transform some SVG DOM attributes like,
  xlinkActuate => xlink:actuate
xlinkArcrole => xlink:arcrole
xlinkHref => xlink:href
xlinkRole => xlink:role
xlinkShow => xlink:show
xlinkTitle => xlink:title
xlinkType => xlink:type
• Add a new HAS_COLON_CASE constant, probably 0x40
• Determine whether the attribute should be transformed to colonCase
• Add a new unit test for the colonCase string formatter
• Extend the AllAttributes example tests

DOMAttributeDescriptors.js

const colonCase = require(`./colonCase`)

const attributes = {
  const HAS_COLON_CASE = 0x40

  ...

  // attributes used by SVG DOM
  clipPath: USE_ATTRIBUTE_HOOK,
  cx: USE_ATTRIBUTE_HOOK,
  cy: USE_ATTRIBUTE_HOOK,
  d: USE_ATTRIBUTE_HOOK,
  dx: USE_ATTRIBUTE_HOOK,
  dy: USE_ATTRIBUTE_HOOK,
  fill: USE_ATTRIBUTE_HOOK,
  fillOpacity: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  fontFamily: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  fontSize: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  fx: USE_ATTRIBUTE_HOOK,
  fy: USE_ATTRIBUTE_HOOK,
  gradientTransform: USE_ATTRIBUTE_HOOK,
  gradientUnits: USE_ATTRIBUTE_HOOK,
  markerEnd: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  markerMid: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  markerStart: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  offset: USE_ATTRIBUTE_HOOK,
  opacity: USE_ATTRIBUTE_HOOK,
  patternContentUnits: USE_ATTRIBUTE_HOOK,
  patternUnits: USE_ATTRIBUTE_HOOK,
  points: USE_ATTRIBUTE_HOOK,
  preserveAspectRatio: USE_ATTRIBUTE_HOOK,
  r: USE_ATTRIBUTE_HOOK,
  rx: USE_ATTRIBUTE_HOOK,
  ry: USE_ATTRIBUTE_HOOK,
  spreadMethod: USE_ATTRIBUTE_HOOK,
  stopColor: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  stopOpacity: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  stroke: USE_ATTRIBUTE_HOOK,
  strokeDasharray: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  strokeLinecap: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  strokeOpacity: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  strokeWidth: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  textAnchor: USE_ATTRIBUTE_HOOK | HAS_DASH_CASE,
  transform: USE_ATTRIBUTE_HOOK,
  version: USE_ATTRIBUTE_HOOK,
  viewBox: USE_ATTRIBUTE_HOOK,
  x1: USE_ATTRIBUTE_HOOK,
  x2: USE_ATTRIBUTE_HOOK,
  x: USE_ATTRIBUTE_HOOK,
  xlinkActuate: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkArcrole: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkHref: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkRole: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkShow: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkTitle: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xlinkType: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xmlBase: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xmlLang: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  xmlSpace: USE_ATTRIBUTE_HOOK | HAS_COLON_CASE,
  y1: USE_ATTRIBUTE_HOOK,
  y2: USE_ATTRIBUTE_HOOK,
  y: USE_ATTRIBUTE_HOOK,
}

...

while (++i < length) {
  const hasColonCase = checkMask(attr, HAS_COLON_CASE)

  if (hasLowerCase) {
    computed = key.toLowerCase()
  } else if (hasDashCase) {
    computed = kababCase(key)
  } else if (hasColonCase) {
    computed = colonCase(key) // transform the attribute to colonCase
  }

  ...
}

colonCase.js

const camelCase = require(`camelcase`)

module.exports = function colonCase (string) {
  return camelCase(string).replace(/([A-Z])/g, (letter) => `:` + letter.toLowerCase())
}

References

• React SVGDOMPropertyConfig.js
• MDN: SVG Attribute reference

[84564221]

Example (simplified)

export default function ProgressCircle(props) {
  return (
    <svg className='indicator'>
      <circle cx='16' cy='16' r='8'/>
    </svg>
  )
}

[garbles]

Thanks for opening this up. Definitely on the list of things to do.