deterministic-random

apps/aquarium/src/App.jsx

@@ -6,7 +6,7 @@ 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('heyyyy2')
+// bump1
 export default function App({ spheres }) {
   return (
     <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }}>

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

@@ -6,7 +6,7 @@ import { FlakesTexture } from 'three-stdlib'
 
 import suziModel from './suzi-model.gltf?url'
 
-//
+// bump1
 export default function App() {
   return (
     <Canvas shadows camera={{ position: [4, 2.5, 8], fov: 35 }}>

apps/basic-demo/src/App.jsx

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

packages/examples/package.json

@@ -3,7 +3,8 @@
   "type": "module",
   "version": "0.0.1",
   "exports": {
-    "./CheesyCanvas": "./src/CheesyCanvas.jsx"
+    "./CheesyCanvas": "./src/CheesyCanvas.jsx",
+    "./deterministic-random": "./src/deterministic-random.js"
   },
   "bin": {
     "vite-build": "./bin/build.mjs"
@@ -14,6 +15,7 @@
     "@babel/types": "^7.24.9",
     "ast-types": "^0.16.1",
     "minimist": "^1.2.8",
-    "recast": "^0.23.9"
+    "recast": "^0.23.9",
+    "seedrandom": "^3.0.5"
   }
 }

packages/examples/src/CheesyCanvas.jsx

@@ -1,14 +1,12 @@
 import React, { useEffect } from "react";
 import { Canvas, useThree } from "@react-three/fiber";
 
-globalThis.Math.random = () => 0.2;
-
 function SayCheese({ timestamp = 30 }) {
   const { advance, setFrameloop, invalidate, internal } = useThree();
   window.advance = advance;
 
   useEffect(() => {
-    console.log("Say cheese!");
+    console.log(`Now say 😬cheeese (photo in ${timestamp} secs)`);
 
     setTimeout(() => {
       console.log("timeout");
@@ -27,7 +25,7 @@ function SayCheese({ timestamp = 30 }) {
 
 export default function ({ children, ...props }) {
   useEffect(() => {
-    console.log("Custom canvas effect!");
+    console.log("CheesyCanvas: use ?saycheese in the URL");
   }, []);
 
   const props2 = {

packages/examples/src/deterministic-random.js

@@ -0,0 +1,6 @@
+import seedrandom from "seedrandom";
+
+console.log("deterministic-random");
+
+// globalThis.Math.random = () => 0.2;
+seedrandom("hello.", { global: true });

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

@@ -7,6 +7,46 @@ export default function vitePluginCheesyCanvas() {
   return {
     name: "vite-plugin-cheesy-canvas",
     transform(code, id) {
+      //
+      // In `src/index.[jt]sx`, add to the top of the file:
+      //
+      // ```
+      // import '@pmndrs/examples/deterministic-random';
+      // ```
+      //
+
+      if (id.endsWith("src/index.jsx") || id.endsWith("src/index.tsx")) {
+        const ast = parse(code, {
+          parser: {
+            parse(source) {
+              return babelParser.parse(source, {
+                sourceType: "module",
+                plugins: ["jsx", "typescript"],
+              });
+            },
+          },
+        });
+
+        traverse.default(ast, {
+          Program(path) {
+            // Insert the import statement at the top of the file
+            const importDeclaration = t.importDeclaration(
+              [],
+              t.stringLiteral("@pmndrs/examples/deterministic-random")
+            );
+
+            path.node.body.unshift(importDeclaration);
+          },
+        });
+
+        console.log("🐵-patched `src/index.[jt]sx`");
+
+        return {
+          code: print(ast).code,
+          map: null,
+        };
+      }
+
       //
       // In `src/App.[jt]sx`, we search for:
       //
@@ -18,8 +58,8 @@ export default function vitePluginCheesyCanvas() {
       // to replace it with:
       //
       // ```
-      // import { useFrame, Canvas as OriginalCanvas, ... , useThree } from '@react-three/fiber';
-      // import CheesyCanvas from './CheesyCanvas';
+      // import { useFrame, ... , useThree } from '@react-three/fiber';
+      // import CheesyCanvas from '@pmndrs/examples/CheesyCanvas';
       // const Canvas = CheesyCanvas;
       // ```
       //
@@ -56,22 +96,19 @@ export default function vitePluginCheesyCanvas() {
 
               let hasCanvasImport = false;
 
-              // Transform `import { ..., Canvas, ... }` into `import { ..., Canvas as OriginalCanvas , ... }`
-              node.specifiers = node.specifiers.map((specifier) => {
+              // Transform `import { ..., Canvas, ... }` into `import { ... }`
+              node.specifiers = node.specifiers.filter((specifier) => {
                 if (
                   t.isImportSpecifier(specifier) &&
                   specifier.imported.name === "Canvas"
                 ) {
                   hasCanvasImport = true;
-                  return t.importSpecifier(
-                    t.identifier("OriginalCanvas"),
-                    t.identifier("Canvas")
-                  );
+                  return false;
                 }
-                return specifier;
+                return true;
               });
 
-              // If we found a Canvas import just before, we want to add:
+              // If we removed a Canvas import just before, we want to add:
               // ```
               // import CheesyCanvas from '@pmndrs/examples/CheesyCanvas'; // (I)
               // const Canvas = CheesyCanvas; // (II)
@@ -104,6 +141,9 @@ export default function vitePluginCheesyCanvas() {
           },
         });
 
+        console.log(
+          "🐵-patched <Canvas> in `src/App.[jt]sx` with CheesyCanvas"
+        );
         // console.log("CODE", print(ast).code);
 
         return {