@shopify/react-native-skia 0.1.180 → 0.1.181

package/android/build.gradle

@@ -28,6 +28,11 @@ def safeExtGet(prop, fallback) {
 
 apply plugin: 'com.android.library'
 
+def reactNativeArchitectures() {
+  def value = project.getProperties().get("reactNativeArchitectures")
+  return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
+}
+
 static def findNodeModules(baseDir) {
   def basePath = baseDir.toPath().normalize()
   // Node's module resolution algorithm searches up to the root directory,
@@ -119,7 +124,7 @@ android {
         externalNativeBuild {
             cmake {
                 cppFlags "-fexceptions", "-frtti", "-std=c++1y", "-DONANDROID"
-                abiFilters 'x86', 'x86_64', 'armeabi-v7a', 'arm64-v8a'
+                abiFilters (*reactNativeArchitectures())
                 arguments '-DANDROID_STL=c++_shared',
                           "-DREACT_NATIVE_VERSION=${REACT_NATIVE_VERSION}",
                           "-DNODE_MODULES_DIR=${nodeModules}",

package/cpp/jsi/RuntimeAwareCache.cpp

@@ -1,5 +1,3 @@
-#pragma once
-
 #include "RuntimeAwareCache.h"
 
 namespace RNJsi {

package/cpp/rnskia/RNSkDomView.cpp

@@ -22,7 +22,7 @@ RNSkDomRenderer::RNSkDomRenderer(std::function<void()> requestRedraw,
 
 RNSkDomRenderer::~RNSkDomRenderer() {
   if (_root != nullptr) {
-    _root->dispose();
+    _root->dispose(true);
     _root = nullptr;
   }
 }
@@ -63,7 +63,7 @@ void RNSkDomRenderer::renderImmediate(
 void RNSkDomRenderer::setRoot(std::shared_ptr<JsiDomRenderNode> node) {
   std::lock_guard<std::mutex> lock(_rootLock);
   if (_root != nullptr) {
-    _root->dispose();
+    _root->dispose(true);
     _root = nullptr;
   }
   _root = node;

package/cpp/rnskia/RNSkPlatformContext.h

@@ -112,8 +112,8 @@ public:
 
   /**
    * Creates an offscreen surface
-   * @param width
-   * @param height
+   * @param width width of the surface
+   * @param height height of the surface
    * @return sk_sp<SkSurface>
    */
   virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height) = 0;

package/cpp/rnskia/dom/base/JsiDependencyManager.h

@@ -23,8 +23,10 @@ class JsiDependencyManager
       public std::enable_shared_from_this<JsiDependencyManager> {
 public:
   JsiDependencyManager(std::shared_ptr<RNSkPlatformContext> context,
-                       jsi::Object &&registerValuesCallback)
-      : _registerValuesCallback(std::move(registerValuesCallback)),
+                       jsi::Runtime &runtime,
+                       const jsi::Value &registerValuesCallback)
+      : _registerValuesCallback(std::make_shared<jsi::Object>(
+            registerValuesCallback.asObject(runtime))),
         JsiHostObject() {}
 
   ~JsiDependencyManager() { unsubscribeAll(); }
@@ -158,7 +160,7 @@ public:
     }
 
     // Call JS registerValues callback
-    auto func = _registerValuesCallback.asFunction(runtime);
+    auto func = _registerValuesCallback->asFunction(runtime);
     _unregisterValues = std::make_shared<jsi::Object>(
         func.call(runtime, array, 1).asObject(runtime));
 
@@ -187,6 +189,8 @@ public:
 
     unsubscribeAll();
 
+    _registerValuesCallback = nullptr;
+
     return jsi::Value::undefined();
   }
 
@@ -203,8 +207,8 @@ public:
     return JSI_HOST_FUNCTION_LAMBDA {
       // Params: registerValues: (values: Array<SkiaValue<unknown>>) => () =>
       // void
-      auto obj = std::make_shared<JsiDependencyManager>(
-          context, getArgumentAsObject(runtime, arguments, count, 0));
+      auto obj = std::make_shared<JsiDependencyManager>(context, runtime,
+                                                        arguments[0]);
 
       return jsi::Object::createFromHostObject(runtime, std::move(obj));
     };
@@ -283,7 +287,7 @@ private:
     return false;
   }
 
-  jsi::Object _registerValuesCallback;
+  std::shared_ptr<jsi::Object> _registerValuesCallback;
   std::shared_ptr<jsi::Object> _unregisterValues;
   std::map<JsiDomNode *,
            std::vector<std::pair<std::shared_ptr<RNSkReadonlyValue>,

package/cpp/rnskia/dom/base/JsiDomNode.h

@@ -49,7 +49,19 @@ public:
   JsiDomNode(std::shared_ptr<RNSkPlatformContext> context, const char *type,
              NodeClass nodeClass)
       : _type(type), _context(context), _nodeClass(nodeClass),
-        _nodeId(NodeIdent++), JsiHostObject() {}
+        _nodeId(NodeIdent++), JsiHostObject() {
+#if SKIA_DOM_DEBUG
+    printDebugInfo("JsiDomNode." + std::string(_type) +
+                   " CTOR - nodeId: " + std::to_string(_nodeId));
+#endif
+  }
+
+  virtual ~JsiDomNode() {
+#if SKIA_DOM_DEBUG
+    printDebugInfo("JsiDomNode." + std::string(_type) +
+                   " DTOR - nodeId: " + std::to_string(_nodeId));
+#endif
+  }
 
   /**
    Called when creating the node, resolves properties from the node constructor.
@@ -65,7 +77,7 @@ public:
   JSI_HOST_FUNCTION(setProps) {
     if (count == 1) {
       // Initialize properties container
-      setProps(runtime, getArgumentAsObject(runtime, arguments, count, 0));
+      setProps(runtime, arguments[0]);
     } else {
       setEmptyProps();
     }
@@ -102,7 +114,7 @@ public:
    tree. Use for cleaning up.
    */
   JSI_HOST_FUNCTION(dispose) {
-    dispose();
+    dispose(false);
     return jsi::Value::undefined();
   }
 
@@ -247,36 +259,9 @@ public:
       _propsContainer->markAsResolved();
     }
 
-    // Now let's dispose if needed
+    // Now let's invalidate if needed
     if (_isDisposing && !_isDisposed) {
-      _isDisposed = true;
-
-      this->setParent(nullptr);
-
-      // Callback signaling that we're done
-      if (_disposeCallback != nullptr) {
-        _disposeCallback();
-        _disposeCallback = nullptr;
-      }
-
-      // Clear props
-      if (_propsContainer != nullptr) {
-        _propsContainer->dispose();
-      }
-
-      // Remove children
-      std::vector<std::shared_ptr<JsiDomNode>> tmp;
-      {
-        std::lock_guard<std::mutex> lock(_childrenLock);
-        tmp.reserve(_children.size());
-        for (auto &child : _children) {
-          tmp.push_back(child);
-        }
-        _children.clear();
-      }
-      for (auto &child : tmp) {
-        child->dispose();
-      }
+      invalidate();
     }
 
     // Resolve children
@@ -292,6 +277,22 @@ public:
     // Empty implementation
   }
 
+  /**
+   Called when a node has been removed from the dom tree and needs to be cleaned
+   up. If the invalidate parameter is set, we will invalidate the node directly.
+   Calling dispose from the JS dispose function calls this with invalidate set
+   to false, while the dom render view calls this with true.
+   */
+  virtual void dispose(bool immediate) {
+    if (_isDisposing) {
+      return;
+    }
+    _isDisposing = true;
+    if (immediate) {
+      invalidate();
+    }
+  }
+
 protected:
   /**
    Adds an operation that will be executed when the render cycle is finished.
@@ -319,24 +320,17 @@ protected:
 
   /**
    Native implementation of the set properties method. This is called from the
-   reconciler when properties are set due to changes in React. This method will
-   always call the onPropsSet method as a signal that things have changed.
+   reconciler when properties are set due to changes in React.
    */
-  void setProps(jsi::Runtime &runtime, jsi::Object &&props) {
+  void setProps(jsi::Runtime &runtime, const jsi::Value &maybeProps) {
 #if SKIA_DOM_DEBUG
     printDebugInfo("JS:setProps(nodeId: " + std::to_string(_nodeId) + ")");
 #endif
-    if (_propsContainer == nullptr) {
+    // Initialize properties container
+    ensurePropertyContainer();
 
-      // Initialize properties container
-      _propsContainer = std::make_shared<NodePropsContainer>(
-          getType(), [=](BaseNodeProp *p) { onPropertyChanged(p); });
-
-      // Ask sub classes to define their properties
-      defineProperties(_propsContainer.get());
-    }
     // Update properties container
-    _propsContainer->setProps(runtime, std::move(props));
+    _propsContainer->setProps(runtime, maybeProps);
 
     // Invalidate context
     invalidateContext();
@@ -349,15 +343,8 @@ protected:
 #if SKIA_DOM_DEBUG
     printDebugInfo("JS:setEmptyProps(nodeId: " + std::to_string(_nodeId) + ")");
 #endif
-    if (_propsContainer == nullptr) {
-
-      // Initialize properties container
-      _propsContainer = std::make_shared<NodePropsContainer>(
-          getType(), [=](BaseNodeProp *p) { onPropertyChanged(p); });
-
-      // Ask sub classes to define their properties
-      defineProperties(_propsContainer.get());
-    }
+    // Initialize properties container
+    ensurePropertyContainer();
   }
 
   /**
@@ -381,9 +368,12 @@ protected:
     printDebugInfo("JS:addChild(childId: " + std::to_string(child->_nodeId) +
                    ")");
 #endif
-    enqueAsynOperation([child, this]() {
-      _children.push_back(child);
-      child->setParent(this);
+    enqueAsynOperation([child, weakSelf = weak_from_this()]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        self->_children.push_back(child);
+        child->setParent(self.get());
+      }
     });
   }
 
@@ -398,10 +388,14 @@ protected:
         "JS:insertChildBefore(childId: " + std::to_string(child->_nodeId) +
         ", beforeId: " + std::to_string(before->_nodeId) + ")");
 #endif
-    enqueAsynOperation([child, before, this]() {
-      auto position = std::find(_children.begin(), _children.end(), before);
-      _children.insert(position, child);
-      child->setParent(this);
+    enqueAsynOperation([child, before, weakSelf = weak_from_this()]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        auto position =
+            std::find(self->_children.begin(), self->_children.end(), before);
+        self->_children.insert(position, child);
+        child->setParent(self.get());
+      }
     });
   }
 
@@ -414,27 +408,25 @@ protected:
     printDebugInfo("JS:removeChild(childId: " + std::to_string(child->_nodeId) +
                    ")");
 #endif
-    enqueAsynOperation([child, this]() {
-      // Delete child itself
-      _children.erase(
-          std::remove_if(_children.begin(), _children.end(),
-                         [child](const auto &node) { return node == child; }),
-          _children.end());
-
-      child->dispose();
-    });
-  }
+    auto removeChild = [child,
+                        weakSelf = weak_from_this()](bool immediate = false) {
+      auto self = weakSelf.lock();
+      if (self) {
+        // Delete child itself
+        self->_children.erase(
+            std::remove_if(self->_children.begin(), self->_children.end(),
+                           [child](const auto &node) { return node == child; }),
+            self->_children.end());
+
+        child->dispose(immediate);
+      }
+    };
 
-  /**
-   Called when a node has been removed from the dom tree and needs to be cleaned
-   up.
-   */
-  virtual void dispose() {
     if (_isDisposing) {
-      return;
+      removeChild(false);
+    } else {
+      enqueAsynOperation(removeChild);
     }
-
-    _isDisposing = true;
   }
 
 #if SKIA_DOM_DEBUG
@@ -477,6 +469,69 @@ protected:
   }
 
 private:
+  /**
+   Invalidates the node - meaning removing and clearing children and properties
+   **/
+  void invalidate() {
+    if (_isDisposing && !_isDisposed) {
+#if SKIA_DOM_DEBUG
+      printDebugInfo("JsiDomNode::invalidate: nodeid: " +
+                     std::to_string(_nodeId));
+#endif
+
+      _isDisposed = true;
+
+      // Clear parent
+      this->setParent(nullptr);
+
+      // Clear any async operations
+      _queuedNodeOps.clear();
+
+      // Callback signaling that we're done
+      if (_disposeCallback != nullptr) {
+        _disposeCallback();
+        _disposeCallback = nullptr;
+      }
+
+      // Clear props
+      if (_propsContainer != nullptr) {
+        _propsContainer->dispose();
+      }
+
+      // Remove children
+      std::vector<std::shared_ptr<JsiDomNode>> tmp;
+      {
+        std::lock_guard<std::mutex> lock(_childrenLock);
+        tmp.reserve(_children.size());
+        for (auto &child : _children) {
+          tmp.push_back(child);
+        }
+        _children.clear();
+      }
+      for (auto &child : tmp) {
+        child->dispose(true);
+      }
+    }
+  }
+
+  /**
+   Creates and sets up the property container
+   */
+  void ensurePropertyContainer() {
+    if (_propsContainer == nullptr) {
+      _propsContainer = std::make_shared<NodePropsContainer>(
+          getType(), [weakSelf = weak_from_this()](BaseNodeProp *p) {
+            auto self = weakSelf.lock();
+            if (self) {
+              self->onPropertyChanged(p);
+            }
+          });
+
+      // Ask sub classes to define their properties
+      defineProperties(_propsContainer.get());
+    }
+  }
+
   const char *_type;
   std::shared_ptr<RNSkPlatformContext> _context;
 

package/cpp/rnskia/dom/base/JsiDomRenderNode.h

@@ -132,19 +132,19 @@ public:
    */
   void resetPendingChanges() override { JsiDomNode::resetPendingChanges(); }
 
-  /**
-   Signal from the JS side that the node is removed from the dom.
-   */
-  void dispose() override { JsiDomNode::dispose(); }
-
 protected:
   /**
    Invalidates and marks then context as changed.
    */
   void invalidateContext() override {
-    enqueAsynOperation([=]() {
-      _paintCache.parent = nullptr;
-      _paintCache.child = nullptr;
+    enqueAsynOperation([weakSelf = weak_from_this()]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        std::static_pointer_cast<JsiDomRenderNode>(self)->_paintCache.parent =
+            nullptr;
+        std::static_pointer_cast<JsiDomRenderNode>(self)->_paintCache.child =
+            nullptr;
+      }
     });
   }
 

package/cpp/rnskia/dom/base/NodeProp.h

@@ -33,7 +33,7 @@ public:
     // readValueFromJS Function (which comes from the reconciler
     // setting a new property value on the property
     if (_value == nullptr) {
-      _value = std::make_shared<JsiValue>(runtime, read(runtime, _name, this));
+      _value = std::make_unique<JsiValue>(runtime, read(runtime, _name, this));
       _isChanged = true;
       _hasNewValue = false;
     } else {
@@ -41,7 +41,7 @@ public:
       std::lock_guard<std::mutex> lock(_swapMutex);
       if (_buffer == nullptr) {
         _buffer =
-            std::make_shared<JsiValue>(runtime, read(runtime, _name, this));
+            std::make_unique<JsiValue>(runtime, read(runtime, _name, this));
       } else {
         _buffer->setCurrent(runtime, read(runtime, _name, this));
       }
@@ -60,7 +60,7 @@ public:
     // and we don't want to rip out the underlying value object.
     std::lock_guard<std::mutex> lock(_swapMutex);
     if (_buffer == nullptr) {
-      _buffer = std::make_shared<JsiValue>(runtime, value);
+      _buffer = std::make_unique<JsiValue>(runtime, value);
     } else {
       _buffer->setCurrent(runtime, value);
     }
@@ -129,8 +129,8 @@ private:
 
   std::function<void(BaseNodeProp *)> _onChange;
 
-  std::shared_ptr<JsiValue> _value;
-  std::shared_ptr<JsiValue> _buffer;
+  std::unique_ptr<JsiValue> _value;
+  std::unique_ptr<JsiValue> _buffer;
   std::atomic<bool> _isChanged = {false};
   std::atomic<bool> _hasNewValue = {false};
   std::mutex _swapMutex;

package/cpp/rnskia/dom/base/NodePropsContainer.h

@@ -82,10 +82,16 @@ public:
   /**
    Called when the React / JS side sets properties on a node
    */
-  void setProps(jsi::Runtime &runtime, jsi::Object &&props) {
+  void setProps(jsi::Runtime &runtime, const jsi::Value &maybePropsObject) {
     // Clear property mapping
     _mappedProperties.clear();
 
+    if (!maybePropsObject.isObject()) {
+      throw jsi::JSError(runtime, "Expected property object.");
+    }
+
+    auto props = maybePropsObject.asObject(runtime);
+
     // Use specialized reader function to be able to intercept calls that
     // reads specific named values from the js property object.
     auto read = [&](jsi::Runtime &runtime, PropId name, NodeProp *prop) {

package/cpp/rnskia/dom/props/ClipProp.h

@@ -22,43 +22,36 @@ public:
   explicit ClipProp(PropId name,
                     const std::function<void(BaseNodeProp *)> &onChange)
       : BaseDerivedProp(onChange) {
-    _pathProp = defineProperty<PathProp>(name);
-    _rectProp = defineProperty<RectProp>(name);
-    _rrectProp = defineProperty<RRectProp>(name);
+    _clipProp = defineProperty<NodeProp>(name);
   }
 
   void updateDerivedValue() override {
-    if (_pathProp->isSet()) {
-      _rect = nullptr;
-      _rrect = nullptr;
-      _path = _pathProp->getDerivedValue();
-    } else if (_rrectProp->isSet()) {
-      _rect = nullptr;
-      _rrect = _rrectProp->getDerivedValue();
-      _path = nullptr;
-    } else if (_rectProp->isSet()) {
-      _rect = _rectProp->getDerivedValue();
+    if (_clipProp->isSet()) {
+      auto value = _clipProp->value();
+      _rect = RectProp::processRect(value);
       _rrect = nullptr;
       _path = nullptr;
+      if (!_rect) {
+        _path = PathProp::processPath(value);
+        if (!_path) {
+          _rrect = RRectProp::processRRect(value);
+        }
+      }
     }
   }
 
-  bool isSet() override {
-    return _pathProp->isSet() || _rectProp->isSet() || _rrectProp->isSet();
-  }
+  bool isSet() override { return _clipProp->isSet(); }
 
   const SkPath *getPath() { return _path.get(); }
   const SkRect *getRect() { return _rect.get(); }
   const SkRRect *getRRect() { return _rrect.get(); }
 
 private:
-  PathProp *_pathProp;
-  RectProp *_rectProp;
-  RRectProp *_rrectProp;
+  NodeProp *_clipProp;
 
   std::shared_ptr<const SkPath> _path;
   std::shared_ptr<const SkRect> _rect;
   std::shared_ptr<const SkRRect> _rrect;
 };
 
-} // namespace RNSkia
+} // namespace RNSkia

package/cpp/rnskia/dom/props/PathProp.h

@@ -22,32 +22,34 @@ public:
     _pathProp = defineProperty<NodeProp>(name);
   }
 
-  void updateDerivedValue() override {
-    if (!_pathProp->isSet()) {
-      setDerivedValue(nullptr);
-      return;
-    }
-
-    if (_pathProp->value().getType() == PropType::HostObject) {
+  static std::shared_ptr<SkPath> processPath(const JsiValue &value) {
+    if (value.getType() == PropType::HostObject) {
       // Try reading as Path
-      auto ptr = std::dynamic_pointer_cast<JsiSkPath>(
-          _pathProp->value().getAsHostObject());
+      auto ptr = std::dynamic_pointer_cast<JsiSkPath>(value.getAsHostObject());
       if (ptr != nullptr) {
-        setDerivedValue(ptr->getObject());
+        return ptr->getObject();
       }
-    } else if (_pathProp->value().getType() == PropType::String) {
+    } else if (value.getType() == PropType::String) {
       // Read as string
-      auto pathString = _pathProp->value().getAsString();
+      auto pathString = value.getAsString();
       SkPath result;
 
       if (SkParsePath::FromSVGString(pathString.c_str(), &result)) {
-        setDerivedValue(std::make_shared<SkPath>(result));
+        return std::make_shared<SkPath>(result);
       } else {
         throw std::runtime_error("Could not parse path from string.");
       }
-    } else {
+    }
+    return nullptr;
+  }
+
+  void updateDerivedValue() override {
+    if (!_pathProp->isSet()) {
       setDerivedValue(nullptr);
+      return;
     }
+    auto value = _pathProp->value();
+    setDerivedValue(PathProp::processPath(value));
   }
 
 private:

package/cpp/rnskia/dom/props/PointProp.h

@@ -29,7 +29,7 @@ public:
   void updateDerivedValue() override {
     if (_pointProp->isSet()) {
       // Check for JsiSkRect and JsiSkPoint
-      setDerivedValue(std::move(processValue(_pointProp->value())));
+      setDerivedValue(processValue(_pointProp->value()));
     } else {
       setDerivedValue(nullptr);
     }

package/cpp/rnskia/dom/props/RRectProp.h

@@ -33,35 +33,33 @@ public:
     _prop = defineProperty<NodeProp>(name);
   }
 
-  void updateDerivedValue() override {
-    if (_prop->isSet()) {
-      // Check for JsiSkRRect
-      if (_prop->value().getType() == PropType::HostObject) {
-        // Try reading as rect
-        auto rectPtr = std::dynamic_pointer_cast<JsiSkRRect>(
-            _prop->value().getAsHostObject());
-        if (rectPtr != nullptr) {
-          auto rrect = rectPtr->getObject();
-          setDerivedValue(SkRRect::MakeRectXY(
-              SkRect::MakeXYWH(rrect->rect().x(), rrect->rect().y(),
-                               rrect->rect().width(), rrect->rect().height()),
-              rrect->getSimpleRadii().x(), rrect->getSimpleRadii().y()));
-        }
-      } else {
-        if (_prop->isSet() && _prop->value().getType() == PropType::Object) {
-          auto p = _prop->value();
-          if (p.hasValue(PropNameX) && p.hasValue(PropNameY) &&
-              p.hasValue(PropNameWidth) && p.hasValue(PropNameHeight) &&
-              p.hasValue(PropNameRx) && p.hasValue(PropNameRy)) {
-            auto x = _prop->value().getValue(PropNameX);
-            auto y = _prop->value().getValue(PropNameY);
-            auto width = _prop->value().getValue(PropNameWidth);
-            auto height = _prop->value().getValue(PropNameHeight);
-            auto rx = _prop->value().getValue(PropNameRx);
-            auto ry = _prop->value().getValue(PropNameRy);
+  static std::shared_ptr<SkRRect> processRRect(const JsiValue &value) {
+    if (value.getType() == PropType::HostObject) {
+      // Try reading as rect
+      auto rectPtr =
+          std::dynamic_pointer_cast<JsiSkRRect>(value.getAsHostObject());
+      if (rectPtr != nullptr) {
+        auto rrect = rectPtr->getObject();
+        return std::make_shared<SkRRect>(
+            SkRRect::MakeRectXY(rrect->rect(), rrect->getSimpleRadii().x(),
+                                rrect->getSimpleRadii().y()));
+      }
+    } else {
+      if (value.getType() == PropType::Object) {
+        if (value.hasValue(PropNameRect) && value.hasValue(PropNameRx) &&
+            value.hasValue(PropNameRy)) {
+          auto rect = value.getValue(PropNameRect);
+          if (rect.hasValue(PropNameX) && rect.hasValue(PropNameY) &&
+              rect.hasValue(PropNameWidth) && rect.hasValue(PropNameHeight)) {
+            auto x = rect.getValue(PropNameX);
+            auto y = rect.getValue(PropNameY);
+            auto width = rect.getValue(PropNameWidth);
+            auto height = rect.getValue(PropNameHeight);
+            auto rx = value.getValue(PropNameRx);
+            auto ry = value.getValue(PropNameRy);
 
             // Update cache from js object value
-            setDerivedValue(SkRRect::MakeRectXY(
+            return std::make_shared<SkRRect>(SkRRect::MakeRectXY(
                 SkRect::MakeXYWH(x.getAsNumber(), y.getAsNumber(),
                                  width.getAsNumber(), height.getAsNumber()),
                 rx.getAsNumber(), ry.getAsNumber()));
@@ -69,6 +67,14 @@ public:
         }
       }
     }
+    return nullptr;
+  }
+
+  void updateDerivedValue() override {
+    if (_prop->isSet()) {
+      auto value = _prop->value();
+      setDerivedValue(RRectProp::processRRect(value));
+    }
   }
 
 private:
@@ -150,40 +156,12 @@ public:
   }
 
   void updateDerivedValue() override {
-    if (_boxProp->value().getType() == PropType::HostObject) {
-      auto rectPtr = std::dynamic_pointer_cast<JsiSkRect>(
-          _boxProp->value().getAsHostObject());
-      auto rrectPtr = std::dynamic_pointer_cast<JsiSkRRect>(
-          _boxProp->value().getAsHostObject());
-      // 1. box is SkRect
-      if (rectPtr != nullptr) {
-        auto rect = rectPtr->getObject();
-        setDerivedValue(SkRRect::MakeRect(*rect));
-        // 2. box is SkRRect
-      } else if (rrectPtr != nullptr) {
-        setDerivedValue(rrectPtr->getObject());
-      }
-    } else if (_boxProp->value().getType() == PropType::Object) {
-      if (_boxProp->value().hasValue(PropNameRect)) {
-        // 3. box is { rect: { x, y, width, height }, rx, ry }
-        auto rectProp = _boxProp->value().getValue(PropNameRect);
-        auto x = rectProp.getValue(PropNameX).getAsNumber();
-        auto y = rectProp.getValue(PropNameY).getAsNumber();
-        auto width = rectProp.getValue(PropNameWidth).getAsNumber();
-        auto height = rectProp.getValue(PropNameHeight).getAsNumber();
-        auto rx = _boxProp->value().getValue(PropNameRx).getAsNumber();
-        auto ry = _boxProp->value().getValue(PropNameRy).getAsNumber();
-        setDerivedValue(
-            SkRRect::MakeRectXY(SkRect::MakeXYWH(x, y, width, height), rx, ry));
-      } else {
-        // 4. box is { x, y, width, height }
-        auto x = _boxProp->value().getValue(PropNameX).getAsNumber();
-        auto y = _boxProp->value().getValue(PropNameY).getAsNumber();
-        auto width = _boxProp->value().getValue(PropNameWidth).getAsNumber();
-        auto height = _boxProp->value().getValue(PropNameHeight).getAsNumber();
-        setDerivedValue(
-            SkRRect::MakeRect(SkRect::MakeXYWH(x, y, width, height)));
-      }
+    auto value = _boxProp->value();
+    auto rect = RectProp::processRect(value);
+    if (rect) {
+      setDerivedValue(SkRRect::MakeRect(*rect));
+    } else {
+      setDerivedValue(RRectProp::processRRect(value));
     }
   }
 

package/cpp/rnskia/dom/props/RectProp.h

@@ -31,33 +31,35 @@ public:
     _prop = defineProperty<NodeProp>(name);
   }
 
+  static std::shared_ptr<SkRect> processRect(const JsiValue &value) {
+    if (value.getType() == PropType::HostObject) {
+      auto rectPtr =
+          std::dynamic_pointer_cast<JsiSkRect>(value.getAsHostObject());
+      if (rectPtr != nullptr) {
+        return std::make_shared<SkRect>(SkRect::MakeXYWH(
+            rectPtr->getObject()->x(), rectPtr->getObject()->y(),
+            rectPtr->getObject()->width(), rectPtr->getObject()->height()));
+      }
+    } else if (value.getType() == PropType::Object &&
+               value.hasValue(PropNameX) && value.hasValue(PropNameY) &&
+               value.hasValue(PropNameWidth) &&
+               value.hasValue(PropNameHeight)) {
+      // Save props for fast access
+      auto x = value.getValue(PropNameX);
+      auto y = value.getValue(PropNameY);
+      auto width = value.getValue(PropNameWidth);
+      auto height = value.getValue(PropNameHeight);
+      // Update cache from js object value
+      return std::make_shared<SkRect>(
+          SkRect::MakeXYWH(x.getAsNumber(), y.getAsNumber(),
+                           width.getAsNumber(), height.getAsNumber()));
+    }
+    return nullptr;
+  }
+
   void updateDerivedValue() override {
     if (_prop->isSet()) {
-      // Check for JsiSkRect
-      if (_prop->value().getType() == PropType::HostObject) {
-        auto rectPtr = std::dynamic_pointer_cast<JsiSkRect>(
-            _prop->value().getAsHostObject());
-        if (rectPtr != nullptr) {
-          setDerivedValue(SkRect::MakeXYWH(
-              rectPtr->getObject()->x(), rectPtr->getObject()->y(),
-              rectPtr->getObject()->width(), rectPtr->getObject()->height()));
-        }
-      } else {
-        auto p = _prop->value();
-        if (p.hasValue(PropNameX) && p.hasValue(PropNameY) &&
-            p.hasValue(PropNameWidth) && p.hasValue(PropNameHeight)) {
-          // Save props for fast access
-          auto x = p.getValue(PropNameX);
-          auto y = p.getValue(PropNameY);
-          auto width = p.getValue(PropNameWidth);
-          auto height = p.getValue(PropNameHeight);
-
-          // Update cache from js object value
-          setDerivedValue(SkRect::MakeXYWH(x.getAsNumber(), y.getAsNumber(),
-                                           width.getAsNumber(),
-                                           height.getAsNumber()));
-        }
-      }
+      setDerivedValue(RectProp::processRect(_prop->value()));
     }
   }
 

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -4,7 +4,6 @@
 #include <thread>
 #include <utility>
 
-#include <RNSkMeasureTime.h>
 #include <SkiaMetalRenderer.h>
 
 #pragma clang diagnostic push
@@ -20,7 +19,6 @@ void RNSkiOSPlatformContext::performStreamOperation(
     const std::string &sourceUri,
     const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) {
 
-  RNSkMeasureTime("PlatformContext::performStreamOperation");
   auto loader = [=]() {
     NSURL *url = [[NSURL alloc]
         initWithString:[NSString stringWithUTF8String:sourceUri.c_str()]];

package/lib/commonjs/views/SkiaBaseWebView.js

@@ -103,8 +103,12 @@ class SkiaBaseWebView extends _react.default.Component {
   }
 
   componentWillUnmount() {
+    var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
+
     this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
+    cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+
+    (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
   }
   /**
    * Creates a snapshot from the canvas in the surface

package/lib/commonjs/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    this._canvasRef.current\n      ?.getContext(\"webgl2\")\n      ?.getExtension(\"WEBGL_lose_context\")\n      ?.loseContext();\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/module/views/SkiaBaseWebView.js

@@ -92,8 +92,12 @@ export class SkiaBaseWebView extends React.Component {
   }
 
   componentWillUnmount() {
+    var _this$_canvasRef$curr, _this$_canvasRef$curr2, _this$_canvasRef$curr3;
+
     this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
+    cancelAnimationFrame(this.requestId); // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+
+    (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 ? void 0 : (_this$_canvasRef$curr2 = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr2 === void 0 ? void 0 : (_this$_canvasRef$curr3 = _this$_canvasRef$curr2.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr3 === void 0 ? void 0 : _this$_canvasRef$curr3.loseContext();
   }
   /**
    * Creates a snapshot from the canvas in the surface

package/lib/module/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","getContext","getExtension","loseContext","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    this._canvasRef.current\n      ?.getContext(\"webgl2\")\n      ?.getExtension(\"WEBGL_lose_context\")\n      ?.loseContext();\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":";;;;AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAIA,SAASC,YAAT,QAA6B,0BAA7B;AAGA,SAASC,SAAT,QAA0B,SAA1B;AAEA,MAAMC,EAAE,GAAGJ,UAAU,CAACK,GAAX,EAAX;AAEA,OAAO,MAAeC,eAAf,SAEGP,KAAK,CAACQ,SAFT,CAE2B;EAChCC,WAAW,CAACC,KAAD,EAAgB;IAAA;;IACzB,MAAMA,KAAN;;IADyB,kCAKa,IALb;;IAAA,0CAMmB,EANnB;;IAAA,kCAOU,EAPV;;IAAA,iCAQQ,IARR;;IAAA,iDASNV,KAAK,CAACW,SAAN,EATM;;IAAA;;IAAA,yCAWD,CAXC;;IAAA,mCAYP,CAZO;;IAAA,+BAcT,CAdS;;IAAA,gCAeR,CAfQ;;IAEzB,KAAKC,KAAL,kBAAaF,KAAK,CAACG,IAAnB,qDAA2B,SAA3B;EACD;;EAcOC,cAAc,GAAG;IACvB,KAAKC,gBAAL,CAAsBC,OAAtB,CAA+BC,CAAD,IAAOA,CAAC,EAAtC;;IACA,KAAKF,gBAAL,GAAwB,EAAxB;EACD;;EAEOG,QAAQ,CAACC,GAAD,EAAyB;IACvC,MAAM;MAAEC;IAAF,IAAgBC,MAAtB;IACA,MAAM;MAAEC,KAAF;MAASC;IAAT,IAAoBJ,GAAG,CAACK,WAAJ,CAAgBC,MAA1C;IACA,KAAKH,KAAL,GAAaA,KAAb;IACA,KAAKC,MAAL,GAAcA,MAAd,CAJuC,CAKvC;;IACA,IAAI,KAAKG,UAAL,CAAgBC,OAApB,EAA6B;MAC3B,MAAMC,MAAM,GAAG,KAAKF,UAAL,CAAgBC,OAA/B;MACAC,MAAM,CAACN,KAAP,GAAeA,KAAK,GAAGjB,EAAvB;MACAuB,MAAM,CAACL,MAAP,GAAgBA,MAAM,GAAGlB,EAAzB;MACA,MAAMwB,OAAO,GAAGT,SAAS,CAACU,sBAAV,CAAiC,KAAKJ,UAAL,CAAgBC,OAAjD,CAAhB;;MACA,IAAI,CAACE,OAAL,EAAc;QACZ,MAAM,IAAIE,KAAJ,CAAU,0BAAV,CAAN;MACD;;MACD,KAAKC,QAAL,GAAgB,IAAI7B,YAAJ,CAAiBiB,SAAjB,EAA4BS,OAA5B,CAAhB;MACA,KAAKI,OAAL,GAAe,KAAKD,QAAL,CAAcE,SAAd,EAAf;MACA,KAAKC,MAAL;IACD,CAjBsC,CAkBvC;;;IACA,IAAI,KAAKzB,KAAL,CAAWQ,QAAf,EAAyB;MACvB,KAAKR,KAAL,CAAWQ,QAAX,CAAoBC,GAApB;IACD;EACF;;EAESiB,OAAO,GAAG;IAClB,OAAO;MAAEd,KAAK,EAAE,KAAKA,KAAd;MAAqBC,MAAM,EAAE,KAAKA;IAAlC,CAAP;EACD;;EAEDc,iBAAiB,GAAG;IAClB;IACA,KAAKC,IAAL;EACD;;EAEDC,kBAAkB,GAAG;IACnB,KAAKJ,MAAL;EACD;;EAEDK,oBAAoB,GAAG;IAAA;;IACrB,KAAK1B,cAAL;IACA2B,oBAAoB,CAAC,KAAKC,SAAN,CAApB,CAFqB,CAGrB;;IACA,8BAAKhB,UAAL,CAAgBC,OAAhB,0GACIgB,UADJ,CACe,QADf,6GAEIC,YAFJ,CAEiB,oBAFjB,mFAGIC,WAHJ;EAID;EAED;AACF;AACA;AACA;AACA;;;EACSC,iBAAiB,CAACC,IAAD,EAAgB;IAAA;;IACtC,KAAKd,OAAL,CAAce,KAAd,CAAoB5B,SAAS,CAAC6B,WAA9B;;IACA,KAAKC,cAAL,CAAoB,KAAKjB,OAAzB,EAAmC,EAAnC;IACA,uBAAKD,QAAL,kEAAemB,GAAf,CAAmBC,KAAnB;IACA,0BAAO,KAAKpB,QAAZ,oDAAO,gBAAec,iBAAf,CAAiCC,IAAjC,CAAP;EACD;EAED;AACF;AACA;;;EAME;AACF;AACA;EACUT,IAAI,GAAG;IACb,IAAI,KAAK1B,KAAL,KAAe,YAAf,IAA+B,KAAKyC,eAAL,GAAuB,CAA1D,EAA6D;MAC3D,KAAKA,eAAL,GAAuB,CAAvB;;MACA,IAAI,KAAKpB,OAAT,EAAkB;QAAA;;QAChB,MAAMqB,OAAO,GAAG,CAAC,GAAG,KAAKC,QAAT,CAAhB;QACA,KAAKA,QAAL,GAAgB,EAAhB;QACA,MAAM3B,MAAM,GAAG,KAAKK,OAApB;QACAL,MAAM,CAACoB,KAAP,CAAaQ,YAAY,CAACC,EAAb,CAAgB,CAAhB,EAAmB,CAAnB,EAAsB,CAAtB,EAAyB,CAAzB,CAAb;QACA7B,MAAM,CAAC8B,IAAP;QACA9B,MAAM,CAAC+B,KAAP,CAAatD,EAAb,EAAiBA,EAAjB;QACA,KAAK6C,cAAL,CAAoBtB,MAApB,EAA4B0B,OAA5B;QACA1B,MAAM,CAACgC,OAAP;QACA,wBAAK5B,QAAL,oEAAemB,GAAf,CAAmBC,KAAnB;MACD;IACF;;IACD,KAAKV,SAAL,GAAiBmB,qBAAqB,CAAC,KAAKvB,IAAL,CAAUwB,IAAV,CAAe,IAAf,CAAD,CAAtC;EACD;;EAEM3B,MAAM,GAAG;IACd,KAAKkB,eAAL;EACD;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;EACSU,WAAW,CAAClD,IAAD,EAAiB;IACjC,KAAKD,KAAL,GAAaC,IAAb;IACA,KAAKyB,IAAL;EACD;EAED;AACF;AACA;AACA;AACA;;;EACS0B,cAAc,CAACC,OAAD,EAAgC;IACnD;IACA,KAAKnD,cAAL,GAFmD,CAGnD;;IACAmD,OAAO,CAACjD,OAAR,CAAiBkD,CAAD,IAAO;MACrB,KAAKnD,gBAAL,CAAsBoD,IAAtB,CACED,CAAC,CAACE,WAAF,CAAc,MAAM;QAClB,KAAKjC,MAAL;MACD,CAFD,CADF;IAKD,CAND;EAOD;;EAEOkC,gBAAgB,CAAClD,GAAD,EAAoBmD,SAApB,EAA0C;IAChE,KAAKf,QAAL,CAAcY,IAAd,CAAmB;MACjBI,EAAE,EAAEpD,GAAG,CAACqD,SADS;MAEjBC,CAAC,EAAEtD,GAAG,CAACuD,OAAJ,GAAcvD,GAAG,CAACwD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCC,IAFtC;MAGjBC,CAAC,EAAE3D,GAAG,CAAC4D,OAAJ,GAAc5D,GAAG,CAACwD,aAAJ,CAAkBC,cAAlB,GAAmC,CAAnC,EAAsCI,GAHtC;MAIjBC,KAAK,EAAE9D,GAAG,CAAC+D,QAJM;MAKjBC,IAAI,EAAEb,SALW;MAMjBc,SAAS,EAAEC,IAAI,CAACC,GAAL;IANM,CAAnB;;IAQA,KAAKnD,MAAL;EACD;;EAEDoD,kBAAkB,CAACjB,SAAD,EAAuB;IACvC,OAAQnD,GAAD,IAAuB,KAAKkD,gBAAL,CAAsBlD,GAAtB,EAA2BmD,SAA3B,CAA9B;EACD;;EAEDkB,MAAM,GAAG;IACP,MAAM;MAAE3E,IAAF;MAAQ4E,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKhF,KAAnD;IACA,oBACE,oBAAC,IAAD,eAAUgF,SAAV;MAAqB,QAAQ,EAAE,KAAKxE,QAAL,CAAc4C,IAAd,CAAmB,IAAnB;IAA/B,iBACE;MACE,GAAG,EAAE,KAAKpC,UADZ;MAEE,KAAK,EAAE;QAAEiE,OAAO,EAAE,MAAX;QAAmBC,IAAI,EAAE;MAAzB,CAFT;MAGE,aAAa,EAAE,KAAKL,kBAAL,CAAwBnF,SAAS,CAACyF,KAAlC,CAHjB;MAIE,aAAa,EAAE,KAAKN,kBAAL,CAAwBnF,SAAS,CAAC0F,MAAlC,CAJjB;MAKE,WAAW,EAAE,KAAKP,kBAAL,CAAwBnF,SAAS,CAAC2F,GAAlC,CALf;MAME,eAAe,EAAE,KAAKR,kBAAL,CAAwBnF,SAAS,CAAC4F,SAAlC,CANnB;MAOE,cAAc,EAAE,KAAKT,kBAAL,CAAwBnF,SAAS,CAAC2F,GAAlC,CAPlB;MAQE,YAAY,EAAE,KAAKR,kBAAL,CAAwBnF,SAAS,CAAC2F,GAAlC;IARhB,EADF,CADF;EAcD;;AAnL+B"}

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.180",
+  "version": "0.1.181",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/views/SkiaBaseWebView.tsx

@@ -78,6 +78,11 @@ export abstract class SkiaBaseWebView<
   componentWillUnmount() {
     this.unsubscribeAll();
     cancelAnimationFrame(this.requestId);
+    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
+    this._canvasRef.current
+      ?.getContext("webgl2")
+      ?.getExtension("WEBGL_lose_context")
+      ?.loseContext();
   }
 
   /**