cleaning things

apps/aquarium/src/App.jsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { useLayoutEffect, useEffect, useRef } from 'react'
 import { Canvas, useFrame } from '@react-three/fiber'
 import { useMask, useGLTF, useAnimations, Float, Instance, Instances, CameraControls } from '@react-three/drei'

apps/aquarium/vite.config.ts

@@ -1,15 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-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
-  }
+export default defineConfig({
+  plugins: [react()]
 })

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

@@ -1,11 +1,12 @@
 import * as THREE from 'three'
-import { useLayoutEffect, useEffect } from 'react'
-import { Canvas, useThree } from '@react-three/fiber'
+import { useLayoutEffect } from 'react'
+import { Canvas } from '@react-three/fiber'
 import { Center, AccumulativeShadows, RandomizedLight, OrbitControls, Environment, useGLTF } from '@react-three/drei'
 import { FlakesTexture } from 'three-stdlib'
 
 import suziModel from './suzi-model.gltf?url'
 
+//
 export default function App() {
   return (
     <Canvas shadows camera={{ position: [4, 2.5, 8], fov: 35 }}>

apps/basic-demo/src/App.jsx

@@ -1,7 +1,8 @@
-import { useRef, useState, useEffect } from 'react'
-import { Canvas, useFrame, useThree } from '@react-three/fiber'
+import { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
 import { OrbitControls } from '@react-three/drei'
 
+//
 function Box(props) {
   // This reference gives us direct access to the THREE.Mesh object
   const ref = useRef()

packages/examples/bin/build.mjs

@@ -0,0 +1,38 @@
+#!/usr/bin/env node
+
+import { spawn } from "node:child_process";
+import minimist from "minimist";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+var argv = minimist(process.argv.slice(2));
+// console.log("argv=", argv);
+
+const name = argv._[0];
+if (!name) {
+  console.error("Please provide the app name as the first argument.");
+  process.exit(1);
+}
+
+const __filename = fileURLToPath(import.meta.url); // Converts the URL to a file path
+const __dirname = dirname(__filename); // Gets the directory name
+const viteConfigPath = resolve(__dirname, "../src/vite.config.ts");
+// console.log("viteConfigPath=", viteConfigPath);
+
+const cmd = spawn(
+  "npx",
+  ["vite", "build", "--config", viteConfigPath, "--base", `/examples/${name}`],
+  {
+    stdio: "inherit",
+    env: process.env,
+  }
+);
+
+cmd.on("exit", (code) => {
+  if (code !== 0) {
+    console.error("Build failed with error");
+    process.exit(1);
+  }
+
+  console.log("Build completed successfully.");
+});

packages/examples/package.json

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

packages/examples/src/CheesyCanvas.jsx

@@ -32,7 +32,7 @@ export default function ({ children, ...props }) {
 
   const props2 = {
     ...props,
-    style: { border: "2px solid red", ...props.style },
+    // style: { border: "2px solid red", ...props.style },
   };
 
   const sayCheeseParam = new URLSearchParams(window.location.search).has(

packages/examples/src/vite-plugin-cheesy-canvas.js

@@ -73,7 +73,7 @@ export default function vitePluginCheesyCanvas() {
 
               // If we found a Canvas import just before, we want to add:
               // ```
-              // import CheesyCanvas from './CheesyCanvas'; // (I)
+              // import CheesyCanvas from '@pmndrs/examples/CheesyCanvas'; // (I)
               // const Canvas = CheesyCanvas; // (II)
               // ```
 

packages/examples/src/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+import cheesyCanvas from "./vite-plugin-cheesy-canvas";
+
+export default defineConfig({
+  plugins: [react(), cheesyCanvas()],
+});

test/e2e/snapshot.test.js

@@ -37,7 +37,7 @@ function getDemoNames() {
   });
 }
 // const demoNames = getDemoNames();
-const demoNames = ["baking-soft-shadows", "basic-demo"];
+const demoNames = ["aquarium", "baking-soft-shadows", "basic-demo"];
 console.log("demoNames", demoNames);
 
 demoNames.forEach((demoName) => {