ci: use specific dependencies for different Svelte/Node versions (#436)

Author: mcous

.github/workflows/release.yml

@@ -75,10 +75,10 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: 📥 Download deps
-        run: npm install --no-package-lock
+        run: npm install
 
       - name: 🏗️ Build types
         run: npm run build
@@ -102,7 +102,7 @@ jobs:
       - name: ⎔ Setup node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: 📥 Downloads types build
         uses: actions/download-artifact@v4

.npmrc

@@ -1 +1,2 @@
 package-lock=false
+engine-strict=true

CONTRIBUTING.md

@@ -28,25 +28,24 @@ npm run preview-release
 
 ## Development setup
 
-After cloning the repository, install the project's dependencies and run the `validate` script to run all checks and tests to verify your setup.
+After cloning the repository, use the `setup` script to install dependencies and run all checks:
 
 ```shell
-npm install # or `pnpm install`, or `yarn install`, etc.
-npm run validate
+npm run setup
 ```
 
 ### Lint and format
 
 Run auto-formatting to ensure any changes adhere to the code style of the repository:
 
 ```shell
-npm run format:delta
+npm run format
 ```
 
 To run lint and format checks without making any changes:
 
 ```shell
-npm run lint:delta
+npm run lint
 ```
 
 ### Test
@@ -63,18 +62,19 @@ npm run test:watch
 Use the provided script to set up your environment for different versions of Svelte:
 
 ```shell
-# install Svelte 5
+# Svelte 5
 npm run install:5
+npm run all
 
-# install Svelte 4
+# Svelte 4
 npm run install:4
+npm run all:legacy
 
-# install Svelte 3
+# Svelte 3
 npm run install:3
+npm run all:legacy
 ```
 
-Not all checks will pass on `svelte<5`. Reference the CI workflows to see which checks are expected to pass on older versions.
-
 ### Docs
 
 Use the `toc` script to ensure the README's table of contents is up to date:

package.json

@@ -53,24 +53,18 @@
   ],
   "scripts": {
     "all": "npm-run-all contributors:generate toc format types build test:vitest:* test:jest",
+    "all:legacy": "npm-run-all types:legacy test:vitest:* test:jest",
     "toc": "doctoc README.md",
     "lint": "prettier . --check && eslint .",
-    "lint:delta": "npm-run-all -p prettier:delta eslint:delta",
-    "prettier:delta": "prettier --check `./scripts/changed-files`",
-    "eslint:delta": "eslint `./scripts/changed-files`",
     "format": "prettier . --write && eslint . --fix",
-    "format:delta": "npm-run-all format:prettier:delta format:eslint:delta",
-    "format:prettier:delta": "prettier --write `./scripts/changed-files`",
-    "format:eslint:delta": "eslint --fix `./scripts/changed-files`",
-    "setup": "npm install && npm run all",
+    "setup": "npm run install:5 && npm run all",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:vitest:jsdom": "vitest run --coverage --environment jsdom",
     "test:vitest:happy-dom": "vitest run --coverage --environment happy-dom",
     "test:jest": "npx --node-options=\"--experimental-vm-modules --no-warnings\" jest --coverage",
     "types": "svelte-check",
     "types:legacy": "svelte-check --tsconfig tsconfig.legacy.json",
-    "validate": "npm-run-all test:vitest:* test:jest types build",
     "build": "tsc -p tsconfig.build.json && cp src/component-types.d.ts types",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate",
@@ -93,19 +87,18 @@
     }
   },
   "dependencies": {
-    "@testing-library/dom": "^10.0.0"
+    "@testing-library/dom": "9.x.x || 10.x.x"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vitest/coverage-v8": "0.x.x || ^1.0.0 || ^2.0.2",
+    "@vitest/coverage-v8": "^3.1.3",
     "all-contributors-cli": "^6.26.1",
     "doctoc": "^2.2.1",
-    "esbuild": "*",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
@@ -114,20 +107,20 @@
     "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-svelte": "^2.42.0",
-    "expect-type": "^1.1.0",
-    "happy-dom": "^16.3.0",
+    "expect-type": "^1.2.1",
+    "happy-dom": "^17.4.6",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^25.0.0",
+    "jsdom": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.5",
-    "svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0",
-    "svelte-check": "^3.0.0 || ^4.0.4",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte": "^5.28.2",
+    "svelte-check": "^4.1.7",
     "svelte-jester": "^5.0.0",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.3",
     "typescript-svelte-plugin": "^0.3.46",
-    "vite": "^4.0.0 || ^5.3.3",
-    "vitest": "0.x.x || ^1.0.0 || ^2.0.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   }
 }

scripts/changed-files

@@ -2,30 +2,34 @@
 # Install dependencies for a given version of Svelte
 set -euxo pipefail
 
-svelte_version=${1}
-node_version=$(node --version)
+svelte_version="${1-}"
+node_version=$(node --version | sed 's/^v\([0-9]*\).*/\1/')
+env_dir="tests/envs/svelte$svelte_version"
+env_dir_by_node="$env_dir/node$node_version"
 
-rm -rf node_modules
-npm install --no-package-lock
-
-if [[ "${svelte_version}" == "3" ]]; then
-  npm uninstall --no-save vite vitest @vitest/coverage-v8 @sveltejs/vite-plugin-svelte svelte-check svelte
-  npm install --no-save vite@4 [email protected] @vitest/[email protected] @sveltejs/vite-plugin-svelte@2 svelte-check@3 svelte@3
-elif [[ "${svelte_version}" == "4" ]]; then
-  npm uninstall --no-save @sveltejs/vite-plugin-svelte svelte
-  npm install --no-save @sveltejs/vite-plugin-svelte@3 svelte@4
+if [[ -d $env_dir_by_node ]]; then
+  env_dir="$env_dir_by_node"
 fi
 
-if [[ "${node_version}" =~ "v16" ]]; then
-  npm uninstall --no-save vite vitest @vitest/coverage-v8 @sveltejs/vite-plugin-svelte
-  npm install --no-save vite@4 [email protected] @vitest/[email protected] @sveltejs/vite-plugin-svelte@2
+if [[ "$svelte_version" == "5" ]]; then
+  rm -rf coverage node_modules
+  npm install
+  exit 0
 fi
 
-npm dedupe
-installed_version=$(npm ls --depth=0 --parseable svelte@${svelte_version})
-
-if [[ -z "${installed_version}" ]]; then
-  echo "Error: expected svelte@${svelte_version}"
-  npm ls --depth=0 svelte
+if [[ -z "$svelte_version" ]]; then
+  echo "Invalid usage: missing Svelte version" >&2;
   exit 1
 fi
+
+if [[ ! -d "$env_dir" ]]; then
+  echo "Error: package.json for Svelte $svelte_version, Node $node_version not found" 1>&2
+  exit 2
+fi
+
+rm -rf coverage node_modules "$env_dir/node_modules"
+pushd "$env_dir"
+npm install --no-package-lock --engine-strict
+npm ls "$env_dir" svelte
+popd
+mv "$env_dir/node_modules" .

scripts/install-dependencies

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-redundant-type-constituents */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type {
   Component as ModernComponent,
   ComponentConstructorOptions as LegacyConstructorOptions,

src/component-types.d.ts

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "engines": {
+    "node": "16.x.x"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "2.x.x",
+    "@testing-library/dom": "9.x.x",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "0.x.x",
+    "expect-type": "^1.2.1",
+    "happy-dom": "14.x.x",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "22.x.x",
+    "npm-run-all": "^4.1.5",
+    "svelte": "3.x.x",
+    "svelte-check": "3.x.x",
+    "svelte-jester": "3.x.x",
+    "vite": "4.x.x",
+    "vitest": "0.x.x"
+  }
+}

tests/envs/svelte3/node16/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "2.x.x",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "0.x.x",
+    "expect-type": "^1.2.1",
+    "happy-dom": "^17.4.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
+    "npm-run-all": "^4.1.5",
+    "svelte": "3.x.x",
+    "svelte-check": "3.x.x",
+    "svelte-jester": "3.x.x",
+    "vite": "4.x.x",
+    "vitest": "0.x.x"
+  }
+}

tests/envs/svelte3/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "engines": {
+    "node": "16.x.x"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "2.x.x",
+    "@testing-library/dom": "9.x.x",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "0.x.x",
+    "expect-type": "^1.2.1",
+    "happy-dom": "14.x.x",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "22.x.x",
+    "npm-run-all": "^4.1.5",
+    "svelte": "4.x.x",
+    "svelte-check": "3.x.x",
+    "svelte-jester": "3.x.x",
+    "vite": "4.x.x",
+    "vitest": "0.x.x"
+  }
+}

tests/envs/svelte4/node16/package.json

@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "3.x.x",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@vitest/coverage-v8": "2.x.x",
+    "expect-type": "^1.2.1",
+    "happy-dom": "^17.4.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^26.1.0",
+    "npm-run-all": "^4.1.5",
+    "svelte": "4.x.x",
+    "svelte-check": "^4.1.7",
+    "svelte-jester": "^5.0.0",
+    "vite": "5.x.x",
+    "vitest": "2.x.x"
+  }
+}

tests/envs/svelte4/package.json

@@ -6,9 +6,8 @@ import { defineConfig } from 'vite'
 
 const require = createRequire(import.meta.url)
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte(), svelteTesting()],
+  plugins: [svelte({ hot: false }), svelteTesting()],
   test: {
     environment: 'jsdom',
     setupFiles: ['./tests/_vitest-setup.js'],