Add support for "for" attribute

compose.yml

@@ -1,4 +1,3 @@
-version: "3"
 services:
   dev:
     image: ghcr.io/flipstone/purescript-tools:debian-stable-purescript-0.15.15-2024-04-24-8f14f71

spago.yaml

@@ -27,6 +27,6 @@ package:
   build:
     strict: true
 workspace:
-  extra_packages: {}
-  package_set:
+  extraPackages: {}
+  packageSet:
     registry: 46.2.0

src/DOM/Virtual.js

@@ -6,24 +6,19 @@ import * as CE from 'virtual-dom/create-element.js';
 'use strict';
 
 // These are the namespaced element attributes we want to render that
-// virtual-dom.js will not
-const NAMESPACED_ATTRS = [ "aria-controls"
-                         , "aria-expanded"
-                         , "aria-haspopup"
-                         , "aria-hidden"
-                         , "aria-labelledby"
-                         , "aria-modal"
-                         , "aria-orientation"
-                         , "circle"
+// virtual-dom.js will not. This includes special keyword attributes like "class" and "for" and also svg attributes
+//
+// Since our `Prop` type combines the notion of things like attributes and event handlers
+// if we tried in `node` to add all attributes instead of this explicit whitelist we would incorrectly get html like
+// "className=" instead of "class=" and things like "onclick=function(a){(e)}..." when the onclick event
+// shouldn't be on the html at all
+const NAMESPACED_ATTRS = [ "circle"
                          , "class"
                          , "clip-rule"
                          , "d"
-                         , "data-clipboard-text"
-                         , "data-leg-id"
-                         , "data-popup-name"
-                         , "data-popup-opens"
                          , "fill-rule"
                          , "fill"
+                         , "for"
                          , "gradientUnits"
                          , "height"
                          , "line"
@@ -32,10 +27,6 @@ const NAMESPACED_ATTRS = [ "aria-controls"
                          , "r"
                          , "rect"
                          , "rx"
-                         , "stroke-linecap"
-                         , "stroke-linejoin"
-                         , "stroke-width"
-                         , "stroke"
                          , "tabindex"
                          , "transform"
                          , "viewBox"
@@ -45,6 +36,12 @@ const NAMESPACED_ATTRS = [ "aria-controls"
                          , "y"
                          ];
 
+// We allow all attributes that start with these strings instead of explicitly listing them in `NAMESPACED_ATTRS`
+const NAMESPACED_ATTRS_PREFIXES = [ "aria"
+                                  , "data"
+                                  , "stroke"
+                                  ];
+
 export function unsafeValue(v) { return v; }
 
 export function node(name) {
@@ -55,7 +52,7 @@ export function node(name) {
 
       for (var i = 0; i < attributeList.length; i++) {
         var a = attributeList[i];
-        if (NAMESPACED_ATTRS.some(v => v == a.key)) {
+        if (NAMESPACED_ATTRS.some(v => v == a.key) || NAMESPACED_ATTRS_PREFIXES.some(prefix => a.key?.startsWith(prefix))) {
           nsAttrs[a.key] = a.value;
         } else {
           attrs[a.key] = a.value;
@@ -114,4 +111,3 @@ export function hookFn(hook) {
     hook(node)();
   }
 }
-