monkeypatch cheesyCanvas() vite plugin

apps/aquarium/src/App.jsx

@@ -1,32 +1,16 @@
+import * as React from 'react'
 import { useLayoutEffect, useEffect, useRef } from 'react'
-import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import { Canvas, useFrame } from '@react-three/fiber'
 import { useMask, useGLTF, useAnimations, Float, Instance, Instances, CameraControls } from '@react-three/drei'
 import { Lightformer, Environment, RandomizedLight, AccumulativeShadows, MeshTransmissionMaterial } from '@react-three/drei'
 
 import shapesModel from './shapes-transformed.glb?url'
 import turtleModel from './model_52a_-_kemps_ridley_sea_turtle_no_id-transformed.glb?url'
 
-function SayCheese({ timestamp = 30 }) {
-  const { advance, setFrameloop } = useThree()
-
-  useEffect(() => {
-    console.log('Say cheese!')
-
-    setFrameloop('never')
-    advance(timestamp)
-
-    document.dispatchEvent(new Event('playright:r3f'))
-  }, [])
-
-  return null
-}
-
-console.log('cpoucou')
+console.log('heyyyy2')
 export default function App({ spheres }) {
   return (
     <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }}>
-      {new URLSearchParams(window.location.search).has('saycheese') && <SayCheese />}
-
       <color attach="background" args={['#c6e5db']} />
       {/** Glass aquarium */}
       <Aquarium position={[0, 0.25, 0]}>

apps/aquarium/vite.config.ts

@@ -1,6 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-export default defineConfig({
-  plugins: [react()]
+export default defineConfig(async ({ command, mode }) => {
+  const plugins = [react()]
+
+  if (process.env.CHEESY_CANVAS) {
+    const cheesyCanvas = (await import('@pmndrs/examples/vite-plugin-cheesy-canvas')).default
+    plugins.push(cheesyCanvas())
+  }
+
+  return {
+    plugins
+  }
 })

apps/baking-soft-shadows/src/App.jsx

@@ -6,26 +6,9 @@ import { FlakesTexture } from 'three-stdlib'
 
 import suziModel from './suzi-model.gltf?url'
 
-function SayCheese({ timestamp = 30 }) {
-  const { advance, setFrameloop } = useThree()
-
-  useEffect(() => {
-    console.log('Say cheese!')
-
-    setFrameloop('never')
-    advance(timestamp)
-
-    document.dispatchEvent(new Event('playright:r3f'))
-  }, [])
-
-  return null
-}
-
 export default function App() {
   return (
     <Canvas shadows camera={{ position: [4, 2.5, 8], fov: 35 }}>
-      {new URLSearchParams(window.location.search).has('saycheese') && <SayCheese />}
-
       <group position={[0, -0.5, 0]}>
         <Center top>
           <Suzi rotation={[-0.63, 0, 0]} scale={2} />

apps/basic-demo/src/App.jsx

@@ -2,21 +2,6 @@ import { useRef, useState, useEffect } from 'react'
 import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 
-function SayCheese({ timestamp = 0 }) {
-  const { advance, setFrameloop } = useThree()
-
-  useEffect(() => {
-    console.log('Say cheese!')
-
-    setFrameloop('never')
-    advance(timestamp)
-
-    document.dispatchEvent(new Event('playright:r3f'))
-  }, [])
-
-  return null
-}
-
 function Box(props) {
   // This reference gives us direct access to the THREE.Mesh object
   const ref = useRef()
@@ -43,8 +28,6 @@ function Box(props) {
 export default function App() {
   return (
     <Canvas>
-      {new URLSearchParams(window.location.search).has('saycheese') && <SayCheese />}
-
       <ambientLight intensity={Math.PI / 2} />
       <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
       <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

package.json

@@ -20,6 +20,6 @@
   "packageManager": "[email protected]",
   "workspaces": [
     "apps/*",
-    "packages/tools"
+    "packages/examples"
   ]
 }

packages/tools/bin/build.sh → packages/examples/bin/build.sh

@@ -18,4 +18,4 @@ fi
 #   esac
 # done
 
-vite build --base="/examples/$NAME"
+CHEESY_CANVAS=1 vite build --base="/examples/$NAME"

packages/examples/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@pmndrs/examples",
+  "private": true,
+  "type": "module",
+  "version": "0.0.0",
+  "exports": {
+    "./CheesyCanvas": "./src/CheesyCanvas.jsx",
+    "./vite-plugin-cheesy-canvas": "./src/vite-plugin-cheesy-canvas.js"
+  },
+  "bin": {
+    "vite-build": "./bin/build.sh"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.24.8",
+    "@babel/traverse": "^7.24.8",
+    "@babel/types": "^7.24.9",
+    "ast-types": "^0.16.1",
+    "recast": "^0.23.9"
+  }
+}