fix: setting class on SVG elements throws TypeError

.changeset/fix-svg-classname.md

@@ -0,0 +1,6 @@
+---
+"@marko/runtime-tags": patch
+"marko": patch
+---
+
+Fix setting `class` on SVG elements throwing `TypeError: setting getter-only property "className"`

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 21166,
-        "brotli": 7935
+        "min": 21155,
+        "brotli": 7926
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 21166 (min) 7935 (brotli)
+// size: 21155 (min) 7926 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let empty = [],
   rest = Symbol(),
@@ -1270,11 +1270,13 @@ function setAttribute(element, name, value) {
       : element.setAttribute(name, value));
 }
 function _attr_class(element, value) {
-  ((value =
-    typeof value == "string"
+  setAttribute(
+    element,
+    "class",
+    (typeof value == "string"
       ? value
-      : toDelimitedString(value, " ", stringifyClassObject)),
-    value !== element.className && (element.className = value));
+      : toDelimitedString(value, " ", stringifyClassObject)) || void 0,
+  );
 }
 function _attr_class_items(element, items) {
   for (let key in items) _attr_class_item(element, key, items[key]);

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/html.bundle.debug.js

@@ -0,0 +1,8 @@
+// template.marko
+var template_default = _template("__tests__/template.marko", (input) => {
+	const $scope0_reason = _scope_reason(), $sg__input_active = _serialize_guard($scope0_reason, 0);
+	const $scope0_id = _scope_id();
+	const { active } = input;
+	_html(`<svg${_attr_class(["icon", { active }])}><circle${_attr_class(active ? "on" : "off")} cx=50 cy=50 r=40></circle>${_el_resume($scope0_id, "#circle/1", $sg__input_active)}</svg>${_el_resume($scope0_id, "#svg/0", $sg__input_active)}`);
+	_serialize_if($scope0_reason, 0) && writeScope($scope0_id, {}, "__tests__/template.marko", 0);
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/html.bundle.js

@@ -0,0 +1,8 @@
+// template.marko
+var template_default = _template("a", (input) => {
+	const $scope0_reason = _scope_reason(), $sg__input_active = _serialize_guard($scope0_reason, 0);
+	const $scope0_id = _scope_id();
+	const { active } = input;
+	_html(`<svg${_attr_class(["icon", { active }])}><circle${_attr_class(active ? "on" : "off")} cx=50 cy=50 r=40></circle>${_el_resume($scope0_id, "b", $sg__input_active)}</svg>${_el_resume($scope0_id, "a", $sg__input_active)}`);
+	_serialize_if($scope0_reason, 0) && writeScope($scope0_id, {});
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/render-csr.debug.md

@@ -0,0 +1,51 @@
+# Render `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+
+# Update `{"active":true}`
+```html
+<svg
+  class="icon active"
+>
+  <circle
+    class="on"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+## Change
+```
+UPDATE: .icon.active[class] "icon" => "icon active"
+UPDATE: .on[class] "off" => "on"
+```
+
+# Update `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+## Change
+```
+UPDATE: .icon[class] "icon active" => "icon"
+UPDATE: .off[class] "on" => "off"
+```

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/render-csr.md

@@ -0,0 +1,51 @@
+# Render `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+
+# Update `{"active":true}`
+```html
+<svg
+  class="icon active"
+>
+  <circle
+    class="on"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+## Change
+```
+UPDATE: .icon.active[class] "icon" => "icon active"
+UPDATE: .on[class] "off" => "on"
+```
+
+# Update `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```
+## Change
+```
+UPDATE: .icon[class] "icon active" => "icon"
+UPDATE: .off[class] "on" => "off"
+```

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/render-ssr.debug.md

@@ -0,0 +1,13 @@
+# Render `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/render-ssr.md

@@ -0,0 +1,13 @@
+# Render `{"active":false}`
+```html
+<svg
+  class="icon"
+>
+  <circle
+    class="off"
+    cx="50"
+    cy="50"
+    r="40"
+  />
+</svg>
+```

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/writes.debug.html

@@ -0,0 +1,3 @@
+<svg class=icon>
+  <circle class=off cx=50 cy=50 r=40></circle>
+</svg>

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/__snapshots__/writes.html

@@ -0,0 +1,4 @@
+<!-- total: 66 (min) 70 (brotli) -->
+<svg class=icon>
+  <circle class=off cx=50 cy=50 r=40></circle>
+</svg>

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/template.marko

@@ -0,0 +1,5 @@
+<const/{ active }=input/>
+
+<svg class=["icon", { active }]>
+  <circle class=active ? "on" : "off" cx="50" cy="50" r="40"/>
+</svg>

packages/runtime-tags/src/__tests__/fixtures/attr-class-svg/test.ts

@@ -0,0 +1,6 @@
+import type { TestConfig } from "../../main.test";
+
+export const config: TestConfig = {
+  equivalent: false,
+  steps: [{ active: false }, { active: true }, { active: false }],
+};

packages/runtime-tags/src/__tests__/fixtures/multi-class-toggle/__snapshots__/dom.bundle.js

@@ -1,4 +1,4 @@
-// total: 2834 (min) 1454 (brotli)
+// total: 2916 (min) 1480 (brotli)
 // template.marko: 144 (min) 130 (brotli)
 const $count__script = _script("a0", ($scope) => _on($scope.a, "click", function() {
 	$count($scope, $scope.c + 1);

packages/runtime-tags/src/dom/dom.ts

@@ -59,13 +59,11 @@ function setAttribute(
 }
 
 export function _attr_class(element: Element, value: unknown) {
-  value =
-    typeof value === "string"
-      ? value
-      : toDelimitedString(value, " ", stringifyClassObject);
-  if (value !== element.className) {
-    element.className = value as string;
-  }
+  setAttribute(
+    element,
+    "class",
+    toDelimitedString(value, " ", stringifyClassObject) || undefined,
+  );
 }
 
 export function _attr_class_items(