From 7c90aa3b0a93c4c4ef456eaa2f011d7590546c6f Mon Sep 17 00:00:00 2001 From: William Candillon Date: Wed, 2 Oct 2024 15:31:46 +0200 Subject: [PATCH 01/21] Run e2e on CI --- .github/workflows/ci.yml | 62 +++++++++++++++++++++++++++++++++++ apps/example/babel.config.js | 3 +- apps/example/ios/Podfile.lock | 4 +-- apps/example/package.json | 1 + apps/example/src/App.tsx | 4 +-- apps/example/src/Tests.tsx | 1 - yarn.lock | 8 +++++ 7 files changed, 77 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e1296580f..084bb7a6e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -132,6 +132,68 @@ jobs: run: | yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --force + test-android: + needs: build-android + runs-on: macos-latest + env: + TURBO_CACHE_DIR: .turbo/android + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup + uses: ./.github/actions/setup + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + + - name: Restore APK + id: cache-apk + uses: actions/cache/restore@v3 + with: + path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + key: apk-${{ github.sha }} + + - name: SDKs - download required images + run: $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager "system-images;android-30;default;x86_64" + + - name: Emulator - Create + run: $ANDROID_HOME/cmdline-tools/latest/bin/avdmanager create avd -n Pixel_API_30 --device 'Nexus 5X' --package "system-images;android-30;default;x86_64" --sdcard 512M + + - name: Emulator - Boot + run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd Pixel_API_30 -wipe-data -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim & + + - name: ADB Wait For Device + run: adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed) ]]; do sleep 1; done;' + timeout-minutes: 10 + + - name: Start Package Manager + working-directory: apps/example + run: CI=true yarn start & + + - name: Check APK existence + uses: andstor/file-existence-action@v2 + with: + files: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + fail: true + + - name: Install APK + run: adb install -r apps/example/android/app/build/outputs/apk/debug/app-debug.apk + + - name: Launch APK + env: + PACKAGE_NAME: com.webgpu + run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1 + + - name: Run e2e Tests + working-directory: packages/webgpu + run: yarn test + + - uses: actions/upload-artifact@v4 + if: failure() + with: + path: packages/webgpu/src/__tests__/snapshots/ + name: tests-snapshots-screenshots + build-ios: runs-on: macos-latest env: diff --git a/apps/example/babel.config.js b/apps/example/babel.config.js index 32bed768c..b561a0598 100644 --- a/apps/example/babel.config.js +++ b/apps/example/babel.config.js @@ -1,6 +1,7 @@ module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [ - 'react-native-reanimated/plugin' + 'react-native-reanimated/plugin', + 'transform-inline-environment-variables' ], }; diff --git a/apps/example/ios/Podfile.lock b/apps/example/ios/Podfile.lock index 78dff985e..731f4784d 100644 --- a/apps/example/ios/Podfile.lock +++ b/apps/example/ios/Podfile.lock @@ -937,7 +937,7 @@ PODS: - React-debug - react-native-safe-area-context (4.11.0): - React-Core - - react-native-wgpu (0.1.7): + - react-native-wgpu (0.1.8): - DoubleConversion - glog - hermes-engine @@ -1553,7 +1553,7 @@ SPEC CHECKSUMS: React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326 react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9 - react-native-wgpu: df38193ef32dee670b8be243ade64fb118237a54 + react-native-wgpu: 2805714d6764920ef05df7648cdb861d8aa94416 React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1 React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0 React-perflogger: 32ed45d9cee02cf6639acae34251590dccd30994 diff --git a/apps/example/package.json b/apps/example/package.json index b8ea34132..a26f20b9a 100644 --- a/apps/example/package.json +++ b/apps/example/package.json @@ -47,6 +47,7 @@ "@types/three": "0.168.0", "@webgpu/types": "^0.1.44", "babel-jest": "^29.6.3", + "babel-plugin-transform-inline-environment-variables": "^0.4.4", "eslint": "^8.19.0", "eslint-config-react-native-wcandillon": "^3.10.2", "jest": "^29.6.3", diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index 5756d274f..a11b219a0 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -4,7 +4,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler"; import type { Routes } from "./Route"; import { Home } from "./Home"; -import { Tests } from "./Tests"; +import { CI, Tests } from "./Tests"; import { useAssets } from "./components/useAssets"; import { Cube, @@ -40,7 +40,7 @@ function App() { return ( - + Date: Wed, 2 Oct 2024 16:08:19 +0200 Subject: [PATCH 02/21] :arrow_up: --- .github/workflows/ci.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 084bb7a6e..c46d8607b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -134,7 +134,7 @@ jobs: test-android: needs: build-android - runs-on: macos-latest + runs-on: macos-latest-large env: TURBO_CACHE_DIR: .turbo/android steps: @@ -164,7 +164,7 @@ jobs: - name: ADB Wait For Device run: adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed) ]]; do sleep 1; done;' - timeout-minutes: 10 + timeout-minutes: 15 - name: Start Package Manager working-directory: apps/example From 7b2158aeb665b64f1c7fac49c2f915ef49d39e93 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Wed, 2 Oct 2024 16:30:17 +0200 Subject: [PATCH 03/21] :green_heart: --- .github/workflows/ci.yml | 29 ++++++++--------------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c46d8607b..af73ddbb3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -82,23 +82,13 @@ jobs: restore-keys: | ${{ runner.os }}-turborepo-android - - name: Check turborepo cache for Android - run: | - TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:android').cache.status") - - if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then - echo "turbo_cache_hit=1" >> $GITHUB_ENV - fi - - name: Install JDK - if: env.turbo_cache_hit != 1 uses: actions/setup-java@v3 with: distribution: 'zulu' java-version: '17' - name: Install NDK - if: env.turbo_cache_hit != 1 uses: nttld/setup-ndk@v1 id: setup-ndk with: @@ -108,7 +98,6 @@ jobs: run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV - name: Finalize Android SDK - if: env.turbo_cache_hit != 1 run: | /bin/bash -c "yes | $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager --licenses > /dev/null" @@ -116,7 +105,6 @@ jobs: run: echo "sdk.dir=$ANDROID_HOME" > $GITHUB_WORKSPACE/apps/example/android/local.properties - name: Cache Gradle - if: env.turbo_cache_hit != 1 uses: actions/cache@v3 with: path: | @@ -130,7 +118,14 @@ jobs: env: JAVA_OPTS: "-XX:MaxHeapSize=6g" run: | - yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --force + yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" + - name: Cache apk + uses: actions/cache/save@v3 + env: + cache-name: cache-apk + with: + path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + key: apk-${{ github.sha }} test-android: needs: build-android @@ -215,14 +210,6 @@ jobs: restore-keys: | ${{ runner.os }}-turborepo-ios- - - name: Check turborepo cache for iOS - run: | - TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:ios').cache.status") - - if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then - echo "turbo_cache_hit=1" >> $GITHUB_ENV - fi - - name: Build example for iOS run: | yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}" From ad2480fc302307408e52fe67d0802487ca1494c0 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Wed, 2 Oct 2024 16:38:12 +0200 Subject: [PATCH 04/21] :green_heart: --- .github/workflows/ci.yml | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index af73ddbb3..d39e49127 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -119,13 +119,14 @@ jobs: JAVA_OPTS: "-XX:MaxHeapSize=6g" run: | yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" - - name: Cache apk - uses: actions/cache/save@v3 - env: - cache-name: cache-apk - with: - path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk - key: apk-${{ github.sha }} + + - name: Cache apk + uses: actions/cache/save@v3 + env: + cache-name: cache-apk + with: + path: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + key: apk-${{ github.sha }} test-android: needs: build-android From c0bdd5e1b2fa465c3e8821008cac566cfb29ed62 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Wed, 2 Oct 2024 20:34:56 +0200 Subject: [PATCH 05/21] :wrench: --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d39e49127..1124902dc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -118,7 +118,7 @@ jobs: env: JAVA_OPTS: "-XX:MaxHeapSize=6g" run: | - yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" + yarn turbo run build:android --cache-dir="${{ env.TURBO_CACHE_DIR }}" --force - name: Cache apk uses: actions/cache/save@v3 From d0b748d2045c5244ab8179f693e14fcde4ce86a9 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Wed, 2 Oct 2024 21:58:55 +0200 Subject: [PATCH 06/21] :green_heart: --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1124902dc..5eb4ae9bd 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -177,7 +177,7 @@ jobs: - name: Launch APK env: - PACKAGE_NAME: com.webgpu + PACKAGE_NAME: com.wgpuexample run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1 - name: Run e2e Tests From 96b5360896c66bc02935d06e67af869a3472a445 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 08:08:43 +0200 Subject: [PATCH 07/21] :green_heart: --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5eb4ae9bd..a34359106 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -177,7 +177,7 @@ jobs: - name: Launch APK env: - PACKAGE_NAME: com.wgpuexample + PACKAGE_NAME: com.microsoft.reacttestapp run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1 - name: Run e2e Tests From d501eec9551013f28416f1ff745303be3dfb87c7 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 08:48:29 +0200 Subject: [PATCH 08/21] test --- apps/example/src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index a11b219a0..5a8a35470 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -4,7 +4,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler"; import type { Routes } from "./Route"; import { Home } from "./Home"; -import { CI, Tests } from "./Tests"; +import { Tests } from "./Tests"; import { useAssets } from "./components/useAssets"; import { Cube, @@ -40,7 +40,7 @@ function App() { return ( - + Date: Thu, 3 Oct 2024 09:24:18 +0200 Subject: [PATCH 09/21] :wrench: --- .github/workflows/ci.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a34359106..00daf9c60 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -175,6 +175,9 @@ jobs: - name: Install APK run: adb install -r apps/example/android/app/build/outputs/apk/debug/app-debug.apk + - name: Reverse Port + run: adb devices | grep '\t' | awk '{print $1}' | sed 's/\\s//g' | xargs -I {} adb -s {} reverse tcp:8081 tcp:8081 + - name: Launch APK env: PACKAGE_NAME: com.microsoft.reacttestapp From 4b3833267bf2b6e85ac3a05eb4af859f613b6c6f Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 09:47:22 +0200 Subject: [PATCH 10/21] :wrench: --- apps/example/src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index 5a8a35470..a11b219a0 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -4,7 +4,7 @@ import { GestureHandlerRootView } from "react-native-gesture-handler"; import type { Routes } from "./Route"; import { Home } from "./Home"; -import { Tests } from "./Tests"; +import { CI, Tests } from "./Tests"; import { useAssets } from "./components/useAssets"; import { Cube, @@ -40,7 +40,7 @@ function App() { return ( - + Date: Thu, 3 Oct 2024 09:53:30 +0200 Subject: [PATCH 11/21] :wrench: --- .github/workflows/ci.yml | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 00daf9c60..553894104 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -164,7 +164,7 @@ jobs: - name: Start Package Manager working-directory: apps/example - run: CI=true yarn start & + run: CI=true yarn start > yarn_start_output.log 2>&1 & - name: Check APK existence uses: andstor/file-existence-action@v2 @@ -193,6 +193,10 @@ jobs: path: packages/webgpu/src/__tests__/snapshots/ name: tests-snapshots-screenshots + - name: Display yarn start output + if: always() + run: cat apps/example/yarn_start_output.log + build-ios: runs-on: macos-latest env: From 599fd5dcccfa43e004445db4411aa08e2fe7e4d0 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 10:35:11 +0200 Subject: [PATCH 12/21] :wrench: --- .github/workflows/ci.yml | 4 ++++ apps/example/src/App.tsx | 2 ++ 2 files changed, 6 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 553894104..377802370 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -197,6 +197,10 @@ jobs: if: always() run: cat apps/example/yarn_start_output.log + - name: Display logcat output + if: always() + run: adb logcat -d > logcat_output.txt && cat logcat_output.txt + build-ios: runs-on: macos-latest env: diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index a11b219a0..b0c7da883 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -32,6 +32,8 @@ window.parent = window; const Stack = createNativeStackNavigator(); +console.log({ CI }); + function App() { const assets = useAssets(); if (assets === null) { From a16467fad84a9cc6a9f3dba6301500b7ac03b7bd Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 11:05:43 +0200 Subject: [PATCH 13/21] :wrench: --- apps/example/src/Tests.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index 1392682be..6e1fcfe48 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -13,6 +13,10 @@ import { Texture } from "./components/Texture"; export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); +console.log({ + CI, + presentationFormat: navigator.gpu.getPreferredCanvasFormat(), +}); const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); const useWebGPU = () => { From 0190dd9f48d37a92818fa24c1debd05bc5297ad9 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 11:17:33 +0200 Subject: [PATCH 14/21] :wrench: --- apps/example/src/Tests.tsx | 4 +++- packages/webgpu/src/index.tsx | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index 6e1fcfe48..cb5d0c09c 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { Dimensions, Text, View, Image } from "react-native"; -import { GPUOffscreenCanvas } from "react-native-wgpu"; +import { GPUOffscreenCanvas, initWebGPU } from "react-native-wgpu"; import { mat4, vec3, mat3 } from "wgpu-matrix"; import { useClient } from "./useClient"; @@ -11,6 +11,8 @@ import { redFragWGSL, triangleVertWGSL } from "./Triangle/triangle"; import type { AssetProps } from "./components/useAssets"; import { Texture } from "./components/Texture"; +initWebGPU(); + export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); console.log({ diff --git a/packages/webgpu/src/index.tsx b/packages/webgpu/src/index.tsx index d6268d4dd..c4d4f81d4 100644 --- a/packages/webgpu/src/index.tsx +++ b/packages/webgpu/src/index.tsx @@ -195,3 +195,10 @@ global.createImageBitmap = global.createImageBitmap ?? ((...params: Parameters) => new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params)))); + +export const initWebGPU = () => { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + navigator.gpu = RNWebGPU.gpu; + console.log("WebGPU initialized"); +}; From 77cd71d1208f09530ff597651d5225ba740de93b Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 11:24:44 +0200 Subject: [PATCH 15/21] :wrench: --- apps/example/index.js | 5 +---- apps/example/src/App.tsx | 2 -- apps/example/src/Tests.tsx | 8 +++----- packages/webgpu/src/index.tsx | 7 ------- 4 files changed, 4 insertions(+), 18 deletions(-) diff --git a/apps/example/index.js b/apps/example/index.js index 69303b34d..08e120017 100644 --- a/apps/example/index.js +++ b/apps/example/index.js @@ -1,7 +1,4 @@ -/** - * @format - */ - +import "react-native-wgpu"; import {AppRegistry} from 'react-native'; import App from './src/App'; import {name as appName} from './app.json'; diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index b0c7da883..a11b219a0 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -32,8 +32,6 @@ window.parent = window; const Stack = createNativeStackNavigator(); -console.log({ CI }); - function App() { const assets = useAssets(); if (assets === null) { diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index cb5d0c09c..bfd897223 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { Dimensions, Text, View, Image } from "react-native"; -import { GPUOffscreenCanvas, initWebGPU } from "react-native-wgpu"; +import { GPUOffscreenCanvas } from "react-native-wgpu"; import { mat4, vec3, mat3 } from "wgpu-matrix"; import { useClient } from "./useClient"; @@ -11,15 +11,13 @@ import { redFragWGSL, triangleVertWGSL } from "./Triangle/triangle"; import type { AssetProps } from "./components/useAssets"; import { Texture } from "./components/Texture"; -initWebGPU(); - export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); +const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); console.log({ CI, - presentationFormat: navigator.gpu.getPreferredCanvasFormat(), + presentationFormat, }); -const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); const useWebGPU = () => { const [adapter, setAdapter] = useState(null); diff --git a/packages/webgpu/src/index.tsx b/packages/webgpu/src/index.tsx index c4d4f81d4..d6268d4dd 100644 --- a/packages/webgpu/src/index.tsx +++ b/packages/webgpu/src/index.tsx @@ -195,10 +195,3 @@ global.createImageBitmap = global.createImageBitmap ?? ((...params: Parameters) => new Promise((resolve) => resolve(RNWebGPU.createImageBitmap(...params)))); - -export const initWebGPU = () => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - navigator.gpu = RNWebGPU.gpu; - console.log("WebGPU initialized"); -}; From 4d495a822a7f9df67a00a0fa2abceac08d1bdadf Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 11:25:56 +0200 Subject: [PATCH 16/21] :wrench: --- apps/example/src/Tests.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index bfd897223..1392682be 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -14,10 +14,6 @@ import { Texture } from "./components/Texture"; export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); -console.log({ - CI, - presentationFormat, -}); const useWebGPU = () => { const [adapter, setAdapter] = useState(null); From 3f39e91a5f222f86e77f0c22930f6cccfac966da Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 13:37:05 +0200 Subject: [PATCH 17/21] :wrench: --- apps/example/src/Tests.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index 1392682be..bfd897223 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -14,6 +14,10 @@ import { Texture } from "./components/Texture"; export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); +console.log({ + CI, + presentationFormat, +}); const useWebGPU = () => { const [adapter, setAdapter] = useState(null); From 58350b69492add0029ec297c353de54a475542c1 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 13:46:54 +0200 Subject: [PATCH 18/21] :wrench: --- apps/example/src/Tests.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index bfd897223..163bda5bd 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -24,13 +24,16 @@ const useWebGPU = () => { const [device, setDevice] = useState(null); useEffect(() => { (async () => { + console.log("Requesting adapter"); const a = await navigator.gpu.requestAdapter(); if (!a) { throw new Error("No adapter"); } + console.log("Requesting device"); const d = await a.requestDevice(); setAdapter(a); setDevice(d); + console.log("Ready"); })(); }, []); return { adapter, device }; @@ -43,6 +46,7 @@ export const Tests = ({ assets: { di3D, saturn, moon } }: AssetProps) => { useEffect(() => { if (client !== null && adapter !== null && device !== null) { client.onmessage = (e) => { + console.log("GOT A MESSAGE"); const tree = JSON.parse(e.data); if (tree.code) { const canvas = new GPUOffscreenCanvas(1024, 1024); From 5abb13a1d3dde1dc5b8a92114f7b1dbb34cbe826 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 14:15:12 +0200 Subject: [PATCH 19/21] :wrench: --- apps/example/src/Tests.tsx | 1 + packages/webgpu/src/__tests__/setup.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index 163bda5bd..ba96a4442 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -45,6 +45,7 @@ export const Tests = ({ assets: { di3D, saturn, moon } }: AssetProps) => { const [client, hostname] = useClient(); useEffect(() => { if (client !== null && adapter !== null && device !== null) { + console.log("p1"); client.onmessage = (e) => { console.log("GOT A MESSAGE"); const tree = JSON.parse(e.data); diff --git a/packages/webgpu/src/__tests__/setup.ts b/packages/webgpu/src/__tests__/setup.ts index 8ffad6122..8e0a1ae5b 100644 --- a/packages/webgpu/src/__tests__/setup.ts +++ b/packages/webgpu/src/__tests__/setup.ts @@ -91,6 +91,7 @@ class RemoteTestingClient implements TestingClient { fn: (ctx: GPUTestingContext & C) => R | Promise, context?: C, ): Promise { + console.log("eval"); const ctx = this.prepareContext(context ?? {}); const body = { code: fn.toString(), ctx }; return this.handleResponse(JSON.stringify(body)); From f8e847d52ed7db064c9156a6c22f29e73da2e357 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 14:45:51 +0200 Subject: [PATCH 20/21] :wrench: --- apps/example/src/Tests.tsx | 1 - apps/example/src/useClient.ts | 1 + packages/webgpu/src/__tests__/setup.ts | 3 ++- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index ba96a4442..cd4443d6e 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -1,5 +1,4 @@ /* eslint-disable no-eval */ - import React, { useEffect, useState } from "react"; import { Dimensions, Text, View, Image } from "react-native"; import { GPUOffscreenCanvas } from "react-native-wgpu"; diff --git a/apps/example/src/useClient.ts b/apps/example/src/useClient.ts index d9b505cd8..3a06e1755 100644 --- a/apps/example/src/useClient.ts +++ b/apps/example/src/useClient.ts @@ -17,6 +17,7 @@ export const useClient = (): UseClient => { const ws = new WebSocket(url); ws.onopen = () => { setClient(ws); + console.log(JSON.stringify({ OS: Platform.OS, arch: "paper" })); ws.send(JSON.stringify({ OS: Platform.OS, arch: "paper" })); }; ws.onclose = () => { diff --git a/packages/webgpu/src/__tests__/setup.ts b/packages/webgpu/src/__tests__/setup.ts index 8e0a1ae5b..73871628f 100644 --- a/packages/webgpu/src/__tests__/setup.ts +++ b/packages/webgpu/src/__tests__/setup.ts @@ -91,7 +91,6 @@ class RemoteTestingClient implements TestingClient { fn: (ctx: GPUTestingContext & C) => R | Promise, context?: C, ): Promise { - console.log("eval"); const ctx = this.prepareContext(context ?? {}); const body = { code: fn.toString(), ctx }; return this.handleResponse(JSON.stringify(body)); @@ -100,8 +99,10 @@ class RemoteTestingClient implements TestingClient { private handleResponse(body: string): Promise { return new Promise((resolve) => { this.client.once("message", (raw: Buffer) => { + console.log("receive message"); resolve(JSON.parse(raw.toString())); }); + console.log("send message"); this.client.send(body); }); } From 50c737b3326d8e24d2e7e05747b67e8330ea09e5 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Thu, 3 Oct 2024 16:11:05 +0200 Subject: [PATCH 21/21] :wrench: --- .github/workflows/ci.yml | 142 +++++++++++++++++++++++++++++++++- apps/example/src/Tests.tsx | 9 +-- apps/example/src/useClient.ts | 1 - 3 files changed, 141 insertions(+), 11 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 377802370..761b54f2d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -197,9 +197,147 @@ jobs: if: always() run: cat apps/example/yarn_start_output.log - - name: Display logcat output + test-android2: + needs: build-android + runs-on: ubuntu-22.04 + env: + TURBO_CACHE_DIR: .turbo/android + ANDROID_AVD_HOME: ${{ github.workspace }}/.android/avd + ANDROID_EMULATOR_USE_SYSTEM_LIBS: 'true' + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup + uses: ./.github/actions/setup + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + + - name: Install SDK Tools + run: | + sudo apt-get update + sudo apt-get install -y openjdk-11-jdk qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils + sudo adduser $USER libvirt + sudo adduser $USER kvm + sdkmanager --update + + - name: Adjust KVM permissions + run: sudo chown $USER /dev/kvm + + - name: Install system images + run: sdkmanager "system-images;android-30;default;x86_64" + + - name: Emulator - Create + run: avdmanager create avd -n Pixel_API_30 --device 'Nexus 5X' --package "system-images;android-30;default;x86_64" --sdcard 512M + + - name: Start Emulator + run: | + $ANDROID_HOME/emulator/emulator -avd Pixel_API_30 -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim -netdelay none -netspeed full > emulator_output.log 2>&1 & + + - name: Wait for emulator to boot + run: | + adb wait-for-device + adb shell 'while [[ $(getprop sys.boot_completed) != "1" ]]; do sleep 1; done;' + + - name: Test network connectivity + run: adb shell ping -c 3 www.google.com + + - name: Start Package Manager + working-directory: apps/example + run: CI=true yarn start > yarn_start_output.log 2>&1 & + + - name: Check APK existence + uses: andstor/file-existence-action@v2 + with: + files: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + fail: true + + - name: Install APK + run: adb install -r apps/example/android/app/build/outputs/apk/debug/app-debug.apk + + - name: Reverse Port + run: adb reverse tcp:8081 tcp:8081 + + - name: Launch APK + env: + PACKAGE_NAME: com.microsoft.reacttestapp + run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1 + + - name: Run e2e Tests + working-directory: packages/webgpu + run: yarn test + + - uses: actions/upload-artifact@v4 + if: failure() + with: + path: packages/webgpu/src/__tests__/snapshots/ + name: tests-snapshots-screenshots + + - name: Display yarn start output + if: always() + run: cat apps/example/yarn_start_output.log + + - name: Upload emulator logs + if: failure() + uses: actions/upload-artifact@v4 + with: + name: emulator-logs + path: emulator_output.log + + test-android3: + needs: build-android + runs-on: ubuntu-22.04 + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup + uses: ./.github/actions/setup + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + + - uses: reactivecircus/android-emulator-runner@v2 + with: + api-level: 30 + target: default + arch: x86_64 + profile: Nexus 5X + emulator-options: '-no-window -noaudio -no-boot-anim -netdelay none -netspeed full' + + - name: Start Package Manager + working-directory: apps/example + run: CI=true yarn start > yarn_start_output.log 2>&1 & + + - name: Check APK existence + uses: andstor/file-existence-action@v2 + with: + files: apps/example/android/app/build/outputs/apk/debug/app-debug.apk + fail: true + + - name: Install APK + run: adb install -r apps/example/android/app/build/outputs/apk/debug/app-debug.apk + + - name: Reverse Port + run: adb reverse tcp:8081 tcp:8081 + + - name: Launch APK + env: + PACKAGE_NAME: com.microsoft.reacttestapp + run: adb shell monkey -p ${{ env.PACKAGE_NAME }} 1 + + - name: Run e2e Tests + working-directory: packages/webgpu + run: yarn test + + - uses: actions/upload-artifact@v4 + if: failure() + with: + path: packages/webgpu/src/__tests__/snapshots/ + name: tests-snapshots-screenshots + + - name: Display yarn start output if: always() - run: adb logcat -d > logcat_output.txt && cat logcat_output.txt + run: cat apps/example/yarn_start_output.log build-ios: runs-on: macos-latest diff --git a/apps/example/src/Tests.tsx b/apps/example/src/Tests.tsx index cd4443d6e..571f27e46 100644 --- a/apps/example/src/Tests.tsx +++ b/apps/example/src/Tests.tsx @@ -13,26 +13,19 @@ import { Texture } from "./components/Texture"; export const CI = process.env.CI === "true"; const { width } = Dimensions.get("window"); const presentationFormat = navigator.gpu.getPreferredCanvasFormat(); -console.log({ - CI, - presentationFormat, -}); const useWebGPU = () => { const [adapter, setAdapter] = useState(null); const [device, setDevice] = useState(null); useEffect(() => { (async () => { - console.log("Requesting adapter"); const a = await navigator.gpu.requestAdapter(); if (!a) { throw new Error("No adapter"); } - console.log("Requesting device"); const d = await a.requestDevice(); setAdapter(a); setDevice(d); - console.log("Ready"); })(); }, []); return { adapter, device }; @@ -44,7 +37,7 @@ export const Tests = ({ assets: { di3D, saturn, moon } }: AssetProps) => { const [client, hostname] = useClient(); useEffect(() => { if (client !== null && adapter !== null && device !== null) { - console.log("p1"); + console.log("ready to listen"); client.onmessage = (e) => { console.log("GOT A MESSAGE"); const tree = JSON.parse(e.data); diff --git a/apps/example/src/useClient.ts b/apps/example/src/useClient.ts index 3a06e1755..d9b505cd8 100644 --- a/apps/example/src/useClient.ts +++ b/apps/example/src/useClient.ts @@ -17,7 +17,6 @@ export const useClient = (): UseClient => { const ws = new WebSocket(url); ws.onopen = () => { setClient(ws); - console.log(JSON.stringify({ OS: Platform.OS, arch: "paper" })); ws.send(JSON.stringify({ OS: Platform.OS, arch: "paper" })); }; ws.onclose = () => {