Skip to content

perf(Chart): Eliminate per-instance props spread in ChartState#857

Merged
techniq merged 1 commit into
nextfrom
fix-chart-prop-spread-perf
May 1, 2026
Merged

perf(Chart): Eliminate per-instance props spread in ChartState#857
techniq merged 1 commit into
nextfrom
fix-chart-prop-spread-perf

Conversation

@techniq
Copy link
Copy Markdown
Owner

@techniq techniq commented May 1, 2026

Chart.base.svelte previously built its ChartState props via () => ({ ref, context, ...props, xDomain, yDomain }). The ...props spread on Svelte 5's $props() proxy fans out into recursive ownKeys traversals across nested rest/spread proxies and a get per key — repeated whenever any prop changed. On pages with many <Chart> instances the spread cost dominated hydration, blocking the main thread for tens of seconds.

ChartState now stores the $props() proxy directly (props: ChartProps instead of props = $derived(propsGetter())). Brush-domain selections, previously merged into the spread, are passed as a separate { brushXDomain, brushYDomain } getter argument and applied at the three internal domain-resolution sites. chartState.props.X reads still go through the proxy and remain reactive, but no spread is performed.

Internal change only — ChartState's public surface is unchanged for component consumers.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 1, 2026

🦋 Changeset detected

Latest commit: e0cdd1f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
layerchart Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 1, 2026

Open in StackBlitz

npm i https://pkg.pr.new/layerchart@857

commit: e0cdd1f

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 1, 2026

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
layerchart ✅ Ready (View Log) Visit Preview e0cdd1f

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 1, 2026

Bundle Size Analysis

Use-Case Scenarios

Core (7 changed)
Scenario Current New Change
🟡 core-line 215.51 KB
56.27 gz
215.47 KB
56.29 gz
-0.04 KB (-0.0%)
+0.01 gz (+0.0%)
🟡 core-canvas 212.78 KB
56.37 gz
212.73 KB
56.39 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 core-scatter 212.56 KB
54.96 gz
212.52 KB
54.99 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 core-geo 209.10 KB
54.79 gz
209.06 KB
54.81 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 core-html 196.80 KB
51.41 gz
196.76 KB
51.44 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.1%)
🟡 core-svg 194.91 KB
50.97 gz
194.87 KB
50.99 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 core 194.91 KB
51.05 gz
194.87 KB
51.07 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
Base (agnostic) (4 changed)
Scenario Current New Change
🟡 base-svg-agnostic 352.01 KB
82.18 gz
351.97 KB
82.21 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 base-canvas-agnostic 352.01 KB
82.20 gz
351.97 KB
82.22 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 base-html-agnostic 352.01 KB
82.19 gz
351.97 KB
82.22 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 base 352.01 KB
82.18 gz
351.97 KB
82.21 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
Base (layer-specific) (3 changed)
Scenario Current New Change
🟡 base-canvas 336.72 KB
79.20 gz
336.68 KB
79.24 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 base-html 332.49 KB
78.09 gz
332.45 KB
78.11 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 base-svg 330.60 KB
77.68 gz
330.56 KB
77.71 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
Cartesian charts (27 changed)
Scenario Current New Change
🟡 PieChart 391.39 KB
90.63 gz
391.35 KB
90.66 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 ArcChart 384.67 KB
89.48 gz
384.63 KB
89.51 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 LineChart 376.40 KB
88.39 gz
376.36 KB
88.41 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 PieChart-canvas 373.91 KB
87.06 gz
373.87 KB
87.09 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 AreaChart 369.99 KB
86.09 gz
369.95 KB
86.11 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 PieChart-svg 367.82 KB
85.52 gz
367.78 KB
85.56 gz
-0.04 KB (-0.0%)
+0.04 gz (+0.0%)
🟡 ArcChart-canvas 367.75 KB
86.08 gz
367.71 KB
86.11 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 line-chart-interactive 367.02 KB
85.51 gz
366.98 KB
85.53 gz
-0.04 KB (-0.0%)
+0.01 gz (+0.0%)
🟡 area-chart 365.69 KB
85.14 gz
365.65 KB
85.17 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 pie-chart 364.45 KB
84.82 gz
364.41 KB
84.84 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 BarChart 362.44 KB
84.20 gz
362.40 KB
84.23 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 ArcChart-svg 361.64 KB
84.48 gz
361.60 KB
84.51 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 ScatterChart 356.72 KB
83.29 gz
356.68 KB
83.31 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 bar-chart 356.55 KB
82.97 gz
356.51 KB
82.99 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 AreaChart-canvas 353.91 KB
82.99 gz
353.87 KB
83.04 gz
-0.04 KB (-0.0%)
+0.05 gz (+0.1%)
🟡 scatter-chart 353.26 KB
82.61 gz
353.22 KB
82.65 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 line-chart 352.50 KB
82.22 gz
352.45 KB
82.24 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 AreaChart-svg 347.81 KB
81.47 gz
347.77 KB
81.50 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 BarChart-canvas 346.07 KB
81.02 gz
346.03 KB
81.06 gz
-0.04 KB (-0.0%)
+0.04 gz (+0.0%)
🟡 LineChart-canvas 343.73 KB
80.88 gz
343.69 KB
80.90 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 ScatterChart-canvas 340.38 KB
79.94 gz
340.34 KB
79.97 gz
-0.04 KB (-0.0%)
+0.04 gz (+0.0%)
🟡 BarChart-svg 339.97 KB
79.52 gz
339.93 KB
79.55 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 LineChart-svg 337.63 KB
79.33 gz
337.59 KB
79.35 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 line-chart-canvas 336.74 KB
79.22 gz
336.70 KB
79.25 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 ScatterChart-svg 334.28 KB
78.40 gz
334.24 KB
78.43 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 line-chart-html 332.51 KB
78.10 gz
332.47 KB
78.13 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 line-chart-svg 330.63 KB
77.68 gz
330.59 KB
77.72 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
Geo (3 changed)
Scenario Current New Change
🟡 geo-full 426.23 KB
101.20 gz
426.19 KB
101.22 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 geo-tiles 374.01 KB
87.65 gz
373.97 KB
87.68 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 geo 368.95 KB
86.02 gz
368.91 KB
86.04 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
Hierarchy (3 changed)
Scenario Current New Change
🟡 hierarchy-tree 393.80 KB
92.28 gz
393.76 KB
92.31 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 hierarchy-treemap 373.33 KB
87.38 gz
373.29 KB
87.41 gz
-0.04 KB (-0.0%)
+0.04 gz (+0.0%)
🟡 hierarchy-pack 373.05 KB
87.46 gz
373.01 KB
87.50 gz
-0.04 KB (-0.0%)
+0.04 gz (+0.0%)
Graph / network (4 changed)
Scenario Current New Change
🟡 dagre 452.37 KB
108.26 gz
452.33 KB
108.28 gz
-0.04 KB (-0.0%)
+0.01 gz (+0.0%)
🟡 force 396.21 KB
93.10 gz
396.17 KB
93.12 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)
🟡 sankey 395.94 KB
92.50 gz
395.90 KB
92.54 gz
-0.04 KB (-0.0%)
+0.03 gz (+0.0%)
🟡 chord 361.71 KB
84.37 gz
361.67 KB
84.38 gz
-0.04 KB (-0.0%)
+0.01 gz (+0.0%)
Worst case (1 changed)
Scenario Current New Change
🟡 all 991.39 KB
231.20 gz
991.35 KB
231.22 gz
-0.04 KB (-0.0%)
+0.02 gz (+0.0%)

Understanding this report
  • Use-case scenarios measure the bundle cost of common chart configurations (e.g. a line chart with axes)
  • Individual components measure each component imported in isolation
  • Svelte runtime is excluded; sizes reflect layerchart + its dependencies (d3, etc.)
  • When multiple components share dependencies (e.g. d3-scale), the real-world cost is lower than the sum of individual sizes
  • Changes smaller than 10 bytes or 0.1% are considered insignificant

@techniq techniq merged commit 62ed1a1 into next May 1, 2026
9 checks passed
@techniq techniq deleted the fix-chart-prop-spread-perf branch May 1, 2026 12:56
@github-actions github-actions Bot mentioned this pull request May 1, 2026
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