chore(demo): migrate sandboxes from create-react-app to vite

demo/CONTRIBUTING.md

@@ -4,20 +4,20 @@ Thanks for the interest! Before reading on, have a look at the repo's [contribut
 
 ## What's required
 
-Demos are based on the CodeSandbox `react-typescript` template. You can either copy an existing demo and tweak it, or build one in CodeSandbox and export the code into `demo/src/sandboxes/<your-demo>/`.
+Demos are standalone Vite + React + TypeScript projects. You can either copy an existing demo and tweak it, or build one in CodeSandbox and export the code into `demo/src/sandboxes/<your-demo>/`.
 
 Each demo follows this structure:
 
 ```
 demo/src/sandboxes/<your-demo>/
-├── public/
-│   └── index.html
 ├── src/
 │   ├── App.tsx        # entry point — imported by the demo hub
 │   └── index.tsx
+├── index.html
 ├── package.json
 ├── thumbnail.png      # 16:9, shown on the website
-└── tsconfig.json      # copy from an existing demo
+├── tsconfig.json      # copy from an existing demo
+└── vite.config.ts     # copy from an existing demo
 ```
 
 `App.tsx` is the entry the demo hub renders via Vite, so it must export a default component.

demo/src/sandboxes/animating-auto/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Spring Sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

demo/src/sandboxes/animating-auto/package.json

@@ -14,24 +14,18 @@
     "@react-spring/web": "*",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "react-scripts": "5.0.1",
     "react-use-measure": "2.1.7"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "devDependencies": {
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "typescript": "4.9.5"
+    "@vitejs/plugin-react": "6.1.1",
+    "typescript": "7.0.2",
+    "vite": "8.3.1"
   }
 }

demo/src/sandboxes/animating-auto/tsconfig.json

@@ -1,18 +1,27 @@
 {
   "compilerOptions": {
-    "outDir": "build/dist",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": [
+      "vite/client"
+    ],
+    "noEmit": true,
+    "skipLibCheck": true,
     "allowJs": true,
     "jsx": "react",
-    "moduleResolution": "node",
-    "rootDir": "src",
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noUnusedLocals": true
-  }
+  },
+  "include": [
+    "src"
+  ]
 }

demo/src/sandboxes/animating-auto/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

demo/src/sandboxes/card/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Spring Sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

demo/src/sandboxes/card/package.json

@@ -14,24 +14,18 @@
     "@react-spring/web": "*",
     "@use-gesture/react": "10.3.1",
     "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-scripts": "5.0.1"
+    "react-dom": "^19.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "devDependencies": {
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "typescript": "4.9.5"
+    "@vitejs/plugin-react": "6.1.1",
+    "typescript": "7.0.2",
+    "vite": "8.3.1"
   }
 }

demo/src/sandboxes/card/tsconfig.json

@@ -1,18 +1,27 @@
 {
   "compilerOptions": {
-    "outDir": "build/dist",
-    "module": "esnext",
-    "target": "es5",
-    "lib": ["es6", "dom"],
-    "sourceMap": true,
+    "target": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": [
+      "vite/client"
+    ],
+    "noEmit": true,
+    "skipLibCheck": true,
     "allowJs": true,
     "jsx": "react",
-    "moduleResolution": "node",
-    "rootDir": "src",
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
     "noUnusedLocals": true
-  }
+  },
+  "include": [
+    "src"
+  ]
 }

demo/src/sandboxes/card/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

demo/src/sandboxes/cards-stack/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Spring Sandbox</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

demo/src/sandboxes/cards-stack/package.json

@@ -14,24 +14,18 @@
     "@react-spring/web": "*",
     "@use-gesture/react": "10.3.1",
     "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-scripts": "5.0.1"
+    "react-dom": "^19.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "devDependencies": {
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "typescript": "4.9.5"
+    "@vitejs/plugin-react": "6.1.1",
+    "typescript": "7.0.2",
+    "vite": "8.3.1"
   }
 }