diff --git a/README.md b/README.md index 0ae1359b4..00f00154d 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,12 @@ React Native WebGPU requires React Native 0.81 or newer. It doesn't support the ## Installation -Please note that the package name is `react-native-wgpu`. - ``` -npm install react-native-wgpu +npm install react-native-webgpu ``` +> The package was previously published as `react-native-wgpu`. A shim with that name is still available and simply re-exports `react-native-webgpu`. + ## With Expo Expo provides a React Native WebGPU template that works with React Three Fiber. @@ -53,7 +53,7 @@ Usage is identical to Web. ```tsx import React from "react"; import { StyleSheet, View, PixelRatio } from "react-native"; -import { Canvas, CanvasRef } from "react-native-wgpu"; +import { Canvas, CanvasRef } from "react-native-webgpu"; import { redFragWGSL, triangleVertWGSL } from "./triangle"; @@ -235,7 +235,7 @@ npm install react-native-reanimated react-native-worklets WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets: ```tsx -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { runOnUI } from "react-native-reanimated"; const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => { diff --git a/apps/example/package.json b/apps/example/package.json index bc1e36625..f97f7c8e1 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -36,7 +36,7 @@ "react-native-reanimated": "4.2.1", "react-native-safe-area-context": "^5.4.0", "react-native-web": "^0.21.2", - "react-native-wgpu": "*", + "react-native-webgpu": "*", "react-native-worklets": "0.7.2", "teapot": "^1.0.0", "three": "0.172.0", diff --git a/apps/example/src/ABuffer/ABuffer.tsx b/apps/example/src/ABuffer/ABuffer.tsx index cc14ca455..e7f47b298 100644 --- a/apps/example/src/ABuffer/ABuffer.tsx +++ b/apps/example/src/ABuffer/ABuffer.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { mesh } from "../components/meshes/teapot"; diff --git a/apps/example/src/CanvasAPI/CanvasAPI.tsx b/apps/example/src/CanvasAPI/CanvasAPI.tsx index a9f5c4928..a6fc2bd32 100644 --- a/apps/example/src/CanvasAPI/CanvasAPI.tsx +++ b/apps/example/src/CanvasAPI/CanvasAPI.tsx @@ -1,6 +1,6 @@ import { Button, View } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { useRef } from "react"; import { redFragWGSL, triangleVertWGSL } from "../Triangle/triangle"; diff --git a/apps/example/src/ComputeBoids/ComputeBoids.tsx b/apps/example/src/ComputeBoids/ComputeBoids.tsx index 5111978bd..e870c645f 100644 --- a/apps/example/src/ComputeBoids/ComputeBoids.tsx +++ b/apps/example/src/ComputeBoids/ComputeBoids.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useRef } from "react"; import tgpu from "typegpu"; import * as d from "typegpu/data"; import { StyleSheet, View, Text, Button } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { useWebGPU } from "../components/useWebGPU"; import { toBeAssignedLater } from "../components/utils"; diff --git a/apps/example/src/ComputeToys/ComputeToy.tsx b/apps/example/src/ComputeToys/ComputeToy.tsx index daa2a7b3a..e58151e5f 100644 --- a/apps/example/src/ComputeToys/ComputeToy.tsx +++ b/apps/example/src/ComputeToys/ComputeToy.tsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { Platform, useWindowDimensions } from "react-native"; import { useSharedValue } from "react-native-reanimated"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; diff --git a/apps/example/src/ComputeToys/engine/index.ts b/apps/example/src/ComputeToys/engine/index.ts index f0fa08f07..5991ad30b 100644 --- a/apps/example/src/ComputeToys/engine/index.ts +++ b/apps/example/src/ComputeToys/engine/index.ts @@ -4,7 +4,7 @@ */ import { Mutex } from "async-mutex"; -import type { CanvasRef, RNCanvasContext } from "react-native-wgpu"; +import type { CanvasRef, RNCanvasContext } from "react-native-webgpu"; import { Bindings } from "./bind"; import { Blitter, ColorSpace } from "./blit"; diff --git a/apps/example/src/Cube/Cube.tsx b/apps/example/src/Cube/Cube.tsx index 63c49b5ac..9111294c3 100644 --- a/apps/example/src/Cube/Cube.tsx +++ b/apps/example/src/Cube/Cube.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { diff --git a/apps/example/src/Cube/Cubemap.tsx b/apps/example/src/Cube/Cubemap.tsx index 66a83c669..f862b8a30 100644 --- a/apps/example/src/Cube/Cubemap.tsx +++ b/apps/example/src/Cube/Cubemap.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Dimensions, StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/Cube/FractalCube.tsx b/apps/example/src/Cube/FractalCube.tsx index 877679582..35d32820d 100644 --- a/apps/example/src/Cube/FractalCube.tsx +++ b/apps/example/src/Cube/FractalCube.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from "react"; import { Dimensions, StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { diff --git a/apps/example/src/Cube/InstancedCube.tsx b/apps/example/src/Cube/InstancedCube.tsx index acfa8b4a3..861bad710 100644 --- a/apps/example/src/Cube/InstancedCube.tsx +++ b/apps/example/src/Cube/InstancedCube.tsx @@ -1,6 +1,6 @@ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import type { Mat4 } from "wgpu-matrix"; import { mat4, vec3 } from "wgpu-matrix"; diff --git a/apps/example/src/Cube/TexturedCube.tsx b/apps/example/src/Cube/TexturedCube.tsx index 229f0c9a3..67f772f42 100644 --- a/apps/example/src/Cube/TexturedCube.tsx +++ b/apps/example/src/Cube/TexturedCube.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { diff --git a/apps/example/src/GradientTiles/GradientTiles.tsx b/apps/example/src/GradientTiles/GradientTiles.tsx index 3268cb7f4..366caaf54 100644 --- a/apps/example/src/GradientTiles/GradientTiles.tsx +++ b/apps/example/src/GradientTiles/GradientTiles.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useRef, useState } from "react"; import { Button, PixelRatio, StyleSheet, Text, View } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas, useDevice } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas, useDevice } from "react-native-webgpu"; import * as d from "typegpu/data"; import tgpu, { type TgpuBindGroup, type TgpuBuffer } from "typegpu"; diff --git a/apps/example/src/MNISTInference/MNISTInference.tsx b/apps/example/src/MNISTInference/MNISTInference.tsx index 5076f679b..8e753f477 100644 --- a/apps/example/src/MNISTInference/MNISTInference.tsx +++ b/apps/example/src/MNISTInference/MNISTInference.tsx @@ -16,7 +16,7 @@ import { } from "@shopify/react-native-skia"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; import { runOnJS, runOnUI, useSharedValue } from "react-native-reanimated"; -import { useDevice } from "react-native-wgpu"; +import { useDevice } from "react-native-webgpu"; import type { Network } from "./Lib"; import { createDemo, centerData, SIZE } from "./Lib"; diff --git a/apps/example/src/OcclusionQuery/OcclusionQuery.tsx b/apps/example/src/OcclusionQuery/OcclusionQuery.tsx index 26a3d3ea8..7b42907ae 100644 --- a/apps/example/src/OcclusionQuery/OcclusionQuery.tsx +++ b/apps/example/src/OcclusionQuery/OcclusionQuery.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React, { useState } from "react"; import { StyleSheet, View, Text } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/Particles/Particles.tsx b/apps/example/src/Particles/Particles.tsx index 1f11068c1..27ea1a0af 100644 --- a/apps/example/src/Particles/Particles.tsx +++ b/apps/example/src/Particles/Particles.tsx @@ -1,7 +1,7 @@ /* eslint-disable camelcase */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/Reanimated/Reanimated.tsx b/apps/example/src/Reanimated/Reanimated.tsx index fa1fa36b6..7853423f6 100644 --- a/apps/example/src/Reanimated/Reanimated.tsx +++ b/apps/example/src/Reanimated/Reanimated.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from "react"; import { StyleSheet, View } from "react-native"; -import type { CanvasRef, RNCanvasContext } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef, RNCanvasContext } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import type { SharedValue } from "react-native-reanimated"; import { runOnUI, useSharedValue } from "react-native-reanimated"; diff --git a/apps/example/src/RenderBundles/RenderBundles.tsx b/apps/example/src/RenderBundles/RenderBundles.tsx index 598e93a65..6040abb8b 100644 --- a/apps/example/src/RenderBundles/RenderBundles.tsx +++ b/apps/example/src/RenderBundles/RenderBundles.tsx @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/no-shadow */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/Resize/Resize.tsx b/apps/example/src/Resize/Resize.tsx index 9a4466fb7..b179e4328 100644 --- a/apps/example/src/Resize/Resize.tsx +++ b/apps/example/src/Resize/Resize.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; import { Dimensions, PixelRatio, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import Animated, { cancelAnimation, Easing, diff --git a/apps/example/src/ReversedZ/ReversedZ.tsx b/apps/example/src/ReversedZ/ReversedZ.tsx index c0712f851..bdccc2f80 100644 --- a/apps/example/src/ReversedZ/ReversedZ.tsx +++ b/apps/example/src/ReversedZ/ReversedZ.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-shadow */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import type { Mat4 } from "wgpu-matrix"; import { mat4, vec3 } from "wgpu-matrix"; diff --git a/apps/example/src/Sampler/SamplerParameters.tsx b/apps/example/src/Sampler/SamplerParameters.tsx index 64eec5b8c..3ca88b376 100644 --- a/apps/example/src/Sampler/SamplerParameters.tsx +++ b/apps/example/src/Sampler/SamplerParameters.tsx @@ -1,6 +1,6 @@ import React from "react"; import { View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/ShadowMapping/DeferedRendering.tsx b/apps/example/src/ShadowMapping/DeferedRendering.tsx index d071eacbf..90bedcf78 100644 --- a/apps/example/src/ShadowMapping/DeferedRendering.tsx +++ b/apps/example/src/ShadowMapping/DeferedRendering.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-shadow */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3, vec4 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/ShadowMapping/ShadowMapping.tsx b/apps/example/src/ShadowMapping/ShadowMapping.tsx index 2eb8d2a0c..6e9e55777 100644 --- a/apps/example/src/ShadowMapping/ShadowMapping.tsx +++ b/apps/example/src/ShadowMapping/ShadowMapping.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-shadow */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat4, vec3, vec4 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx b/apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx index 907264638..0e48aa2b7 100644 --- a/apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx +++ b/apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx @@ -1,6 +1,6 @@ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index 27aef6b96..c29f46c26 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { Dimensions, Text, View, Image } from "react-native"; -import { GPUOffscreenCanvas, useDevice } from "react-native-wgpu"; +import { GPUOffscreenCanvas, useDevice } from "react-native-webgpu"; import { mat4, vec3, mat3 } from "wgpu-matrix"; import { useClient } from "./useClient"; diff --git a/apps/example/src/ThreeJS/Backdrop.tsx b/apps/example/src/ThreeJS/Backdrop.tsx index 8ed2a8c91..64bd63bbe 100644 --- a/apps/example/src/ThreeJS/Backdrop.tsx +++ b/apps/example/src/ThreeJS/Backdrop.tsx @@ -1,6 +1,6 @@ import * as THREE from "three"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { PixelRatio, Text, View, StyleSheet } from "react-native"; import { useEffect, useRef } from "react"; import { diff --git a/apps/example/src/ThreeJS/Cube.tsx b/apps/example/src/ThreeJS/Cube.tsx index d3e9707b5..1d87e80f3 100644 --- a/apps/example/src/ThreeJS/Cube.tsx +++ b/apps/example/src/ThreeJS/Cube.tsx @@ -1,6 +1,6 @@ import * as THREE from "three"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { View } from "react-native"; import { useEffect, useRef } from "react"; diff --git a/apps/example/src/ThreeJS/Helmet.tsx b/apps/example/src/ThreeJS/Helmet.tsx index be7cb626f..cbf16011e 100644 --- a/apps/example/src/ThreeJS/Helmet.tsx +++ b/apps/example/src/ThreeJS/Helmet.tsx @@ -1,6 +1,6 @@ import * as THREE from "three"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { StyleSheet, Text, View } from "react-native"; import { useEffect, useRef } from "react"; diff --git a/apps/example/src/ThreeJS/InstancedMesh.tsx b/apps/example/src/ThreeJS/InstancedMesh.tsx index 06e95245e..48f3542c2 100644 --- a/apps/example/src/ThreeJS/InstancedMesh.tsx +++ b/apps/example/src/ThreeJS/InstancedMesh.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import * as THREE from "three"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { View } from "react-native"; import { useEffect, useRef } from "react"; import { time, oscSine, mix, range, normalWorld } from "three/tsl"; diff --git a/apps/example/src/ThreeJS/PostProcessing.tsx b/apps/example/src/ThreeJS/PostProcessing.tsx index d94ef1728..2186b26b1 100644 --- a/apps/example/src/ThreeJS/PostProcessing.tsx +++ b/apps/example/src/ThreeJS/PostProcessing.tsx @@ -1,6 +1,6 @@ import * as THREE from "three"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { PixelRatio, Text, View, StyleSheet } from "react-native"; import { useEffect, useRef } from "react"; import { color, pass } from "three/tsl"; diff --git a/apps/example/src/ThreeJS/components/FiberCanvas.tsx b/apps/example/src/ThreeJS/components/FiberCanvas.tsx index 91b699553..a72d18b13 100644 --- a/apps/example/src/ThreeJS/components/FiberCanvas.tsx +++ b/apps/example/src/ThreeJS/components/FiberCanvas.tsx @@ -9,8 +9,8 @@ import { } from "@react-three/fiber"; import type { ViewProps } from "react-native"; import { PixelRatio } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { makeWebGPURenderer, ReactNativeCanvas } from "./makeWebGPURenderer"; diff --git a/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts b/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts index 39c4bf399..580f6d87b 100644 --- a/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts +++ b/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts @@ -1,4 +1,4 @@ -import type { NativeCanvas } from "react-native-wgpu"; +import type { NativeCanvas } from "react-native-webgpu"; import * as THREE from "three"; // Here we need to wrap the Canvas into a non-host object for now diff --git a/apps/example/src/ThreeJS/index.tsx b/apps/example/src/ThreeJS/index.tsx index 9184f0e5b..05c788769 100644 --- a/apps/example/src/ThreeJS/index.tsx +++ b/apps/example/src/ThreeJS/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { createStackNavigator } from "@react-navigation/stack"; -import { warnIfNotHardwareAccelerated } from "react-native-wgpu"; +import { warnIfNotHardwareAccelerated } from "react-native-webgpu"; import { Cube } from "./Cube"; import type { Routes } from "./Routes"; diff --git a/apps/example/src/Triangle/HelloTriangle.tsx b/apps/example/src/Triangle/HelloTriangle.tsx index 3e28d6c12..56ec732bc 100644 --- a/apps/example/src/Triangle/HelloTriangle.tsx +++ b/apps/example/src/Triangle/HelloTriangle.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from "react"; import { StyleSheet, View, PixelRatio } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { redFragWGSL, triangleVertWGSL } from "./triangle"; diff --git a/apps/example/src/Triangle/HelloTriangleMSAA.tsx b/apps/example/src/Triangle/HelloTriangleMSAA.tsx index 5d66983d5..481063830 100644 --- a/apps/example/src/Triangle/HelloTriangleMSAA.tsx +++ b/apps/example/src/Triangle/HelloTriangleMSAA.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from "react"; import { StyleSheet, View } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; import { redFragWGSL, triangleVertWGSL } from "./triangle"; diff --git a/apps/example/src/Wireframe/Wireframe.tsx b/apps/example/src/Wireframe/Wireframe.tsx index f5fb686e8..a6c602f5a 100644 --- a/apps/example/src/Wireframe/Wireframe.tsx +++ b/apps/example/src/Wireframe/Wireframe.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ import React from "react"; import { StyleSheet, View } from "react-native"; -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { mat3, mat4 } from "wgpu-matrix"; import { useWebGPU } from "../components/useWebGPU"; diff --git a/apps/example/src/components/Texture.tsx b/apps/example/src/components/Texture.tsx index d9e689b41..d9722b08c 100644 --- a/apps/example/src/components/Texture.tsx +++ b/apps/example/src/components/Texture.tsx @@ -1,7 +1,7 @@ import { useEffect, useRef, useState } from "react"; import { PixelRatio } from "react-native"; -import type { CanvasRef } from "react-native-wgpu"; -import { Canvas } from "react-native-wgpu"; +import type { CanvasRef } from "react-native-webgpu"; +import { Canvas } from "react-native-webgpu"; interface TextureState { pipeline: GPURenderPipeline; diff --git a/apps/example/src/components/useAssets.ts b/apps/example/src/components/useAssets.ts index 98f17d2d8..cf174ce35 100644 --- a/apps/example/src/components/useAssets.ts +++ b/apps/example/src/components/useAssets.ts @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { Image } from "react-native"; -import "react-native-wgpu"; +import "react-native-webgpu"; export const fetchAsset = async (mod: number) => { const response = await fetch(Image.resolveAssetSource(mod).uri); diff --git a/apps/example/src/components/useWebGPU.ts b/apps/example/src/components/useWebGPU.ts index ac8a631ac..196a39c26 100644 --- a/apps/example/src/components/useWebGPU.ts +++ b/apps/example/src/components/useWebGPU.ts @@ -4,7 +4,7 @@ import { useDevice, type CanvasRef, type NativeCanvas, -} from "react-native-wgpu"; +} from "react-native-webgpu"; interface SceneProps { context: GPUCanvasContext; diff --git a/apps/example/tsconfig.json b/apps/example/tsconfig.json index ecba55924..541449f56 100644 --- a/apps/example/tsconfig.json +++ b/apps/example/tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "noUncheckedIndexedAccess": false, "paths": { - "react-native-wgpu": ["../../packages/webgpu/src/index"], + "react-native-webgpu": ["../../packages/webgpu/src/index"], "three": ["../../node_modules/@types/three/src/Three.WebGPU.d.ts"], "three/tsl": ["../../node_modules/@types/three/src/Three.TSL.d.ts"], "three/addons/*": ["../../node_modules/@types/three/examples/jsm/*"] diff --git a/package.json b/package.json index d66820d35..ea7c880b2 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-native-webgpu", + "name": "react-native-webgpu-monorepo", "private": true, "workspaces": [ "packages/*", diff --git a/packages/webgpu-shim/README.md b/packages/webgpu-shim/README.md new file mode 100644 index 000000000..f23e4f6e7 --- /dev/null +++ b/packages/webgpu-shim/README.md @@ -0,0 +1,30 @@ +# react-native-wgpu + +This package is a thin shim that re-exports [`react-native-webgpu`](https://www.npmjs.com/package/react-native-webgpu) under its previous npm name. + +It exists so that projects that depended on the older `react-native-wgpu` name keep working without an immediate code change. New projects should depend on `react-native-webgpu` directly. + +## Installation + +``` +npm install react-native-wgpu +``` + +This installs `react-native-webgpu` as a dependency. All imports are forwarded: + +```ts +import { Canvas } from "react-native-wgpu"; +// equivalent to +import { Canvas } from "react-native-webgpu"; +``` + +## Migrating + +Replace the dependency in your `package.json`: + +```diff +- "react-native-wgpu": "^0.5.11" ++ "react-native-webgpu": "^0.5.11" +``` + +and update your imports from `"react-native-wgpu"` to `"react-native-webgpu"`. diff --git a/packages/webgpu-shim/eslint.config.mjs b/packages/webgpu-shim/eslint.config.mjs new file mode 100644 index 000000000..c1946f095 --- /dev/null +++ b/packages/webgpu-shim/eslint.config.mjs @@ -0,0 +1,25 @@ +import wcandillon from "eslint-config-react-native-wcandillon"; + +export default [ + { + ignores: ["node_modules/**", "lib/**", "*.config.js"] + }, + ...wcandillon, + { + files: ["**/*.{js,jsx,ts,tsx}"], + languageOptions: { + parserOptions: { + ecmaVersion: "latest", + sourceType: "module" + } + }, + rules: { + "prettier/prettier": [ + "error", + { + "trailingComma": "all" + } + ] + } + } +]; diff --git a/packages/webgpu-shim/package.json b/packages/webgpu-shim/package.json new file mode 100644 index 000000000..ff69270ce --- /dev/null +++ b/packages/webgpu-shim/package.json @@ -0,0 +1,71 @@ +{ + "name": "react-native-wgpu", + "version": "0.5.11", + "description": "Shim that re-exports react-native-webgpu under its previous package name", + "main": "lib/commonjs/index", + "module": "lib/module/index", + "types": "lib/typescript/src/index.d.ts", + "react-native": "src/index", + "source": "src/index", + "files": [ + "src/**", + "lib/**", + "!**/__tests__/**" + ], + "scripts": { + "lint": "eslint . --ext .ts,.tsx --max-warnings 0 --cache --fix", + "tsc": "tsc --noEmit", + "build": "bob build" + }, + "keywords": [ + "react-native", + "ios", + "android", + "webgpu", + "shim" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/wcandillon/react-native-webgpu.git" + }, + "author": "William Candillon (https://github.com/wcandillon)", + "license": "MIT", + "bugs": { + "url": "https://github.com/wcandillon/react-native-webgpu/issues" + }, + "homepage": "https://github.com/wcandillon/react-native-webgpu#readme", + "publishConfig": { + "registry": "https://registry.npmjs.org/" + }, + "dependencies": { + "react-native-webgpu": "*" + }, + "devDependencies": { + "@types/node": "^20.14.7", + "@types/react": "^18.2.44", + "@webgpu/types": "0.1.65", + "eslint": "9.35.0", + "eslint-config-react-native-wcandillon": "4.0.1", + "prettier": "^3.0.3", + "react-native-builder-bob": "^0.23.2", + "typescript": "^5.2.2" + }, + "peerDependencies": { + "react": "*", + "react-native": ">=0.81.0" + }, + "react-native-builder-bob": { + "source": "src", + "output": "lib", + "targets": [ + "commonjs", + "module", + [ + "typescript", + { + "project": "tsconfig.build.json" + } + ] + ] + } +} diff --git a/packages/webgpu-shim/src/index.ts b/packages/webgpu-shim/src/index.ts new file mode 100644 index 000000000..409910e79 --- /dev/null +++ b/packages/webgpu-shim/src/index.ts @@ -0,0 +1 @@ +export * from "react-native-webgpu"; diff --git a/packages/webgpu-shim/tsconfig.build.json b/packages/webgpu-shim/tsconfig.build.json new file mode 100644 index 000000000..c945ddb23 --- /dev/null +++ b/packages/webgpu-shim/tsconfig.build.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "noEmit": false + } +} diff --git a/packages/webgpu-shim/tsconfig.json b/packages/webgpu-shim/tsconfig.json new file mode 100644 index 000000000..7cfd0db45 --- /dev/null +++ b/packages/webgpu-shim/tsconfig.json @@ -0,0 +1,12 @@ +{ + "extends": "eslint-config-react-native-wcandillon/tsconfig.base", + "compilerOptions": { + "module": "esnext", + "noUncheckedIndexedAccess": false, + "jsx": "react", + "types": ["@webgpu/types", "@types/node"], + "paths": { + "react-native-webgpu": ["../webgpu/src/index"] + } + } +} diff --git a/packages/webgpu/CONTRIBUTING.md b/packages/webgpu/CONTRIBUTING.md index 1990e9bcf..df5fa242d 100644 --- a/packages/webgpu/CONTRIBUTING.md +++ b/packages/webgpu/CONTRIBUTING.md @@ -23,9 +23,9 @@ The [example app](/example/) demonstrates usage of the library. You need to run It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app. -If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/WgpuExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-wgpu`. +If you want to use Android Studio or XCode to edit the native code, you can open the `example/android` or `example/ios` directories respectively in those editors. To edit the Objective-C or Swift files, open `example/ios/WgpuExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > react-native-webgpu`. -To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-wgpu` under `Android`. +To edit the Java or Kotlin files, open `example/android` in Android studio and find the source files at `react-native-webgpu` under `Android`. You can use various commands from the root directory to work with the project. diff --git a/packages/webgpu/README.md b/packages/webgpu/README.md index 0ae1359b4..00f00154d 100644 --- a/packages/webgpu/README.md +++ b/packages/webgpu/README.md @@ -6,12 +6,12 @@ React Native WebGPU requires React Native 0.81 or newer. It doesn't support the ## Installation -Please note that the package name is `react-native-wgpu`. - ``` -npm install react-native-wgpu +npm install react-native-webgpu ``` +> The package was previously published as `react-native-wgpu`. A shim with that name is still available and simply re-exports `react-native-webgpu`. + ## With Expo Expo provides a React Native WebGPU template that works with React Three Fiber. @@ -53,7 +53,7 @@ Usage is identical to Web. ```tsx import React from "react"; import { StyleSheet, View, PixelRatio } from "react-native"; -import { Canvas, CanvasRef } from "react-native-wgpu"; +import { Canvas, CanvasRef } from "react-native-webgpu"; import { redFragWGSL, triangleVertWGSL } from "./triangle"; @@ -235,7 +235,7 @@ npm install react-native-reanimated react-native-worklets WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets: ```tsx -import { Canvas } from "react-native-wgpu"; +import { Canvas } from "react-native-webgpu"; import { runOnUI } from "react-native-reanimated"; const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => { diff --git a/packages/webgpu/android/CMakeLists.txt b/packages/webgpu/android/CMakeLists.txt index 6e7488b87..b9305e5da 100644 --- a/packages/webgpu/android/CMakeLists.txt +++ b/packages/webgpu/android/CMakeLists.txt @@ -5,7 +5,7 @@ set (CMAKE_VERBOSE_MAKEFILE ON) set (CMAKE_CXX_STANDARD 20) set (CMAKE_CXX_STANDARD_REQUIRED True) -set (PACKAGE_NAME "react-native-wgpu") +set (PACKAGE_NAME "react-native-webgpu") #link_directories(../libs/android/${ANDROID_ABI}/) diff --git a/packages/webgpu/android/build.gradle b/packages/webgpu/android/build.gradle index 460adc44d..043ab862a 100644 --- a/packages/webgpu/android/build.gradle +++ b/packages/webgpu/android/build.gradle @@ -40,7 +40,7 @@ static def findNodeModules(baseDir) { basePath = basePath.getParent() } - throw new GradleException("react-native-wgpu: Failed to find node_modules/ path!") + throw new GradleException("react-native-webgpu: Failed to find node_modules/ path!") } def nodeModules = findNodeModules(projectDir) diff --git a/packages/webgpu/android/src/main/java/com/webgpu/WebGPUModule.java b/packages/webgpu/android/src/main/java/com/webgpu/WebGPUModule.java index 75375700e..de228999b 100644 --- a/packages/webgpu/android/src/main/java/com/webgpu/WebGPUModule.java +++ b/packages/webgpu/android/src/main/java/com/webgpu/WebGPUModule.java @@ -21,7 +21,7 @@ @ReactModule(name = WebGPUModule.NAME) public class WebGPUModule extends NativeWebGPUModuleSpec { static { - System.loadLibrary("react-native-wgpu"); // Load the C++ library + System.loadLibrary("react-native-webgpu"); // Load the C++ library } public WebGPUModule(ReactApplicationContext reactContext) { diff --git a/packages/webgpu/apple/WebGPUModule.mm b/packages/webgpu/apple/WebGPUModule.mm index 99580aa14..e637633b0 100644 --- a/packages/webgpu/apple/WebGPUModule.mm +++ b/packages/webgpu/apple/WebGPUModule.mm @@ -59,7 +59,7 @@ - (void)invalidate { // (RCTBridgeProxy). jsi::Runtime *runtime = (jsi::Runtime *)self.bridge.runtime; if (!runtime) { - NSLog(@"Failed to install react-native-wgpu: jsi::Runtime* was null! " + NSLog(@"Failed to install react-native-webgpu: jsi::Runtime* was null! " @"(self.bridge=%@)", self.bridge); return [NSNumber numberWithBool:NO]; @@ -69,7 +69,7 @@ - (void)invalidate { // RCTCallInvokerModule. Works in both Legacy and Bridgeless. std::shared_ptr jsInvoker = _callInvoker.callInvoker; if (!jsInvoker) { - NSLog(@"Failed to install react-native-wgpu: react::CallInvoker was " + NSLog(@"Failed to install react-native-webgpu: react::CallInvoker was " @"null!"); return [NSNumber numberWithBool:NO]; } diff --git a/packages/webgpu/package.json b/packages/webgpu/package.json index bda3bc9a3..1dcaed0e1 100644 --- a/packages/webgpu/package.json +++ b/packages/webgpu/package.json @@ -1,5 +1,5 @@ { - "name": "react-native-wgpu", + "name": "react-native-webgpu", "version": "0.5.11", "description": "React Native WebGPU", "main": "lib/commonjs/index", diff --git a/packages/webgpu/react-native-wgpu.podspec b/packages/webgpu/react-native-webgpu.podspec similarity index 97% rename from packages/webgpu/react-native-wgpu.podspec rename to packages/webgpu/react-native-webgpu.podspec index ac01a3b66..6c9953bb4 100644 --- a/packages/webgpu/react-native-wgpu.podspec +++ b/packages/webgpu/react-native-webgpu.podspec @@ -4,7 +4,7 @@ package = JSON.parse(File.read(File.join(__dir__, "package.json"))) folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' Pod::Spec.new do |s| - s.name = "react-native-wgpu" + s.name = "react-native-webgpu" s.version = package["version"] s.summary = package["description"] s.homepage = package["homepage"] diff --git a/packages/webgpu/src/main/index.tsx b/packages/webgpu/src/main/index.tsx index df21bd780..51d035e01 100644 --- a/packages/webgpu/src/main/index.tsx +++ b/packages/webgpu/src/main/index.tsx @@ -35,6 +35,6 @@ if (typeof RNWebGPU !== "undefined") { global.createImageBitmap ?? RNWebGPU.createImageBitmap.bind(RNWebGPU); } else { console.warn( - `[react-native-wgpu] install() returned ${_installOk} but RNWebGPU global is not available`, + `[react-native-webgpu] install() returned ${_installOk} but RNWebGPU global is not available`, ); } diff --git a/yarn.lock b/yarn.lock index f6a59461c..4bcc6383b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3657,9 +3657,9 @@ __metadata: languageName: node linkType: hard -"@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::locator=react-native-webgpu%40workspace%3A.": +"@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::locator=react-native-webgpu-monorepo%40workspace%3A.": version: 9.4.0 - resolution: "@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::version=9.4.0&hash=7de131&locator=react-native-webgpu%40workspace%3A." + resolution: "@react-three/fiber@patch:@react-three/fiber@npm%3A9.4.0#./.yarn/patches/@react-three-fiber-npm-9.4.0-77fe8ee9bd.patch::version=9.4.0&hash=7de131&locator=react-native-webgpu-monorepo%40workspace%3A." dependencies: "@babel/runtime": ^7.17.8 "@types/react-reconciler": ^0.32.0 @@ -4969,7 +4969,7 @@ __metadata: react-native-safe-area-context: ^5.4.0 react-native-test-app: 4.4.10 react-native-web: ^0.21.2 - react-native-wgpu: "*" + react-native-webgpu: "*" react-native-worklets: 0.7.2 react-test-renderer: 18.2.0 teapot: ^1.0.0 @@ -12877,18 +12877,18 @@ __metadata: languageName: node linkType: hard -"react-native-webgpu@workspace:.": +"react-native-webgpu-monorepo@workspace:.": version: 0.0.0-use.local - resolution: "react-native-webgpu@workspace:." + resolution: "react-native-webgpu-monorepo@workspace:." dependencies: "@types/react-native-web": ^0.19.2 turbo: ^2.1.0 languageName: unknown linkType: soft -"react-native-wgpu@*, react-native-wgpu@workspace:packages/webgpu": +"react-native-webgpu@*, react-native-webgpu@workspace:packages/webgpu": version: 0.0.0-use.local - resolution: "react-native-wgpu@workspace:packages/webgpu" + resolution: "react-native-webgpu@workspace:packages/webgpu" dependencies: "@types/jest": ^29.5.12 "@types/lodash": ^4.17.5 @@ -12941,6 +12941,25 @@ __metadata: languageName: unknown linkType: soft +"react-native-wgpu@workspace:packages/webgpu-shim": + version: 0.0.0-use.local + resolution: "react-native-wgpu@workspace:packages/webgpu-shim" + dependencies: + "@types/node": ^20.14.7 + "@types/react": ^18.2.44 + "@webgpu/types": 0.1.65 + eslint: 9.35.0 + eslint-config-react-native-wcandillon: 4.0.1 + prettier: ^3.0.3 + react-native-builder-bob: ^0.23.2 + react-native-webgpu: "*" + typescript: ^5.2.2 + peerDependencies: + react: "*" + react-native: ">=0.81.0" + languageName: unknown + linkType: soft + "react-native-worklets@npm:0.7.2, react-native-worklets@npm:^0.7.0": version: 0.7.2 resolution: "react-native-worklets@npm:0.7.2"