mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: 'foo bar' })
)
+ // SVG classes
+ mountWithHydration(`<svg class="foo bar"></svg>`, () =>
+ h('svg', { class: 'foo bar' })
+ )
+ // class with different order
+ mountWithHydration(`<div class="foo bar"></svg>`, () =>
+ h('div', { class: 'bar foo' })
+ )
expect(`Hydration class mismatch`).not.toHaveBeenWarned()
mountWithHydration(`<div class="foo bar"></div>`, () =>
h('div', { class: 'foo' })
let actual: any
let expected: any
if (key === 'class') {
- actual = el.getAttribute('class')
- expected = normalizeClass(clientValue)
- if (actual !== expected) {
+ // classes might be in different order, but that doesn't affect cascade
+ // so we just need to check if the class lists contain the same classes.
+ actual = toClassSet(el.getAttribute('class') || '')
+ expected = toClassSet(normalizeClass(clientValue))
+ if (!isSetEqual(actual, expected)) {
mismatchType = mismatchKey = `class`
}
} else if (key === 'style') {
}
return false
}
+
+function toClassSet(str: string): Set<string> {
+ return new Set(str.trim().split(/\s+/))
+}
+
+function isSetEqual(a: Set<string>, b: Set<string>): boolean {
+ if (a.size !== b.size) {
+ return false
+ }
+ for (const s of a) {
+ if (!b.has(s)) {
+ return false
+ }
+ }
+ return true
+}