diff --git a/examples/web-vite/.gitignore b/examples/web-vite/.gitignore
index 106a303..ebd5d1f 100644
--- a/examples/web-vite/.gitignore
+++ b/examples/web-vite/.gitignore
@@ -22,6 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?
-
# Reassure output directory
.reassure
diff --git a/examples/web-vite/README-orig.md b/examples/web-vite/README-orig.md
deleted file mode 100644
index da98444..0000000
--- a/examples/web-vite/README-orig.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
- extends: [
- // Remove ...tseslint.configs.recommended and replace with this
- ...tseslint.configs.recommendedTypeChecked,
- // Alternatively, use this for stricter rules
- ...tseslint.configs.strictTypeChecked,
- // Optionally, add this for stylistic rules
- ...tseslint.configs.stylisticTypeChecked,
- ],
- languageOptions: {
- // other options...
- parserOptions: {
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
- tsconfigRootDir: import.meta.dirname,
- },
- },
-})
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
- plugins: {
- // Add the react-x and react-dom plugins
- 'react-x': reactX,
- 'react-dom': reactDom,
- },
- rules: {
- // other rules...
- // Enable its recommended typescript rules
- ...reactX.configs['recommended-typescript'].rules,
- ...reactDom.configs.recommended.rules,
- },
-})
-```
diff --git a/examples/web-vite/eslint.config.js b/examples/web-vite/eslint.config.js
index 092408a..ef614d2 100644
--- a/examples/web-vite/eslint.config.js
+++ b/examples/web-vite/eslint.config.js
@@ -3,26 +3,20 @@ import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
-export default tseslint.config(
- { ignores: ['dist'] },
+export default defineConfig([
+ globalIgnores(['dist']),
{
- extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ tseslint.configs.recommended,
+ reactHooks.configs.flat.recommended,
+ reactRefresh.configs.vite,
+ ],
languageOptions: {
- ecmaVersion: 2020,
globals: globals.browser,
},
- plugins: {
- 'react-hooks': reactHooks,
- 'react-refresh': reactRefresh,
- },
- rules: {
- ...reactHooks.configs.recommended.rules,
- 'react-refresh/only-export-components': [
- 'warn',
- { allowConstantExport: true },
- ],
- },
},
-)
+])
diff --git a/examples/web-vite/index.html b/examples/web-vite/index.html
index e4b78ea..fa4468a 100644
--- a/examples/web-vite/index.html
+++ b/examples/web-vite/index.html
@@ -2,9 +2,9 @@
-
+
- Vite + React + TS
+ web-vite
diff --git a/examples/web-vite/jest-setup.js b/examples/web-vite/jest-setup.js
index 46f1b0f..3ccf355 100644
--- a/examples/web-vite/jest-setup.js
+++ b/examples/web-vite/jest-setup.js
@@ -1,3 +1,7 @@
import { configure } from 'reassure';
+import { configure as configureRtc } from 'react-test-config';
configure({ testingLibrary: 'react' });
+configureRtc({
+ enableOwnerStacks: false,
+});
diff --git a/examples/web-vite/package.json b/examples/web-vite/package.json
index 79a6d5f..7e6f97b 100644
--- a/examples/web-vite/package.json
+++ b/examples/web-vite/package.json
@@ -1,7 +1,7 @@
{
"name": "web-vite",
"private": true,
- "version": "1.0.0",
+ "version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -13,32 +13,35 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "react": "^19.1.0",
- "react-dom": "^19.1.0"
+ "react": "^19.2.6",
+ "react-dom": "^19.2.6"
},
"devDependencies": {
+ "@babel/core": "^7.27.2",
"@babel/preset-env": "^7.27.2",
"@babel/preset-react": "^7.27.1",
"@babel/preset-typescript": "^7.27.1",
- "@eslint/js": "^9.25.0",
+ "@eslint/js": "^10.0.1",
"@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.3.0",
"@types/babel__preset-env": "^7",
"@types/jest": "^30.0.0",
- "@types/react": "^19.1.2",
- "@types/react-dom": "^19.1.2",
- "@vitejs/plugin-react": "^4.4.1",
+ "@types/node": "^24.12.3",
+ "@types/react": "^19.2.14",
+ "@types/react-dom": "^19.2.3",
+ "@vitejs/plugin-react": "^6.0.1",
"danger": "^13.0.4",
- "eslint": "^9.25.0",
- "eslint-plugin-react-hooks": "^5.2.0",
- "eslint-plugin-react-refresh": "^0.4.19",
- "globals": "^16.0.0",
+ "eslint": "^10.3.0",
+ "eslint-plugin-react-hooks": "^7.1.1",
+ "eslint-plugin-react-refresh": "^0.5.2",
+ "globals": "^17.6.0",
"jest": "^30.0.2",
"jest-environment-jsdom": "^30.0.2",
+ "react-test-config": "^0.1.0",
"reassure": "^1.5.1",
- "typescript": "~5.8.3",
- "typescript-eslint": "^8.30.1",
- "vite": "^6.3.5"
+ "typescript": "~6.0.2",
+ "typescript-eslint": "^8.59.2",
+ "vite": "^8.0.12"
},
"packageManager": "yarn@4.9.2"
}
diff --git a/examples/web-vite/public/favicon.svg b/examples/web-vite/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/examples/web-vite/public/favicon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/web-vite/public/icons.svg b/examples/web-vite/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/examples/web-vite/public/icons.svg
@@ -0,0 +1,24 @@
+
diff --git a/examples/web-vite/src/App.css b/examples/web-vite/src/App.css
index b9d355d..f90339d 100644
--- a/examples/web-vite/src/App.css
+++ b/examples/web-vite/src/App.css
@@ -1,42 +1,184 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
+.counter {
+ font-size: 16px;
+ padding: 5px 10px;
+ border-radius: 5px;
+ color: var(--accent);
+ background: var(--accent-bg);
+ border: 2px solid transparent;
+ transition: border-color 0.3s;
+ margin-bottom: 24px;
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
+ &:hover {
+ border-color: var(--accent-border);
+ }
+ &:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+ }
}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
+
+.hero {
+ position: relative;
+
+ .base,
+ .framework,
+ .vite {
+ inset-inline: 0;
+ margin: 0 auto;
+ }
+
+ .base {
+ width: 170px;
+ position: relative;
+ z-index: 0;
+ }
+
+ .framework,
+ .vite {
+ position: absolute;
+ }
+
+ .framework {
+ z-index: 1;
+ top: 34px;
+ height: 28px;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+ scale(1.4);
+ }
+
+ .vite {
+ z-index: 0;
+ top: 107px;
+ height: 26px;
+ width: auto;
+ transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+ scale(0.8);
+ }
}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
+
+#center {
+ display: flex;
+ flex-direction: column;
+ gap: 25px;
+ place-content: center;
+ place-items: center;
+ flex-grow: 1;
+
+ @media (max-width: 1024px) {
+ padding: 32px 20px 24px;
+ gap: 18px;
+ }
}
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
+#next-steps {
+ display: flex;
+ border-top: 1px solid var(--border);
+ text-align: left;
+
+ & > div {
+ flex: 1 1 0;
+ padding: 32px;
+ @media (max-width: 1024px) {
+ padding: 24px 20px;
+ }
}
- to {
- transform: rotate(360deg);
+
+ .icon {
+ margin-bottom: 16px;
+ width: 22px;
+ height: 22px;
+ }
+
+ @media (max-width: 1024px) {
+ flex-direction: column;
+ text-align: center;
}
}
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
+#docs {
+ border-right: 1px solid var(--border);
+
+ @media (max-width: 1024px) {
+ border-right: none;
+ border-bottom: 1px solid var(--border);
}
}
-.card {
- padding: 2em;
+#next-steps ul {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ gap: 8px;
+ margin: 32px 0 0;
+
+ .logo {
+ height: 18px;
+ }
+
+ a {
+ color: var(--text-h);
+ font-size: 16px;
+ border-radius: 6px;
+ background: var(--social-bg);
+ display: flex;
+ padding: 6px 12px;
+ align-items: center;
+ gap: 8px;
+ text-decoration: none;
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: var(--shadow);
+ }
+ .button-icon {
+ height: 18px;
+ width: 18px;
+ }
+ }
+
+ @media (max-width: 1024px) {
+ margin-top: 20px;
+ flex-wrap: wrap;
+ justify-content: center;
+
+ li {
+ flex: 1 1 calc(50% - 8px);
+ }
+
+ a {
+ width: 100%;
+ justify-content: center;
+ box-sizing: border-box;
+ }
+ }
}
-.read-the-docs {
- color: #888;
+#spacer {
+ height: 88px;
+ border-top: 1px solid var(--border);
+ @media (max-width: 1024px) {
+ height: 48px;
+ }
+}
+
+.ticks {
+ position: relative;
+ width: 100%;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: -4.5px;
+ border: 5px solid transparent;
+ }
+
+ &::before {
+ left: 0;
+ border-left-color: var(--border);
+ }
+ &::after {
+ right: 0;
+ border-right-color: var(--border);
+ }
}
diff --git a/examples/web-vite/src/App.tsx b/examples/web-vite/src/App.tsx
index 3d7ded3..a66b5ef 100644
--- a/examples/web-vite/src/App.tsx
+++ b/examples/web-vite/src/App.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import viteLogo from './assets/vite.svg'
+import heroImg from './assets/hero.png'
import './App.css'
function App() {
@@ -8,26 +9,112 @@ function App() {
return (
<>
-
- Vite + React
-
-
- Click on the Vite and React logos to learn more
-
+
+
+
+
+
+
+
+
Documentation
+
Your questions, answered
+
+
+
+
Connect with us
+
Join the Vite community
+
+
Connect with us
+Join the Vite community
++-
+
+
+ GitHub
+
+
+ -
+
+
+ Discord
+
+
+ -
+
+
+ X.com
+
+
+ -
+
+
+ Bluesky
+
+
+
+