Add support of explicit resource management

example/babel.config.js

@@ -3,5 +3,6 @@ module.exports = {
   plugins: [
     "transform-inline-environment-variables",
     "react-native-reanimated/plugin",
+    "@babel/plugin-proposal-explicit-resource-management",
   ],
 };

example/index.js

@@ -1,6 +1,10 @@
 /**
  * @format
  */
+if (!Symbol.dispose) {
+  Symbol.dispose = Symbol.for("Symbol.dispose");
+}
+
 import { AppRegistry } from "react-native";
 
 import App from "./src/App";

example/package.json

@@ -38,9 +38,10 @@
     "react-native-web": "^0.18.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-proposal-explicit-resource-management": "^7.23.3",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/runtime": "^7.23.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@testing-library/react-native": "12.1.1",
     "@tsconfig/react-native": "^2.0.2",

example/tsconfig.json

@@ -2,5 +2,10 @@
   "extends": "eslint-config-react-native-wcandillon/tsconfig.base",
   "compilerOptions": {
     "noUncheckedIndexedAccess": false,
+    "lib": [
+      "dom",
+      "es2019",
+      "esnext.disposable"
+    ],
   }
 }

package/cpp/api/JsiSkHostObjects.h

@@ -4,6 +4,7 @@
 #include <utility>
 
 #include "JsiHostObject.h"
+#include "RNSkLog.h"
 #include "RNSkPlatformContext.h"
 
 namespace RNSkia {

package/cpp/jsi/JsiHostObject.cpp

@@ -1,7 +1,9 @@
-#include <JsiHostObject.h>
 #include <functional>
 #include <vector>
 
+#include <JsiHostObject.h>
+#include <RNSkLog.h>
+
 // To be able to find objects that aren't cleaned up correctly,
 // we can set this value to 1 and debug the constructor/destructor
 #define JSI_DEBUG_ALLOCATIONS 0
@@ -51,9 +53,20 @@ void JsiHostObject::set(jsi::Runtime &rt, const jsi::PropNameID &name,
   }
 }
 
+jsi::Value eval(jsi::Runtime &runtime, const std::string &js) {
+  return runtime.global()
+      .getPropertyAsFunction(runtime, "eval")
+      .call(runtime, js);
+}
+
 jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
                               const jsi::PropNameID &name) {
-  auto nameStr = name.utf8(runtime);
+  static const auto disposeSymbol = jsi::PropNameID::forSymbol(
+      runtime,
+      eval(runtime, "Symbol.for('Symbol.dispose');").getSymbol(runtime));
+  auto nameStr = jsi::PropNameID::compare(runtime, disposeSymbol, name)
+                     ? "dispose"
+                     : name.utf8(runtime);
 
   // Happy path - cached host functions are cheapest to look up
   const JsiFunctionMap &funcs = getExportedFunctionMap();

package/src/skia/types/JsiInstance.ts

@@ -1,4 +1,4 @@
-export interface SkJSIInstance<T extends string> {
+export interface SkJSIInstance<T extends string> extends Disposable {
   __typename__: T;
   dispose(): void;
 }

package/tsconfig.json

@@ -3,7 +3,8 @@
     "target": "esnext",
     "lib": [
       "dom",
-      "es2019"
+      "es2019",
+      "esnext.disposable"
     ],
     "allowJs": true,
     "skipLibCheck": true,