react-threat-map 0.1.0 → 0.1.2

package/README.md

@@ -8,6 +8,8 @@ Animated cyberattack threats on a static world map, for React. Aggregates attack
 origin region — with **US states as first-class origins** — so a busy feed reads as a
 map instead of a hairball.
 
+**[→ Live demo](https://bogdantaranenko.github.io/react-threat-map/)**
+
 ```tsx
 import { ThreatMap } from 'react-threat-map';
 
@@ -598,9 +600,14 @@ Alongside it:
 
 ## Examples
 
-A runnable Vite demo covering basic usage, 500+ streaming attacks with a live FPS counter,
-one country under fire from five origins at different volumes, aggregation strategies side
-by side, custom theming with render hooks, and raw-coordinate reverse geocoding with hover:
+**[bogdantaranenko.github.io/react-threat-map](https://bogdantaranenko.github.io/react-threat-map/)** —
+the demo below, hosted. Deployed from `main` on every push.
+
+It covers basic usage, 500+ streaming attacks with a live FPS counter, one country under
+fire from five origins at different volumes, aggregation strategies side by side, custom
+theming with render hooks, and raw-coordinate reverse geocoding with hover.
+
+To run it locally against the library source, so edits hot-reload:
 
 ```bash
 git clone https://github.com/BogdanTaranenko/react-threat-map

package/dist/index.cjs

@@ -454,6 +454,40 @@ function useReducedMotion() {
   }, []);
   return reduced;
 }
+function configEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Object.is(av, bv)) continue;
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      if (!shallowEqual(av, bv)) return false;
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+function shallowEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (!Object.is(a[key], b[key])) return false;
+  }
+  return true;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function useStableConfig(defaults, overrides) {
+  const resolved = mergeDefined(defaults, overrides);
+  const ref = react.useRef(resolved);
+  if (!configEqual(ref.current, resolved)) {
+    ref.current = resolved;
+  }
+  return ref.current;
+}
 function drawBaseMap(options) {
   const { ctx, width, height, projection, geo, theme, regions } = options;
   ctx.clearRect(0, 0, width, height);
@@ -1195,17 +1229,23 @@ function ThreatMap(props) {
     ariaLabel = "Cyberattack threat map"
   } = props;
   const containerRef = react.useRef(null);
-  const theme = react.useMemo(() => {
-    const merged = mergeDefined(defaultTheme, props.theme);
-    return props.theme?.severityColors ? { ...merged, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } } : merged;
+  const themeOverrides = react.useMemo(() => {
+    if (!props.theme?.severityColors) return props.theme;
+    return { ...props.theme, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } };
   }, [props.theme]);
-  const line = react.useMemo(() => mergeDefined(defaultLineStyle, props.line), [props.line]);
-  const regions = react.useMemo(() => mergeDefined(defaultRegions, props.regions), [props.regions]);
+  const theme = useStableConfig(defaultTheme, themeOverrides);
+  const line = useStableConfig(defaultLineStyle, props.line);
+  const regions = useStableConfig(defaultRegions, props.regions);
   const reducedMotion = useReducedMotion();
-  const animation = react.useMemo(() => {
-    const merged = mergeDefined(defaultAnimation, props.animation);
-    return merged.respectReducedMotion && reducedMotion ? { ...merged, enabled: false } : merged;
-  }, [props.animation, reducedMotion]);
+  const baseAnimation = useStableConfig(defaultAnimation, props.animation);
+  const animation = react.useMemo(
+    () => (
+      // Someone who has asked their OS for less motion should not be handed a
+      // screen of racing lines. The arcs still render; they just hold still.
+      baseAnimation.respectReducedMotion && reducedMotion ? { ...baseAnimation, enabled: false } : baseAnimation
+    ),
+    [baseAnimation, reducedMotion]
+  );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
   const width = widthProp ?? measured?.width ?? 0;

package/dist/index.js

@@ -453,6 +453,40 @@ function useReducedMotion() {
   }, []);
   return reduced;
 }
+function configEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    const av = a[key];
+    const bv = b[key];
+    if (Object.is(av, bv)) continue;
+    if (isPlainObject(av) && isPlainObject(bv)) {
+      if (!shallowEqual(av, bv)) return false;
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+function shallowEqual(a, b) {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  for (const key of aKeys) {
+    if (!Object.is(a[key], b[key])) return false;
+  }
+  return true;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function useStableConfig(defaults, overrides) {
+  const resolved = mergeDefined(defaults, overrides);
+  const ref = useRef(resolved);
+  if (!configEqual(ref.current, resolved)) {
+    ref.current = resolved;
+  }
+  return ref.current;
+}
 function drawBaseMap(options) {
   const { ctx, width, height, projection, geo, theme, regions } = options;
   ctx.clearRect(0, 0, width, height);
@@ -1194,17 +1228,23 @@ function ThreatMap(props) {
     ariaLabel = "Cyberattack threat map"
   } = props;
   const containerRef = useRef(null);
-  const theme = useMemo(() => {
-    const merged = mergeDefined(defaultTheme, props.theme);
-    return props.theme?.severityColors ? { ...merged, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } } : merged;
+  const themeOverrides = useMemo(() => {
+    if (!props.theme?.severityColors) return props.theme;
+    return { ...props.theme, severityColors: { ...defaultTheme.severityColors, ...props.theme.severityColors } };
   }, [props.theme]);
-  const line = useMemo(() => mergeDefined(defaultLineStyle, props.line), [props.line]);
-  const regions = useMemo(() => mergeDefined(defaultRegions, props.regions), [props.regions]);
+  const theme = useStableConfig(defaultTheme, themeOverrides);
+  const line = useStableConfig(defaultLineStyle, props.line);
+  const regions = useStableConfig(defaultRegions, props.regions);
   const reducedMotion = useReducedMotion();
-  const animation = useMemo(() => {
-    const merged = mergeDefined(defaultAnimation, props.animation);
-    return merged.respectReducedMotion && reducedMotion ? { ...merged, enabled: false } : merged;
-  }, [props.animation, reducedMotion]);
+  const baseAnimation = useStableConfig(defaultAnimation, props.animation);
+  const animation = useMemo(
+    () => (
+      // Someone who has asked their OS for less motion should not be handed a
+      // screen of racing lines. The arcs still render; they just hold still.
+      baseAnimation.respectReducedMotion && reducedMotion ? { ...baseAnimation, enabled: false } : baseAnimation
+    ),
+    [baseAnimation, reducedMotion]
+  );
   const measured = useElementSize(containerRef, widthProp === void 0 || heightProp === void 0);
   const pixelRatio = usePixelRatio();
   const width = widthProp ?? measured?.width ?? 0;

package/package.json

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