fix(🧪): add support for explicit resource management

apps/docs/docs/getting-started/headless.md

@@ -26,8 +26,8 @@ import { Circle, drawOffscreen, getSkiaExports, Group, makeOffscreenSurface } fr
   // Once that CanvasKit is loaded, you can access Skia via getSkiaExports()
   // Alternatively you can do const {Skia} = require("@shopify/react-native-skia")
   const {Skia} = getSkiaExports();
-  const surface = makeOffscreenSurface(width, height);
-  const image = await drawOffscreen(surface,
+  using surface = makeOffscreenSurface(width, height);
+  using image = await drawOffscreen(surface,
     <Group blendMode="multiply">
       <Circle cx={r} cy={r} r={r} color="cyan" />
       <Circle cx={size - r} cy={r} r={r} color="magenta" />
@@ -39,9 +39,6 @@ import { Circle, drawOffscreen, getSkiaExports, Group, makeOffscreenSurface } fr
       />
     </Group>);
   console.log(image.encodeToBase64());
-  // Cleaning up CanvasKit resources
-  image.dispose();
-  surface.dispose();
 })();
 ```
 

apps/example/babel.config.js

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

apps/example/index.js

@@ -6,4 +6,8 @@ import { AppRegistry } from "react-native";
 import App from "./src/App";
 import { name as appName } from "./app.json";
 
+if (!Symbol.dispose) {
+  Symbol.dispose = Symbol.for("Symbol.dispose");
+}
+
 AppRegistry.registerComponent(appName, () => App);

apps/example/ios/Podfile.lock

@@ -2162,77 +2162,77 @@ SPEC CHECKSUMS:
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: eb93e2f488219332457c3c4eafd2738ddc7e80b8
   hermes-engine: b417d2b2aee3b89b58e63e23a51e02be91dc876d
-  RCT-Folly: 36fe2295e44b10d831836cc0d1daec5f8abcf809
+  RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: b2eecf2d60216df56bc5e6be5f063826d3c1ee35
   RCTRequired: 78522de7dc73b81f3ed7890d145fa341f5bb32ea
   RCTTypeSafety: c135dd2bf50402d87fd12884cbad5d5e64850edd
   React: b229c49ed5898dab46d60f61ed5a0bfa2ee2fadb
   React-callinvoker: 2ac508e92c8bd9cf834cc7d7787d94352e4af58f
-  React-Core: 13cdd1558d0b3f6d9d5a22e14d89150280e79f02
-  React-CoreModules: b07a6744f48305405e67c845ebf481b6551b712a
-  React-cxxreact: 1055a86c66ac35b4e80bd5fb766aed5f494dfff4
+  React-Core: 325b4f6d9162ae8b9a6ff42fe78e260eb124180d
+  React-CoreModules: 558041e5258f70cd1092f82778d07b8b2ff01897
+  React-cxxreact: 8fff17cbe76e6a8f9991b59552e1235429f9c74b
   React-debug: 0a5fcdbacc6becba0521e910c1bcfdb20f32a3f6
-  React-defaultsnativemodule: 4bb28fc97fee5be63a9ebf8f7a435cfe8ba69459
-  React-domnativemodule: b36a11c2597243d7563985028c51ece988d8ae33
-  React-Fabric: afc561718f25b2cd800b709d934101afe376a12c
-  React-FabricComponents: f4e0a4e18a27bf6d39cbf2a0b42f37a92fa4e37f
-  React-FabricImage: 37d8e8b672eda68a19d71143eb65148084efb325
+  React-defaultsnativemodule: 618dc50a0fad41b489997c3eb7aba3a74479fd14
+  React-domnativemodule: 7ba599afb6c2a7ec3eb6450153e2efe0b8747e9a
+  React-Fabric: 252112089d2c63308f4cbfade4010b6606db67d1
+  React-FabricComponents: 3c0f75321680d14d124438ab279c64ec2a3d13c4
+  React-FabricImage: 728b8061cdec2857ca885fd605ee03ad43ffca98
   React-featureflags: 19682e02ef5861d96b992af16a19109c3dfc1200
-  React-featureflagsnativemodule: d7cddf6d907b4e5ab84f9e744b7e88461656e48c
-  React-graphics: b0f78580cdaf5800d25437e3d41cc6c3d83b7aea
-  React-hermes: 71186f872c932e4574d5feb3ed754dda63a0b3bd
-  React-idlecallbacksnativemodule: dd2af19cdd3bc55149d17a2409ed72b694dfbe9c
-  React-ImageManager: a77dde8d5aa6a2b6962c702bf3a47695ef0aa32b
-  React-jserrorhandler: 9c14e89f12d5904257a79aaf84a70cd2e5ac07ba
-  React-jsi: 0775a66820496769ad83e629f0f5cce621a57fc7
-  React-jsiexecutor: 2cf5ba481386803f3c88b85c63fa102cba5d769e
-  React-jsinspector: 8052d532bb7a98b6e021755674659802fb140cc5
-  React-jsinspectortracing: bdd8fd0adcb4813663562e7874c5842449df6d8a
-  React-jsitracing: 2bab3bf55de3d04baf205def375fa6643c47c794
-  React-logger: 795cd5055782db394f187f9db0477d4b25b44291
-  React-Mapbuffer: 0502faf46cab8fb89cfc7bf3e6c6109b6ef9b5de
-  React-microtasksnativemodule: 663bc64e3a96c5fc91081923ae7481adc1359a78
-  react-native-safe-area-context: 286b3e7b5589795bb85ffc38faf4c0706c48a092
-  react-native-skia: 6be4bd020c4c2489aed4b2b24f9548e56b143d48
-  react-native-slider: 27263d134d55db948a4706f1e47d0ec88fb354dd
-  React-NativeModulesApple: 16fbd5b040ff6c492dacc361d49e63cba7a6a7a1
-  React-perflogger: ab51b7592532a0ea45bf6eed7e6cae14a368b678
-  React-performancetimeline: bc2e48198ec814d578ac8401f65d78a574358203
+  React-featureflagsnativemodule: 23528c7e7d50782b7ef0804168ba40bbaf1e86ab
+  React-graphics: fefe48f71bfe6f48fd037f59e8277b12e91b6be1
+  React-hermes: a9a0c8377627b5506ef9a7b6f60a805c306e3f51
+  React-idlecallbacksnativemodule: 7e2b6a3b70e042f89cd91dbd73c479bb39a72a7e
+  React-ImageManager: e3300996ac2e2914bf821f71e2f2c92ae6e62ae2
+  React-jserrorhandler: fa75876c662e5d7e79d6efc763fc9f4c88e26986
+  React-jsi: f3f51595cc4c089037b536368f016d4742bf9cf7
+  React-jsiexecutor: cca6c232db461e2fd213a11e9364cfa6fdaa20eb
+  React-jsinspector: 2bd4c9fddf189d6ec2abf4948461060502582bef
+  React-jsinspectortracing: a417d8a0ad481edaa415734b4dac81e3e5ee7dc6
+  React-jsitracing: 1ff7172c5b0522cbf6c98d82bdbb160e49b5804e
+  React-logger: 018826bfd51b9f18e87f67db1590bc510ad20664
+  React-Mapbuffer: 3c11cee7737609275c7b66bd0b1de475f094cedf
+  React-microtasksnativemodule: 843f352b32aacbe13a9c750190d34df44c3e6c2c
+  react-native-safe-area-context: 0f14bce545abcdfbff79ce2e3c78c109f0be283e
+  react-native-skia: 30909a8b54c5d383b5c424468e9824372199116e
+  react-native-slider: 310d3f89edd6ca8344a974bfe83a29a3fbb60e5a
+  React-NativeModulesApple: 88433b6946778bea9c153e27b671de15411bf225
+  React-perflogger: 9e8d3c0dc0194eb932162812a168aa5dc662f418
+  React-performancetimeline: 5a2d6efef52bdcefac079c7baa30934978acd023
   React-RCTActionSheet: 592674cf61142497e0e820688f5a696e41bf16dd
-  React-RCTAnimation: 8fbb8dba757b49c78f4db403133ab6399a4ce952
-  React-RCTAppDelegate: 7f88baa8cb4e5d6c38bb4d84339925c70c9ac864
-  React-RCTBlob: f89b162d0fe6b570a18e755eb16cbe356d3c6d17
-  React-RCTFabric: 8ad6d875abe6e87312cef90e4b15ef7f6bed72e6
-  React-RCTFBReactNativeSpec: 8c29630c2f379c729300e4c1e540f3d1b78d1936
-  React-RCTImage: ccac9969940f170503857733f9a5f63578e106e1
-  React-RCTLinking: d82427bbf18415a3732105383dff119131cadd90
-  React-RCTNetwork: 12ad4d0fbde939e00251ca5ca890da2e6825cc3c
-  React-RCTSettings: e7865bf9f455abf427da349c855f8644b5c39afa
-  React-RCTText: 2cdfd88745059ec3202a0842ea75a956c7d6f27d
-  React-RCTVibration: a3a1458e6230dfd64b3768ebc0a4aac430d9d508
+  React-RCTAnimation: e6d669872f9b3b4ab9527aab283b7c49283236b7
+  React-RCTAppDelegate: de2343fe08be4c945d57e0ecce44afcc7dd8fc03
+  React-RCTBlob: 3e2dce94c56218becc4b32b627fc2293149f798d
+  React-RCTFabric: cac2c033381d79a5956e08550b0220cb2d78ea93
+  React-RCTFBReactNativeSpec: d10ca5e0ccbfeac8c047361fedf8e4ac653887b6
+  React-RCTImage: dc04b176c022d12a8f55ae7a7279b1e091066ae0
+  React-RCTLinking: 88f5e37fe4f26fbc80791aa2a5f01baf9b9a3fd5
+  React-RCTNetwork: f213693565efbd698b8e9c18d700a514b49c0c8e
+  React-RCTSettings: a2d32a90c45a3575568cad850abc45924999b8a5
+  React-RCTText: 54cdcd1cbf6f6a91dc6317f5d2c2b7fc3f6bf7a0
+  React-RCTVibration: 11dae0e7f577b5807bb7d31e2e881eb46f854fd4
   React-rendererconsistency: 64e897e00d2568fd8dfe31e2496f80e85c0aaad1
-  React-rendererdebug: a3f6d3ae7d2fa0035885026756281c07ee32479e
+  React-rendererdebug: 41ce452460c44bba715d9e41d5493a96de277764
   React-rncore: 58748c2aa445f56b99e5118dad0aedb51c40ce9f
-  React-RuntimeApple: f0fda7bacabd32daa099cfda8f07466c30acd149
-  React-RuntimeCore: 683ee0b6a76d4b4bf6fbf83a541895b4887cc636
+  React-RuntimeApple: 7785ed0d8ae54da65a88736bb63ca97608a6d933
+  React-RuntimeCore: 6029ea70bc77f98cfd43ebe69217f14e93ba1f12
   React-runtimeexecutor: a188df372373baf5066e6e229177836488799f80
-  React-RuntimeHermes: 907c8e9bec13ea6466b94828c088c24590d4d0b6
-  React-runtimescheduler: a2e2a39125dd6426b5d8b773f689d660cd7c5f60
+  React-RuntimeHermes: a264609c28b796edfffc8ae4cb8fad1773ab948b
+  React-runtimescheduler: 23ec3a1e0fb1ec752d1a9c1fb15258c30bfc7222
   React-timing: bb220a53a795ed57976a4855c521f3de2f298fe5
-  React-utils: 300d8bbb6555dcffaca71e7a0663201b5c7edbbc
-  ReactAppDependencyProvider: f2e81d80afd71a8058589e19d8a134243fa53f17
-  ReactCodegen: 50b6e45bbbef9b39d9798820cdbe87bfc7922e22
-  ReactCommon: 3d39389f8e2a2157d5c999f8fba57bd1c8f226f0
-  ReactNativeHost: e96154926221741f253f2c1ded13c6959c5c3d43
-  ReactTestApp-DevSupport: 6994b53b5b81139a8ce63e0776c726c95de079a1
+  React-utils: 3b054aaebe658fc710a8d239d0e4b9fd3e0b78f9
+  ReactAppDependencyProvider: a1fb08dfdc7ebc387b2e54cfc9decd283ed821d8
+  ReactCodegen: e232f8db3a40721044ec81b9388f95a7afaad36a
+  ReactCommon: 0c097b53f03d6bf166edbcd0915da32f3015dd90
+  ReactNativeHost: 1b6ccdcfc87bb31e772a5b3c3ca3b09c90954328
+  ReactTestApp-DevSupport: ea18f446cff64b6c9a3e28788600c82ecf51bde6
   ReactTestApp-Resources: 1bd9ff10e4c24f2ad87101a32023721ae923bccf
-  RNGestureHandler: 66e593addd8952725107cfaa4f5e3378e946b541
-  RNReanimated: 858fe25904af44131b8b608a5005b64778609a6a
-  RNScreens: 0f01bbed9bd8045a8d58e4b46993c28c7f498f3c
-  RNSVG: 8588ee1ca9b2e6fd2c99466e35b3db0e9f81bb40
+  RNGestureHandler: dcb1b1db024f3744b03af56d132f4f72c4c27195
+  RNReanimated: d5f33d14a4d1da33a02d89124de233a64b3aaeaa
+  RNScreens: 790123c4a28783d80a342ce42e8c7381bed62db1
+  RNSVG: 8126581b369adf6a0004b6a6cab1a55e3002d5b0
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  Yoga: 9b7fb56e7b08cde60e2153344fa6afbd88e5d99f
+  Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
 
 PODFILE CHECKSUM: 87506345285a0371afb28b9c3e6daaa999c214f3
 
-COCOAPODS: 1.15.2
+COCOAPODS: 1.16.2

apps/example/jest.config.js → apps/example/jest.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+const config = {
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   moduleNameMapper: {
     "^.+.(css|styl|less|sass|scss|png|jpg|ttf|otf|woff|woff2)$":
@@ -17,3 +17,5 @@ module.exports = {
     "node_modules/(?!(@react-native|react-native|react-native.*|@?react-navigation.*)/)",
   ],
 };
+
+export default config;

apps/example/package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@babel/plugin-proposal-explicit-resource-management": "^7.27.4",
     "@babel/preset-env": "^7.25.3",
     "@babel/runtime": "^7.25.0",
     "@react-native-community/cli": "15.0.1",

apps/example/src/Tests/Tests.tsx

@@ -42,6 +42,8 @@ export const Tests = ({ assets }: TestsProps) => {
             JSON.stringify(
               eval(
                 `(function Main() {
+                  const __addDisposableResource = (e, o) => { return o; };
+                  const __disposeResources = () => {};
                   return (${tree.code})(this.Skia, this.ctx, this.size, this.scale);
                 })`
               ).call({

apps/remotion/babel.config.js

@@ -6,4 +6,4 @@ module.exports = {
   plugins: [
     "@babel/plugin-transform-flow-strip-types"
   ]
-};
+};

packages/skia/.babelrc

@@ -27,6 +27,7 @@
     "@babel/preset-flow"
   ],
   "plugins": [
+    "@babel/plugin-transform-explicit-resource-management",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-nullish-coalescing-operator"
   ]

packages/skia/apple/SkiaCVPixelBufferUtils.mm

@@ -30,16 +30,12 @@
 #include <TargetConditionals.h>
 #if TARGET_RT_BIG_ENDIAN
 #define FourCC2Str(fourcc)                                                     \
-  (const char[]) {                                                             \
-    *((char *)&fourcc), *(((char *)&fourcc) + 1), *(((char *)&fourcc) + 2),    \
-        *(((char *)&fourcc) + 3), 0                                            \
-  }
+  (const char[]){*((char *)&fourcc), *(((char *)&fourcc) + 1),                 \
+                 *(((char *)&fourcc) + 2), *(((char *)&fourcc) + 3), 0}
 #else
 #define FourCC2Str(fourcc)                                                     \
-  (const char[]) {                                                             \
-    *(((char *)&fourcc) + 3), *(((char *)&fourcc) + 2),                        \
-        *(((char *)&fourcc) + 1), *(((char *)&fourcc) + 0), 0                  \
-  }
+  (const char[]){*(((char *)&fourcc) + 3), *(((char *)&fourcc) + 2),           \
+                 *(((char *)&fourcc) + 1), *(((char *)&fourcc) + 0), 0}
 #endif
 
 // pragma MARK: TextureHolder

packages/skia/cpp/jsi/JsiHostObject.cpp

@@ -24,6 +24,12 @@ 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);
@@ -77,6 +83,16 @@ jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
     return (prop.get)(runtime);
   }
 
+  // Check for dispose symbol as last resort
+  static const auto disposeSymbol = jsi::PropNameID::forSymbol(
+      runtime,
+      eval(runtime, "Symbol.for('Symbol.dispose');").getSymbol(runtime));
+  if (jsi::PropNameID::compare(runtime, disposeSymbol, name)) {
+    // Recursively call get with "dispose" string
+    auto disposeName = jsi::PropNameID::forAscii(runtime, "dispose");
+    return get(runtime, disposeName);
+  }
+
   return jsi::Value::undefined();
 }
 

packages/skia/jest.config.js

@@ -1,4 +1,3 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "node",
@@ -14,4 +13,4 @@ module.exports = {
   globals: {},
   globalSetup: "<rootDir>/src/__tests__/globalSetup.ts",
   globalTeardown: "<rootDir>/src/__tests__/globalTeardown.ts",
-};
+};

packages/skia/package.json

@@ -43,14 +43,14 @@
     "release": "semantic-release",
     "build": "bob build && merge-dirs lib/typescript/src lib/commonjs && merge-dirs lib/typescript/src lib/module",
     "clean-skia": "yarn rimraf ./libs && yarn rimraf ../../externals/skia/out",
-    "build-skia": "ts-node ./scripts/build-skia.ts",
-    "copy-skia-headers": "ts-node ./scripts/copy-skia-headers.ts",
-    "install-skia": "ts-node ./scripts/download-artifacts.ts && yarn copy-skia-headers",
+    "build-skia": "tsx ./scripts/build-skia.ts",
+    "copy-skia-headers": "tsx ./scripts/copy-skia-headers.ts",
+    "install-skia": "tsx ./scripts/download-artifacts.ts && yarn copy-skia-headers",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
     "clang-format-ios": "find apple/ -iname '*.h' -o -iname '*.mm' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-android": "find android/cpp/ -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' | xargs clang-format -i",
     "clang-format-common": "find cpp/ \\( -path 'cpp//skia' -prune \\) -o \\( -iname '*.h' -o -iname '*.m' -o -iname '*.cpp' \\) -print | xargs clang-format -i",
-    "workflow-copy-libs": "yarn ts-node ./scripts/workflow-copy-libs.ts",
+    "workflow-copy-libs": "tsx ./scripts/workflow-copy-libs.ts",
     "cpplint": "cpplint --linelength=230 --filter=-legal/copyright,-whitespace/indent,-whitespace/comments,-whitespace/ending_newline,-build/include_order,-runtime/references,-readability/todo,-whitespace/blank_line,-whitespace/todo,-runtime/int,-build/c++11,-whitespace/parens --exclude=package/cpp/skia --exclude=package/ios --exclude=package/android/build --exclude=package/node_modules --recursive package"
   },
   "repository": {
@@ -90,11 +90,12 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/exec": "^7.0.3",
     "@semantic-release/github": "^10.3.3",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@types/jest": "29.5.6",
+    "@types/jest": "30.0.0",
     "@types/pixelmatch": "5.2.4",
     "@types/pngjs": "6.0.1",
     "@types/react": "^19.0.0",
@@ -104,7 +105,7 @@
     "eslint-config-react-native-wcandillon": "4.0.1",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "jest": "29.6.4",
+    "jest": "30.0.0",
     "jest-diff": "29.7.0",
     "merge-dirs": "0.2.1",
     "pixelmatch": "5.3.0",
@@ -117,8 +118,8 @@
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
-    "ts-jest": "29.1.1",
-    "ts-node": "^10.9.2",
+    "ts-jest": "29.4.3",
+    "tsx": "^4.20.5",
     "typescript": "^5.2.2",
     "ws": "8.18.0"
   },

packages/skia/scripts/setup-canvaskit.js

@@ -48,7 +48,7 @@ function getWetherItsAnExpoProjectWithMetro() {
     const isAnExpoProjectWithMetro =
       appJson.expo && appJson.expo.web && appJson.expo.web.bundler === "metro";
     if (isAnExpoProjectWithMetro) {
-      console.log(`  ${gray(`Expo project with metro bundler detected`)}\n`);
+      console.log(`  ${gray("Expo project with metro bundler detected")}\n`);
       return true;
     } else {
       console.log(
@@ -57,7 +57,7 @@ function getWetherItsAnExpoProjectWithMetro() {
       return false;
     }
   } catch (error) {
-    console.log(`  ${gray(`No Expo settings found`)}\n`);
+    console.log(`  ${gray("No Expo settings found")}\n`);
     return false;
   }
 }
@@ -67,7 +67,8 @@ function getWasmFilePath() {
     return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
   } catch (error) {
     console.error(
-      `Could not find 'canvaskit-wasm'. Please install '@shopify/react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
+      `Could not find 'canvaskit-wasm'.
+Please install '@shopify/react-native-skia' and ensure it can be resolved from your project: ${process.cwd()}`
     );
     process.exit(1);
   }
@@ -103,7 +104,8 @@ function copyFile(from, to) {
   console.log(lime("› Success! You are almost there:"));
   console.log(
     gray(
-      "› To load React Native Skia Web, follow these instructions : https://shopify.github.io/react-native-skia/docs/getting-started/web"
+      `› To load React Native Skia Web,
+follow these instructions: https://shopify.github.io/react-native-skia/docs/getting-started/web`
     )
   );
 })();

packages/skia/src/__tests__/setup.ts

@@ -23,10 +23,9 @@ export const processResult = (
   overwrite = false
 ) => {
   surface.flush();
-  const image = surface.makeImageSnapshot();
+  using image = surface.makeImageSnapshot();
   surface.getCanvas().clear(Float32Array.of(0, 0, 0, 0));
   const result = checkImage(image, relPath, { overwrite });
-  image.dispose();
   return result;
 };