Add auto teardown of event listeners in child page

[davidjbradshaw]

No description provided.

[Copilot]

Pull Request Overview

Adds automatic teardown of event listeners in the child page and standardizes console styling for observer attach/detach logs.

• Introduces a child-scoped listeners helper that tracks teardown callbacks.
• Switches child code to use the new listener helpers and tweaks READY_STATE_CHANGE handling.
• Updates observer logs to use styled console output with HIGHLIGHT/FOREGROUND.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/child/listeners.js	New listener helpers that auto-register teardown callbacks and log add/remove operations
packages/child/index.js	Uses new listener helpers, updates READY_STATE_CHANGE logic, adds setup console event, adjusts setup order and removes some inline logging
packages/child/observers/visibility.js	Adds styled logging via HIGHLIGHT/FOREGROUND
packages/child/observers/resize.js	Adds styled logging via HIGHLIGHT/FOREGROUND
packages/child/observers/perf.js	Adds styled logging via HIGHLIGHT/FOREGROUND
packages/child/observers/overflow.js	Adds styled logging for detach via HIGHLIGHT
packages/child/observers/mutation.js	Switches to styled logging, but missing required imports for style tokens
packages/child/observers/utils.js	Adjusts log message to add styling, but missing required imports for style tokens

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

removeEventListener always uses false for the third argument, which fails to remove listeners added with capture: true (or a capture option). Store and pass the original options (or at least the capture boolean) to ensure removal matches the add call. For example, compute capture as typeof options === 'boolean' ? options : options?.capture ?? false and pass it to removeEventListener; also store options in the teardown callback.

Suggested change

	export const removeEventListener = (el, evt, func) => {
	el.removeEventListener(evt, func, false)
	logEvent('Remove', evt)
	}
	export const addEventListener = (el, evt, func, options) => {
	el.addEventListener(evt, func, options || false)
	tearDown.push(() => removeEventListener(el, evt, func))
	export const removeEventListener = (el, evt, func, options) => {
	// Compute the capture value as per the DOM spec
	const capture = typeof options === 'boolean' ? options : options?.capture ?? false
	el.removeEventListener(evt, func, capture)
	logEvent('Remove', evt)
	}
	export const addEventListener = (el, evt, func, options) => {
	el.addEventListener(evt, func, options || false)
	tearDown.push(() => removeEventListener(el, evt, func, options))

To fix the problem, break up the argument list to the addEventListener call on line 275 so each argument appears on a separate line with increased indentation (~8 spaces). This adheres to the ESLint suggestion, which prioritizes consistent formatting for multiline argument calls, improving readability for calls with a callback function as an argument. The change is fully local to the affected line and does not affect functionality—only indentation and line breaks. There are no dependencies, imports, or definitions required; just reformat the arguments.

The best way to fix this formatting issue is to indent the callback function body on line 276 by two additional spaces. This is inside the callback arrow function passed to addEventListener(document, READY_STATE_CHANGE, ...) and should match the indentation of other block-level statements throughout the file. Specifically, change:

276:         sendSize(READY_STATE_CHANGE, 'Ready state change')

to

276:           sendSize(READY_STATE_CHANGE, 'Ready state change')

(retaining all existing code, just adding two spaces).

No new methods, imports, or definitions are needed; just the whitespace change for formatting compliance.

To fix this issue, we should ensure that line 277 is correctly indented to match the project's two-space per indentation level policy, as indicated by the surrounding lines. Each nested code block is expected to increase indentation by two spaces, and within the arrow function starting on line 275, each statement should be consistently indented. Line 277 likely needs two additional spaces at its beginning. The fix is to add two spaces to the start of line 277, ensuring it aligns with line 276 and other lines at the same block level.

No method, import, or definition changes are required; only code indentation within packages/child/index.js.

---

To fix the problem, move the object literal { once: true } to a new line after the callback function, properly indented to align with the rest of the arguments in the function call. This keeps multi-line calls consistent, improves readability, and satisfies the linting rule. Specifically, replace the single line:

addEventListener(document, READY_STATE_CHANGE, () => {
  sendSize(READY_STATE_CHANGE, 'Ready state change')
  checkReadyYet(readyCallback)
}, { once: true })

with the following formatting:

addEventListener(
  document,
  READY_STATE_CHANGE,
  () => {
    sendSize(READY_STATE_CHANGE, 'Ready state change')
    checkReadyYet(readyCallback)
  },
  { once: true },
)

However, since only code directly shown can be updated, and from the snippet, the affected lines are:

275:       addEventListener(document, READY_STATE_CHANGE, () => {
276:         sendSize(READY_STATE_CHANGE, 'Ready state change')
277:         checkReadyYet(readyCallback)
278:       }, { once: true })

The fix should move { once: true } to a new line and indent accordingly.