mg901 / styled-breakpoints / 33055358218

100%

push

github

Review/refactor batch (#2274)

* perf: 🐎 cache MediaQueryList per query in useMediaQuery

React calls getSnapshot on every render, and the previous implementation
built a fresh MediaQueryList through window.matchMedia on each of those
calls. Measured on a single hook instance: 4 matchMedia calls on mount and
2 more on every re-render (doubled again under StrictMode).

Caching the MediaQueryList in a ref, keyed by the normalized query, brings
that down to 1 call on mount and 0 per re-render. The list is still resolved
lazily inside subscribe/getSnapshot, so the hook remains server-safe, and
the cache is per hook instance, so it never outlives the component or leaks
between environments.

Also drops the duplicate normalize() pass that ran on every subscribe and
every snapshot.

Costs 33 B brotlied, so the size budget moves from 145 B to 180 B.

* fix: 🐛 type breakpoints.keys against the config

breakpoints.keys was typed as readonly string[], so it could not be fed
back into the API it belongs to:

  theme.breakpoints.keys.map((k) => theme.breakpoints.up(k))
  // TS2345: 'string' is not assignable to '"xs" | "sm" | ... | "xxl"'

Narrowing it to readonly (keyof T & string)[] makes iterating over the
breakpoints type-check without a cast, and the narrowed type reaches
consumers through the published declaration file.

buildBreakpointsMap now carries the key type through sort/map instead of
letting Object.fromEntries widen everything to any, so the one remaining
assertion is the unavoidable Object.entries one.

* refactor: 💡 type-check the breakpoint validation wrapper

The wrapper built its methods by looping over Object.keys(validators) and
spreading Object.fromEntries(...) into the theme. That spread is typed any,
so the declared StyledBreakpointsTheme<T> return type was never enforced:
replacing a method body with `return 42` compiled cleanly. The validators
themselves took (...args: any[]), so nothing downstream was checked either.

Each guarded metho... (continued)

69 of 69 branches covered (100.0%)

Branch coverage included in aggregate %.

61 of 61 new or added lines in 6 files covered. (100.0%)

157 of 157 relevant lines covered (100.0%)

16.06 hits per line