router-dom - npm Package Compare versions

Comparing version 2.2.1 to 2.2.2

dist/router.d.ts

@@ -28,2 +28,3 @@ export default class Router {
     [cycles.afterEnter]?(routingProps: RoutingProps): Promise<any> | void;
+    restoreScrollOnReload?: Boolean;
 }
@@ -30,0 +31,0 @@ interface RouteParam extends RouteBasic {

dist/router.js

 import { pathToRegexp, match } from "path-to-regexp";
 import { render, html, hydro, $, $$, setReuseElements } from "hydro-js";
 let router;
+const storageKey = "router-scroll";
 const outletSelector = "[data-outlet]";
@@ -15,2 +16,4 @@ const reactivityRegex = /\{\{([^]*?)\}\}/;
 });
+// Reload -> store scrollPosition
+addEventListener("beforeunload", () => sessionStorage.setItem(storageKey, `${scrollX} ${scrollY}`));
 export default class Router {
@@ -153,2 +156,13 @@ options;
             finally {
+                // Reload -> restore scroll position
+                if (!this.oldRoute &&
+                    route.restoreScrollOnReload &&
+                    sessionStorage.getItem(storageKey)) {
+                    const [x, y] = sessionStorage
+                        .getItem(storageKey)
+                        .split(" ")
+                        .map(Number);
+                    sessionStorage.removeItem(storageKey);
+                    scroll(x, y);
+                }
                 dispatchEvent(new Event("afterRouting"));
@@ -155,0 +169,0 @@ }

package.json

 {
   "name": "router-dom",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "A lightweight router for everyone",
@@ -23,3 +23,3 @@ "type": "module",
     "update": "npx npm-check-updates -u && npx typesync && npm i && npm outdated",
-    "test": "tsc && esbuild dist/router.js --bundle --format=esm --outfile=src/bundle.js && wtr src/tests/*.html --node-resolve --playwright --browsers chromium firefox webkit && node -e \"fs.rmSync('src/bundle.js')\""
+    "test": "tsc && esbuild dist/router.js --bundle --format=esm --outfile=src/bundle.js && wtr src/tests/testScroll.html --node-resolve --playwright --browsers chromium firefox webkit && node -e \"fs.rmSync('src/bundle.js')\""
   },
@@ -30,6 +30,6 @@ "author": "Fabian Krutsch <[e-mail]> (https://krutsch.netlify.app/)",
     "@esm-bundle/chai": "^4.3.4",
-    "@web/test-runner": "^0.13.11",
+    "@web/test-runner": "^0.13.13",
     "@web/test-runner-playwright": "^0.8.6",
-    "esbuild": "^0.12.9",
-    "typescript": "^4.3.2"
+    "esbuild": "^0.12.12",
+    "typescript": "^4.3.4"
   },
@@ -42,5 +42,5 @@ "repository": {
   "dependencies": {
-    "hydro-js": "^1.4.3",
+    "hydro-js": "^1.4.4",
     "path-to-regexp": "^6.2.0"
   }
 }

README.md

@@ -59,3 +59,3 @@ # router-dom
 Either a template or and element will be rendered in your element with attribute `data-outlet`.<br>
-You can also specifiy one-level of children.<br>
+You can also specifiy one-level of children.<br> One more interesting property is the `restoreScrollOnReload`.
 The second argument is the optional object options: it can take a general errorHandler and a formHandler. If there is a formHandler, form submits will handled via attributes on the form element and fetch.
@@ -67,2 +67,3 @@
     path: "/",
+    restoreScrollOnReload: true,
   },
@@ -69,0 +70,0 @@ {

src/router.ts

@@ -6,2 +6,3 @@ import type { MatchResult } from "path-to-regexp";
 let router: Router;
+const storageKey = "router-scroll";
 const outletSelector = "[data-outlet]";
@@ -20,2 +21,7 @@ const reactivityRegex = /\{\{([^]*?)\}\}/;
 
+// Reload -> store scrollPosition
+addEventListener("beforeunload", () =>
+  sessionStorage.setItem(storageKey, `${scrollX} ${scrollY}`)
+);
+
 export default class Router {
@@ -177,2 +183,16 @@ options: Options;
       } finally {
+        // Reload -> restore scroll position
+        if (
+          !this.oldRoute &&
+          route.restoreScrollOnReload &&
+          sessionStorage.getItem(storageKey)
+        ) {
+          const [x, y] = sessionStorage
+            .getItem(storageKey)!
+            .split(" ")
+            .map(Number);
+          sessionStorage.removeItem(storageKey);
+          scroll(x, y);
+        }
+
         dispatchEvent(new Event("afterRouting"));
@@ -336,2 +356,3 @@ }
   [cycles.afterEnter]?(routingProps: RoutingProps): Promise<any> | void;
+  restoreScrollOnReload?: Boolean;
 }
@@ -338,0 +359,0 @@ interface RouteParam extends RouteBasic {

No alert changes

Improved metrics

Total package byte prevSize

58990

increased by6.86%

Number of package files

14

increased by7.69%

Lines of code

701

increased by5.1%

Number of lines in readme file

105

increased by0.96%

Dependency changes

• Updatedhydro-js@^1.4.4