Upgrade Svelte and SvelteKit to latest major versions

This might be a breaking change, so the package version is bumped to 2.0.0.

.devcontainer/devcontainer.json

@@ -2,12 +2,10 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
 	"name": "Node.js & TypeScript",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:18-bullseye",
-	"features": {
-		"ghcr.io/devcontainers/features/git:1": {},
-		"ghcr.io/devcontainers/features/node:1": {}
-	},
-	"onCreateCommand": "corepack enable",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:20-bookworm",
+	"features": {},
+	"onCreateCommand": "npm uninstall -g yarn pnpm && sudo corepack enable",
+	"waitFor": "onCreateCommand",
 	"updateContentCommand": "pnpm install && pnpm svelte-kit sync",
 	"customizations": {
 		"vscode": {

.eslintignore

@@ -1,8 +1,7 @@
 .DS_Store
 node_modules
-/build
+/dist
 /.svelte-kit
-/package
 .env
 .env.*
 !.env.example

.eslintrc.cjs

@@ -1,20 +1,31 @@
+/** @type { import("eslint").Linter.FlatConfig } */
 module.exports = {
 	root: true,
-	parser: '@typescript-eslint/parser',
-	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-	plugins: ['svelte3', '@typescript-eslint'],
-	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-	settings: {
-		'svelte3/typescript': () => require('typescript')
-	},
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:svelte/recommended",
+		"prettier",
+	],
+	parser: "@typescript-eslint/parser",
+	plugins: ["@typescript-eslint"],
 	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020
+		sourceType: "module",
+		ecmaVersion: 2020,
+		extraFileExtensions: [".svelte"],
 	},
 	env: {
 		browser: true,
 		es2017: true,
-		node: true
-	}
+		node: true,
+	},
+	overrides: [
+		{
+			files: ["*.svelte"],
+			parser: "svelte-eslint-parser",
+			parserOptions: {
+				parser: "@typescript-eslint/parser",
+			},
+		},
+	],
 };

.github/workflows/release.yml

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

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/build
+/dist
 /.svelte-kit
 /package
 .env

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -1,18 +1,9 @@
 {
-	"singleQuote": true,
-	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte"
-	],
-	"pluginSearchDirs": [
-		"."
-	],
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [
 		{
 			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
+			"options": { "parser": "svelte" }
 		}
 	]
 }

.vscode/settings.json

@@ -2,10 +2,5 @@
 	"[markdown]": {
 		"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
 	},
-	"cSpell.words": [
-		"pnpm",
-		"sveltejs",
-		"sveltekit",
-		"Windi"
-	],
+	"cSpell.words": ["pnpm", "sveltejs", "sveltekit", "Windi"]
 }

README.md

@@ -33,7 +33,7 @@ for instance in the `src/routes/+layout.svelte` file:
 ```html
 <!-- +layout.svelte -->
 <script lang="ts">
-    import { ProgressBar } from '@prgm/sveltekit-progress-bar'
+    import { ProgressBar } from "@prgm/sveltekit-progress-bar";
 </script>
 
 <ProgressBar color="#7F57F1" />
@@ -69,18 +69,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.

package.json

@@ -17,42 +17,55 @@
 	},
 	"homepage": "https://github.com/prgm-dev/sveltekit-progress-bar#readme",
 	"license": "MIT",
-	"version": "1.0.1",
+	"version": "2.0.0",
 	"repository": {
 		"type": "git",
-		"url": "github:prgm-dev/sveltekit-progress-bar"
+		"url": "git+https://github.com/prgm-dev/sveltekit-progress-bar.git"
 	},
 	"scripts": {
 		"dev": "vite dev",
-		"build": "svelte-kit sync && svelte-package",
-		"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"test": "vitest",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
 	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^1.0.0",
-		"@sveltejs/kit": "^1.0.1",
-		"@sveltejs/package": "^1.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.47.1",
-		"@typescript-eslint/parser": "^5.47.1",
-		"eslint": "^8.30.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.1",
-		"prettier-plugin-svelte": "^2.9.0",
-		"svelte": "^3.55.0",
-		"svelte-check": "^3.0.1",
-		"svelte-preprocess": "^5.0.0",
-		"tslib": "^2.4.1",
-		"typescript": "^4.9.4",
-		"vite": "^4.0.3",
-		"vitest": "^0.26.2"
+		"@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"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^1.0.0 || ^2.0.0"
+		"@sveltejs/kit": "^2.0.0",
+		"svelte": "^4.0.0"
 	},
 	"type": "module",
 	"packageManager": "[email protected]",