react-native-wgpu 0.1.8 → 0.1.9

package/ios/MetalView.mm

@@ -24,4 +24,15 @@
   }
 }
 
+- (void)willMoveToSuperview:(UIView *)newSuperview {
+  [super willMoveToSuperview:newSuperview];
+
+  if (newSuperview == nil) {
+    // The view is being removed from its superview
+    // Add your cleanup code here
+    [SurfaceUtils cleanupSurface:[_contextId intValue]];
+    _isConfigured = NO;
+  }
+}
+
 @end

package/ios/SurfaceUtils.h

@@ -10,4 +10,6 @@
 
 + (void)updateSurface:(int)contextId size:(CGSize)size;
 
++ (void)cleanupSurface:(int)contextId;
+
 @end

package/ios/SurfaceUtils.mm

@@ -11,13 +11,25 @@
                contextId:(int)contextId {
   std::shared_ptr<rnwgpu::RNWebGPUManager> manager = [WebGPUModule getManager];
   void *nativeSurface = (__bridge void *)layer;
-  manager->surfacesRegistry.addSurface(contextId, nativeSurface, size.width,
-                                       size.height);
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  registry.createSurface(contextId, nativeSurface, size.width, size.height,
+                         manager->_platformContext);
 }
 
 + (void)updateSurface:(int)contextId size:(CGSize)size {
-  std::shared_ptr<rnwgpu::RNWebGPUManager> manager = [WebGPUModule getManager];
-  manager->surfacesRegistry.updateSurface(contextId, size.width, size.height);
+  // std::shared_ptr<rnwgpu::RNWebGPUManager> manager = [WebGPUModule
+  // getManager];
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  auto info = registry.getSurface(contextId);
+  info.width = size.width;
+  info.height = size.height;
+  registry.setSize(contextId, size.width, size.height);
+}
+
++ (void)cleanupSurface:(int)contextId {
+  auto &registry = rnwgpu::SurfaceRegistry::getInstance();
+  // Remove the surface info from the registry
+  registry.removeSurface(contextId);
 }
 
 @end

package/ios/WebGPUModule.mm

@@ -74,31 +74,14 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install) {
   return @true;
 }
 
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(createSurfaceContext
-                                       : (double)contextId) {
-  int contextIdInt = contextId;
-  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
-  auto runtime = (jsi::Runtime *)cxxBridge.runtime;
-  auto webGPUContextRegistry = runtime->global().getPropertyAsObject(
-      *runtime, "__WebGPUContextRegistry");
-  auto canvas = webgpuManager->surfacesRegistry.getSurface(contextIdInt);
-  if (webGPUContextRegistry.hasProperty(*runtime,
-                                        std::to_string(contextIdInt).c_str())) {
-    // Context already exists, just update width/height
-    auto prop =
-        webGPUContextRegistry
-            .getPropertyAsObject(*runtime, std::to_string(contextIdInt).c_str())
-            .asHostObject<rnwgpu::Canvas>(*runtime);
-    prop->setWidth(canvas->getWidth());
-    prop->setHeight(canvas->getHeight());
-    return @true;
-  }
-  webGPUContextRegistry.setProperty(
-      *runtime, std::to_string(contextIdInt).c_str(),
-      facebook::jsi::Object::createFromHostObject(*runtime, canvas));
-
-  return @true;
-}
+// RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(createSurfaceContext
+//                                        : (double)contextId) {
+//   int contextIdInt = contextId;
+//   RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
+//   auto runtime = (jsi::Runtime *)cxxBridge.runtime;
+
+//   return @true;
+// }
 
 #ifdef RCT_NEW_ARCH_ENABLED
 - (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:

package/ios/WebGPUView.mm

@@ -50,18 +50,21 @@ static NSMutableDictionary<NSNumber *, MetalView *> *metalViewRegistry =
   [super prepareForRecycle];
   self.contentView = nil;
   if ([metalViewRegistry objectForKey:_contextId] != nil) {
-   [metalViewRegistry removeObjectForKey:_contextId];
+    [metalViewRegistry removeObjectForKey:_contextId];
   }
 }
 
-- (void)updateProps:(const facebook::react::Props::Shared &)props oldProps:(const facebook::react::Props::Shared &)oldProps {
-  const auto &oldViewProps = *std::static_pointer_cast<const WebGPUViewProps>(_props);
-  const auto &newViewProps = *std::static_pointer_cast<const WebGPUViewProps>(props);
-  
+- (void)updateProps:(const facebook::react::Props::Shared &)props
+           oldProps:(const facebook::react::Props::Shared &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(_props);
+  const auto &newViewProps =
+      *std::static_pointer_cast<const WebGPUViewProps>(props);
+
   if (newViewProps.contextId != oldViewProps.contextId) {
     _contextId = [[NSNumber alloc] initWithInt:newViewProps.contextId];
   }
-  
+
   [super updateProps:props oldProps:oldProps];
 }
 

package/lib/commonjs/Canvas.js

@@ -4,43 +4,104 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Canvas = void 0;
+var _reactNative = require("react-native");
 var _react = require("react");
 var _WebGPUViewNativeComponent = _interopRequireDefault(require("./WebGPUViewNativeComponent"));
-var _NativeWebGPUModule = _interopRequireDefault(require("./NativeWebGPUModule"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
   return CONTEXT_COUNTER++;
 }
-global.__WebGPUContextRegistry = {};
-const WebGPUContextRegistry = global.__WebGPUContextRegistry;
-const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+const useSizeFabric = ref => {
+  const [size, setSize] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (!ref.current) {
+      throw new Error("Canvas ref is null");
+    }
+    ref.current.measureInWindow((_x, _y, width, height) => {
+      setSize({
+        width,
+        height
+      });
+    });
+  }, [ref]);
+  return {
+    size,
+    onLayout: undefined
+  };
+};
+const useSizePaper = _ref => {
+  const [size, setSize] = (0, _react.useState)(null);
+  const onLayout = (0, _react.useCallback)(({
+    nativeEvent: {
+      layout: {
+        width,
+        height
+      }
+    }
+  }) => {
+    if (size === null) {
+      setSize({
+        width,
+        height
+      });
+    }
+  }, [size]);
+  return {
+    size,
+    onLayout
+  };
+};
+const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
+  onLayout: _onLayout,
+  ...props
+}, ref) => {
+  const viewRef = (0, _react.useRef)(null);
+  const FABRIC = RNWebGPU.fabric;
+  const useSize = FABRIC ? useSizeFabric : useSizePaper;
   const [contextId, _] = (0, _react.useState)(() => generateContextId());
+  const cb = (0, _react.useRef)();
+  const {
+    size,
+    onLayout
+  } = useSize(viewRef);
+  (0, _react.useEffect)(() => {
+    if (size && cb.current) {
+      cb.current();
+    }
+  }, [size]);
   (0, _react.useImperativeHandle)(ref, () => ({
     getNativeSurface: () => {
-      _NativeWebGPUModule.default.createSurfaceContext(contextId);
-      return WebGPUContextRegistry[contextId];
+      if (size === null) {
+        throw new Error("[WebGPU] Canvas size is not available yet");
+      }
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    whenReady(callback) {
+      if (size === null) {
+        cb.current = callback;
+      } else {
+        callback();
+      }
     },
     getContext(contextName) {
       if (contextName !== "webgpu") {
         throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
       }
-      _NativeWebGPUModule.default.createSurfaceContext(contextId);
-      const nativeSurface = WebGPUContextRegistry[contextId];
-      if (!nativeSurface) {
-        return null;
+      if (size === null) {
+        throw new Error("[WebGPU] Canvas size is not available yet");
       }
-      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
-      return ctx;
+      return RNWebGPU.MakeWebGPUCanvasContext(contextId, size.width, size.height);
     }
   }));
-  (0, _react.useEffect)(() => {
-    return () => {
-      delete WebGPUContextRegistry[contextId];
-    };
-  }, [contextId]);
-  return /*#__PURE__*/React.createElement(_WebGPUViewNativeComponent.default, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
+    ref: viewRef,
+    onLayout: onLayout
+  }, props), /*#__PURE__*/React.createElement(_WebGPUViewNativeComponent.default, {
+    style: {
+      flex: 1
+    },
     contextId: contextId
   }));
 });

package/lib/commonjs/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_WebGPUViewNativeComponent","_interopRequireDefault","_NativeWebGPUModule","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","CONTEXT_COUNTER","generateContextId","global","__WebGPUContextRegistry","WebGPUContextRegistry","Canvas","exports","forwardRef","props","ref","contextId","_","useState","useImperativeHandle","getNativeSurface","WebGPUNativeModule","createSurfaceContext","getContext","contextName","Error","nativeSurface","ctx","RNWebGPU","MakeWebGPUCanvasContext","useEffect","React","createElement"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,0BAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,mBAAA,GAAAD,sBAAA,CAAAF,OAAA;AAAsD,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAEtD,IAAIO,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AAwBAE,MAAM,CAACC,uBAAuB,GAAG,CAAC,CAAC;AACnC,MAAMC,qBAAqB,GAAGF,MAAM,CAACC,uBAAuB;AAWrD,MAAME,MAAM,GAAAC,OAAA,CAAAD,MAAA,gBAAG,IAAAE,iBAAU,EAAuB,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrE,MAAM,CAACC,SAAS,EAAEC,CAAC,CAAC,GAAG,IAAAC,eAAQ,EAAC,MAAMX,iBAAiB,CAAC,CAAC,CAAC;EAE1D,IAAAY,0BAAmB,EAACJ,GAAG,EAAE,OAAO;IAC9BK,gBAAgB,EAAEA,CAAA,KAAM;MACtBC,2BAAkB,CAACC,oBAAoB,CAACN,SAAS,CAAC;MAClD,OAAON,qBAAqB,CAACM,SAAS,CAAC;IACzC,CAAC;IACDO,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIC,KAAK,CAAC,iCAAiCD,WAAW,EAAE,CAAC;MACjE;MACAH,2BAAkB,CAACC,oBAAoB,CAACN,SAAS,CAAC;MAClD,MAAMU,aAAa,GAAGhB,qBAAqB,CAACM,SAAS,CAAC;MACtD,IAAI,CAACU,aAAa,EAAE;QAClB,OAAO,IAAI;MACb;MACA,MAAMC,GAAG,GAAGC,QAAQ,CAACC,uBAAuB,CAACH,aAAa,CAAC;MAC3D,OAAOC,GAAG;IACZ;EACF,CAAC,CAAC,CAAC;EAEH,IAAAG,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX,OAAOpB,qBAAqB,CAACM,SAAS,CAAC;IACzC,CAAC;EACH,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,oBAAOe,KAAA,CAAAC,aAAA,CAAC5C,0BAAA,CAAAK,OAAgB,EAAAC,QAAA,KAAKoB,KAAK;IAAEE,SAAS,EAAEA;EAAU,EAAE,CAAC;AAC9D,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_react","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","useState","useLayoutEffect","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","useCallback","nativeEvent","layout","Canvas","exports","forwardRef","_onLayout","props","viewRef","useRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","useEffect","useImperativeHandle","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","View","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/Offscreen.js

@@ -82,6 +82,9 @@ class GPUOffscreenCanvasContext {
     this.canvas = canvas;
     this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
   }
+  present() {
+    // Do nothing
+  }
   getDevice() {
     if (!this.device) {
       throw new Error("Device is not configured.");

package/lib/commonjs/Offscreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["GPUOffscreenCanvas","oncontextlost","oncontextrestored","constructor","width","height","context","GPUOffscreenCanvasContext","convertToBlob","_options","Error","getContext","contextId","transferToImageBitmap","addEventListener","_type","_listener","removeEventListener","dispatchEvent","_event","getImageData","device","getDevice","texture","getTexture","commandEncoder","createCommandEncoder","bytesPerRow","buffer","createBuffer","size","usage","GPUBufferUsage","COPY_DST","MAP_READ","copyTextureToBuffer","queue","submit","finish","mapAsync","GPUMapMode","READ","then","arrayBuffer","getMappedRange","uint8Array","Uint8Array","data","Array","from","unmap","format","navigator","gpu","getPreferredCanvasFormat","exports","__brand","canvas","textureFormat","configure","config","createTexture","GPUTextureUsage","RENDER_ATTACHMENT","COPY_SRC","TEXTURE_BINDING","undefined","unconfigure","destroy","getCurrentTexture"],"sourceRoot":"../../src","sources":["Offscreen.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["GPUOffscreenCanvas","oncontextlost","oncontextrestored","constructor","width","height","context","GPUOffscreenCanvasContext","convertToBlob","_options","Error","getContext","contextId","transferToImageBitmap","addEventListener","_type","_listener","removeEventListener","dispatchEvent","_event","getImageData","device","getDevice","texture","getTexture","commandEncoder","createCommandEncoder","bytesPerRow","buffer","createBuffer","size","usage","GPUBufferUsage","COPY_DST","MAP_READ","copyTextureToBuffer","queue","submit","finish","mapAsync","GPUMapMode","READ","then","arrayBuffer","getMappedRange","uint8Array","Uint8Array","data","Array","from","unmap","format","navigator","gpu","getPreferredCanvasFormat","exports","__brand","canvas","textureFormat","present","configure","config","createTexture","GPUTextureUsage","RENDER_ATTACHMENT","COPY_SRC","TEXTURE_BINDING","undefined","unconfigure","destroy","getCurrentTexture"],"sourceRoot":"../../src","sources":["Offscreen.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.warnIfNotHardwareAccelerated = exports.useCanvasEffect = void 0;
+exports.warnIfNotHardwareAccelerated = exports.useGPUContext = exports.useCanvasEffect = void 0;
 var _react = require("react");
 const warnIfNotHardwareAccelerated = adapter => {
   if (adapter.info.architecture === "swiftshader") {
@@ -11,28 +11,39 @@ const warnIfNotHardwareAccelerated = adapter => {
   }
 };
 exports.warnIfNotHardwareAccelerated = warnIfNotHardwareAccelerated;
-const useCanvasEffect = (effect, deps = []) => {
+const useGPUContext = () => {
+  const [context, setContext] = (0, _react.useState)(null);
+  const ref = useCanvasEffect(() => {
+    const ctx = ref.current.getContext("webgpu");
+    setContext(ctx);
+  });
+  return {
+    ref,
+    context
+  };
+};
+exports.useGPUContext = useGPUContext;
+const useCanvasEffect = effect => {
+  const unsub = (0, _react.useRef)(null);
   const ref = (0, _react.useRef)(null);
-  const unsubscribe = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
-    requestAnimationFrame(async () => {
-      // const adapter = await navigator.gpu.requestAdapter();
-      // if (!adapter) {
-      //   return;
-      // }
-      // const device = await adapter.requestDevice();
-      const unsub = await effect();
-      if (unsub) {
-        unsubscribe.current = unsub;
+    ref.current.whenReady(async () => {
+      const sub = effect();
+      if (sub) {
+        unsub.current = sub;
       }
     });
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
+      if (unsub.current) {
+        if (unsub.current instanceof Promise) {
+          unsub.current.then(sub => sub && sub());
+        } else {
+          unsub.current();
+        }
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, []);
   return ref;
 };
 exports.useCanvasEffect = useCanvasEffect;

package/lib/commonjs/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","warnIfNotHardwareAccelerated","adapter","info","architecture","console","warn","exports","useCanvasEffect","effect","deps","ref","useRef","unsubscribe","useEffect","requestAnimationFrame","unsub","current"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAMO,MAAMC,4BAA4B,GAAIC,OAAmB,IAAK;EACnE,IAAIA,OAAO,CAACC,IAAI,CAACC,YAAY,KAAK,aAAa,EAAE;IAC/CC,OAAO,CAACC,IAAI,CACV,sGACF,CAAC;EACH;AACF,CAAC;AAACC,OAAA,CAAAN,4BAAA,GAAAA,4BAAA;AAEK,MAAMO,eAAe,GAAGA,CAC7BC,MAA8D,EAC9DC,IAAoB,GAAG,EAAE,KACtB;EACH,MAAMC,GAAG,GAAG,IAAAC,aAAM,EAAY,IAAI,CAAC;EACnC,MAAMC,WAAW,GAAG,IAAAD,aAAM,EAAc,CAAC;EACzC,IAAAE,gBAAS,EAAC,MAAM;IACdC,qBAAqB,CAAC,YAAY;MAChC;MACA;MACA;MACA;MACA;MACA,MAAMC,KAAK,GAAG,MAAMP,MAAM,CAAC,CAAC;MAC5B,IAAIO,KAAK,EAAE;QACTH,WAAW,CAACI,OAAO,GAAGD,KAAK;MAC7B;IACF,CAAC,CAAC;IACF,OAAO,MAAM;MACX,IAAIH,WAAW,CAACI,OAAO,EAAE;QACvBJ,WAAW,CAACI,OAAO,CAAC,CAAC;MACvB;IACF,CAAC;IACD;EACF,CAAC,EAAEP,IAAI,CAAC;EACR,OAAOC,GAAG;AACZ,CAAC;AAACJ,OAAA,CAAAC,eAAA,GAAAA,eAAA","ignoreList":[]}
+{"version":3,"names":["_react","require","warnIfNotHardwareAccelerated","adapter","info","architecture","console","warn","exports","useGPUContext","context","setContext","useState","ref","useCanvasEffect","ctx","current","getContext","effect","unsub","useRef","useEffect","whenReady","sub","Promise","then"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAMO,MAAMC,4BAA4B,GAAIC,OAAmB,IAAK;EACnE,IAAIA,OAAO,CAACC,IAAI,CAACC,YAAY,KAAK,aAAa,EAAE;IAC/CC,OAAO,CAACC,IAAI,CACV,sGACF,CAAC;EACH;AACF,CAAC;AAACC,OAAA,CAAAN,4BAAA,GAAAA,4BAAA;AAEK,MAAMO,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAC,eAAQ,EAAyB,IAAI,CAAC;EACpE,MAAMC,GAAG,GAAGC,eAAe,CAAC,MAAM;IAChC,MAAMC,GAAG,GAAGF,GAAG,CAACG,OAAO,CAAEC,UAAU,CAAC,QAAQ,CAAE;IAC9CN,UAAU,CAACI,GAAG,CAAC;EACjB,CAAC,CAAC;EACF,OAAO;IAAEF,GAAG;IAAEH;EAAQ,CAAC;AACzB,CAAC;AAACF,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAEK,MAAMK,eAAe,GAC1BI,MAIiB,IACd;EACH,MAAMC,KAAK,GAAG,IAAAC,aAAM,EAAmD,IAAI,CAAC;EAC5E,MAAMP,GAAG,GAAG,IAAAO,aAAM,EAAY,IAAI,CAAC;EACnC,IAAAC,gBAAS,EAAC,MAAM;IACdR,GAAG,CAACG,OAAO,CAAEM,SAAS,CAAC,YAAY;MACjC,MAAMC,GAAG,GAAGL,MAAM,CAAC,CAAC;MACpB,IAAIK,GAAG,EAAE;QACPJ,KAAK,CAACH,OAAO,GAAGO,GAAG;MACrB;IACF,CAAC,CAAC;IACF,OAAO,MAAM;MACX,IAAIJ,KAAK,CAACH,OAAO,EAAE;QACjB,IAAIG,KAAK,CAACH,OAAO,YAAYQ,OAAO,EAAE;UACpCL,KAAK,CAACH,OAAO,CAACS,IAAI,CAAEF,GAAG,IAAKA,GAAG,IAAIA,GAAG,CAAC,CAAC,CAAC;QAC3C,CAAC,MAAM;UACLJ,KAAK,CAACH,OAAO,CAAC,CAAC;QACjB;MACF;IACF,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EACN,OAAOH,GAAG;AACZ,CAAC;AAACL,OAAA,CAAAM,eAAA,GAAAA,eAAA","ignoreList":[]}

package/lib/module/Canvas.js

@@ -1,39 +1,100 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { View } from "react-native";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useLayoutEffect, useCallback } from "react";
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
-import WebGPUNativeModule from "./NativeWebGPUModule";
 let CONTEXT_COUNTER = 1;
 function generateContextId() {
   return CONTEXT_COUNTER++;
 }
-global.__WebGPUContextRegistry = {};
-const WebGPUContextRegistry = global.__WebGPUContextRegistry;
-export const Canvas = /*#__PURE__*/forwardRef((props, ref) => {
+const useSizeFabric = ref => {
+  const [size, setSize] = useState(null);
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      throw new Error("Canvas ref is null");
+    }
+    ref.current.measureInWindow((_x, _y, width, height) => {
+      setSize({
+        width,
+        height
+      });
+    });
+  }, [ref]);
+  return {
+    size,
+    onLayout: undefined
+  };
+};
+const useSizePaper = _ref => {
+  const [size, setSize] = useState(null);
+  const onLayout = useCallback(({
+    nativeEvent: {
+      layout: {
+        width,
+        height
+      }
+    }
+  }) => {
+    if (size === null) {
+      setSize({
+        width,
+        height
+      });
+    }
+  }, [size]);
+  return {
+    size,
+    onLayout
+  };
+};
+export const Canvas = /*#__PURE__*/forwardRef(({
+  onLayout: _onLayout,
+  ...props
+}, ref) => {
+  const viewRef = useRef(null);
+  const FABRIC = RNWebGPU.fabric;
+  const useSize = FABRIC ? useSizeFabric : useSizePaper;
   const [contextId, _] = useState(() => generateContextId());
+  const cb = useRef();
+  const {
+    size,
+    onLayout
+  } = useSize(viewRef);
+  useEffect(() => {
+    if (size && cb.current) {
+      cb.current();
+    }
+  }, [size]);
   useImperativeHandle(ref, () => ({
     getNativeSurface: () => {
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      return WebGPUContextRegistry[contextId];
+      if (size === null) {
+        throw new Error("[WebGPU] Canvas size is not available yet");
+      }
+      return RNWebGPU.getNativeSurface(contextId);
+    },
+    whenReady(callback) {
+      if (size === null) {
+        cb.current = callback;
+      } else {
+        callback();
+      }
     },
     getContext(contextName) {
       if (contextName !== "webgpu") {
         throw new Error(`[WebGPU] Unsupported context: ${contextName}`);
       }
-      WebGPUNativeModule.createSurfaceContext(contextId);
-      const nativeSurface = WebGPUContextRegistry[contextId];
-      if (!nativeSurface) {
-        return null;
+      if (size === null) {
+        throw new Error("[WebGPU] Canvas size is not available yet");
       }
-      const ctx = RNWebGPU.MakeWebGPUCanvasContext(nativeSurface);
-      return ctx;
+      return RNWebGPU.MakeWebGPUCanvasContext(contextId, size.width, size.height);
     }
   }));
-  useEffect(() => {
-    return () => {
-      delete WebGPUContextRegistry[contextId];
-    };
-  }, [contextId]);
-  return /*#__PURE__*/React.createElement(WebGPUNativeView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(View, _extends({
+    ref: viewRef,
+    onLayout: onLayout
+  }, props), /*#__PURE__*/React.createElement(WebGPUNativeView, {
+    style: {
+      flex: 1
+    },
     contextId: contextId
   }));
 });

package/lib/module/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useState","WebGPUNativeView","WebGPUNativeModule","CONTEXT_COUNTER","generateContextId","global","__WebGPUContextRegistry","WebGPUContextRegistry","Canvas","props","ref","contextId","_","getNativeSurface","createSurfaceContext","getContext","contextName","Error","nativeSurface","ctx","RNWebGPU","MakeWebGPUCanvasContext","React","createElement","_extends"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":";AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,QAAQ,QAAQ,OAAO;AAE5E,OAAOC,gBAAgB,MAAM,6BAA6B;AAC1D,OAAOC,kBAAkB,MAAM,sBAAsB;AAErD,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AAwBAE,MAAM,CAACC,uBAAuB,GAAG,CAAC,CAAC;AACnC,MAAMC,qBAAqB,GAAGF,MAAM,CAACC,uBAAuB;AAW5D,OAAO,MAAME,MAAM,gBAAGX,UAAU,CAAuB,CAACY,KAAK,EAAEC,GAAG,KAAK;EACrE,MAAM,CAACC,SAAS,EAAEC,CAAC,CAAC,GAAGZ,QAAQ,CAAC,MAAMI,iBAAiB,CAAC,CAAC,CAAC;EAE1DL,mBAAmB,CAACW,GAAG,EAAE,OAAO;IAC9BG,gBAAgB,EAAEA,CAAA,KAAM;MACtBX,kBAAkB,CAACY,oBAAoB,CAACH,SAAS,CAAC;MAClD,OAAOJ,qBAAqB,CAACI,SAAS,CAAC;IACzC,CAAC;IACDI,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIC,KAAK,CAAC,iCAAiCD,WAAW,EAAE,CAAC;MACjE;MACAd,kBAAkB,CAACY,oBAAoB,CAACH,SAAS,CAAC;MAClD,MAAMO,aAAa,GAAGX,qBAAqB,CAACI,SAAS,CAAC;MACtD,IAAI,CAACO,aAAa,EAAE;QAClB,OAAO,IAAI;MACb;MACA,MAAMC,GAAG,GAAGC,QAAQ,CAACC,uBAAuB,CAACH,aAAa,CAAC;MAC3D,OAAOC,GAAG;IACZ;EACF,CAAC,CAAC,CAAC;EAEHrB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX,OAAOS,qBAAqB,CAACI,SAAS,CAAC;IACzC,CAAC;EACH,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,oBAAOW,KAAA,CAAAC,aAAA,CAACtB,gBAAgB,EAAAuB,QAAA,KAAKf,KAAK;IAAEE,SAAS,EAAEA;EAAU,EAAE,CAAC;AAC9D,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["View","forwardRef","useEffect","useImperativeHandle","useRef","useState","useLayoutEffect","useCallback","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","useSizeFabric","ref","size","setSize","current","Error","measureInWindow","_x","_y","width","height","onLayout","undefined","useSizePaper","_ref","nativeEvent","layout","Canvas","_onLayout","props","viewRef","FABRIC","RNWebGPU","fabric","useSize","contextId","_","cb","getNativeSurface","whenReady","callback","getContext","contextName","MakeWebGPUCanvasContext","React","createElement","_extends","style","flex"],"sourceRoot":"../../src","sources":["Canvas.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Offscreen.js

@@ -75,6 +75,9 @@ class GPUOffscreenCanvasContext {
     this.canvas = canvas;
     this.textureFormat = navigator.gpu.getPreferredCanvasFormat();
   }
+  present() {
+    // Do nothing
+  }
   getDevice() {
     if (!this.device) {
       throw new Error("Device is not configured.");

package/lib/module/Offscreen.js.map

@@ -1 +1 @@
-{"version":3,"names":["GPUOffscreenCanvas","oncontextlost","oncontextrestored","constructor","width","height","context","GPUOffscreenCanvasContext","convertToBlob","_options","Error","getContext","contextId","transferToImageBitmap","addEventListener","_type","_listener","removeEventListener","dispatchEvent","_event","getImageData","device","getDevice","texture","getTexture","commandEncoder","createCommandEncoder","bytesPerRow","buffer","createBuffer","size","usage","GPUBufferUsage","COPY_DST","MAP_READ","copyTextureToBuffer","queue","submit","finish","mapAsync","GPUMapMode","READ","then","arrayBuffer","getMappedRange","uint8Array","Uint8Array","data","Array","from","unmap","format","navigator","gpu","getPreferredCanvasFormat","__brand","canvas","textureFormat","configure","config","createTexture","GPUTextureUsage","RENDER_ATTACHMENT","COPY_SRC","TEXTURE_BINDING","undefined","unconfigure","destroy","getCurrentTexture"],"sourceRoot":"../../src","sources":["Offscreen.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["GPUOffscreenCanvas","oncontextlost","oncontextrestored","constructor","width","height","context","GPUOffscreenCanvasContext","convertToBlob","_options","Error","getContext","contextId","transferToImageBitmap","addEventListener","_type","_listener","removeEventListener","dispatchEvent","_event","getImageData","device","getDevice","texture","getTexture","commandEncoder","createCommandEncoder","bytesPerRow","buffer","createBuffer","size","usage","GPUBufferUsage","COPY_DST","MAP_READ","copyTextureToBuffer","queue","submit","finish","mapAsync","GPUMapMode","READ","then","arrayBuffer","getMappedRange","uint8Array","Uint8Array","data","Array","from","unmap","format","navigator","gpu","getPreferredCanvasFormat","__brand","canvas","textureFormat","present","configure","config","createTexture","GPUTextureUsage","RENDER_ATTACHMENT","COPY_SRC","TEXTURE_BINDING","undefined","unconfigure","destroy","getCurrentTexture"],"sourceRoot":"../../src","sources":["Offscreen.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/utils.js

@@ -1,31 +1,41 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 export const warnIfNotHardwareAccelerated = adapter => {
   if (adapter.info.architecture === "swiftshader") {
     console.warn("GPUAdapter is not hardware accelerated. This is common on Android emulators. Rendering will be slow.");
   }
 };
-export const useCanvasEffect = (effect, deps = []) => {
+export const useGPUContext = () => {
+  const [context, setContext] = useState(null);
+  const ref = useCanvasEffect(() => {
+    const ctx = ref.current.getContext("webgpu");
+    setContext(ctx);
+  });
+  return {
+    ref,
+    context
+  };
+};
+export const useCanvasEffect = effect => {
+  const unsub = useRef(null);
   const ref = useRef(null);
-  const unsubscribe = useRef();
   useEffect(() => {
-    requestAnimationFrame(async () => {
-      // const adapter = await navigator.gpu.requestAdapter();
-      // if (!adapter) {
-      //   return;
-      // }
-      // const device = await adapter.requestDevice();
-      const unsub = await effect();
-      if (unsub) {
-        unsubscribe.current = unsub;
+    ref.current.whenReady(async () => {
+      const sub = effect();
+      if (sub) {
+        unsub.current = sub;
       }
     });
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
+      if (unsub.current) {
+        if (unsub.current instanceof Promise) {
+          unsub.current.then(sub => sub && sub());
+        } else {
+          unsub.current();
+        }
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, []);
   return ref;
 };
 //# sourceMappingURL=utils.js.map

package/lib/module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","warnIfNotHardwareAccelerated","adapter","info","architecture","console","warn","useCanvasEffect","effect","deps","ref","unsubscribe","requestAnimationFrame","unsub","current"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":"AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAMzC,OAAO,MAAMC,4BAA4B,GAAIC,OAAmB,IAAK;EACnE,IAAIA,OAAO,CAACC,IAAI,CAACC,YAAY,KAAK,aAAa,EAAE;IAC/CC,OAAO,CAACC,IAAI,CACV,sGACF,CAAC;EACH;AACF,CAAC;AAED,OAAO,MAAMC,eAAe,GAAGA,CAC7BC,MAA8D,EAC9DC,IAAoB,GAAG,EAAE,KACtB;EACH,MAAMC,GAAG,GAAGV,MAAM,CAAY,IAAI,CAAC;EACnC,MAAMW,WAAW,GAAGX,MAAM,CAAc,CAAC;EACzCD,SAAS,CAAC,MAAM;IACda,qBAAqB,CAAC,YAAY;MAChC;MACA;MACA;MACA;MACA;MACA,MAAMC,KAAK,GAAG,MAAML,MAAM,CAAC,CAAC;MAC5B,IAAIK,KAAK,EAAE;QACTF,WAAW,CAACG,OAAO,GAAGD,KAAK;MAC7B;IACF,CAAC,CAAC;IACF,OAAO,MAAM;MACX,IAAIF,WAAW,CAACG,OAAO,EAAE;QACvBH,WAAW,CAACG,OAAO,CAAC,CAAC;MACvB;IACF,CAAC;IACD;EACF,CAAC,EAAEL,IAAI,CAAC;EACR,OAAOC,GAAG;AACZ,CAAC","ignoreList":[]}
+{"version":3,"names":["useEffect","useRef","useState","warnIfNotHardwareAccelerated","adapter","info","architecture","console","warn","useGPUContext","context","setContext","ref","useCanvasEffect","ctx","current","getContext","effect","unsub","whenReady","sub","Promise","then"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAMnD,OAAO,MAAMC,4BAA4B,GAAIC,OAAmB,IAAK;EACnE,IAAIA,OAAO,CAACC,IAAI,CAACC,YAAY,KAAK,aAAa,EAAE;IAC/CC,OAAO,CAACC,IAAI,CACV,sGACF,CAAC;EACH;AACF,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGT,QAAQ,CAAyB,IAAI,CAAC;EACpE,MAAMU,GAAG,GAAGC,eAAe,CAAC,MAAM;IAChC,MAAMC,GAAG,GAAGF,GAAG,CAACG,OAAO,CAAEC,UAAU,CAAC,QAAQ,CAAE;IAC9CL,UAAU,CAACG,GAAG,CAAC;EACjB,CAAC,CAAC;EACF,OAAO;IAAEF,GAAG;IAAEF;EAAQ,CAAC;AACzB,CAAC;AAED,OAAO,MAAMG,eAAe,GAC1BI,MAIiB,IACd;EACH,MAAMC,KAAK,GAAGjB,MAAM,CAAmD,IAAI,CAAC;EAC5E,MAAMW,GAAG,GAAGX,MAAM,CAAY,IAAI,CAAC;EACnCD,SAAS,CAAC,MAAM;IACdY,GAAG,CAACG,OAAO,CAAEI,SAAS,CAAC,YAAY;MACjC,MAAMC,GAAG,GAAGH,MAAM,CAAC,CAAC;MACpB,IAAIG,GAAG,EAAE;QACPF,KAAK,CAACH,OAAO,GAAGK,GAAG;MACrB;IACF,CAAC,CAAC;IACF,OAAO,MAAM;MACX,IAAIF,KAAK,CAACH,OAAO,EAAE;QACjB,IAAIG,KAAK,CAACH,OAAO,YAAYM,OAAO,EAAE;UACpCH,KAAK,CAACH,OAAO,CAACO,IAAI,CAAEF,GAAG,IAAKA,GAAG,IAAIA,GAAG,CAAC,CAAC,CAAC;QAC3C,CAAC,MAAM;UACLF,KAAK,CAACH,OAAO,CAAC,CAAC;QACjB;MACF;IACF,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EACN,OAAOH,GAAG;AACZ,CAAC","ignoreList":[]}

package/lib/typescript/lib/commonjs/Offscreen.d.ts

@@ -21,6 +21,7 @@ declare class GPUOffscreenCanvasContext {
     device: null;
     canvas: any;
     textureFormat: GPUTextureFormat;
+    present(): void;
     getDevice(): never;
     getTexture(): never;
     configure(config: any): undefined;