e2e

.github/workflows/ci.yml

@@ -0,0 +1,62 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request: {}
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build-job:
+    runs-on: ubuntu-latest
+
+    # Cancel multiple runs when pushing to main
+    concurrency:
+      group: ${{ github.event_name != 'pull_request' && 'group-pushmain' || github.run_id }}
+      cancel-in-progress: ${{ github.event_name != 'pull_request' }}
+
+    container:
+      image: ghcr.io/pmndrs/playwright:main
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      # Build
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+      - run: npm ci
+      - uses: rharkor/[email protected]
+      - run: npm run build
+
+      # Tests (only for PRs)
+      - run: npm test
+        if: github.event_name == 'pull_request'
+
+      # Upload artifact (only for pushes on main)
+      - uses: actions/upload-pages-artifact@v3
+        if: github.event_name != 'pull_request'
+        with:
+          path: ./out/examples
+
+  deploy-job:
+    # only for pushes on main
+    if: github.event_name != 'pull_request'
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build-job
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -14,6 +14,7 @@ node_modules
 
 # Testing
 coverage
+test-results
 
 # Turbo
 .turbo
@@ -35,7 +36,4 @@ yarn-error.log*
 
 # Misc
 .DS_Store
-*.pem
-
-tmp
-copy.sh
+*.pem

README.md

@@ -4,6 +4,13 @@ https://docs.pmnd.rs/react-three-fiber/getting-started/examples
 
 index: [apps](apps)
 
+To use a given [`basic-demo`](apps/basic-demo) as a template for a `new-project`:
+
+```sh
+$ npx -y degit pmndrs/examples/apps/basic-demo new-project
+$ code new-project
+```
+
 # INSTALL
 
 ```sh
@@ -16,9 +23,44 @@ $ npm ci
 $ npm run -w apps/cards-with-border-radius dev
 ```
 
-To use a given [`basic-demo`](apps/basic-demo) as a template for a `new-project`:
+# build
 
 ```sh
-$ npx degit pmndrs/examples/apps/basic-demo new-project
-$ code new-project
+$ npm run build
+```
+
+<details>
+
+This will execute `^build2` which will `vite build` each app with:
+
+- a `--base` set to `/examples/${app_name}`
+- a custom vite `--config`, whith a `monkey()` plugin that will:
+  - [`deterministic`](packages/examples/src/deterministic.js) script into `src/index.jsx`
+  - monkeypatch the `<Canvas>` with [`CheesyCanvas`](packages/examples/src/CheesyCanvas.jsx) for setting up the scene for playwright screenshots
+
+</details>
+
+Then `npx serve out`.
+
+<details>
+
+You can build a specific app thanks to [`--filter`](https://turbo.build/repo/docs/reference/run#--filter-string):
+
+```sh
+$ npm run build -- --filter aquarium
 ```
+
+</details>
+
+# test
+
+Pre-requisites:
+
+- [build](#build)
+
+```sh
+$ docker run --init --rm -v $(pwd):/app -w /app ghcr.io/pmndrs/playwright:main npm test
+```
+
+> [!IMPORTANT]
+> If running on mac m-series, you'll need to add `--platform linux/arm64` to the docker command.

apps/aquarium/src/App.jsx

@@ -6,7 +6,6 @@ import { Lightformer, Environment, RandomizedLight, AccumulativeShadows, MeshTra
 import shapesModel from './shapes-transformed.glb?url'
 import turtleModel from './model_52a_-_kemps_ridley_sea_turtle_no_id-transformed.glb?url'
 
-console.log('cpoucou')
 export default function App({ spheres }) {
   return (
     <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }}>

copy.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+DST="out/examples"
+
+for app in apps/*; do
+  if [ -d "$app/dist" ]; then
+    app_name=$(basename "$app")
+    mkdir -p "$DST/$app_name"
+    cp -r "$app/dist/"* "$DST/$app_name/"
+
+    echo "Copied $app/dist to $DST/$app_name"
+  fi
+done