Merge branch 'main' into gc-heuristics

Author: wcandillon

.github/workflows/ci.yml

@@ -9,17 +9,35 @@ on:
   merge_group:
     types:
       - checks_requested
+  workflow_dispatch:
+    inputs:
+      build_android:
+        description: 'Build for Android'
+        type: boolean
+        default: false
+      build_ios:
+        description: 'Build for iOS'
+        type: boolean
+        default: false
+      build_macos:
+        description: 'Build for macOS'
+        type: boolean
+        default: false
+      run_reference_tests:
+        description: 'Run reference tests'
+        type: boolean
+        default: false
 
 concurrency:
   group: ${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  static-analysis:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -36,11 +54,27 @@ jobs:
       - name: Typecheck files
         run: yarn tsc
 
-  test:
+      - name: Build
+        working-directory: packages/webgpu
+        run: yarn build
+
+      - name: Package
+        working-directory: packages/webgpu
+        run: yarn pack
+
+      - name: Upload package artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: package
+          path: packages/webgpu/package.tgz
+          compression-level: 0
+
+  reference-tests:
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.run_reference_tests == 'true'
     runs-on: macos-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
@@ -54,24 +88,22 @@ jobs:
         working-directory: packages/webgpu
         run: yarn test:ref
 
-      - name: Build package
-        run: yarn build
-
   build-android:
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.build_android == 'true'
     runs-on: macos-latest
     env:
       TURBO_CACHE_DIR: .turbo/android
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Cache turborepo for Android
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ env.TURBO_CACHE_DIR }}
           key: ${{ runner.os }}-turborepo-android-${{ hashFiles('yarn.lock') }}
@@ -98,7 +130,7 @@ jobs:
         id: setup-ndk
         with:
           ndk-version: r27d
-  
+
       - name: Set ANDROID_NDK
         run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV
 
@@ -112,7 +144,7 @@ jobs:
 
       - name: Cache Gradle
         if: env.turbo_cache_hit != 1
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.gradle/wrapper
@@ -128,20 +160,21 @@ jobs:
           yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --force
 
   build-ios:
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.build_ios == 'true'
     runs-on: macos-latest
     env:
       TURBO_CACHE_DIR: .turbo/ios
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup
         uses: ./.github/actions/setup
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Cache turborepo for iOS
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ env.TURBO_CACHE_DIR }}
           key: ${{ runner.os }}-turborepo-ios-${{ hashFiles('yarn.lock') }}
@@ -159,36 +192,39 @@ jobs:
       - name: Build example for iOS
         run: |
           yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
-# We disable it until RNTA support 0.81
-# build-macos:
-#   runs-on: macos-latest
-#   env:
-#     TURBO_CACHE_DIR: .turbo/macos
-#   steps:
-#     - name: Checkout
-#       uses: actions/checkout@v3
-
-#     - name: Setup
-#       uses: ./.github/actions/setup
-#       with:
-#         github_token: ${{ secrets.GITHUB_TOKEN }}
-
-#     - name: Cache turborepo for macOS
-#       uses: actions/cache@v3
-#       with:
-#         path: ${{ env.TURBO_CACHE_DIR }}
-#         key: ${{ runner.os }}-turborepo-macos-${{ hashFiles('yarn.lock') }}
-#         restore-keys: |
-#           ${{ runner.os }}-turborepo-macos-
-
-#     - name: Check turborepo cache for macOS
-#       run: |
-#         TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:macos --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:macos').cache.status")
-
-#         if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
-#           echo "turbo_cache_hit=1" >> $GITHUB_ENV
-#         fi
-
-#     - name: Build example for macOS
-#       run: |
-#         yarn turbo run build:macos --cache-dir="${{ env.TURBO_CACHE_DIR }}"
+
+  # Note: This job is disabled by default until RNTA supports 0.81
+  # Enable it manually via workflow_dispatch when needed
+  build-macos:
+    if: github.event_name == 'workflow_dispatch' && github.event.inputs.build_macos == 'true'
+    runs-on: macos-latest
+    env:
+      TURBO_CACHE_DIR: .turbo/macos
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./.github/actions/setup
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Cache turborepo for macOS
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.TURBO_CACHE_DIR }}
+          key: ${{ runner.os }}-turborepo-macos-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-turborepo-macos-
+
+      - name: Check turborepo cache for macOS
+        run: |
+          TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:macos --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:macos').cache.status")
+
+          if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
+            echo "turbo_cache_hit=1" >> $GITHUB_ENV
+          fi
+
+      - name: Build example for macOS
+        run: |
+          yarn turbo run build:macos --cache-dir="${{ env.TURBO_CACHE_DIR }}"

README.md

@@ -1,9 +1,8 @@
 # React Native WebGPU
 
 React Native implementation of WebGPU using [Dawn](https://dawn.googlesource.com/dawn).  
-This is currently a technical preview for early adopters.  
 
-React Native WebGPU requires React Native 0.81 or newer and doesn't run on legacy architecture.
+React Native WebGPU requires React Native 0.81 or newer. It doesn't support the legacy architecture.
 
 ## Installation
 
@@ -13,6 +12,17 @@ Please note that the package name is `react-native-wgpu`.
 npm install react-native-wgpu
 ```
 
+## With Expo
+
+Expo provides a React Native WebGPU template that works with React Three Fiber.
+The works on iOS, Android, and Web.
+
+```
+npx create-expo-app@latest -e with-webgpu
+```
+
+https://github.com/user-attachments/assets/efbd05f8-4ce0-46c2-919c-03e1095bc8ac
+
 Below are some examples from the [example app](/apps/example/).
 
 https://github.com/user-attachments/assets/116a41b2-2cf8-49f1-9f16-a5c83637c198
@@ -175,6 +185,19 @@ device.queue.submit([commandEncoder.finish()]);
 context.present();
 ```
 
+### Canvas Transparency
+
+On Android, the `alphaMode` property is ignored when configuring the canvas.
+To have a transparent canvas by default, use the `transparent` property.
+
+```tsx
+return (
+  <View style={style.container}>
+    <Canvas ref={ref} style={style.webgpu} transparent />
+  </View>
+);
+```
+
 ### External Textures
 
 This module provides a `createImageBitmap` function that you can use in `copyExternalImageToTexture`.

apps/example/getWebMetroConfig.js

@@ -0,0 +1,32 @@
+const path = require("path");
+const root = path.resolve(__dirname, "../..");
+const rnwPath = path.resolve(root, "node_modules/react-native-web");
+const assetRegistryPath = path.resolve(
+  root,
+  "node_modules/react-native-web/dist/modules/AssetRegistry/index",
+);
+
+module.exports = function (metroConfig) {
+  metroConfig.resolver.platforms = ["ios", "android", "web"];
+  const origResolveRequest = metroConfig.resolver.resolveRequest;
+  metroConfig.resolver.resolveRequest = (contextRaw, moduleName, platform) => {
+    const context = {
+      ...contextRaw,
+      preferNativePlatform: false,
+    };
+
+    if (moduleName === "react-native") {
+      return {
+        filePath: path.resolve(rnwPath, "dist/index.js"),
+        type: "sourceFile",
+      };
+    }
+
+    // Let default config handle other modules
+    return origResolveRequest(context, moduleName, platform);
+  };
+
+  metroConfig.transformer.assetRegistryPath = assetRegistryPath;
+
+  return metroConfig;
+};

apps/example/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="/src/assets/react.png" type="image/png">
+    <script src="https://unpkg.com/canvaskit-wasm/bin/full/canvaskit.js"></script>
+
+    <title>Example</title>
+    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+    <style id="react-native-web-reset">
+      /* These styles make the body full-height */
+      html,
+      body {
+        height: 100%;
+      }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body {
+        overflow: hidden;
+      }
+      /* These styles make the root element full-height */
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  <script src="index.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable" defer></script>
+</body>
+</html>

apps/example/index.web.js

@@ -0,0 +1,22 @@
+import { AppRegistry } from "react-native";
+
+import App from "./src/App";
+import { name as appName } from "./app.json";
+
+AppRegistry.registerComponent(appName, () => App);
+
+const rootTag = document.getElementById("root");
+if (process.env.NODE_ENV !== "production") {
+  if (!rootTag) {
+    throw new Error(
+      'Required HTML element with id "root" was not found in the document HTML.',
+    );
+  }
+}
+
+CanvasKitInit({
+  locateFile: (file) => `https://unpkg.com/canvaskit-wasm/bin/full/${file}`,
+}).then((CanvasKit) => {
+  window.CanvasKit = global.CanvasKit = CanvasKit;
+  AppRegistry.runApplication(appName, { rootTag });
+});

apps/example/ios/Podfile.lock

@@ -1865,7 +1865,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-wgpu (0.3.0):
+  - react-native-wgpu (0.4.1):
     - boost
     - DoubleConversion
     - fast_float
@@ -2903,7 +2903,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: 75b6604b667d297292345302cc5bfb6b6aeccc1b
   react-native-safe-area-context: c6e2edd1c1da07bdce287fa9d9e60c5f7b514616
   react-native-skia: 5bf2b2107cd7f2d806fd364f5e16b1c7554ed3cd
-  react-native-wgpu: 6704c6ad8ef91fdbbad58543089ac50c0e6f3fa7
+  react-native-wgpu: 9b91079473265b91dc2c60c692845b70a4f0182b
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d
   React-perflogger: 5536d2df3d18fe0920263466f7b46a56351c0510