Cleanup

Author: iwoplaza

apps/example/package.json

@@ -29,7 +29,7 @@
     "react-native": "0.79.2",
     "react-native-gesture-handler": "^2.17.1",
     "react-native-macos": "^0.78.3",
-    "react-native-reanimated": "^3.17.5",
+    "react-native-reanimated": "^3.12.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-wgpu": "*",
     "teapot": "^1.0.0",

apps/example/src/Triangle/HelloTriangle.tsx

@@ -4,20 +4,16 @@ import { Canvas, useCanvasEffect } from "react-native-wgpu";
 
 import { redFragWGSL, triangleVertWGSL } from "./triangle";
 
-const onAbort = (signal: AbortSignal, cb: () => unknown) => {
-  signal.addEventListener('abort', cb);
-}
-
 export function HelloTriangle() {
   const ref = useCanvasEffect(useCallback(async (signal) => {
     const adapter = await navigator.gpu.requestAdapter();
     if (!adapter) {
       throw new Error("No adapter");
     }
     const device = await adapter.requestDevice();
-    onAbort(signal, () => device.destroy());
 
     if (signal.aborted) {
+      device.destroy();
       return;
     }
 
@@ -29,6 +25,7 @@ export function HelloTriangle() {
     canvas.height = canvas.clientHeight * PixelRatio.get();
 
     if (!context) {
+      device.destroy();
       throw new Error("No context");
     }
 
@@ -85,6 +82,7 @@ export function HelloTriangle() {
     device.queue.submit([commandEncoder.finish()]);
 
     context.present();
+    device.destroy();
   }, []));
 
   return (

packages/webgpu/src/Canvas.tsx

@@ -11,7 +11,7 @@ import {
 import type { RefObject } from "react";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
-import { useSignal } from "./useSignal";
+import { useImmediate } from "./useImmediate";
 
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
@@ -61,7 +61,7 @@ interface Size {
 }
 
 const useSizeFabric = (ref: RefObject<View>, onSizeChange: (v: Size) => void) => {
-  const [sizeSignal] = useSignal<null | Size>(null);
+  const [sizeSignal] = useImmediate<null | Size>(null);
   useLayoutEffect(() => {
     if (!ref.current) {
       throw new Error("Canvas ref is null");
@@ -76,7 +76,7 @@ const useSizeFabric = (ref: RefObject<View>, onSizeChange: (v: Size) => void) =>
 };
 
 const useSizePaper = (_ref: RefObject<View>, onSizeChange: (v: Size) => void) => {
-  const [sizeSignal] = useSignal<null | Size>(null);
+  const [sizeSignal] = useImmediate<null | Size>(null);
   const onLayout = useCallback<(event: LayoutChangeEvent) => void>(
     ({
       nativeEvent: {

packages/webgpu/src/useSignal.ts packages/webgpu/src/useImmediate.tspackages/webgpu/src/useSignal.ts renamed to packages/webgpu/src/useImmediate.ts

@@ -1,6 +1,6 @@
 import { useReducer, useState } from "react";
 
-export interface Signal<T> {
+export interface Immediate<T> {
   /** Get latest value */
   get(): T;
   set(value: T): void;
@@ -10,12 +10,12 @@ function emptyReducer<T>(value: T): T {
   return value;
 }
 
-interface CreateSignalOptions<T> {
-  initialValue: T;
+interface CreateImmediateOptions<T> {
+  readonly initialValue: T;
   setValue(v: T): void;
 }
 
-function createSignal<T>(options: CreateSignalOptions<T>): Signal<T> {
+function createImmediate<T>(options: CreateImmediateOptions<T>): Immediate<T> {
   let value = options.initialValue;
 
   return {
@@ -30,17 +30,17 @@ function createSignal<T>(options: CreateSignalOptions<T>): Signal<T> {
 }
 
 /**
- * A replacement for `useState` that returns a "Signal", which in this case is an object
- * that allows to read the latest value, and to write a new value. It's object identity
+ * A replacement for `useState` that returns an "Immediate", which in this case is an object
+ * that allows to read the latest value, and to write a new value. Its object identity
  * is stable, and does not change when writing a new value. That also means that it's
  * not reactive (you can't depend on it in useMemo or useEffect). For that, use the
  * second value from the returned tuple.
  * @param initialValue 
  * @returns 
  */
-export function useSignal<T>(initialValue: T): [Signal<T>, T] {
+export function useImmediate<T>(initialValue: T): [Immediate<T>, T] {
   const [value, setValue] = useState(initialValue);
-  const [signal] = useReducer(emptyReducer<Signal<T>>, { initialValue, setValue }, createSignal<T>);
+  const [immediate] = useReducer(emptyReducer<Immediate<T>>, { initialValue, setValue }, createImmediate<T>);
 
-  return [signal, value] as const;
+  return [immediate, value] as const;
 }