Migrate examples to vite and latest codesandbox template config

.github/copilot-instructions.md

@@ -60,6 +60,31 @@ Managed by Renovate (`config:js-lib` preset):
 - Always run `npm test` after changes; use `npm run test:src` for quick
   source-only feedback during development
 
+## Examples
+
+Examples live in `examples/` and are designed to open on CodeSandbox. Their
+"platform" dependencies (vite, @vitejs/plugin-react, next, typescript,
+@types/react, @types/react-dom) must match the official CodeSandbox
+sandbox-templates at
+https://github.com/codesandbox/sandbox-templates/tree/main.
+
+Reference templates:
+
+- Vite-based examples → `react-vite` / `react-vite-ts`
+- Next.js examples → `nextjs`
+
+Renovate is disabled for `examples/**` (via `ignorePaths` in
+`renovate.json`). Updates are manual: check the reference template, update all
+examples in one commit, and verify at least one example still opens correctly
+on CodeSandbox.
+
+Example-specific deps (e.g. `@mui/material`, `react-router-dom`,
+`react-transition-group`) are not governed by the templates: update these as
+needed but test on CodeSandbox before merging.
+
+Do not bump vite, @vitejs/plugin-react, next, or typescript in examples
+beyond the versions in the reference templates.
+
 ## Versioning
 
 Strict semver — no breaking changes without a major version bump, including

README.md

@@ -94,17 +94,17 @@ render(<Enhanced isAnimating />, document.getElementById('root'))
 
 ## Live Examples
 
-- HOC: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/hoc) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/hoc)
-- Material UI: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/material-ui)
-- Multiple Instances: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/multiple-instances)
-- Next App Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-app-router) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/next-app-router)
-- Next Pages Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-pages-router) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/next-pages-router)
-- Original Design: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/original-design) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/original-design)
-- Plain JS: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/plain-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/plain-js)
-- React Router V6: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/react-router-v6) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/react-router-v6)
-- Render Props: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/render-props) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/render-props)
-- UMD Build (Development): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/umd-dev)
-- UMD Build (Production): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/s/github/tanem/react-nprogress/tree/master/examples/umd-prod)
+- HOC: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/hoc) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/hoc)
+- Material UI: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/material-ui)
+- Multiple Instances: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/multiple-instances)
+- Next App Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-app-router) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-app-router)
+- Next Pages Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-pages-router) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-pages-router)
+- Original Design: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/original-design) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/original-design)
+- Plain JS: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/plain-js) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/plain-js)
+- React Router V6: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/react-router-v6) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/react-router-v6)
+- Render Props: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/render-props) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/render-props)
+- UMD Build (Development): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/umd-dev)
+- UMD Build (Production): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/umd-prod)
 
 ## API
 

examples/hoc/.codesandbox/tasks.json

@@ -0,0 +1,36 @@
+{
+  "setupTasks": [
+    {
+      "name": "Update pnpm",
+      "command": "npm i -g pnpm@latest"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "pnpm preview",
+      "runAtStart": false
+    },
+    "install": {
+      "name": "install dependencies",
+      "command": "pnpm install"
+    }
+  }
+}

examples/hoc/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Devcontainer",
+  "image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
+}

examples/hoc/package.json

@@ -13,15 +13,16 @@
     "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
-    "typescript": "5.9.3",
-    "vite": "7.3.1"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "vite"
   }
 }

examples/hoc/tsconfig.json

@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "bundler",
     "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
     "strict": true

examples/material-ui/.codesandbox/tasks.json

@@ -0,0 +1,36 @@
+{
+  "setupTasks": [
+    {
+      "name": "Update pnpm",
+      "command": "npm i -g pnpm@latest"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "pnpm preview",
+      "runAtStart": false
+    },
+    "install": {
+      "name": "install dependencies",
+      "command": "pnpm install"
+    }
+  }
+}

examples/material-ui/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Devcontainer",
+  "image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
+}

examples/material-ui/package.json

@@ -16,15 +16,16 @@
     "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
-    "typescript": "5.9.3",
-    "vite": "7.3.1"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "vite"
   }
 }

examples/material-ui/tsconfig.json

@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "bundler",
     "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
     "strict": true

examples/multiple-instances/.codesandbox/tasks.json

@@ -0,0 +1,36 @@
+{
+  "setupTasks": [
+    {
+      "name": "Update pnpm",
+      "command": "npm i -g pnpm@latest"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "pnpm preview",
+      "runAtStart": false
+    },
+    "install": {
+      "name": "install dependencies",
+      "command": "pnpm install"
+    }
+  }
+}

examples/multiple-instances/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Devcontainer",
+  "image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
+}

examples/multiple-instances/package.json

@@ -13,15 +13,16 @@
     "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "@types/react": "19.2.14",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
-    "typescript": "5.9.3",
-    "vite": "7.3.1"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "vite"
   }
 }

examples/multiple-instances/tsconfig.json

@@ -1,11 +1,15 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
-    "moduleResolution": "bundler",
     "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
     "strict": true

examples/next-app-router/.codesandbox/tasks.json

@@ -0,0 +1,42 @@
+{
+  "setupTasks": [
+    {
+      "name": "Update pnpm",
+      "command": "npm i -g pnpm@latest"
+    },
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "Start Dev Server",
+      "command": "pnpm run dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      },
+      "restartOn": {
+        "files": ["./pnpm-lock.yaml"]
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm run build",
+      "runAtStart": false
+    },
+    "start": {
+      "name": "Start Server",
+      "command": "pnpm run start",
+      "runAtStart": false
+    },
+    "install": {
+      "name": "install dependencies",
+      "command": "pnpm install",
+      "restartOn": {
+        "files": ["./package.json"]
+      }
+    }
+  }
+}

examples/next-app-router/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+  "name": "Devcontainer",
+  "image": "ghcr.io/codesandbox/devcontainers/typescript-node:latest"
+}

examples/next-app-router/package.json

@@ -18,8 +18,8 @@
     "react-dom": "19.2.4"
   },
   "devDependencies": {
-    "@types/node": "24.10.13",
-    "@types/react": "19.2.14",
-    "typescript": "5.9.3"
+    "@types/node": "^20",
+    "@types/react": "^19.0.0",
+    "typescript": "^5"
   }
 }

examples/next-app-router/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": [
       "dom",
       "dom.iterable",
@@ -16,7 +16,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {