react-native-webgpu 0.5.15 → 0.5.17

package/lib/typescript/src/formats.d.ts

@@ -0,0 +1,2 @@
+export declare const getPreferredHighBitDepthCanvasFormat: () => GPUTextureFormat;
+//# sourceMappingURL=formats.d.ts.map

package/lib/typescript/src/formats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formats.d.ts","sourceRoot":"","sources":["../../../src/formats.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,oCAAoC,QAAO,gBAEvD,CAAC"}

package/lib/typescript/src/hooks.d.ts

@@ -1,27 +1,12 @@
-import React from "react";
-import type { ReactNode } from "react";
 import type { CanvasRef, NativeCanvas } from "./Canvas";
 export declare const warnIfNotHardwareAccelerated: (adapter: GPUAdapter) => void;
-interface DeviceContext {
-    device: GPUDevice | null;
-    adapter: GPUAdapter | null;
-}
-declare const DeviceContext: React.Context<DeviceContext | null>;
-interface DeviceProviderProps {
-    children?: ReactNode | ReactNode[];
-    adapterOptions?: GPURequestAdapterOptions;
-    deviceDescriptor?: GPUDeviceDescriptor;
-}
-export declare const GPUDeviceProvider: ({ children, adapterOptions, deviceDescriptor, }: DeviceProviderProps) => React.JSX.Element | null;
 export declare const useSurface: () => {
-    ref: React.RefObject<CanvasRef>;
+    ref: import("react").RefObject<CanvasRef>;
     surface: NativeCanvas | null;
 };
-export declare const useMainDevice: () => DeviceContext;
-export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
+export declare const useCanvasRef: () => import("react").RefObject<CanvasRef>;
 export declare const useDevice: (adapterOptions?: GPURequestAdapterOptions, deviceDescriptor?: GPUDeviceDescriptor) => {
     adapter: GPUAdapter | null;
     device: GPUDevice | null;
 };
-export {};
 //# sourceMappingURL=hooks.d.ts.map

package/lib/typescript/src/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,4BAA4B,GAAI,SAAS,UAAU,SAQ/D,CAAC;AAEF,UAAU,aAAa;IACrB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,qCAA4C,CAAC;AAEhE,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACnC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;CACxC;AAED,eAAO,MAAM,iBAAiB,GAAI,iDAI/B,mBAAmB,6BAQrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAQtB,CAAC;AAEF,eAAO,MAAM,aAAa,qBAMzB,CAAC;AAEF,eAAO,MAAM,YAAY,kCAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,GACpB,iBAAiB,wBAAwB,EACzC,mBAAmB,mBAAmB;;;CAqBvC,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,4BAA4B,GAAI,SAAS,UAAU,SAQ/D,CAAC;AAOF,eAAO,MAAM,UAAU;;;CAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAgC,CAAC;AAE1D,eAAO,MAAM,SAAS,GACpB,iBAAiB,wBAAwB,EACzC,mBAAmB,mBAAmB;;;CAqBvC,CAAC"}

package/lib/typescript/src/main/index.d.ts

@@ -2,5 +2,7 @@ export * from "../Canvas";
 export * from "../Offscreen";
 export * from "../WebGPUViewNativeComponent";
 export * from "../hooks";
+export * from "../GPUDeviceProvider";
+export * from "../formats";
 export { default as WebGPUModule } from "../NativeWebGPUModule";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/main/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/main/index.tsx"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAE3B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/typescript/src/main/index.web.d.ts

@@ -3,4 +3,6 @@ export * from "../Canvas";
 export * from "../Offscreen";
 export * from "../WebGPUViewNativeComponent";
 export * from "../hooks";
+export * from "../GPUDeviceProvider";
+export * from "../formats";
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/src/main/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/main/index.web.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC"}

package/lib/typescript/src/types.d.ts

@@ -5,6 +5,11 @@ export interface NativeCanvas {
     height: number;
     clientWidth: number;
     clientHeight: number;
+    addEventListener(type: string, listener: EventListener): void;
+    removeEventListener(type: string, listener: EventListener): void;
+    dispatchEvent(event: Event): void;
+    setPointerCapture(pointerId: number): void;
+    releasePointerCapture(pointerId: number): void;
 }
 export type RNCanvasContext = GPUCanvasContext & {
     /**

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG,MAAM,CAAC;AAE7B,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C;;;;;;;;OAQG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,UAAU,CAAC,WAAW,EAAE,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC;IAC1D,gBAAgB,EAAE,MAAM,YAAY,CAAC;CACtC;AAKD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,MAAM,CAAC;AAkBtD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,EAAE,sBAAsB,CAAC;IAC7C,OAAO,IAAI,IAAI,CAAC;CACjB;AAKD,MAAM,WAAW,WAAW;IAC1B,eAAe,IAAI,gBAAgB,GAAG,IAAI,CAAC;IAC3C,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IAKvC,WAAW,CAAC,EAAE,sBAAsB,CAAC;CACtC;AAED,MAAM,WAAW,gCAAgC;IAM/C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD,MAAM,MAAM,kBAAkB,GAC1B,kBAAkB,GAClB,SAAS,GACT,wBAAwB,CAAC;AAE7B,MAAM,WAAW,wBAAwB;IAGvC,IAAI,EAAE,kBAAkB,CAAC;IAGzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,kBAAkB,CAAC;IAIzB,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,IAAI,wBAAwB,CAAC;CACpC;AAGD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACvB;AAID,MAAM,WAAW,oCAAoC;IACnD,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,mBAAmB,EAAE,CAAC;CAC/B;AAQD,MAAM,WAAW,wBAAwB;IACvC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAMD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,OAAO,EAAE,wBAAwB,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,UAAU,CAAC,EAAE,oBAAoB,GAAG,UAAU,CAAC;IAM7D,WAAW,CACT,OAAO,EAAE,UAAU,EACnB,WAAW,EAAE,OAAO,EACpB,MAAM,CAAC,EAAE,mBAAmB,EAAE,GAC7B,IAAI,CAAC;IAGR,SAAS,CAAC,OAAO,EAAE,UAAU,GAAG,oCAAoC,CAAC;CACtE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webgpu",
-  "version": "0.5.15",
+  "version": "0.5.17",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -27,6 +27,7 @@
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
     "tsc": "tsc --noEmit",
     "build": "bob build",
+    "release": "semantic-release",
     "build-dawn": "tsx scripts/build/dawn.ts",
     "clean-dawn": "rimraf ./libs && rimraf ../../externals/dawn/out",
     "clang-format": "yarn clang-format-ios && yarn clang-format-android && yarn clang-format-common",
@@ -51,11 +52,17 @@
   "bugs": {
     "url": "https://github.com/wcandillon/react-native-webgpu/issues"
   },
-  "homepage": "https://github.com/wcandillon/react-native-webgpu#readme",
+  "homepage": "https://wcandillon.github.io/react-native-webgpu/",
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
   },
   "devDependencies": {
+    "@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.12",
     "@types/lodash": "^4.17.5",
     "@types/node": "^20.14.7",
@@ -87,6 +94,8 @@
     "react-native-worklets": "0.8.3",
     "rimraf": "^5.0.7",
     "seedrandom": "^3.0.5",
+    "semantic-release": "^24.1.0",
+    "semantic-release-yarn": "^3.0.2",
     "teapot": "^1.0.0",
     "ts-morph": "^22.0.0",
     "tsx": "^4.20.5",

package/src/Canvas.tsx

@@ -17,6 +17,13 @@ export interface NativeCanvas {
   height: number;
   clientWidth: number;
   clientHeight: number;
+  // No-op DOM-compatibility stubs so web renderers (Three.js,
+  // react-three-fiber) can treat the canvas like an HTMLCanvasElement.
+  addEventListener(type: string, listener: EventListener): void;
+  removeEventListener(type: string, listener: EventListener): void;
+  dispatchEvent(event: Event): void;
+  setPointerCapture(pointerId: number): void;
+  releasePointerCapture(pointerId: number): void;
 }
 
 export type RNCanvasContext = GPUCanvasContext & {

package/src/GPUDeviceProvider.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+
+import { useDevice } from "./hooks";
+
+interface DeviceContextValue {
+  device: GPUDevice | null;
+  adapter: GPUAdapter | null;
+}
+
+const DeviceContext = createContext<DeviceContextValue | null>(null);
+
+interface DeviceProviderProps {
+  children?: ReactNode | ReactNode[];
+  adapterOptions?: GPURequestAdapterOptions;
+  deviceDescriptor?: GPUDeviceDescriptor;
+}
+
+export const GPUDeviceProvider = ({
+  children,
+  adapterOptions,
+  deviceDescriptor,
+}: DeviceProviderProps) => {
+  const state = useDevice(adapterOptions, deviceDescriptor);
+  if (!state.device) {
+    return null;
+  }
+  return (
+    <DeviceContext.Provider value={state}>{children}</DeviceContext.Provider>
+  );
+};
+
+export const useMainDevice = () => {
+  const ctx = useContext(DeviceContext);
+  if (!ctx) {
+    throw new Error("No DeviceContext found.");
+  }
+  return ctx;
+};

package/src/WebPolyfillGPUModule.ts

@@ -15,6 +15,12 @@ function getNativeSurface(contextId: number) {
     width,
     clientHeight: height,
     clientWidth: width,
+    // On web the real DOM canvas handles events; delegate to it.
+    addEventListener: canvas.addEventListener.bind(canvas),
+    removeEventListener: canvas.removeEventListener.bind(canvas),
+    dispatchEvent: canvas.dispatchEvent.bind(canvas),
+    setPointerCapture: canvas.setPointerCapture.bind(canvas),
+    releasePointerCapture: canvas.releasePointerCapture.bind(canvas),
   };
 }
 

package/src/constants.ts

@@ -26,12 +26,12 @@
 // re-exports `./main` before `./constants`, and `./main` installs the native
 // module synchronously, so the globals always exist by the time this runs.
 
-export const GPUBufferUsage = globalThis.GPUBufferUsage;
+export const { GPUBufferUsage } = globalThis;
 
-export const GPUTextureUsage = globalThis.GPUTextureUsage;
+export const { GPUTextureUsage } = globalThis;
 
-export const GPUShaderStage = globalThis.GPUShaderStage;
+export const { GPUShaderStage } = globalThis;
 
-export const GPUColorWrite = globalThis.GPUColorWrite;
+export const { GPUColorWrite } = globalThis;
 
-export const GPUMapMode = globalThis.GPUMapMode;
+export const { GPUMapMode } = globalThis;

package/src/formats.ts

@@ -0,0 +1,23 @@
+/// <reference types="@webgpu/types" />
+
+import { Platform } from "react-native";
+
+// Non-spec helper: the canvas texture format most likely to reach the display
+// with more than 8 bits per channel on the current platform. The returned
+// format keeps standard (SDR) sRGB semantics: values are encoded exactly like
+// on an 8-bit canvas, only with more precision, so colors match across
+// formats. This is about bit depth, not HDR (no extended range).
+//
+// - Apple platforms: "rgba16float" (16-bit float per channel). The library
+//   tags the CAMetalLayer with the extended sRGB colorspace automatically so
+//   the values display identically to an 8-bit canvas.
+// - Android: "rgb10a2unorm". A float16 swapchain works but is tagged as an
+//   SDR sRGB layer, and SurfaceFlinger quantizes SDR layers to the display
+//   pipeline depth during composition, discarding the extra precision.
+//   RGBA_1010102 buffers keep SDR semantics and can pass through composition,
+//   including direct scanout on 10-bit panels. Requires the Vulkan surface to
+//   expose the 10-bit format (common on modern devices).
+// - Web: "rgba16float", the float canvas format supported by browsers.
+export const getPreferredHighBitDepthCanvasFormat = (): GPUTextureFormat => {
+  return Platform.OS === "android" ? "rgb10a2unorm" : "rgba16float";
+};

package/src/hooks.tsx

@@ -1,12 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
-import type { ReactNode } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import type { CanvasRef, NativeCanvas } from "./Canvas";
 
@@ -20,33 +12,11 @@ export const warnIfNotHardwareAccelerated = (adapter: GPUAdapter) => {
   }
 };
 
-interface DeviceContext {
+interface DeviceState {
   device: GPUDevice | null;
   adapter: GPUAdapter | null;
 }
 
-const DeviceContext = createContext<DeviceContext | null>(null);
-
-interface DeviceProviderProps {
-  children?: ReactNode | ReactNode[];
-  adapterOptions?: GPURequestAdapterOptions;
-  deviceDescriptor?: GPUDeviceDescriptor;
-}
-
-export const GPUDeviceProvider = ({
-  children,
-  adapterOptions,
-  deviceDescriptor,
-}: DeviceProviderProps) => {
-  const state = useDevice(adapterOptions, deviceDescriptor);
-  if (!state.device) {
-    return null;
-  }
-  return (
-    <DeviceContext.Provider value={state}>{children}</DeviceContext.Provider>
-  );
-};
-
 export const useSurface = () => {
   const ref = useRef<CanvasRef>(null);
   const [surface, setSurface] = useState<NativeCanvas | null>(null);
@@ -57,21 +27,13 @@ export const useSurface = () => {
   return { ref, surface };
 };
 
-export const useMainDevice = () => {
-  const ctx = useContext(DeviceContext);
-  if (!ctx) {
-    throw new Error("No DeviceContext found.");
-  }
-  return ctx;
-};
-
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
 export const useDevice = (
   adapterOptions?: GPURequestAdapterOptions,
   deviceDescriptor?: GPUDeviceDescriptor,
 ) => {
-  const [state, setState] = useState<DeviceContext | null>(null);
+  const [state, setState] = useState<DeviceState | null>(null);
   useEffect(() => {
     (async () => {
       if (!state) {

package/src/main/index.tsx

@@ -5,6 +5,8 @@ export * from "../Canvas";
 export * from "../Offscreen";
 export * from "../WebGPUViewNativeComponent";
 export * from "../hooks";
+export * from "../GPUDeviceProvider";
+export * from "../formats";
 
 export { default as WebGPUModule } from "../NativeWebGPUModule";
 

package/src/main/index.web.tsx

@@ -4,5 +4,7 @@ export * from "../Canvas";
 export * from "../Offscreen";
 export * from "../WebGPUViewNativeComponent";
 export * from "../hooks";
+export * from "../GPUDeviceProvider";
+export * from "../formats";
 
 // We don't need to set all global properties on web, webgpu is already available globally

package/src/types.ts

@@ -6,6 +6,13 @@ export interface NativeCanvas {
   height: number;
   clientWidth: number;
   clientHeight: number;
+  // No-op DOM-compatibility stubs so web renderers (Three.js,
+  // react-three-fiber) can treat the canvas like an HTMLCanvasElement.
+  addEventListener(type: string, listener: EventListener): void;
+  removeEventListener(type: string, listener: EventListener): void;
+  dispatchEvent(event: Event): void;
+  setPointerCapture(pointerId: number): void;
+  releasePointerCapture(pointerId: number): void;
 }
 
 export type RNCanvasContext = GPUCanvasContext & {