Skip to content

Commit 795b9a9

Browse files
harlan-zwharlan-zw
committed
fix: less aggressive attribute patching
1 parent 96edd38 commit 795b9a9

File tree

3 files changed

+23
-17
lines changed

3 files changed

+23
-17
lines changed

‎packages/dom/src/setAttributesWithSideEffects.ts‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,24 @@ export function setAttributesWithSideEffects(head: HeadClient, $el: Element, ent
77
const attrs = tag.props || {}
88
const sdeKey = `${tag._p}:attr`
99

10-
// clean-up attribute side effects first
11-
Object.entries(entry._sde!)
12-
// only attribute based side effects
13-
.filter(([key]) => key.startsWith(sdeKey))
14-
// remove then and run the cleanup
15-
.forEach(([key, fn]) => {
16-
delete entry._sde![key] && fn()
17-
})
10+
const sdeToRun = { ...entry._sde }
1811

1912
// add new attributes
2013
Object.entries(attrs).forEach(([k, value]) => {
2114
value = String(value)
2215
const attrSdeKey = `${sdeKey}:${k}`
2316
head._removeQueuedSideEffect(attrSdeKey)
17+
delete sdeToRun[attrSdeKey]
2418
// try and keep existing class and style props by appending data
2519
if (k === 'class') {
2620
for (const c of value.split(' ')) {
21+
const classSdeKey = `${sdeKey}:class:${c}`
2722
if (!$el.classList.contains(c)) {
2823
$el.classList.add(c)
29-
head._removeQueuedSideEffect(`${attrSdeKey}:${c}`)
30-
entry._sde![`${attrSdeKey}:${c}`] = () => $el.classList.remove(c)
24+
entry._sde![classSdeKey] = () => $el.classList.remove(c)
3125
}
26+
head._removeQueuedSideEffect(classSdeKey)
27+
delete sdeToRun[classSdeKey]
3228
}
3329
return
3430
}
@@ -38,4 +34,14 @@ export function setAttributesWithSideEffects(head: HeadClient, $el: Element, ent
3834
entry._sde![attrSdeKey] = () => $el.removeAttribute(k)
3935
}
4036
})
37+
38+
39+
// less aggressive clean up of entry side effect attributes
40+
Object.entries(sdeToRun)
41+
// only attribute based side effects
42+
.filter(([key]) => key.startsWith(sdeKey))
43+
// remove then and run the cleanup
44+
.forEach(([key, fn]) => {
45+
delete entry._sde![key] && fn()
46+
})
4147
}

‎test/vue/e2e.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ describe('vue e2e', () => {
287287
await renderDOMHead(csrHead, { document: dom.window.document })
288288

289289
expect(dom.serialize()).toMatchInlineSnapshot(`
290-
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default\\" lang=\\"en\\" style=\\"color: red\\"><head>
290+
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default\\" style=\\"color: red\\" lang=\\"en\\"><head>
291291
<meta charset=\\"utf-8\\" data-h-207e30=\\"\\">
292292
<title>My amazing site</title>
293293
<script src=\\"https://analytics.example.com/script.js\\" defer=\\"\\" async=\\"\\" data-h-c289ee=\\"\\"></script>
@@ -337,7 +337,7 @@ describe('vue e2e', () => {
337337
await renderDOMHead(csrHead, { document: dom.window.document })
338338

339339
expect(dom.serialize()).toMatchInlineSnapshot(`
340-
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default page-about\\" lang=\\"en\\" style=\\"color: red\\"><head>
340+
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default page-about\\" style=\\"color: red\\" lang=\\"en\\"><head>
341341
<meta charset=\\"utf-8\\" data-h-207e30=\\"\\">
342342
<title>About</title>
343343
<script src=\\"https://analytics.example.com/script.js\\" defer=\\"\\" async=\\"\\" data-h-c289ee=\\"\\"></script>
@@ -362,12 +362,12 @@ describe('vue e2e', () => {
362362

363363
await renderDOMHead(csrHead, { document: dom.window.document })
364364
expect(dom.serialize()).toMatchInlineSnapshot(`
365-
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default\\" lang=\\"en\\" style=\\"color: red\\"><head>
365+
"<!DOCTYPE html><html data-my-app=\\"\\" class=\\"layout-default\\" style=\\"color: red\\" lang=\\"en\\"><head>
366366
<meta charset=\\"utf-8\\" data-h-207e30=\\"\\">
367367
<title>My amazing site</title>
368368
<script src=\\"https://analytics.example.com/script.js\\" defer=\\"\\" async=\\"\\" data-h-c289ee=\\"\\"></script>
369-
<meta name=\\"description\\" data-h-889faf=\\"\\" content=\\"My amazing site\\">
370-
<meta property=\\"og:title\\" data-h-e05a65=\\"\\" content=\\"My amazing site\\">
369+
<meta name=\\"description\\" content=\\"My amazing site\\" data-h-889faf=\\"\\">
370+
<meta property=\\"og:title\\" content=\\"My amazing site\\" data-h-e05a65=\\"\\">
371371
<meta property=\\"og:description\\" content=\\"This is my amazing site\\" data-h-2002f8=\\"\\">
372372
<meta property=\\"og:image\\" content=\\"https://cdn.example.com/image.jpg\\" data-h-3f17e7=\\"\\">
373373
<meta property=\\"og:image\\" content=\\"https://cdn.example.com/image2.jpg\\" data-h-56c382=\\"\\">

‎test/vue/rawDom.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe('vue dom', () => {
88
test('titleTemplate', async () => {
99
const dom = useDom()
1010

11-
const head = createHead({ document: dom.window.document })
11+
const head = createHead()
1212

1313
useHead({
1414
title: 'test',
@@ -113,7 +113,7 @@ describe('vue dom', () => {
113113

114114
await renderDOMHead(head, { document: dom.window.document })
115115
expect(dom.serialize()).toMatchInlineSnapshot(`
116-
"<!DOCTYPE html><html class=\\"post-update\\" lang=\\"en\\" dir=\\"ltr\\"><head>
116+
"<!DOCTYPE html><html lang=\\"en\\" dir=\\"ltr\\" class=\\"post-update\\"><head>
117117
118118
<meta charset=\\"utf-8\\" data-h-207e30=\\"\\"><script src=\\"https://cdn.example.com/script.js\\" data-h-4bccad=\\"\\"></script><link rel=\\"icon\\" type=\\"image/x-icon\\" href=\\"https://cdn.example.com/favicon.ico\\" data-h-533738=\\"\\"></head>
119119
<body class=\\"dark test\\">

0 commit comments

Comments
 (0)