fix(📦): fix missing React imports (#284)

Author: wcandillon

.github/workflows/ci.yml

@@ -15,11 +15,11 @@ concurrency:
   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,42 +36,56 @@ jobs:
       - name: Typecheck files
         run: yarn tsc
 
-  test:
-    runs-on: macos-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Install Chrome
-        run: npx puppeteer browsers install chrome
+      - name: Build
+        working-directory: packages/webgpu
+        run: yarn build
 
-      - name: Run reference test suite
+      - name: Package
         working-directory: packages/webgpu
-        run: yarn test:ref
+        run: yarn pack
 
-      - name: Build package
-        run: yarn build
+      - name: Upload package artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: package
+          path: packages/webgpu/package.tgz
+          compression-level: 0
+
+  # These are disabled since they are not useful in the context of 
+  # GitHub Actions CI and they slow down the workflow significantly.
+  # test:
+  #   runs-on: macos-latest
+  #   steps:
+  #     - name: Checkout
+  #       uses: actions/checkout@v4
+
+  #     - name: Setup
+  #       uses: ./.github/actions/setup
+  #       with:
+  #         github_token: ${{ secrets.GITHUB_TOKEN }}
+
+  #     - name: Install Chrome
+  #       run: npx puppeteer browsers install chrome
+
+  #     - name: Run reference test suite
+  #       working-directory: packages/webgpu
+  #       run: yarn test:ref
 
   build-android:
     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') }}
@@ -112,7 +126,7 @@ jobs:
 
       - name: Cache Gradle
         if: env.turbo_cache_hit != 1
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.gradle/wrapper
@@ -133,15 +147,15 @@ jobs:
       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') }}

apps/example/ios/Podfile.lock

@@ -1865,7 +1865,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - react-native-wgpu (0.4.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: 5abf760f89d1517255e48de1b5208d2a307109a0
+  react-native-wgpu: 9b91079473265b91dc2c60c692845b70a4f0182b
   React-NativeModulesApple: 879fbdc5dcff7136abceb7880fe8a2022a1bd7c3
   React-oscompat: 93b5535ea7f7dff46aaee4f78309a70979bdde9d
   React-perflogger: 5536d2df3d18fe0920263466f7b46a56351c0510

packages/webgpu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wgpu",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React Native WebGPU",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

packages/webgpu/src/Canvas.tsx

@@ -1,6 +1,11 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import type { ViewProps } from "react-native";
 import { Platform, View } from "react-native";
-import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 
 import WebGPUNativeView from "./WebGPUViewNativeComponent";
 

packages/webgpu/src/hooks.tsx

@@ -1,12 +1,12 @@
-import type { ReactNode } from "react";
-import {
+import React, {
   createContext,
   useContext,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from "react";
+import type { ReactNode } from "react";
 
 import type { CanvasRef, NativeCanvas } from "./Canvas";
 

packages/webgpu/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "module": "esnext",
     "noUncheckedIndexedAccess": false,
+    "jsx": "react",
     "types": ["@webgpu/types", "@types/node", "@types/jest"]
   }
 }