react-threat-map 0.2.2 → 0.2.4

package/DECISIONS.md

@@ -394,6 +394,28 @@ their own render there. Every one of those call sites issues a single `setState`
 practical cost is nil — but a future hook that sets two pieces of state in one async
 callback would render twice on the floor and once on 18+.
 
+### Known behavioural differences on the floor
+
+Each of these is invisible to a suite running on 18, so each carries a guard that fails on
+any version. Append to this list rather than fixing quietly — the entries are the only
+record of what the static allowlist cannot reach.
+
+**1. Numeric style values.** React appends `px` to numeric `style` values unless the property
+is on its unitless allowlist, and `aspectRatio` only joined that list in React 18. The
+wrapper's fallback ratio was emitted as a number, so on 16.14/17 it serialized to
+`aspect-ratio: 2px` — invalid, dropped by the browser, wrapper collapsed to zero height,
+absolutely-positioned canvases gated off, **map entirely invisible**. It affected every
+projection, not just custom ones, and the whole no-explicit-`height` default path.
+
+Found by a consumer on React 16.14, not by CI — precisely the gap this section predicted.
+Fixed by `aspectRatioStyleFor` in `src/render/projection.ts`, which stringifies deliberately;
+guarded by `tests/render/projection.test.ts`, which asserts the emitted **type** rather than
+the rendered value, since the rendered value is correct on 18 either way.
+
+The general rule this implies: **any numeric value handed to `style` must be checked against
+React 17's unitless allowlist, or stringified.** `lineHeight` and `flexGrow` are on that list
+and safe; `scale`, `translate`, `rotate` and `inset` are not.
+
 ---
 
 ## 8. Package entry points: per-condition types, plus a `typesVersions` fallback

package/README.md

@@ -32,6 +32,7 @@ import { ThreatMap } from 'react-threat-map';
 ## Contents
 
 - [Install](#install)
+- [Browser support](#browser-support)
 - [Quick start](#quick-start)
 - [Aggregation](#aggregation)
 - [Customization](#customization)
@@ -62,6 +63,41 @@ React 16.14, 17, 18, and 19 are all supported.
 
 ---
 
+## Browser support
+
+| Browser | Minimum |
+| --- | --- |
+| Chrome / Edge | 88 |
+| Firefox | 89 |
+| Safari (macOS) | 15 |
+| Safari (iOS) | 15 |
+
+The floor is set by CSS [`aspect-ratio`][ar], which is how a `<ThreatMap>` given no
+height derives one — the canvases are absolutely positioned, so nothing else in the
+box has a height to contribute. Below that, the component falls back to a
+`min-height` computed from the measured width, so it still renders; the map just
+stops responding to a container whose height is set purely in CSS.
+
+Everything else the library touches is older than that floor: Canvas 2D with
+`Path2D` and the `lighter` composite operation, `ResizeObserver` (feature-detected,
+with a `getBoundingClientRect` fallback), and `matchMedia` (both the modern
+`addEventListener` and the `addListener` form Safari needed before 14). The
+published bundle is ES2020 and ships no polyfills.
+
+Two things degrade quietly rather than breaking, both on Safari below 16:
+
+- The `resolution` media feature is missing, so the canvas is not re-sharpened when
+  a window moves to a display with a different pixel ratio. The ratio picked at
+  mount stays.
+- `prefers-reduced-motion` still works — that query has been supported since Safari
+  10.1.
+
+There is no IE11 support and none is planned; `Path2D` alone rules it out.
+
+[ar]: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
+
+---
+
 ## Quick start
 
 The only required prop is `attacks`. The map sizes itself to its container, loads its own

package/dist/index.cjs

@@ -345,6 +345,9 @@ function defaultHeightFor(spec, width) {
 function aspectRatioFor(spec) {
   return 1 / ratioFor(spec);
 }
+function aspectRatioStyleFor(spec) {
+  return String(aspectRatioFor(spec));
+}
 var SPHERE = { type: "Sphere" };
 function createProjection(spec, width, height) {
   const projection = typeof spec === "string" ? (factories[spec] ?? factories.naturalEarth1)() : spec;
@@ -427,17 +430,24 @@ function usePixelRatio() {
   const [ratio, setRatio] = react.useState(currentRatio);
   react.useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    let query;
+    let unlisten;
     const update = () => {
+      unlisten?.();
       setRatio(currentRatio());
       listen();
     };
     const listen = () => {
-      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-      query.addEventListener("change", update, { once: true });
+      const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", update);
+        unlisten = () => query.removeEventListener("change", update);
+        return;
+      }
+      query.addListener(update);
+      unlisten = () => query.removeListener(update);
     };
     listen();
-    return () => query?.removeEventListener("change", update);
+    return () => unlisten?.();
   }, []);
   return ratio;
 }
@@ -449,11 +459,23 @@ function useReducedMotion() {
     const query = window.matchMedia(QUERY);
     setReduced(query.matches);
     const update = (event) => setReduced(event.matches);
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    query.addListener(update);
+    return () => query.removeListener(update);
   }, []);
   return reduced;
 }
+function useSupportsAspectRatio() {
+  const [supported, setSupported] = react.useState(true);
+  react.useEffect(() => {
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
+    setSupported(CSS.supports("aspect-ratio", "1"));
+  }, []);
+  return supported;
+}
 function configEqual(a, b) {
   const aKeys = Object.keys(a);
   if (aKeys.length !== Object.keys(b).length) return false;
@@ -576,7 +598,7 @@ function BaseMapCanvas(props) {
       ref: canvasRef,
       width: Math.max(1, Math.round(width * pixelRatio)),
       height: Math.max(1, Math.round(height * pixelRatio)),
-      style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" },
       "aria-hidden": "true"
     }
   );
@@ -1221,7 +1243,9 @@ function ThreatCanvas(props) {
       height: Math.max(1, Math.round(height * pixelRatio)),
       style: {
         position: "absolute",
-        inset: 0,
+        // Longhand: the `inset` shorthand is Safari 14.1+.
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
         // Without handlers the canvas must not eat pointer events aimed at
@@ -1271,6 +1295,7 @@ function ThreatMap(props) {
   );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
+  const supportsAspectRatio = useSupportsAspectRatio();
   const width = widthProp ?? measured?.width ?? 0;
   const height = heightProp ?? (measured && measured.height > 0 ? measured.height : width > 0 ? defaultHeightFor(projectionProp, width) : 0);
   const projection = react.useMemo(
@@ -1326,8 +1351,16 @@ function ThreatMap(props) {
         // which gates off the canvases, which keeps it collapsed. `aspect-ratio`
         // is inert the moment anything else determines the height — a CSS class,
         // a flex parent, or the consumer's own `style` below — so it sets a
-        // floor without taking the decision away from them.
-        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioFor(projectionProp) },
+        // floor without taking the decision away from them. The value is a string
+        // for React 16.14/17's sake; see aspectRatioStyleFor.
+        //
+        // Where `aspect-ratio` is not implemented at all (Safari/iOS <15, Chrome
+        // <88, Firefox <89) the declaration is dropped and the wrapper collapses,
+        // so fall back to a `min-height` derived from the width. `min-height`
+        // rather than `height` keeps the "floor, not a decision" property, and
+        // deriving it from the *width* rather than the measured height is what
+        // stops it feeding back into its own measurement.
+        ...heightProp !== void 0 ? { height: heightProp } : supportsAspectRatio ? { aspectRatio: aspectRatioStyleFor(projectionProp) } : width > 0 ? { minHeight: defaultHeightFor(projectionProp, width) } : {},
         ...style
       },
       role: "img",

package/dist/index.js

@@ -344,6 +344,9 @@ function defaultHeightFor(spec, width) {
 function aspectRatioFor(spec) {
   return 1 / ratioFor(spec);
 }
+function aspectRatioStyleFor(spec) {
+  return String(aspectRatioFor(spec));
+}
 var SPHERE = { type: "Sphere" };
 function createProjection(spec, width, height) {
   const projection = typeof spec === "string" ? (factories[spec] ?? factories.naturalEarth1)() : spec;
@@ -426,17 +429,24 @@ function usePixelRatio() {
   const [ratio, setRatio] = useState(currentRatio);
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    let query;
+    let unlisten;
     const update = () => {
+      unlisten?.();
       setRatio(currentRatio());
       listen();
     };
     const listen = () => {
-      query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-      query.addEventListener("change", update, { once: true });
+      const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", update);
+        unlisten = () => query.removeEventListener("change", update);
+        return;
+      }
+      query.addListener(update);
+      unlisten = () => query.removeListener(update);
     };
     listen();
-    return () => query?.removeEventListener("change", update);
+    return () => unlisten?.();
   }, []);
   return ratio;
 }
@@ -448,11 +458,23 @@ function useReducedMotion() {
     const query = window.matchMedia(QUERY);
     setReduced(query.matches);
     const update = (event) => setReduced(event.matches);
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    query.addListener(update);
+    return () => query.removeListener(update);
   }, []);
   return reduced;
 }
+function useSupportsAspectRatio() {
+  const [supported, setSupported] = useState(true);
+  useEffect(() => {
+    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
+    setSupported(CSS.supports("aspect-ratio", "1"));
+  }, []);
+  return supported;
+}
 function configEqual(a, b) {
   const aKeys = Object.keys(a);
   if (aKeys.length !== Object.keys(b).length) return false;
@@ -575,7 +597,7 @@ function BaseMapCanvas(props) {
       ref: canvasRef,
       width: Math.max(1, Math.round(width * pixelRatio)),
       height: Math.max(1, Math.round(height * pixelRatio)),
-      style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+      style: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%" },
       "aria-hidden": "true"
     }
   );
@@ -1220,7 +1242,9 @@ function ThreatCanvas(props) {
       height: Math.max(1, Math.round(height * pixelRatio)),
       style: {
         position: "absolute",
-        inset: 0,
+        // Longhand: the `inset` shorthand is Safari 14.1+.
+        top: 0,
+        left: 0,
         width: "100%",
         height: "100%",
         // Without handlers the canvas must not eat pointer events aimed at
@@ -1270,6 +1294,7 @@ function ThreatMap(props) {
   );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
+  const supportsAspectRatio = useSupportsAspectRatio();
   const width = widthProp ?? measured?.width ?? 0;
   const height = heightProp ?? (measured && measured.height > 0 ? measured.height : width > 0 ? defaultHeightFor(projectionProp, width) : 0);
   const projection = useMemo(
@@ -1325,8 +1350,16 @@ function ThreatMap(props) {
         // which gates off the canvases, which keeps it collapsed. `aspect-ratio`
         // is inert the moment anything else determines the height — a CSS class,
         // a flex parent, or the consumer's own `style` below — so it sets a
-        // floor without taking the decision away from them.
-        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioFor(projectionProp) },
+        // floor without taking the decision away from them. The value is a string
+        // for React 16.14/17's sake; see aspectRatioStyleFor.
+        //
+        // Where `aspect-ratio` is not implemented at all (Safari/iOS <15, Chrome
+        // <88, Firefox <89) the declaration is dropped and the wrapper collapses,
+        // so fall back to a `min-height` derived from the width. `min-height`
+        // rather than `height` keeps the "floor, not a decision" property, and
+        // deriving it from the *width* rather than the measured height is what
+        // stops it feeding back into its own measurement.
+        ...heightProp !== void 0 ? { height: heightProp } : supportsAspectRatio ? { aspectRatio: aspectRatioStyleFor(projectionProp) } : width > 0 ? { minHeight: defaultHeightFor(projectionProp, width) } : {},
         ...style
       },
       role: "img",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-threat-map",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "A React component that renders animated cyberattack threats on a static world map, with intelligent per-region aggregation and first-class US state support.",
   "keywords": [
     "react",