feat(component): helper function observeResize to observe size change via global ResizeObserver

[CatsJuice]

import { observeResize } from "@affine/component";


useEffect(() => {
  const dispose = observeResize(element entry => {
    console.log(entry.contentRect);
  });

  return () => dispose();
}, []);

[graphite-app]

Your org has enabled the Graphite merge queue for merging into canary

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[CatsJuice]

• feat(core): responsive detail page header #7263
• fix(core): can't enter presentation again in share page #7262
• feat(component): helper function observeResize to observe size change via global ResizeObserver #7241 👈
• canary

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @CatsJuice and the rest of your teammates on Graphite

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 98e3538. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 6 targets

• nx test:coverage @affine/monorepo
• nx build @affine/server-native -- --target x86_64-unknown-linux-gnu --use-napi-cross
• nx build @affine/native -- --target x86_64-pc-windows-msvc --use-napi-cross
• nx build @affine/native -- --target x86_64-apple-darwin --use-napi-cross
• nx build @affine/native -- --target x86_64-unknown-linux-gnu --use-napi-cross
• nx build @affine/native -- --target aarch64-apple-darwin --use-napi-cross

---

Sent with 💌 from NxCloud.

[codecov]

Codecov Report

Attention: Patch coverage is 21.42857% with 22 lines in your changes missing coverage. Please review.

Project coverage is 59.47%. Comparing base (be36e03) to head (98e3538).

Files	Patch %	Lines
...ges/frontend/component/src/utils/observe-resize.ts	22.22%	21 Missing ⚠️
.../component/src/ui/date-picker/week-date-picker.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           canary    #7241      +/-   ##
==========================================
- Coverage   59.49%   59.47%   -0.03%     
==========================================
  Files         847      848       +1     
  Lines       37922    37945      +23     
  Branches     3957     3964       +7     
==========================================
+ Hits        22561    22567       +6     
- Misses      15066    15083      +17     
  Partials      295      295              

Flag	Coverage Δ
server-test	78.50% <ø> (ø)
unittest	28.53% <21.42%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pengx17]

Thanks! TIL it is better to use single instance of ResizeObserver
WICG/resize-observer#59

[graphite-app]

Merge activity

• Jun 18, 3:35 AM EDT: EYHN added this pull request to the Graphite merge queue.
• Jun 18, 3:58 AM EDT: The Graphite merge queue couldn't merge this PR because it had conflicts with the trunk branch.
• Jun 19, 5:04 AM EDT: Brooooooklyn added this pull request to the Graphite merge queue.
• Jun 19, 5:20 AM EDT: Brooooooklyn merged this pull request with the Graphite merge queue.