Upgrade to Svelte 5

.devcontainer/devcontainer.json

@@ -2,24 +2,23 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
 	"name": "Node.js & TypeScript",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:20-bookworm",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:22-bookworm",
 	"features": {},
 	"onCreateCommand": "npm uninstall -g yarn pnpm && sudo corepack enable",
-	"waitFor": "onCreateCommand",
-	"updateContentCommand": "pnpm install && pnpm svelte-kit sync",
+	"updateContentCommand": "corepack pnpm install && corepack pnpm svelte-kit sync",
 	"customizations": {
 		"vscode": {
 			"extensions": [
 				"svelte.svelte-vscode",
 				"streetsidesoftware.code-spell-checker",
-				"ardenivanov.svelte-intellisense",
 				"davidanson.vscode-markdownlint",
 				"dbaeumer.vscode-eslint",
 				"editorconfig.editorconfig",
 				"esbenp.prettier-vscode",
 				"github.vscode-pull-request-github",
 				"VisualStudioExptTeam.vscodeintellicode",
-				"redhat.vscode-yaml"
+				"redhat.vscode-yaml",
+				"github.vscode-github-actions"
 			]
 		}
 	}

.github/workflows/release.yml

@@ -6,21 +6,24 @@ on:
 
 jobs:
   npm-publish:
-    name: Publish Package to npmjs
+    name: Publish Package to npmjs.org
     runs-on: ubuntu-latest
     steps:
       # Check out project
       - uses: actions/checkout@v4
-      # Install pnpm, Node 20, and dependencies
-      - uses: pnpm/action-setup@v2
+      - name: Install package manager
+        run: |
+          npm uninstall -g yarn pnpm
+          corepack enable
+      # Install Node and dependencies
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: "https://registry.npmjs.org"
           cache: pnpm
-      - run: pnpm install
+      - run: corepack pnpm install
       # Build and publish
-      - run: pnpm build
+      - run: corepack pnpm build
       - run: npm publish --access public --scope @prgm
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.vscode/extensions.json

@@ -2,13 +2,13 @@
 	"recommendations": [
 		"svelte.svelte-vscode",
 		"streetsidesoftware.code-spell-checker",
-		"ardenivanov.svelte-intellisense",
 		"davidanson.vscode-markdownlint",
 		"dbaeumer.vscode-eslint",
 		"editorconfig.editorconfig",
 		"esbenp.prettier-vscode",
 		"github.vscode-pull-request-github",
 		"visualstudioexptteam.vscodeintellicode",
-		"redhat.vscode-yaml"
+		"redhat.vscode-yaml",
+		"github.vscode-github-actions"
 	]
 }

.vscode/settings.json

@@ -2,5 +2,7 @@
 	"[markdown]": {
 		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
 	},
+	"eslint.enable": true,
+	"eslint.experimental.useFlatConfig": true,
 	"cSpell.words": ["pnpm", "sveltejs", "sveltekit", "Windi"]
 }

README.md

@@ -13,17 +13,19 @@ Please refer to the [svelte-progress-bar](https://github.com/saibotsivad/svelte-
 
 ## Installation
 
-In a SvelteKit project:
+In a SvelteKit v2 project using Svelte v5:
 
 ```bash
 npm install --save-dev @prgm/sveltekit-progress-bar
 ```
 
-Using `pnpm`:
-
-```bash
-pnpm add --save-dev @prgm/sveltekit-progress-bar
-```
+> **Note:** This version does not support Svelte 4.
+> For use inside a SvelteKit v2 project still using **Svelte v4**, refer to
+> [v2.0.0](https://github.com/prgm-dev/sveltekit-progress-bar/tree/v2.0.0):
+>
+> ```bash
+> npm install --save-dev @prgm/[email protected]
+> ```
 
 ## Usage
 
@@ -69,18 +71,18 @@ it is likely that you will need to change the z-index to get the progress bar to
 
 You shouldn't need to play with these, they've been selected based on UX design expertise, but they're available if you need them:
 
--   `minimum` _(number, range: 0-1, default: 0.08)_: The starting percent width use when the bar starts. Starting at `0` doesn't usually look very good.
--   `maximum` _(number, range: 0-1, default: 0.994)_: The maximum percent width value to use when the bar is at the end but not marked as complete. Letting the bar stay at 100% width for a while doesn't usually look very good either.
--   `intervalTime` _(number, default: 700)_: Milliseconds to wait between incrementing bar width when using the `start` (auto-increment) method.
--   `settleTime` _(number, default: 700)_: Milliseconds to wait after the `complete` method is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.
+- `minimum` _(number, range: 0-1, default: 0.08)_: The starting percent width use when the bar starts. Starting at `0` doesn't usually look very good.
+- `maximum` _(number, range: 0-1, default: 0.994)_: The maximum percent width value to use when the bar is at the end but not marked as complete. Letting the bar stay at 100% width for a while doesn't usually look very good either.
+- `intervalTime` _(number, default: 700)_: Milliseconds to wait between incrementing bar width when using the `start` (auto-increment) method.
+- `settleTime` _(number, default: 700)_: Milliseconds to wait after the `complete` method is called to hide the progress bar. Letting it sit at 100% width for a very short time makes it feel more fluid.
 
 ## Methods
 
 These additional methods are available on an instantiated progress bar:
 
--   `start()`: Set the width to the minimum and increment until maximum width.
--   `complete()`: Set the width to `100%` and then hide after `settleTime`.
--   `reset()`: Set the width to minimum but do not start incrementing.
--   `animate()`: Start incrementing from whatever the current width is.
--   `stop()`: Stop incrementing and take no further action.
--   `setWidthRatio(ratio: number)`: Stop auto-incrementing and manually specify the width.
+- `start()`: Set the width to the minimum and increment until maximum width.
+- `complete()`: Set the width to `100%` and then hide after `settleTime`.
+- `reset()`: Set the width to minimum but do not start incrementing.
+- `animate()`: Start incrementing from whatever the current width is.
+- `stop()`: Stop incrementing and take no further action.
+- `setWidthRatio(ratio: number)`: Stop auto-incrementing and manually specify the width.

eslint.config.js

@@ -0,0 +1,52 @@
+import js from "@eslint/js";
+import ts from "typescript-eslint";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs["flat/recommended"],
+	{
+		ignores: [
+			"package/**",
+			".env",
+			".env.*",
+			"!.env.example",
+			// Ignore files for PNPM, NPM and YARN
+			"pnpm-lock.yaml",
+			"package-lock.json",
+			"yarn.lock",
+		],
+	},
+	{
+		languageOptions: {
+			ecmaVersion: 2020,
+			globals: {
+				...globals.browser,
+				...globals.es2020,
+				...globals.node,
+			},
+		},
+	},
+	{
+		files: ["**/*.svelte"],
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser,
+			},
+		},
+	},
+	{
+		ignores: ["build/", ".svelte-kit/", "package/", "vite.config.ts.*"],
+	},
+
+	// Custom
+
+	{
+		// Allow $bindable, otherwise ESLint believes it's an undefined variable
+		files: ["*.svelte", "*.svelte.ts", "*.svelte.js"],
+		globals: { $bindable: "readonly" },
+	},
+];

package.json

@@ -17,7 +17,7 @@
 	},
 	"homepage": "https://github.com/prgm-dev/sveltekit-progress-bar#readme",
 	"license": "MIT",
-	"version": "2.0.0",
+	"version": "3.0.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/prgm-dev/sveltekit-progress-bar.git"
@@ -44,32 +44,33 @@
 		"dist"
 	],
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.2.3",
-		"@typescript-eslint/eslint-plugin": "^6.14.0",
-		"@typescript-eslint/parser": "^6.14.0",
-		"eslint": "^8.56.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"publint": "^0.2.6",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
-		"svelte-preprocess": "^5.1.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.10",
-		"vitest": "^1.0.4"
+		"@eslint/js": "^9.14.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.8.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"eslint": "^9.14.0",
+		"eslint-plugin-svelte": "^2.46.0",
+		"globals": "^15.12.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.8",
+		"publint": "^0.2.12",
+		"svelte": "^5.1.15",
+		"svelte-check": "^4.0.7",
+		"svelte-preprocess": "^6.0.3",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"typescript-eslint": "^8.14.0",
+		"vite": "^5.4.11",
+		"vitest": "^2.1.4"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"type": "module",
-	"packageManager": "pnpm@8.12.1",
+	"packageManager": "pnpm@9.12.3+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b",
 	"engines": {
-		"node": ">=18"
+		"node": "^20.5.0 || >=22.2.0"
 	}
 }