fix(runtime-vapor): prevent passing an empty string to classList.add (#12974)

diff --git a/packages/runtime-vapor/__tests__/componentAttrs.spec.ts b/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
index e4076855cb40759392b0aa294f2ca17d336788b3..fc6fae5f0215cd4616c325c8a720000d857bc733 100644 (file)
--- a/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
+++ b/packages/runtime-vapor/__tests__/componentAttrs.spec.ts
@@ -322,4 +322,43 @@ describe('attribute fallthrough', () => {
     expect(el.getAttribute('aria-x')).toBe(parentVal.value)
     expect(el.getAttribute('aria-y')).toBe(parentVal.value)
   })
+
+  it('empty string should not be passed to classList.add', async () => {
+    const t0 = template('<div>', true /* root */)
+    const Child = defineVaporComponent({
+      setup() {
+        const n = t0() as Element
+        renderEffect(() => {
+          setClass(n, {
+            foo: false,
+          })
+        })
+        return n
+      },
+    })
+
+    const Parent = defineVaporComponent({
+      setup() {
+        return createComponent(
+          Child,
+          {
+            class: () => ({
+              bar: false,
+            }),
+          },
+          null,
+          true,
+        )
+      },
+    })
+
+    const { host } = define({
+      setup() {
+        return createComponent(Parent)
+      },
+    }).render()
+
+    const el = host.children[0]
+    expect(el.classList.length).toBe(0)
+  })
 })

diff --git a/packages/runtime-vapor/src/dom/prop.ts b/packages/runtime-vapor/src/dom/prop.ts
index f464a2f6299e56e87593aea0ba867dddd9dd2a49..8c42ad766a51d46d942831a5d81d112db21295e6 100644 (file)
--- a/packages/runtime-vapor/src/dom/prop.ts
+++ b/packages/runtime-vapor/src/dom/prop.ts
@@ -122,7 +122,9 @@ function setClassIncremental(el: any, value: any): void {
   const prev = el[cacheKey]
   if ((value = el[cacheKey] = normalizeClass(value)) !== prev) {
     const nextList = value.split(/\s+/)
-    el.classList.add(...nextList)
+    if (value) {
+      el.classList.add(...nextList)
+    }
     if (prev) {
       for (const cls of prev.split(/\s+/)) {
         if (!nextList.includes(cls)) el.classList.remove(cls)