Skip to content

perf(ui): delegate BxSelect option re-rendering to a single global observer - #1004

Open
Endymi0n74 wants to merge 1 commit into
redphx:typescriptfrom
Endymi0n74:feat/bxselect-delegated-observer
Open

perf(ui): delegate BxSelect option re-rendering to a single global observer#1004
Endymi0n74 wants to merge 1 commit into
redphx:typescriptfrom
Endymi0n74:feat/bxselect-delegated-observer

Conversation

@Endymi0n74

Copy link
Copy Markdown

What

Every BxSelectElement.create() was attaching its own MutationObserver to the <select> (subtree + childList + attributes). With many selects in the settings dialogs that's one observer per select, all watching the same document.

Now a single static observer watches document.documentElement once and routes mutations to the affected .bx-select wrappers via closest(), only re-rendering selects whose own subtree actually changed (deduplicated with a Set per mutation batch). All other re-render triggers (input, change, value setter) are unchanged.

Also removes a leftover debugger; statement in Translations.downloadTranslations()'s catch block — a no-op in production except pausing the script when the DevTools are open.

Why it's safe

  • Same events observed (childList + subtree + attributes) — just on one shared observer instead of N.
  • Routing via closest('.bx-select') targets the same wrappers; the per-select re-render logic is untouched.
  • The Set dedup prevents double re-renders within a mutation batch (strictly fewer renders than before).

Files

  • src/web-components/bx-select.ts — static global observer + ensureObserver() + delegated onMutation
  • src/utils/translation.tsdebugger; removed from the catch block

Note

translation.ts is also touched by the open PRs #908 (mkb zoom), #938 (local co-op) and #468 (record) — all in different regions (the debugger line is ours). Happy to rebase if any of them merges first.

…server

Every BxSelectElement.create() was attaching its own MutationObserver to
the <select> (subtree + childList + attributes). With many selects in the
settings dialogs that is one observer per select, all watching the same
document.

Now a single static observer watches document.documentElement once and
routes mutations to the affected .bx-select wrappers via closest(), only
re-rendering selects whose own subtree actually changed (deduplicated with
a Set per mutation batch). All other options list re-renders (input,
change, value setter) are unchanged.

Also removes a leftover `debugger;` statement in
Translations.downloadTranslations()'s catch block.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>
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