Update dependencies

.devcontainer/devcontainer.json

@@ -23,7 +23,7 @@
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	"forwardPorts": [
-        5000
+        5050
     ],
 
 	// Use 'postCreateCommand' to run commands after the container is created.

.github/workflows/ci.yaml

@@ -12,14 +12,14 @@ on:
 jobs:
   test:
 
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
 
     steps:
       - uses: actions/checkout@v1
       - name: 'Install Node.js'
         uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: 'Install dependencies from npm'
         run: |
           npm install
@@ -42,7 +42,7 @@ jobs:
             -p 4444:4444 \
             --link nginx \
             --shm-size=2g \
-            selenium/standalone-chrome:103.0
+            selenium/standalone-chrome:119.0
           # Wait 5 seconds
           sleep 5
       - name: 'Run tests'

Advanced Usage.md

@@ -2,7 +2,7 @@
 
 svelte-spa-router is simple by design. A minimal router is easy to learn and implement, adds minimum overhead, and leaves more control in the hands of the developers.
 
-Thanks to the many features of Svelte 3 or other components in the ecosystem, svelte-spa-router can be used to get many more "advanced" features. This document explains how to achieve certain results with svelte-spa-router beyond what's offered by the component itself.
+Thanks to the many features of Svelte or other components in the ecosystem, svelte-spa-router can be used to get many more "advanced" features. This document explains how to achieve certain results with svelte-spa-router beyond what's offered by the component itself.
 
 - [Route wrapping](#route-wrapping), including:
   - [Dynamically-imported routes and placeholders](#async-routes-and-loading-placeholders)
@@ -471,7 +471,7 @@ With the same URL as before, the result would be:
 
 ## Route transitions
 
-It's easy to add a nice transition between routes, leveraging the built-in [transitions](https://svelte.dev/docs#Transitions) of Svelte 3.
+It's easy to add a nice transition between routes, leveraging the built-in [transitions](https://svelte.dev/docs#Transitions) of Svelte.
 
 For example, to make your components fade in gracefully, you can wrap the markup in a container (e.g. `<div>`, or `<section>`, etc) and attach a Svelte transition to that. For example:
 

CHANGELOG.md

@@ -2,4 +2,4 @@
 
 A detailed changelog for each release is published in the [GitHub Releases page](https://github.com/ItalyPaleAle/svelte-spa-router/releases).
 
-Additionally, breaking changes (e.g. from 1.x to 2.x) are explained in the [UPGRADING.md](/UPGRADING.md) file, with instructions to upgrade your code.
+Additionally, breaking changes (e.g. from 3.x to 4.x) are explained in the [UPGRADING.md](/UPGRADING.md) file, with instructions to upgrade your code.

README.md

@@ -15,7 +15,7 @@
 [![npm](https://img.shields.io/npm/v/svelte-spa-router.svg)](https://www.npmjs.com/package/svelte-spa-router)
 [![GitHub](https://img.shields.io/github/license/ItalyPaleAle/svelte-spa-router.svg)](https://github.com/ItalyPaleAle/svelte-spa-router/blob/master/LICENSE.md)
 
-This module is a router for [Svelte 3](https://github.com/sveltejs/svelte) applications, specifically optimized for Single Page Applications (SPA).
+This module is a router for [Svelte 3 and 4](https://github.com/sveltejs/svelte) applications, specifically optimized for Single Page Applications (SPA).
 
 Main features:
 
@@ -38,7 +38,7 @@ With hash-based routing, navigation is possible thanks to storing the current vi
 
 For example, if your SPA is in a static file called `index.html`, your URLs for navigating within the app look something like `index.html#/profile`, `index.html#/book/42`, etc. (The `index.html` part can usually be omitted for the index file, so you can just create URLs that look like `http://example.com/#/profile`).
 
-When I created this component, other routers for Svelte 3 implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to `http://example.com/profile`), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence.
+When I created this component, other routers for Svelte 3+ implemented navigation using the HTML5 history API. While those URLs look nicer (e.g. you can actually navigate to `http://example.com/profile`), they are not ideal for static Single Page Applications. In order for users to be able to share links or even just refresh the page, you are required to have a server on the backend processing the request, and building fully-static apps is much harder as a consequence.
 
 Hash-based routing is simpler, works well even without a server, and it's generally better suited for static SPAs, especially when SEO isn't a concern, as is the case when the app requires authentication. Many popular apps use hash-based routing, including GMail!
 
@@ -60,14 +60,14 @@ cd examples/basic-routing
 
 # Build and run (in the folder of a sample)
 npx rollup -c
-npx serve -n -l 5000 dist
+npx serve -n -l 5050 dist
 ````
 
-The sample will be running at http://localhost:5000
+The sample will be running at http://localhost:5050
 
 ## Starter template
 
-You can find a starter template with Svelte 3 and svelte-spa-router at [italypaleale/svelte-spa-router-template](https://github.com/italypaleale/svelte-spa-router-template).
+You can find a starter template with Svelte 4 and svelte-spa-router at [italypaleale/svelte-spa-router-template](https://github.com/italypaleale/svelte-spa-router-template).
 
 To use the template:
 
@@ -80,7 +80,7 @@ More information can be found on the [template's repo](https://github.com/italyp
 
 ## Using svelte-spa-router
 
-You can include the router in any project using Svelte 3.
+You can include the router in any project using Svelte 4.
 
 ### Install from NPM
 

UPGRADING.md

@@ -11,6 +11,14 @@
 
 # Upgrading instructions
 
+## Upgrading to 4.x
+
+When upgrading from svelte-spa-router 3.x to 4.x, please note the following breaking changes:
+
+### Works with Svelte 4
+
+svelte-spa-router 4.x is designed to work with Svelte 4.
+
 ## Upgrading to 3.x
 
 When upgrading from svelte-spa-router 2.x to 3.x, please note the following breaking changes:

examples/dynamic-imports/src/routes.js

@@ -39,7 +39,7 @@ export default {
             .then((component) => {
                 return new Promise((resolve) => {
                     // Wait 5 seconds before returning
-                    setTimeout(() => resolve(component), 5000)
+                    setTimeout(() => resolve(component), 5050)
                 })
             }),
         // Show the loading component while the component is being downloaded

nightwatch.conf.js → nightwatch.conf.cjs

@@ -3,7 +3,7 @@ const seleniumHost = process.env.SELENIUM_HOST || '127.0.0.1'
 const seleniumPort = parseInt(process.env.SELENIUM_PORT || '4444', 10)
 
 // Launch URL - where the server is
-const launchUrl = process.env.LAUNCH_URL || 'http://localhost:5000'
+const launchUrl = process.env.LAUNCH_URL || 'http://localhost:5050'
 
 // Increase max listeners to avoid a warning
 require('events').EventEmitter.defaultMaxListeners = 100

package.json

@@ -5,12 +5,13 @@
   "main": "Router.svelte",
   "svelte": "Router.svelte",
   "types": "Router.d.ts",
+  "type": "module",
   "scripts": {
     "build-test-app": "(cd test/app && npx rollup -c)",
-    "start-test-app": "npx serve -n -l 5000 test/app/dist",
-    "eslint": "npx eslint -c .eslintrc.js --ext .js,.svelte,.html .",
+    "start-test-app": "npx serve -n -l 5050 test/app/dist",
+    "eslint": "npx eslint -c .eslintrc.cjs --ext .js,.svelte,.html .",
     "lint": "npm run eslint",
-    "nightwatch": "npx nightwatch -e selenium.chrome",
+    "nightwatch": "npx nightwatch -e selenium.chrome -c nightwatch.conf.cjs",
     "test": "npm run nightwatch"
   },
   "repository": {
@@ -20,6 +21,7 @@
   "keywords": [
     "router",
     "svelte",
+    "svelte3",
     "svelte4",
     "spa"
   ],
@@ -31,20 +33,20 @@
   },
   "homepage": "https://github.com/ItalyPaleAle/svelte-spa-router#readme",
   "dependencies": {
-    "regexparam": "2.0.1"
+    "regexparam": "2.0.2"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "chromedriver": "^103.0.0",
-    "eslint": "^8.44.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "chromedriver": "^119.0.1",
+    "eslint": "^8.55.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-svelte": "^2.32.2",
-    "nightwatch": "^1.7.13",
-    "rollup": "^2.79.1",
-    "rollup-plugin-css-only": "^3.1.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "nightwatch": "^2.6.23",
+    "rollup": "^4.7.0",
+    "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-svelte": "^7.1.6",
-    "serve": "^14.2.0",
-    "svelte": "^4.0.5"
+    "serve": "^14.2.1",
+    "svelte": "^4.2.8"
   }
 }