react-threat-map 0.2.2 → 0.2.3

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/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;
@@ -1326,8 +1329,9 @@ 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.
+        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioStyleFor(projectionProp) },
         ...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;
@@ -1325,8 +1328,9 @@ 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.
+        ...heightProp !== void 0 ? { height: heightProp } : { aspectRatio: aspectRatioStyleFor(projectionProp) },
         ...style
       },
       role: "img",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-threat-map",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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",