@react-native-gpui/svg 0.0.0-stage → 15.15.0-alpha.1

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+All notable changes to `@react-native-gpui/svg` are listed here. Each version's section becomes the notes of its GitHub release.
+
+## 15.15.0-alpha.1 - 2026-11-12
+
+- A drawing is looked up by a structural hash of its props, children, frame size and scale, so a render that finds it builds no document string. Before, every render built and escaped the whole SVG document just to hash it, even when the raster was cached.
+- The rasters are kept in one cache shared by every node, bounded by bytes (64 MB; `RN_GPUI_SVG_CACHE_MB` sets another) and dropping the image used longest ago first. It held weak references before, so an icon that left the screen was rasterised again when it came back, and the same icon in two places was drawn twice.
+- A drawing that is not cached is rasterised on a background thread when it is large (over about 48 CSS pixels square at a scale of 2) or has a filter, or when its node already shows an image (a theme switch). The node keeps showing its previous image until the new one is ready, then is built again; a node with nothing to show yet draws nothing until then. A small icon whose node has no image is still drawn at once, so a row that scrolls in has its icon on the first frame. Several nodes asking for the same drawing share one rasterisation.
+- The four coverage samples of a drawing are rasterised side by side (a small one, under 128 by 128 pixels, one after the other, because starting a thread costs more than a sample) and combined in a fixed order, so the pixels are the same as when they were drawn one after the other (a test compares them in both ways). A 230 point illustration with drop shadows takes 30 ms to rasterise instead of 120, and now off the main thread.
+- `RN_GPUI_SVG_TRACE=1` logs each rasterisation with the time of every sample, and `RN_GPUI_SVG_SYNC=1` draws everything on the main thread, for measuring.
+- An SVG is drawn with the same antialiasing as Chrome: once per coverage sample at the window's scale, without antialiasing, with the four sample positions Chrome uses, and averaged. An icon's edge now takes the same five coverage steps (0, 1/4, 1/2, 3/4, 1) at the same pixels, so the Material star at 16 points differs from Chrome in 5 of 1024 pixels instead of 112, and over 80 icons in 124,480 pixels in 1,288 instead of 7,250. Needs `image` and `smallvec` in the crate.
+- An SVG is placed at a whole CSS pixel, as Chrome places an inline SVG: a 15 point icon centred in a 20 point button, which lays out at 2.5, is drawn at 3 instead of half a point to the left. That half point was the bulk of the edge pixels that differed from the web app (97 of 1,600 in a toolbar arrow, 2 now).
+- An element's `transform` is applied: react-native-svg sends it as a six number `matrix`, which was only read when it had sixteen, so every rotated or scaled shape was drawn untransformed.
+- Filters are drawn: `filter` on a shape or group, `<filter>` and the `feBlend`, `feColorMatrix`, `feComposite`, `feFlood`, `feGaussianBlur`, `feMerge` and `feOffset` primitives reach the renderer, with `sRGB` colour interpolation. An illustration with rotated cards and drop shadows at 230 points differs from Chrome in 249 of 211,600 pixels by more than 8 levels instead of 14,817.
+- Asks core for each node's subtree, which core now hands a component renderer only when it reads it.
+
+## 15.15.0-alpha.0 - 2026-11-01
+
+- First release, for `react-native-svg` 15.15.x.
+- Renders SVG elements with the desktop renderer.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Streetwriters
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Temporary Holding Version
+# @react-native-gpui/svg
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Adapter for [`react-native-svg`](https://github.com/software-mansion/react-native-svg) (MIT): draws SVG elements with the desktop renderer.
+
+Part of [react-native-gpui](https://github.com/streetwriters/react-native-gpui), React Native for macOS, Windows and Linux.
+
+## Install
+
+Install it next to `react-native-svg`:
+
+```sh
+npm install react-native-svg@15.15.x @react-native-gpui/svg
+```
+
+Keep using `react-native-svg` as you do on iOS and Android; its JavaScript API is unchanged. Autolinking builds the desktop side when the app is built.
+
+## What is drawn
+
+Shapes, paths, text, gradients, masks, clip paths, symbols, patterns and markers, with the transform of each element (react-native-svg sends it as a six number matrix). Filters are drawn too: `filter` on a shape or group and the `feBlend`, `feColorMatrix`, `feComposite`, `feFlood`, `feGaussianBlur`, `feMerge` and `feOffset` primitives, always with sRGB colour interpolation. An icon is drawn with the same antialiasing as Chrome and placed at a whole CSS pixel, as Chrome places an inline SVG.
+
+Limits: `overflow="visible"` is not honoured (the drawing is clipped to the SVG's frame), the other filter primitives such as `feDropShadow` and `feMorphology` are not passed to the renderer, and a blurred shadow comes out about one level lighter than Chrome's for each shadow that overlaps another.
+
+## Cost
+
+A drawing is cached by a hash of what it is made of, so drawing it again costs a hash and a lookup. The cache is shared by every node and holds up to 64 MB of images (`RN_GPUI_SVG_CACHE_MB` changes that). A drawing that is not cached yet is rasterised on a background thread when it is large or filtered, and the node shows its previous image, if it has one, until the new one is ready; a small icon with nothing yet to show is drawn at once. `RN_GPUI_SVG_TRACE=1` logs each rasterisation and `RN_GPUI_SVG_SYNC=1` draws on the main thread, to measure.
+
+## Documentation
+
+[Supported libraries](https://streetwriters.github.io/react-native-gpui/docs/supported-libraries)
+
+## License
+
+MIT. See [LICENSE](LICENSE).

package/desktop/CMakeLists.txt

@@ -0,0 +1,8 @@
+# SVG shared Fabric props/shadow-node descriptors are supplied by RN Codegen
+# and react-native-svg's published common C++ shadow-node headers.
+set(_svg_codegen_dir "${RN_GPUI_PROJECT_ROOT}/desktop/autolink/codegen/rnsvg")
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_SOURCES
+  "${CMAKE_CURRENT_LIST_DIR}/cpp/GpuiSvgModule.cpp")
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_INSTALLERS svg)
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_INCLUDE_DIRS
+  "${_svg_codegen_dir}")

package/desktop/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "rn-gpui-svg"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+react-native-gpui = { version = "0.1" }
+rn-gpui-sys = { version = "0.1" }
+gpui = { version = "0.2" }
+serde_json = "1"
+# The same versions gpui is built with, for the averaged image it draws.
+image = { version = "0.25", default-features = false }
+smallvec = "1"

package/desktop/build.rs

@@ -0,0 +1,38 @@
+//! Puts the C++ runtime's shared libraries on this crate's test binary rpath.
+//!
+//! `rn-gpui-svg`'s tests build gpui trees, which link `libjsi.dylib` and the rest
+//! of the Node-API runtime. Core's `build.rs` emits
+//! `cargo:rustc-link-arg=-Wl,-rpath,<dir>` for its own binary — the app — and that
+//! flag is not inherited by a dependency's test binary, so the test process
+//! aborted in dyld with `Library not loaded: @rpath/libjsi.dylib` before running a
+//! single test.
+//!
+//! Core exports the directories it was given as `DEP_RN_GPUI_CORE_RPATHS`, which
+//! is the same variable core's own `build.rs` reads. Re-emitting it here scopes
+//! the flag to this crate's test binary, since `cargo:rustc-link-arg` without a
+//! target suffix applies to the crate's own targets and not to the app that
+//! depends on it.
+
+fn main() {
+    println!("cargo:rerun-if-env-changed=DEP_RN_GPUI_CORE_RPATHS");
+    println!("cargo:rerun-if-changed=build.rs");
+
+    let Ok(dirs) = std::env::var("DEP_RN_GPUI_CORE_RPATHS") else {
+        return;
+    };
+    let dirs = dirs
+        .split('|')
+        .filter(|dir| !dir.is_empty())
+        .collect::<Vec<_>>();
+    if dirs.is_empty() {
+        return;
+    }
+    // MSVC and MinGW have no rpath, and the flag is rejected outright; Windows
+    // finds the DLLs through PATH, which the test runner already arranges.
+    if std::env::var("CARGO_CFG_TARGET_OS").as_deref() == Ok("windows") {
+        return;
+    }
+    for dir in dirs {
+        println!("cargo:rustc-link-arg=-Wl,-rpath,{dir}");
+    }
+}

package/desktop/cpp/GpuiSvgModule.cpp

@@ -0,0 +1,178 @@
+#include "GpuiModules.h"
+#include "MountBatchBuilder.h"
+
+#include <react/renderer/components/rnsvg/Props.h>
+
+#include <folly/json.h>
+#include <string>
+#include <type_traits>
+#include <vector>
+
+namespace rngpui {
+using namespace facebook::react;
+
+namespace {
+constexpr const char* kSvgComponents[] = {
+    "RNSVGSvgView",        "RNSVGCircle",         "RNSVGEllipse",
+    "RNSVGLine",           "RNSVGPath",           "RNSVGRect",
+    "RNSVGGroup",          "RNSVGDefs",           "RNSVGClipPath",
+    "RNSVGLinearGradient", "RNSVGRadialGradient", "RNSVGText",
+    "RNSVGTSpan",          "RNSVGFilter",         "RNSVGFeBlend",
+    "RNSVGFeColorMatrix",  "RNSVGFeComposite",    "RNSVGFeFlood",
+    "RNSVGFeGaussianBlur", "RNSVGFeMerge",        "RNSVGFeOffset",
+};
+
+template <typename T>
+  requires(!std::is_enum_v<T>)
+folly::dynamic svgJsonValue(const T& value) {
+  return value;
+}
+
+template <typename T>
+  requires std::is_enum_v<T>
+folly::dynamic svgJsonValue(const T& value) {
+  return toString(value);
+}
+
+folly::dynamic svgJsonValue(const Float& value) {
+  return value;
+}
+folly::dynamic svgJsonValue(const SharedColor& value) {
+  return value ? folly::dynamic(argb(value)) : folly::dynamic(nullptr);
+}
+folly::dynamic svgJsonValue(const std::vector<std::string>& values) {
+  folly::dynamic result = folly::dynamic::array();
+  for (const auto& value : values)
+    result.push_back(value);
+  return result;
+}
+folly::dynamic svgJsonValue(const std::vector<Float>& values) {
+  folly::dynamic result = folly::dynamic::array();
+  for (auto value : values)
+    result.push_back(value);
+  return result;
+}
+
+template <typename T>
+folly::dynamic svgPropsJson(const T& props) {
+  folly::dynamic result = folly::dynamic::object();
+#define RN_GPUI_COPY_SVG_PROP(name)       \
+  if constexpr (requires { props.name; }) \
+  result[#name] = svgJsonValue(props.name)
+  RN_GPUI_COPY_SVG_PROP(name);
+  RN_GPUI_COPY_SVG_PROP(d);
+  RN_GPUI_COPY_SVG_PROP(x);
+  RN_GPUI_COPY_SVG_PROP(y);
+  RN_GPUI_COPY_SVG_PROP(x1);
+  RN_GPUI_COPY_SVG_PROP(y1);
+  RN_GPUI_COPY_SVG_PROP(x2);
+  RN_GPUI_COPY_SVG_PROP(y2);
+  RN_GPUI_COPY_SVG_PROP(cx);
+  RN_GPUI_COPY_SVG_PROP(cy);
+  RN_GPUI_COPY_SVG_PROP(r);
+  RN_GPUI_COPY_SVG_PROP(rx);
+  RN_GPUI_COPY_SVG_PROP(ry);
+  RN_GPUI_COPY_SVG_PROP(width);
+  RN_GPUI_COPY_SVG_PROP(height);
+  RN_GPUI_COPY_SVG_PROP(vbWidth);
+  RN_GPUI_COPY_SVG_PROP(vbHeight);
+  RN_GPUI_COPY_SVG_PROP(minX);
+  RN_GPUI_COPY_SVG_PROP(minY);
+  RN_GPUI_COPY_SVG_PROP(align);
+  RN_GPUI_COPY_SVG_PROP(meetOrSlice);
+  RN_GPUI_COPY_SVG_PROP(opacity);
+  RN_GPUI_COPY_SVG_PROP(color);
+  RN_GPUI_COPY_SVG_PROP(propList);
+  RN_GPUI_COPY_SVG_PROP(fill);
+  RN_GPUI_COPY_SVG_PROP(fillOpacity);
+  RN_GPUI_COPY_SVG_PROP(fillRule);
+  RN_GPUI_COPY_SVG_PROP(stroke);
+  RN_GPUI_COPY_SVG_PROP(strokeOpacity);
+  RN_GPUI_COPY_SVG_PROP(strokeWidth);
+  RN_GPUI_COPY_SVG_PROP(strokeLinecap);
+  RN_GPUI_COPY_SVG_PROP(strokeLinejoin);
+  RN_GPUI_COPY_SVG_PROP(strokeDasharray);
+  RN_GPUI_COPY_SVG_PROP(strokeDashoffset);
+  RN_GPUI_COPY_SVG_PROP(strokeMiterlimit);
+  RN_GPUI_COPY_SVG_PROP(matrix);
+  RN_GPUI_COPY_SVG_PROP(mask);
+  RN_GPUI_COPY_SVG_PROP(clipPath);
+  RN_GPUI_COPY_SVG_PROP(offset);
+  RN_GPUI_COPY_SVG_PROP(stopColor);
+  RN_GPUI_COPY_SVG_PROP(stopOpacity);
+  if constexpr (requires { props.filter; }) {
+    if constexpr (std::is_same_v<
+                      std::remove_cvref_t<decltype(props.filter)>,
+                      std::string>)
+      result["filter"] = props.filter;
+  }
+  RN_GPUI_COPY_SVG_PROP(filterUnits);
+  RN_GPUI_COPY_SVG_PROP(primitiveUnits);
+  RN_GPUI_COPY_SVG_PROP(result);
+  RN_GPUI_COPY_SVG_PROP(in1);
+  RN_GPUI_COPY_SVG_PROP(in2);
+  RN_GPUI_COPY_SVG_PROP(mode);
+  RN_GPUI_COPY_SVG_PROP(type);
+  RN_GPUI_COPY_SVG_PROP(values);
+  RN_GPUI_COPY_SVG_PROP(operator1);
+  RN_GPUI_COPY_SVG_PROP(k1);
+  RN_GPUI_COPY_SVG_PROP(k2);
+  RN_GPUI_COPY_SVG_PROP(k3);
+  RN_GPUI_COPY_SVG_PROP(k4);
+  RN_GPUI_COPY_SVG_PROP(dx);
+  RN_GPUI_COPY_SVG_PROP(dy);
+  RN_GPUI_COPY_SVG_PROP(edgeMode);
+  RN_GPUI_COPY_SVG_PROP(floodColor);
+  RN_GPUI_COPY_SVG_PROP(floodOpacity);
+  RN_GPUI_COPY_SVG_PROP(stdDeviationX);
+  RN_GPUI_COPY_SVG_PROP(stdDeviationY);
+  RN_GPUI_COPY_SVG_PROP(nodes);
+#undef RN_GPUI_COPY_SVG_PROP
+  return result;
+}
+
+folly::dynamic svgPropsJson(const std::string& component, const Props& props) {
+#define RN_GPUI_SVG_PROPS(tag, type)                    \
+  if (component == tag) {                               \
+    if (auto typed = dynamic_cast<const type*>(&props)) \
+      return svgPropsJson(*typed);                      \
+  }
+  RN_GPUI_SVG_PROPS("RNSVGSvgView", RNSVGSvgViewProps)
+  RN_GPUI_SVG_PROPS("RNSVGCircle", RNSVGCircleProps)
+  RN_GPUI_SVG_PROPS("RNSVGEllipse", RNSVGEllipseProps)
+  RN_GPUI_SVG_PROPS("RNSVGLine", RNSVGLineProps)
+  RN_GPUI_SVG_PROPS("RNSVGPath", RNSVGPathProps)
+  RN_GPUI_SVG_PROPS("RNSVGRect", RNSVGRectProps)
+  RN_GPUI_SVG_PROPS("RNSVGGroup", RNSVGGroupProps)
+  RN_GPUI_SVG_PROPS("RNSVGDefs", RNSVGDefsProps)
+  RN_GPUI_SVG_PROPS("RNSVGClipPath", RNSVGClipPathProps)
+  RN_GPUI_SVG_PROPS("RNSVGLinearGradient", RNSVGLinearGradientProps)
+  RN_GPUI_SVG_PROPS("RNSVGRadialGradient", RNSVGRadialGradientProps)
+  RN_GPUI_SVG_PROPS("RNSVGText", RNSVGTextProps)
+  RN_GPUI_SVG_PROPS("RNSVGTSpan", RNSVGTSpanProps)
+  RN_GPUI_SVG_PROPS("RNSVGFilter", RNSVGFilterProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeBlend", RNSVGFeBlendProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeColorMatrix", RNSVGFeColorMatrixProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeComposite", RNSVGFeCompositeProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeFlood", RNSVGFeFloodProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeGaussianBlur", RNSVGFeGaussianBlurProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeMerge", RNSVGFeMergeProps)
+  RN_GPUI_SVG_PROPS("RNSVGFeOffset", RNSVGFeOffsetProps)
+#undef RN_GPUI_SVG_PROPS
+  return folly::dynamic::object();
+}
+
+} // namespace
+
+void rn_gpui_install_svg_module() {
+  for (const char* component : kSvgComponents) {
+    registerComponentProps(
+        component, [](const std::string& name, const ShadowView& view) {
+          if (!view.props)
+            return std::string("{}");
+          return folly::toJson(svgPropsJson(name, *view.props));
+        });
+  }
+}
+
+} // namespace rngpui

package/desktop/src/cache.rs

@@ -0,0 +1,156 @@
+//! The rasters, kept by key in a cache bounded by bytes.
+//!
+//! One cache for every node, so identical icons share one image. It holds the
+//! images strongly: an icon that scrolls off the screen is still here when it
+//! comes back. When the total passes the limit the image used longest ago goes
+//! first. The limit is 64 MB; `RN_GPUI_SVG_CACHE_MB` sets another.
+
+use crate::key::Key;
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex, OnceLock};
+
+pub const DEFAULT_LIMIT_BYTES: usize = 64 * 1024 * 1024;
+
+struct Entry {
+    image: Arc<gpui::RenderImage>,
+    bytes: usize,
+    used: u64,
+}
+
+pub struct Cache {
+    limit: usize,
+    bytes: usize,
+    clock: u64,
+    entries: HashMap<Key, Entry>,
+}
+
+fn size_of(image: &gpui::RenderImage) -> usize {
+    let size = image.size(0);
+    size.width.0.max(0) as usize * size.height.0.max(0) as usize * 4
+}
+
+impl Cache {
+    pub fn new(limit: usize) -> Self {
+        Self {
+            limit,
+            bytes: 0,
+            clock: 0,
+            entries: HashMap::new(),
+        }
+    }
+
+    pub fn get(&mut self, key: &Key) -> Option<Arc<gpui::RenderImage>> {
+        self.clock += 1;
+        let clock = self.clock;
+        let entry = self.entries.get_mut(key)?;
+        entry.used = clock;
+        Some(entry.image.clone())
+    }
+
+    pub fn insert(&mut self, key: Key, image: Arc<gpui::RenderImage>) {
+        self.clock += 1;
+        let bytes = size_of(&image);
+        if let Some(old) = self.entries.insert(
+            key,
+            Entry {
+                image,
+                bytes,
+                used: self.clock,
+            },
+        ) {
+            self.bytes -= old.bytes;
+        }
+        self.bytes += bytes;
+        // The newest image stays even when it alone is over the limit.
+        while self.bytes > self.limit && self.entries.len() > 1 {
+            let Some(oldest) = self
+                .entries
+                .iter()
+                .min_by_key(|(_, entry)| entry.used)
+                .map(|(key, _)| *key)
+            else {
+                break;
+            };
+            if let Some(removed) = self.entries.remove(&oldest) {
+                self.bytes -= removed.bytes;
+            }
+        }
+    }
+
+    pub fn bytes(&self) -> usize {
+        self.bytes
+    }
+
+    pub fn len(&self) -> usize {
+        self.entries.len()
+    }
+}
+
+pub fn global() -> &'static Mutex<Cache> {
+    static CACHE: OnceLock<Mutex<Cache>> = OnceLock::new();
+    CACHE.get_or_init(|| {
+        let limit = std::env::var("RN_GPUI_SVG_CACHE_MB")
+            .ok()
+            .and_then(|value| value.parse::<usize>().ok())
+            .map_or(DEFAULT_LIMIT_BYTES, |megabytes| megabytes * 1024 * 1024);
+        Mutex::new(Cache::new(limit))
+    })
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn image(side: u32) -> Arc<gpui::RenderImage> {
+        let buffer =
+            image::ImageBuffer::from_raw(side, side, vec![0u8; (side * side * 4) as usize])
+                .expect("a buffer");
+        Arc::new(gpui::RenderImage::new(smallvec::SmallVec::from_const([
+            image::Frame::new(buffer),
+        ])))
+    }
+
+    fn key(n: u64) -> Key {
+        crate::key::test_key(n)
+    }
+
+    #[test]
+    fn it_returns_what_it_was_given_and_counts_bytes() {
+        let mut cache = Cache::new(1 << 20);
+        let a = image(10);
+        cache.insert(key(1), a.clone());
+        assert!(Arc::ptr_eq(&cache.get(&key(1)).unwrap(), &a));
+        assert!(cache.get(&key(2)).is_none());
+        assert_eq!(cache.bytes(), 400);
+        // Replacing a key does not count its old image twice.
+        cache.insert(key(1), image(20));
+        assert_eq!(cache.bytes(), 1600);
+        assert_eq!(cache.len(), 1);
+    }
+
+    #[test]
+    fn it_stays_within_its_limit_and_drops_the_image_used_longest_ago() {
+        // Three 10 by 10 images are 1200 bytes; the limit holds two.
+        let mut cache = Cache::new(900);
+        cache.insert(key(1), image(10));
+        cache.insert(key(2), image(10));
+        // Using the first makes the second the oldest.
+        assert!(cache.get(&key(1)).is_some());
+        cache.insert(key(3), image(10));
+        assert!(cache.bytes() <= 900);
+        assert!(cache.get(&key(1)).is_some());
+        assert!(cache.get(&key(2)).is_none());
+        assert!(cache.get(&key(3)).is_some());
+    }
+
+    #[test]
+    fn one_image_over_the_limit_is_still_kept() {
+        let mut cache = Cache::new(100);
+        cache.insert(key(1), image(10));
+        assert_eq!(cache.len(), 1);
+        assert!(cache.get(&key(1)).is_some());
+        cache.insert(key(2), image(10));
+        assert_eq!(cache.len(), 1);
+        assert!(cache.get(&key(2)).is_some());
+    }
+}

package/desktop/src/key.rs

@@ -0,0 +1,173 @@
+//! The cache key of a drawing: what decides its pixels, hashed in place.
+//!
+//! The document string is the expensive part of a render, so a lookup never
+//! builds it: the key is a structural hash of the node, its props and its
+//! children (the resolved colours are props), the frame's size and the scale.
+//! A position is not part of it, so identical icons at different places share
+//! one raster.
+
+use react_native_gpui::extensions::ComponentNode;
+use rn_gpui_sys::ffi::RectF;
+use serde_json::Value;
+use std::collections::hash_map::DefaultHasher;
+use std::hash::Hasher;
+
+/// Two independent 64 bit hashes of the same input.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
+pub struct Key(u64, u64);
+
+struct Pair(DefaultHasher, DefaultHasher);
+
+impl Hasher for Pair {
+    fn write(&mut self, bytes: &[u8]) {
+        self.0.write(bytes);
+        self.1.write(bytes);
+    }
+
+    fn finish(&self) -> u64 {
+        self.0.finish()
+    }
+}
+
+fn hash_value(input: &Value, hasher: &mut Pair) {
+    match input {
+        Value::Null => hasher.write_u8(0),
+        Value::Bool(flag) => {
+            hasher.write_u8(1);
+            hasher.write_u8(u8::from(*flag));
+        }
+        Value::Number(number) => {
+            hasher.write_u8(2);
+            hasher.write_u64(number.as_f64().unwrap_or(f64::NAN).to_bits());
+        }
+        Value::String(text) => {
+            hasher.write_u8(3);
+            hasher.write_usize(text.len());
+            hasher.write(text.as_bytes());
+        }
+        Value::Array(items) => {
+            hasher.write_u8(4);
+            hasher.write_usize(items.len());
+            for item in items {
+                hash_value(item, hasher);
+            }
+        }
+        Value::Object(entries) => {
+            hasher.write_u8(5);
+            hasher.write_usize(entries.len());
+            for (name, entry) in entries {
+                hasher.write_usize(name.len());
+                hasher.write(name.as_bytes());
+                hash_value(entry, hasher);
+            }
+        }
+    }
+}
+
+fn node(node: &ComponentNode, hasher: &mut Pair) {
+    hasher.write_usize(node.component.len());
+    hasher.write(node.component.as_bytes());
+    hash_value(&node.props, hasher);
+    hasher.write_usize(node.children.len());
+    for child in &node.children {
+        self::node(child, hasher);
+    }
+}
+
+pub fn node_key(root: &ComponentNode, frame: RectF, scale: f32) -> Key {
+    let mut hasher = Pair(DefaultHasher::new(), DefaultHasher::new());
+    hasher.1.write_u8(0x5a);
+    node(root, &mut hasher);
+    hasher.write_u32(frame.w.to_bits());
+    hasher.write_u32(frame.h.to_bits());
+    hasher.write_u32(scale.to_bits());
+    Key(hasher.0.finish(), hasher.1.finish())
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use serde_json::json;
+    use std::sync::Arc;
+
+    fn shape(props: Value) -> ComponentNode {
+        ComponentNode {
+            component: "RNSVGPath".into(),
+            tag: 1,
+            frame: RectF {
+                x: 0.0,
+                y: 0.0,
+                w: 10.0,
+                h: 10.0,
+            },
+            scale: (1.0, 1.0),
+            props: Arc::new(props),
+            parent: None,
+            children: Vec::new(),
+        }
+    }
+
+    fn svg(color: u32, d: &str) -> ComponentNode {
+        let mut root = shape(json!({"color": color, "vbWidth": 24, "vbHeight": 24}));
+        root.component = "RNSVGSvgView".into();
+        root.children.push(shape(
+            json!({"d": d, "fill": {"type": 0, "payload": color}}),
+        ));
+        root
+    }
+
+    const FRAME: RectF = RectF {
+        x: 0.0,
+        y: 0.0,
+        w: 16.0,
+        h: 16.0,
+    };
+
+    #[test]
+    fn the_same_drawing_has_the_same_key_wherever_it_is() {
+        let a = node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0);
+        let mut moved = svg(0xff112233, "M0 0L1 1");
+        moved.frame.x = 99.0;
+        moved.tag = 7;
+        assert_eq!(a, node_key(&moved, RectF { x: 40.0, ..FRAME }, 2.0));
+        assert_eq!(a, node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0));
+    }
+
+    #[test]
+    fn anything_that_changes_the_pixels_changes_the_key() {
+        let base = node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 2.0);
+        // A colour, a path, a child, the size and the scale each make a new key.
+        assert_ne!(base, node_key(&svg(0xff112234, "M0 0L1 1"), FRAME, 2.0));
+        assert_ne!(base, node_key(&svg(0xff112233, "M0 0L1 2"), FRAME, 2.0));
+        let mut more = svg(0xff112233, "M0 0L1 1");
+        more.children.push(shape(json!({"d": "M1 1"})));
+        assert_ne!(base, node_key(&more, FRAME, 2.0));
+        assert_ne!(
+            base,
+            node_key(
+                &svg(0xff112233, "M0 0L1 1"),
+                RectF { w: 17.0, ..FRAME },
+                2.0
+            )
+        );
+        assert_ne!(base, node_key(&svg(0xff112233, "M0 0L1 1"), FRAME, 1.0));
+    }
+
+    #[test]
+    fn values_of_different_kinds_do_not_collide() {
+        let flag = node_key(&shape(json!({"a": true})), FRAME, 1.0);
+        let text = node_key(&shape(json!({"a": "true"})), FRAME, 1.0);
+        let number = node_key(&shape(json!({"a": 1})), FRAME, 1.0);
+        assert_ne!(flag, text);
+        assert_ne!(flag, number);
+        assert_ne!(
+            node_key(&shape(json!({"ab": "c"})), FRAME, 1.0),
+            node_key(&shape(json!({"a": "bc"})), FRAME, 1.0)
+        );
+    }
+}
+
+#[cfg(test)]
+pub fn test_key(n: u64) -> Key {
+    Key(n, n)
+}