microsoft / microsoft/TypeScript

The entries collection in observers should be non-empty

Open
#61,691 0 comments 0 reactions 0 assignees View on GitHub
Experience Enhancement Help Wanted Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

### ⚙ Compilation target

ES2017

### ⚙ Library

TypeScript

### Missing / Incorrect Definition

The type in question is `ResizeObserverCallback`, and similar observer callbacks, like the ones in `MutationObserver` and `IntersectionObserver`. These currently accept entries in the `T[]` format, but it should really be `[T, ...T[]]`. This is because the observer callback is only ever invoked when there is at least one entry.

(I've also noticed the same issue with the `ResizeObserverEntry`'s `contentBoxSize` property.)

### Sample Code

```TypeScript
const ro = new ResizeObserver(entries => {
const entry = entries[0] // <-- This should never be undefined
const size = entry.contentBoxSize[0] // <-- Nor this, btw
const dim = size.blockSize
console.log(dim / 2)
})
```

### Documentation Link

While there is no direct verbiage that suggests the entry collection is never empty, it stems from the description of the algorithms. For example in case of the `ResizeObserver`:

https://drafts.csswg.org/resize-observer/#broadcast-active-resize-observations

The observer callback is never invoked if there are no observations. Otherwise, entries are created for each observation. This pretty much guarantees the entries collection is non-empty.

Contributor guide

Open the contributing guide

Research direction

Start from the ResizeObserverCallback type and compare the related MutationObserver and IntersectionObserver callbacks, then inspect ResizeObserverEntry.contentBoxSize. Use the Resize Observer specification's broadcast-active-resize-observations algorithm as the reference; done means these entry collections are typed as non-empty tuples where the specification guarantees at least one item.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.