@shopify/react-native-skia 2.11.2 → 2.12.0

package/src/views/SkiaPictureView.web.tsx

@@ -36,32 +36,191 @@ interface Renderer {
   dispose(): void;
 }
 
+// A <canvas> element owns at most one WebGL context for its whole lifetime.
+// A renderer, on the other hand, lives as long as the layout effect that
+// creates it, which is shorter: React re-runs layout effects on a *preserved*
+// host node under StrictMode's DEV double-invoke and when an Activity/offscreen
+// subtree is hidden and revealed (#3976). What belongs to the element rather
+// than to a renderer is tracked here, per element:
+// - the context, so that a new renderer can tell whether the element already
+//   has one (and whether it is lost) without calling getContext() itself,
+//   which on a fresh element would create a context with the wrong attributes
+//   (CanvasKit.GetWebGLContext requests its own);
+// - the WEBGL_lose_context extension, captured while the context is healthy:
+//   getExtension() returns null on a lost context, and this object is the only
+//   way to lose a context on purpose or to ask the browser to restore one;
+// - whether the browser has announced the loss of the context yet: a lost
+//   context can only be restored once its webglcontextlost event has been
+//   dispatched, and that event is asynchronous;
+// - the renderer currently attached to the element, if any.
+interface CanvasWebGL {
+  gl: WebGLRenderingContext | WebGL2RenderingContext;
+  // The WEBGL_lose_context extension.
+  loseContext: { loseContext(): void; restoreContext(): void } | null;
+  lossAnnounced: boolean;
+  owner: WebGLRenderer | null;
+}
+const canvasWebGL = new WeakMap<HTMLCanvasElement, CanvasWebGL>();
+
+// Unregisters a context from CanvasKit's registry, which otherwise retains the
+// canvas element (and its detached DOM tree) forever (#3924).
+const deleteContextHandle = (handle: WebGLContextHandle) => {
+  CanvasKit.deleteContext(handle);
+  // Making the now-deleted handle current clears CanvasKit's current-context
+  // globals (GLctx/Module.ctx), which would otherwise keep referencing the
+  // context (and the canvas) until another surface becomes current. With a
+  // deleted handle this is a no-op that returns null without creating
+  // anything.
+  CanvasKit.MakeWebGLContext(handle);
+};
+
 class WebGLRenderer implements Renderer {
   private surface: JsiSkSurface | null = null;
   private grContext: GrDirectContext | null = null;
   private contextHandle: WebGLContextHandle = 0;
   private pd = 1;
+  // Set while the renderer is waiting for a lost context to be restored.
+  private restoreWanted = false;
+  private restoreRequest: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(
+    private canvas: HTMLCanvasElement,
+    // Called when the renderer becomes able to paint again and the current
+    // picture should be drawn.
+    private requestRedraw: () => void
+  ) {
+    const entry = canvasWebGL.get(canvas);
+    if (entry) {
+      entry.owner = this;
+    }
+    canvas.addEventListener("webglcontextlost", this.onContextLost);
+    canvas.addEventListener("webglcontextrestored", this.onContextRestored);
+    this.acquire();
+  }
 
-  constructor(private canvas: HTMLCanvasElement) {
-    this.contextHandle = CanvasKit.GetWebGLContext(canvas);
-    if (!this.contextHandle) {
+  // Builds the GrDirectContext and the surface on the element's WebGL
+  // context, creating the context first if the element has none.
+  private acquire() {
+    const { canvas } = this;
+    const known = canvasWebGL.get(canvas);
+    if (known?.gl.isContextLost()) {
+      // Nothing can be built on a lost context: CanvasKit.GetWebGLContext
+      // happily registers it, and MakeWebGLContext then faults inside wasm
+      // (#3976). Ask the browser for it back and finish in onContextRestored;
+      // if the loss hasn't been announced yet, onContextLost asks.
+      this.restoreWanted = true;
+      if (known.lossAnnounced) {
+        known.loseContext?.restoreContext();
+      }
+      return;
+    }
+    const handle = CanvasKit.GetWebGLContext(canvas);
+    if (!handle) {
       throw new Error("Could not create a WebGL context");
     }
-    this.grContext = CanvasKit.MakeWebGLContext(this.contextHandle);
-    if (!this.grContext) {
-      CanvasKit.deleteContext(this.contextHandle);
-      this.contextHandle = 0;
+    const entry = known ?? this.trackContext();
+    let grContext: GrDirectContext | null = null;
+    try {
+      grContext = CanvasKit.MakeWebGLContext(handle);
+    } finally {
+      if (!grContext) {
+        // Whether it returned null or threw, don't leave the registry
+        // holding on to the canvas.
+        deleteContextHandle(handle);
+      }
+    }
+    if (!grContext) {
       throw new Error("Could not create a graphics context");
     }
-    const ctx = canvas.getContext("webgl2");
-    if (ctx) {
-      ctx.drawingBufferColorSpace = "display-p3";
+    this.restoreWanted = false;
+    this.contextHandle = handle;
+    this.grContext = grContext;
+    if (entry) {
+      entry.gl.drawingBufferColorSpace = "display-p3";
     }
     this.onResize();
   }
 
+  // CanvasKit just created the element's context; asking for it again hands
+  // back the same object (the attributes are only honored the first time).
+  private trackContext(): CanvasWebGL | null {
+    const { canvas } = this;
+    const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");
+    if (!gl) {
+      return null;
+    }
+    const entry: CanvasWebGL = {
+      gl,
+      loseContext: gl.getExtension("WEBGL_lose_context"),
+      lossAnnounced: false,
+      owner: this,
+    };
+    canvasWebGL.set(canvas, entry);
+    // Browsers restore a lost context (evicted as the oldest one when the
+    // page exceeds the active-context limit, or lost to a GPU reset) only if
+    // the page called preventDefault() on the webglcontextlost event. A
+    // renderer isn't necessarily attached when that happens (the canvas may
+    // be in a hidden Activity), so these listeners live as long as the
+    // element does. They are registered ahead of any renderer's, and the
+    // loss can't be announced before they exist since the event is
+    // asynchronous.
+    canvas.addEventListener("webglcontextlost", (event) => {
+      event.preventDefault();
+      entry.lossAnnounced = true;
+    });
+    canvas.addEventListener("webglcontextrestored", () => {
+      entry.lossAnnounced = false;
+    });
+    return entry;
+  }
+
+  // Frees everything built on the context. The context itself belongs to the
+  // element, see dispose().
+  private release() {
+    this.surface?.ref.delete();
+    this.surface = null;
+    if (this.grContext) {
+      this.grContext.releaseResourcesAndAbandonContext();
+      this.grContext.delete();
+      this.grContext = null;
+    }
+    if (this.contextHandle) {
+      deleteContextHandle(this.contextHandle);
+      this.contextHandle = 0;
+    }
+  }
+
+  private isContextLost() {
+    return canvasWebGL.get(this.canvas)?.gl.isContextLost() ?? false;
+  }
+
+  private onContextLost = () => {
+    // The browser already dropped every GL object; drop our references to
+    // them. Restoration is left to the browser (it restores an evicted
+    // context as soon as a slot frees up), except when this renderer was
+    // built on an already-lost context and is waiting to paint for the first
+    // time: chasing an eviction from here would evict the next-oldest context
+    // in turn, and with more live canvases than the browser allows the
+    // canvases would endlessly evict each other.
+    this.release();
+    if (this.restoreWanted) {
+      // The permission granted by preventDefault() is only recorded by the
+      // browser once the event dispatch is over: a restoreContext() call
+      // from inside the handler is refused, so ask from a later task.
+      this.restoreRequest = setTimeout(() => {
+        this.restoreRequest = null;
+        canvasWebGL.get(this.canvas)?.loseContext?.restoreContext();
+      }, 0);
+    }
+  };
+
+  private onContextRestored = () => {
+    this.acquire();
+    this.requestRedraw();
+  };
+
   makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage | null {
-    if (!this.surface) {
+    if (!this.surface || this.isContextLost()) {
       return null;
     }
     const canvas = this.surface.getCanvas();
@@ -73,7 +232,10 @@ class WebGLRenderer implements Renderer {
 
   onResize() {
     const { canvas } = this;
-    if (!this.grContext) {
+    if (!this.grContext || this.isContextLost()) {
+      // Waiting for the context to be restored (the restore path resizes),
+      // or the loss hasn't been announced yet and onContextLost is about to
+      // release everything: either way there is nothing to build on.
       return;
     }
     this.pd = window.devicePixelRatio;
@@ -101,41 +263,57 @@ class WebGLRenderer implements Renderer {
   }
 
   draw(picture: SkPicture) {
-    if (this.surface) {
-      const canvas = this.surface.getCanvas();
-      canvas.clear(Float32Array.of(0, 0, 0, 0));
-      canvas.save();
-      canvas.scale(this.pd, this.pd);
-      canvas.drawPicture(picture);
-      canvas.restore();
-      this.surface.ref.flush();
+    if (!this.surface || this.isContextLost()) {
+      return;
     }
+    const canvas = this.surface.getCanvas();
+    canvas.clear(Float32Array.of(0, 0, 0, 0));
+    canvas.save();
+    canvas.scale(this.pd, this.pd);
+    canvas.drawPicture(picture);
+    canvas.restore();
+    this.surface.ref.flush();
   }
 
   dispose(): void {
-    this.surface?.ref.delete();
-    this.surface = null;
-    if (this.grContext) {
-      this.grContext.releaseResourcesAndAbandonContext();
-      this.grContext.delete();
-      this.grContext = null;
+    const { canvas } = this;
+    canvas.removeEventListener("webglcontextlost", this.onContextLost);
+    canvas.removeEventListener("webglcontextrestored", this.onContextRestored);
+    if (this.restoreRequest !== null) {
+      clearTimeout(this.restoreRequest);
+      this.restoreRequest = null;
     }
-    this.canvas
-      ?.getContext("webgl2")
-      ?.getExtension("WEBGL_lose_context")
-      ?.loseContext();
-    if (this.contextHandle) {
-      // Unregister the context from CanvasKit's internal registry, otherwise
-      // it retains the canvas element (and its detached DOM tree) forever.
-      CanvasKit.deleteContext(this.contextHandle);
-      // Making the now-deleted handle current clears CanvasKit's
-      // current-context globals (GLctx/Module.ctx), which would otherwise
-      // keep referencing the context (and the canvas) until another surface
-      // becomes current. With a deleted handle this is a no-op that returns
-      // null without creating anything.
-      CanvasKit.MakeWebGLContext(this.contextHandle);
-      this.contextHandle = 0;
+    this.restoreWanted = false;
+    this.release();
+    // Free the drawing buffer, which CanvasKit requests with depth and stencil
+    // attachments (about 8 bytes per pixel): a canvas that stays in the
+    // document without a renderer, hidden in an Activity say, would otherwise
+    // keep a full-size buffer around. The next renderer's onResize() sizes it
+    // again.
+    canvas.width = 0;
+    canvas.height = 0;
+    const entry = canvasWebGL.get(canvas);
+    if (!entry) {
+      return;
     }
+    entry.owner = null;
+    // Whether the element is going away is only known once the commit is
+    // over: on a real unmount React runs this cleanup *before* removing the
+    // node from the document, while StrictMode's double-invoke and an
+    // Activity hide keep the node in place (and the former builds the next
+    // renderer on it right away). Losing the context of a detached element
+    // matters: it would otherwise stay alive until the element is garbage
+    // collected, and browsers cap the number of live contexts per page
+    // (16 in Chrome, which then evicts the oldest one, visible or not).
+    queueMicrotask(() => {
+      if (
+        entry.owner === null &&
+        !canvas.isConnected &&
+        !entry.gl.isContextLost()
+      ) {
+        entry.loseContext?.loseContext();
+      }
+    });
   }
 }
 
@@ -382,6 +560,9 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
   // - A ResizeObserver on the canvas itself recreates the surface and repaints
   //   synchronously (its callbacks run after layout, before paint), and is
   //   also the source of the user-facing onLayout event.
+  // - The renderer belongs to the layout effect, the WebGL context to the
+  //   <canvas> element, whose lifetime is longer; see WebGLRenderer for how
+  //   the two are reconciled.
   const redrawPendingRef = useRef(false);
   const flushScheduledRef = useRef(false);
   const onLayoutRef = useRef(onLayout);
@@ -488,7 +669,7 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
     }
     const renderer = isStatic
       ? new StaticWebGLRenderer(canvas)
-      : new WebGLRenderer(canvas);
+      : new WebGLRenderer(canvas, redraw);
     rendererRef.current = renderer;
 
     const drawPicture = () => {
@@ -572,7 +753,7 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
       rendererRef.current = null;
       renderer.dispose();
     };
-  }, [isStatic]);
+  }, [isStatic, redraw]);
 
   // No flush cancellation is needed on unmount: a microtask queued before
   // unmount runs within the same task, and flushRedraw no-ops once the
@@ -635,6 +816,10 @@ export const SkiaPictureView = (props: SkiaPictureViewProps) => {
   return (
     <Platform.View {...viewProps}>
       <canvas
+        // A canvas element is bound to one context kind for life (WebGL for
+        // the live renderer, 2D for the static one), so switching renderers
+        // needs a fresh element.
+        key={isStatic ? "static" : "webgl"}
         ref={canvasRef}
         style={{ display: "block", width: "100%", height: "100%" }}
       />

package/cpp/jsi/RuntimeAwareCache.cpp

@@ -1,8 +0,0 @@
-#include "RuntimeAwareCache.h"
-
-namespace RNJsi {
-
-std::atomic<jsi::Runtime *> BaseRuntimeAwareCache::_mainRuntime{nullptr};
-std::atomic<uint64_t> BaseRuntimeAwareCache::_mainRuntimeGeneration{0};
-
-} // namespace RNJsi

package/cpp/jsi/RuntimeAwareCache.h

@@ -1,146 +0,0 @@
-#pragma once
-
-#include <jsi/jsi.h>
-
-#include <atomic>
-#include <cstdint>
-#include <memory>
-#include <mutex>
-#include <unordered_map>
-#include <utility>
-
-#include "RuntimeLifecycleMonitor.h"
-
-namespace RNJsi {
-
-namespace jsi = facebook::jsi;
-
-class BaseRuntimeAwareCache {
-public:
-  static void setMainJsRuntime(jsi::Runtime *rt) {
-    // Atomic: hot reload rewrites this from the JS thread while worklet
-    // runtime threads read it concurrently.
-    _mainRuntime.store(rt, std::memory_order_release);
-    // Every (re)installation of the native module starts a new generation.
-    // Callers that hold process-wide state derived from the main runtime
-    // (see StaticRuntimeAwareCache) must key their invalidation on this
-    // counter and NOT on the runtime pointer: when the JS runtime is
-    // destroyed and recreated in-process (expo-updates OTA apply,
-    // DevSettings.reload) the new jsi::Runtime is frequently allocated at
-    // the exact address of the freed one, so a pointer comparison cannot
-    // tell a reload from the steady state.
-    _mainRuntimeGeneration.fetch_add(1, std::memory_order_acq_rel);
-  }
-  static uint64_t getMainJsRuntimeGeneration() {
-    return _mainRuntimeGeneration.load(std::memory_order_acquire);
-  }
-  /**
-   * Called when the main runtime is about to go away (RNSkManager destruction).
-   * Bumps the generation so process-wide caches keyed on it
-   * (StaticRuntimeAwareCache) stop trusting their contents before the next
-   * install(). This closes the window where a runtime allocated at the dead
-   * runtime's address would otherwise be taken for the main runtime and be
-   * handed the stale jsi::Objects of the previous one.
-   *
-   * The pointer itself is intentionally left in place: worklet runtime
-   * threads may still call getMainJsRuntime() while teardown overlaps, and
-   * that accessor asserts on nullptr.
-   */
-  static void invalidateMainJsRuntime() {
-    _mainRuntimeGeneration.fetch_add(1, std::memory_order_acq_rel);
-  }
-  static jsi::Runtime *getMainJsRuntime() {
-    auto *rt = _mainRuntime.load(std::memory_order_acquire);
-    assert(rt != nullptr && "Expected main Javascript runtime to be set in the "
-                            "BaseRuntimeAwareCache class.");
-
-    return rt;
-  }
-
-private:
-  static std::atomic<jsi::Runtime *> _mainRuntime;
-  static std::atomic<uint64_t> _mainRuntimeGeneration;
-};
-
-/**
- * Provides a way to keep data specific to a jsi::Runtime instance that gets
- * cleaned up when that runtime is destroyed. This is necessary because JSI does
- * not allow for its associated objects to be retained past the runtime
- * lifetime. If an object (e.g. jsi::Values or jsi::Function instances) is kept
- * after the runtime is torn down, its destructor (once it is destroyed
- * eventually) will result in a crash (JSI objects keep a pointer to memory
- * managed by the runtime, accessing that portion of the memory after runtime is
- * deleted is the root cause of that crash).
- *
- * In order to provide an efficient implementation that does not add an overhead
- * for the cases when only a single runtiome is used, which is the primary
- * usecase, the following assumption has been made: Only for secondary runtimes
- * we track destruction and clean up the store associated with that runtime. For
- * the first runtime we assume that the object holding the store is destroyed
- * prior to the destruction of that runtime.
- *
- * The above assumption makes it work without any overhead when only single
- * runtime is in use. Specifically, we don't perform any additional operations
- * related to tracking runtime lifecycle when only a single runtime is used.
- */
-template <typename T>
-class RuntimeAwareCache : public BaseRuntimeAwareCache,
-                          public RuntimeLifecycleListener {
-
-public:
-  void onRuntimeDestroyed(jsi::Runtime *rt) override {
-    if (getMainJsRuntime() != rt) {
-      // We are removing a secondary runtime. This is invoked by
-      // RuntimeLifecycleMonitor on the destroyed runtime's thread, which may
-      // run concurrently with get() on another runtime's thread.
-      std::lock_guard<std::mutex> lock(_secondaryCachesMutex);
-      _secondaryRuntimeCaches.erase(rt);
-    }
-  }
-
-  ~RuntimeAwareCache() {
-    for (auto &cache : _secondaryRuntimeCaches) {
-      RuntimeLifecycleMonitor::removeListener(
-          *static_cast<jsi::Runtime *>(cache.first), this);
-    }
-  }
-
-  T &get(jsi::Runtime &rt) {
-    // We check if we're accessing the main runtime - this is the happy path
-    // to avoid us having to lookup by runtime for caches that only has a single
-    // runtime
-    if (getMainJsRuntime() == &rt) {
-      return _primaryCache;
-    } else {
-      // Guard the secondary map: it can be mutated concurrently by get()
-      // on a worklet runtime's thread and by onRuntimeDestroyed() when
-      // another secondary runtime is torn down. The main-runtime path above
-      // stays lock-free. References into the map remain valid after the
-      // lock is released (unordered_map never invalidates references on
-      // insert/erase of other keys, and this runtime's entry can only be
-      // erased from this runtime's own thread).
-      std::lock_guard<std::mutex> lock(_secondaryCachesMutex);
-      if (_secondaryRuntimeCaches.count(&rt) == 0) {
-        // we only add listener when the secondary runtime is used, this assumes
-        // that the secondary runtime is terminated first. This lets us avoid
-        // additional complexity for the majority of cases when objects are not
-        // shared between runtimes. Otherwise we'd have to register all objecrts
-        // with the RuntimeMonitor as opposed to only registering ones that are
-        // used in secondary runtime. Note that we can't register listener here
-        // with the primary runtime as it may run on a separate thread.
-        RuntimeLifecycleMonitor::addListener(rt, this);
-
-        T cache;
-        _secondaryRuntimeCaches.emplace(&rt, std::move(cache));
-      }
-      return _secondaryRuntimeCaches.at(&rt);
-    }
-  }
-
-private:
-  std::mutex _secondaryCachesMutex;
-  std::unordered_map<void *, T> _secondaryRuntimeCaches;
-  T _primaryCache;
-};
-
-} // namespace RNJsi

package/cpp/jsi/RuntimeLifecycleMonitor.cpp

@@ -1,72 +0,0 @@
-#include "RuntimeLifecycleMonitor.h"
-
-#include <mutex>
-#include <unordered_map>
-#include <unordered_set>
-#include <utility>
-
-namespace RNJsi {
-
-static std::unordered_map<jsi::Runtime *,
-                          std::unordered_set<RuntimeLifecycleListener *>>
-    listeners;
-static std::mutex listenersMutex;
-
-struct RuntimeLifecycleMonitorObject : public jsi::HostObject {
-  jsi::Runtime *_rt;
-  explicit RuntimeLifecycleMonitorObject(jsi::Runtime *rt) : _rt(rt) {}
-  ~RuntimeLifecycleMonitorObject() {
-    std::unordered_set<RuntimeLifecycleListener *> listenersCopy;
-    {
-      std::lock_guard<std::mutex> lock(listenersMutex);
-      auto listenersSet = listeners.find(_rt);
-      if (listenersSet != listeners.end()) {
-        listenersCopy = listenersSet->second;
-        listeners.erase(listenersSet);
-      }
-    }
-    for (auto listener : listenersCopy) {
-      listener->onRuntimeDestroyed(_rt);
-    }
-  }
-};
-
-void RuntimeLifecycleMonitor::addListener(jsi::Runtime &rt,
-                                          RuntimeLifecycleListener *listener) {
-  bool shouldInstallMonitor = false;
-  {
-    std::lock_guard<std::mutex> lock(listenersMutex);
-    auto listenersSet = listeners.find(&rt);
-    if (listenersSet == listeners.end()) {
-      std::unordered_set<RuntimeLifecycleListener *> newSet;
-      newSet.insert(listener);
-      listeners.emplace(&rt, std::move(newSet));
-      shouldInstallMonitor = true;
-    } else {
-      listenersSet->second.insert(listener);
-    }
-  }
-  if (shouldInstallMonitor) {
-    // We install a global host object in the provided runtime, this way we can
-    // use that host object destructor to get notified when the runtime is being
-    // terminated. We use a unique name for the object as it gets saved with the
-    // runtime's global object.
-    rt.global().setProperty(
-        rt, "__rnskia_rt_lifecycle_monitor",
-        jsi::Object::createFromHostObject(
-            rt, std::make_shared<RuntimeLifecycleMonitorObject>(&rt)));
-  }
-}
-
-void RuntimeLifecycleMonitor::removeListener(
-    jsi::Runtime &rt, RuntimeLifecycleListener *listener) {
-  std::lock_guard<std::mutex> lock(listenersMutex);
-  auto listenersSet = listeners.find(&rt);
-  if (listenersSet == listeners.end()) {
-    // nothing to do here
-  } else {
-    listenersSet->second.erase(listener);
-  }
-}
-
-} // namespace RNJsi

package/cpp/jsi/RuntimeLifecycleMonitor.h

@@ -1,32 +0,0 @@
-#pragma once
-
-#include <jsi/jsi.h>
-
-#include <memory>
-
-namespace RNJsi {
-
-namespace jsi = facebook::jsi;
-
-/**
- * Listener interface that allows for getting notified when a jsi::Runtime
- * instance is destroyed.
- */
-struct RuntimeLifecycleListener {
-  virtual ~RuntimeLifecycleListener() {}
-  virtual void onRuntimeDestroyed(jsi::Runtime *) = 0;
-};
-
-/**
- * This class provides an API via static methods for registering and
- * unregistering runtime lifecycle listeners. The listeners can be used to
- * cleanup any data that references a given jsi::Runtime instance before it gets
- * destroyed.
- */
-struct RuntimeLifecycleMonitor {
-  static void addListener(jsi::Runtime &rt, RuntimeLifecycleListener *listener);
-  static void removeListener(jsi::Runtime &rt,
-                             RuntimeLifecycleListener *listener);
-};
-
-} // namespace RNJsi