refactor(@typegpu/react): Use common.attachAutoResizer in useConfigureContext

[iwoplaza]

Stacked on #2534.

Changes

• The browser variant of useConfigureContext now uses common.attachAutoResizer instead of its own ResizeObserver + devicePixelRatio logic, so the resizing behavior is shared with non-React usage. The shared logic in core/use-configure-context.ts and the React Native resizer are untouched.
• As a result, the React hook now also:
  • clamps the canvas resolution to device.limits.maxTextureDimension2D,
  • observes with box: 'device-pixel-content-box' when supported.
• Added maxTextureDimension2D to the mocked device limits in typegpu-testing-utility (it was missing, which made the clamping produce a 0×0 canvas in tests).

Notes

• @typegpu/react depends on typegpu via workspace:^, and common.attachAutoResizer is new, so the minimum typegpu version required by @typegpu/react needs to be bumped on release.

[github-actions]

pkg.pr.new

packages
Ready to be installed by your favorite package manager ⬇️

https://pkg.pr.new/software-mansion/TypeGPU/typegpu@d72e9617e40bcf31915c068be64074ad93da18db

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/cli@d72e9617e40bcf31915c068be64074ad93da18db

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/react@d72e9617e40bcf31915c068be64074ad93da18db

benchmark
view benchmark

commit
view commit

[github-actions]

Resolution Time Benchmark

---
config:
  themeVariables:
    xyChart:
      plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
  title "Random Branching (🔴 PR | 🔵 main | 🟢 release)"
  x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
  y-axis "time (ms)"
  line [1.07, 2.18, 5.00, 7.31, 8.40, 15.40, 29.02, 26.04]
  line [1.12, 2.23, 4.96, 7.94, 9.63, 14.13, 28.67, 30.31]
  line [1.11, 2.23, 4.73, 7.17, 8.99, 12.82, 28.50, 28.22]

Loading

---
config:
  themeVariables:
    xyChart:
      plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
  title "Linear Recursion (🔴 PR | 🔵 main | 🟢 release)"
  x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
  y-axis "time (ms)"
  line [0.37, 0.57, 0.70, 0.88, 1.21, 1.25, 1.47, 1.66]
  line [0.35, 0.58, 0.80, 0.91, 1.24, 1.34, 1.66, 1.79]
  line [0.36, 0.53, 0.75, 0.92, 1.23, 1.34, 1.59, 1.77]

Loading

---
config:
  themeVariables:
    xyChart:
      plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
  title "Full Tree (🔴 PR | 🔵 main | 🟢 release)"
  x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
  y-axis "time (ms)"
  line [0.99, 2.35, 4.17, 7.71, 14.59, 29.83, 62.04, 124.35]
  line [1.09, 2.75, 4.84, 8.52, 14.78, 29.46, 62.50, 127.67]
  line [1.00, 2.44, 4.32, 7.85, 13.99, 29.43, 62.96, 125.96]

Loading

[github-actions]

Bundle size comparison (import * as ... in PR vs import * as ... in target):

🟢 Decreased	➖ Unchanged	🔴 Increased	❔ Unknown
0	353	0	0

No notable changes.

If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.