Skip to content

feat: add support for dangerouslySetInnerHTML on Fragments#5057

Open
marvinhagemeister wants to merge 4 commits intov10.xfrom
html-fragment-v10
Open

feat: add support for dangerouslySetInnerHTML on Fragments#5057
marvinhagemeister wants to merge 4 commits intov10.xfrom
html-fragment-v10

Conversation

@marvinhagemeister
Copy link
Member

This PR adds support for setting dangerouslySetInnerHTML on Fragments. It allows you to inject raw unsafe HTML without a container element. This is useful for styling through CSS like with grids or flexbox which are sensitive to child elements.

Before:

<article>
  <h1>{post.title}</h1>
  <div dangerouslySetInnerHTML={...} />
</article>

After:

<article>
  <h1>{post.title}</h1>
  <Fragment dangerouslySetInnerHTML={...} />
</article>

This is the client-side equivalent of preactjs/preact-render-to-string#453

Given the size increase I'm not sure if we want to land this, but seems useful enough. Long-term we could make the byte increase worth it by generalizing the concept of a "virtual element between markers" for suspense, streaming, etc. That would make the size increase more worth it.

@github-actions
Copy link

github-actions bot commented Mar 21, 2026

📊 Tachometer Benchmark Results

Summary

duration

  • create10k: unsure 🔍 -1% - +0% (-4.66ms - +3.60ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -0% - +1% (-0.02ms - +0.09ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +1% (-0.94ms - +0.68ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -1% - +0% (-0.24ms - +0.00ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -1% - +0% (-0.41ms - +0.24ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -6% - +2% (-0.12ms - +0.04ms)
    preact-local vs preact-main
  • todo: slower ❌ 1% - 2% (0.32ms - 0.63ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -2% - +5% (-0.58ms - +1.47ms)
    preact-local vs preact-main

usedJSHeapSize

  • create10k: unsure 🔍 +0% - +0% (+0.02ms - +0.02ms)
    preact-local vs preact-main
  • filter-list: slower ❌ 1% - 2% (0.02ms - 0.03ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -2% - +5% (-0.11ms - +0.31ms)
    preact-local vs preact-main
  • many-updates: slower ❌ 1% - 1% (0.02ms - 0.02ms)
    preact-local vs preact-main
  • replace1k: slower ❌ 1% - 1% (0.02ms - 0.03ms)
    preact-local vs preact-main
  • text-update: slower ❌ 2% - 10% (0.02ms - 0.10ms)
    preact-local vs preact-main
  • todo: slower ❌ 2% - 2% (0.02ms - 0.02ms)
    preact-local vs preact-main
  • update10th1k: slower ❌ 1% - 1% (0.02ms - 0.03ms)
    preact-local vs preact-main

Results

create10k

duration

VersionAvg timevs preact-localvs preact-main
preact-local837.06ms - 842.01ms-unsure 🔍
-1% - +0%
-4.66ms - +3.60ms
preact-main836.76ms - 843.37msunsure 🔍
-0% - +1%
-3.60ms - +4.66ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local19.22ms - 19.22ms-unsure 🔍
+0% - +0%
+0.02ms - +0.02ms
preact-main19.20ms - 19.20msunsure 🔍
-0% - -0%
-0.02ms - -0.02ms
-
filter-list

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.52ms - 16.59ms-unsure 🔍
-0% - +1%
-0.02ms - +0.09ms
preact-main16.47ms - 16.56msunsure 🔍
-1% - +0%
-0.09ms - +0.02ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.58ms - 1.59ms-slower ❌
1% - 2%
0.02ms - 0.03ms
preact-main1.56ms - 1.56msfaster ✔
1% - 2%
0.02ms - 0.03ms
-
hydrate1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local57.86ms - 58.90ms-unsure 🔍
-2% - +1%
-0.94ms - +0.68ms
preact-main57.90ms - 59.13msunsure 🔍
-1% - +2%
-0.68ms - +0.94ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local6.80ms - 7.10ms-unsure 🔍
-2% - +5%
-0.11ms - +0.31ms
preact-main6.70ms - 6.99msunsure 🔍
-4% - +2%
-0.31ms - +0.11ms
-
many-updates

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.38ms - 16.56ms-unsure 🔍
-1% - +0%
-0.24ms - +0.00ms
preact-main16.51ms - 16.67msunsure 🔍
-0% - +1%
-0.00ms - +0.24ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.74ms - 3.74ms-slower ❌
1% - 1%
0.02ms - 0.02ms
preact-main3.72ms - 3.72msfaster ✔
1% - 1%
0.02ms - 0.02ms
-
replace1k
  • Browser: chrome-headless
  • Sample size: 100
  • Built by: CI #5446
  • Commit: 3b9bc62

duration

VersionAvg timevs preact-localvs preact-main
preact-local57.76ms - 58.18ms-unsure 🔍
-1% - +0%
-0.41ms - +0.24ms
preact-main57.81ms - 58.30msunsure 🔍
-0% - +1%
-0.24ms - +0.41ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.03ms - 3.04ms-slower ❌
1% - 1%
0.02ms - 0.03ms
preact-main3.01ms - 3.02msfaster ✔
1% - 1%
0.02ms - 0.03ms
-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local24.92ms - 25.49ms-unsure 🔍
-1% - +2%
-0.36ms - +0.53ms
preact-main24.78ms - 25.46msunsure 🔍
-2% - +1%
-0.53ms - +0.36ms
-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local29.88ms - 31.15ms-unsure 🔍
-2% - +4%
-0.60ms - +1.20ms
preact-main29.58ms - 30.85msunsure 🔍
-4% - +2%
-1.20ms - +0.60ms
-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local30.19ms - 31.30ms-unsure 🔍
-2% - +3%
-0.65ms - +0.98ms
preact-main29.98ms - 31.17msunsure 🔍
-3% - +2%
-0.98ms - +0.65ms
-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local24.59ms - 24.94ms-unsure 🔍
-1% - +2%
-0.21ms - +0.38ms
preact-main24.45ms - 24.92msunsure 🔍
-2% - +1%
-0.38ms - +0.21ms
-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local24.30ms - 25.62ms-unsure 🔍
-2% - +6%
-0.40ms - +1.46ms
preact-main23.77ms - 25.09msunsure 🔍
-6% - +2%
-1.46ms - +0.40ms
-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local20.02ms - 20.34ms-unsure 🔍
-2% - +1%
-0.34ms - +0.15ms
preact-main20.09ms - 20.46msunsure 🔍
-1% - +2%
-0.15ms - +0.34ms
-
text-update
  • Browser: chrome-headless
  • Sample size: 220
  • Built by: CI #5446
  • Commit: 3b9bc62

duration

VersionAvg timevs preact-localvs preact-main
preact-local1.96ms - 2.06ms-unsure 🔍
-6% - +2%
-0.12ms - +0.04ms
preact-main1.99ms - 2.12msunsure 🔍
-2% - +6%
-0.04ms - +0.12ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.06ms - 1.13ms-slower ❌
2% - 10%
0.02ms - 0.10ms
preact-main1.01ms - 1.06msfaster ✔
2% - 9%
0.02ms - 0.10ms
-
todo

duration

VersionAvg timevs preact-localvs preact-main
preact-local33.16ms - 33.37ms-slower ❌
1% - 2%
0.32ms - 0.63ms
preact-main32.68ms - 32.90msfaster ✔
1% - 2%
0.32ms - 0.63ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.27ms - 1.28ms-slower ❌
2% - 2%
0.02ms - 0.02ms
preact-main1.25ms - 1.25msfaster ✔
2% - 2%
0.02ms - 0.02ms
-
update10th1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local32.23ms - 33.62ms-unsure 🔍
-2% - +5%
-0.58ms - +1.47ms
preact-main31.73ms - 33.23msunsure 🔍
-4% - +2%
-1.47ms - +0.58ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.00ms - 3.01ms-slower ❌
1% - 1%
0.02ms - 0.03ms
preact-main2.97ms - 2.98msfaster ✔
1% - 1%
0.02ms - 0.03ms
-

tachometer-reporter-action v2 for CI

@github-actions
Copy link

github-actions bot commented Mar 21, 2026

Size Change: +2.47 kB (+3.13%)

Total Size: 81.2 kB

Filename Size Change
dist/preact.js 5.08 kB +356 B (+7.54%) 🔍
dist/preact.min.js 5.08 kB +350 B (+7.39%) 🔍
dist/preact.min.module.js 5.1 kB +358 B (+7.54%) 🔍
dist/preact.min.umd.js 5.11 kB +352 B (+7.4%) 🔍
dist/preact.mjs 5.09 kB +350 B (+7.39%) 🔍
dist/preact.module.js 5.09 kB +350 B (+7.39%) 🔍
dist/preact.umd.js 5.12 kB +351 B (+7.37%) 🔍
ℹ️ View Unchanged
Filename Size
compat/dist/compat.js 4.19 kB
compat/dist/compat.mjs 4.11 kB
compat/dist/compat.module.js 4.11 kB
compat/dist/compat.umd.js 4.25 kB
debug/dist/debug.js 3.85 kB
debug/dist/debug.mjs 3.85 kB
debug/dist/debug.module.js 3.85 kB
debug/dist/debug.umd.js 3.93 kB
devtools/dist/devtools.js 260 B
devtools/dist/devtools.mjs 273 B
devtools/dist/devtools.module.js 273 B
devtools/dist/devtools.umd.js 345 B
hooks/dist/hooks.js 1.52 kB
hooks/dist/hooks.mjs 1.56 kB
hooks/dist/hooks.module.js 1.56 kB
hooks/dist/hooks.umd.js 1.59 kB
jsx-runtime/dist/jsxRuntime.js 1.01 kB
jsx-runtime/dist/jsxRuntime.mjs 985 B
jsx-runtime/dist/jsxRuntime.module.js 985 B
jsx-runtime/dist/jsxRuntime.umd.js 1.08 kB
test-utils/dist/testUtils.js 473 B
test-utils/dist/testUtils.mjs 477 B
test-utils/dist/testUtils.module.js 477 B
test-utils/dist/testUtils.umd.js 555 B

compressed-size-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant