React 19, Vite 6, Node 22 - bump all deps

.changeset/famous-actors-obey.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": major
+---
+
+Major dependency updates - Vite v6, React v19, Node v22. It shouldn't impact most of Ladle users unless relying on unusal vite (outdated) settings and APIs.

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, windows-latest]
-        node-version: [20.x]
+        node-version: [22.x]
     steps:
       - name: Check out code
         uses: actions/checkout@v3
@@ -27,7 +27,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.1.4
+          version: 9.15.1
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3

.github/workflows/release.yml

@@ -24,12 +24,12 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.1.4
+          version: 9.15.1
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: 20.14
+          node-version: 20.11
           cache: "pnpm"
 
       - name: Install dependencies

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm exec lint-staged

.lintstagedrc

@@ -1,7 +1,7 @@
 {
   "*.{js,ts,tsx,css,scss,postcss,md,json}": [
-    "prettier --write --plugin-search-dir=.",
-    "prettier --check --plugin-search-dir=."
+    "prettier --write",
+    "prettier --check"
   ],
-    "*.{js,ts,tsx}": "eslint"
+  "*.{js,ts,tsx}": ["eslint --max-warnings=0 --fix"]
 }

e2e/addons/package.json

@@ -16,11 +16,11 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
-    "axe-playwright": "^2.0.1",
+    "@playwright/test": "^1.49.1",
+    "axe-playwright": "^2.0.3",
     "cross-env": "^7.0.3",
-    "query-string": "^9.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "query-string": "^9.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/addons/tests/query-parameters.spec.ts

@@ -5,6 +5,7 @@ test("when directly open the story, remain non-ladle query parameters", async ({
 }) => {
   await page.goto("/?story=query-parameters--query-parameters");
   await page.waitForSelector("[data-storyloaded]");
+  await page.waitForTimeout(1000);
   const url = page.url();
   expect(url).toContain("story=query-parameters--query-parameters");
   expect(url).toContain("foo=bar");
@@ -17,6 +18,7 @@ test("when click the menu and open the story, remain non-ladle query parameters"
   await page.getByText("Query parameters").click(); // Open the accordion of query parameters stories
   await page.getByRole("link", { name: "Query parameters" }).click(); // Open the target story
   await page.waitForSelector("[data-storyloaded]");
+  await page.waitForTimeout(1000);
   const url = page.url();
   expect(url).toContain("story=query-parameters--query-parameters");
   expect(url).toContain("foo=bar");
@@ -33,6 +35,7 @@ test("when move a story from the query parameters story, remove non-ladle query
   await page.getByText("A11y").click();
   await page.getByRole("link", { name: "Issues" }).click();
   await page.waitForSelector("[data-storyloaded]");
+  await page.waitForTimeout(1000);
   const url = page.url();
   expect(url).toContain("story=a11y--issues");
   expect(url).not.toContain("foo=bar"); // The non-ladle query parameter is removed
@@ -47,12 +50,14 @@ test("preserve user query params after ladle query param update", async ({
   await button.click();
   const medium = page.locator("#width-medium");
   await medium.click();
+  await page.waitForTimeout(1000);
   const url = page.url();
   expect(url).toContain("story=query-parameters--query-parameters");
   expect(url).toContain("foo=bar");
   expect(url).toContain("width=768");
   const unset = page.locator("#width-unset");
   await unset.click();
+  await page.waitForTimeout(1000);
   const newUrl = page.url();
   expect(newUrl).toContain("foo=bar");
   expect(newUrl).not.toContain("width=768");

e2e/babel/package.json

@@ -15,10 +15,10 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@playwright/test": "^1.49.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/baseweb/package.json

@@ -15,15 +15,15 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
-    "autoprefixer": "^10.4.19",
+    "@playwright/test": "^1.49.1",
+    "autoprefixer": "^10.4.20",
     "baseui": "^14.0.0",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.17"
   }
 }

e2e/config-ts/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/config/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/css/package.json

@@ -15,12 +15,12 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
-    "autoprefixer": "^10.4.19",
+    "@playwright/test": "^1.49.1",
+    "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^3.4.3"
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.17"
   }
 }

e2e/decorators/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/msw/package.json

@@ -15,15 +15,15 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
-    "autoprefixer": "^10.4.19",
+    "@playwright/test": "^1.49.1",
+    "autoprefixer": "^10.4.20",
     "baseui": "^14.0.0",
     "cross-env": "^7.0.3",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "postcss": "^8.4.49",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "styletron-engine-monolithic": "^1.0.0",
     "styletron-react": "^6.1.1",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.17"
   }
 }

e2e/playwright-config/package.json

@@ -3,13 +3,14 @@
   "version": "0.2.71",
   "license": "MIT",
   "private": true,
+  "type": "module",
   "main": "./src/index.ts",
   "scripts": {
     "build": "echo 'no build'",
     "lint": "echo 'no lint'",
     "test": "echo 'no test'"
   },
   "dependencies": {
-    "@playwright/test": "^1.44.1"
+    "@playwright/test": "^1.49.1"
   }
 }

e2e/playwright/package.json

@@ -17,12 +17,12 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "@types/sync-fetch": "^0.4.3",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "start-server-and-test": "^2.0.3",
-    "sync-fetch": "^0.5.2"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "start-server-and-test": "^2.0.9",
+    "sync-fetch": "0.6.0-2"
   }
 }

e2e/programmatic/package.json

@@ -17,9 +17,9 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

e2e/provider/package.json

@@ -15,9 +15,9 @@
   "dependencies": {
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.49.1",
     "cross-env": "^7.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }

eslint.config.mjs

@@ -1,3 +1,4 @@
+import globals from "globals";
 import react from "eslint-plugin-react/configs/recommended.js";
 import prettier from "eslint-plugin-prettier/recommended";
 import eslint from "@eslint/js";
@@ -9,12 +10,21 @@ export default tseslint.config(
   prettier,
   react,
   {
-    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      }
+    },
+    files: ["**/*.ts", "**/*.tsx", "**/*.js"],
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/ban-types": "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-unused-vars": "off",
       "react/prop-types": "off",
       "react/react-in-jsx-scope": "off",
       "no-useless-escape": "off",

package.json

@@ -6,13 +6,13 @@
   "author": "Vojtech Miksu <vojtech@miksu.cz>",
   "license": "MIT",
   "private": true,
-  "packageManager": "pnpm@9.1.4",
+  "packageManager": "pnpm@9.15.1",
   "scripts": {
     "lint": "eslint \"./{packages,e2e}/*/{lib,src,tests}/**/*.{ts,tsx}\" --max-warnings=0",
     "test": "turbo run test --concurrency=1",
     "build": "turbo run build",
     "typecheck": "tsc",
-    "prepare": "husky install",
+    "prepare": "husky",
     "release": "./release.sh"
   },
   "workspaces": [
@@ -35,32 +35,34 @@
   ],
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.5",
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@eslint/js": "^9.3.0",
-    "@playwright/test": "^1.44.1",
+    "@changesets/cli": "^2.27.11",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/js": "^9.17.0",
+    "@playwright/test": "^1.49.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "eslint": "^9.3.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.2",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.5",
-    "prettier": "^3.2.5",
-    "turbo": "^1.13.3",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.11.0"
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.2.11",
+    "prettier": "^3.4.2",
+    "turbo": "^2.3.3",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1"
   },
   "engines": {
-    "node": ">=20.9.0"
+    "node": ">=22.0.0"
   },
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
-        "react": "18",
-        "react-dom": "18",
+        "@types/react": "19",
+        "react": "19",
+        "react-dom": "19",
         "typescript": "5"
       }
     }

packages/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@ladle/react": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }