@domql/router 2.3.133 → 2.3.136

package/dist/cjs/index.js

@@ -21,44 +21,57 @@ __export(router_exports, {
   default: () => router_default,
   getActiveRoute: () => getActiveRoute,
   lastLevel: () => lastLevel,
+  lastPathname: () => lastPathname,
   router: () => router
 });
 module.exports = __toCommonJS(router_exports);
 var import_globals = require("@domql/globals");
-var import_utils = require("@domql/utils");
-const getActiveRoute = (route = import_globals.window.location.pathname, level) => `/${route.split("/")[level + 1]}`;
+const getActiveRoute = (level = 0, route = import_globals.window.location.pathname) => {
+  const routeArray = route.split("/");
+  const activeRoute = routeArray[level + 1];
+  if (activeRoute)
+    return `/${activeRoute}`;
+};
+let lastPathname;
 let lastLevel = 0;
 const defaultOptions = {
   level: lastLevel,
   pushState: true,
+  initialRender: false,
   scrollToTop: true,
   scrollToNode: false,
   scrollNode: import_globals.document && import_globals.document.documentElement,
   scrollBody: false,
-  scrollDocument: true,
   useFragment: false,
   updateState: true,
   scrollToOffset: 0,
   scrollToOptions: { behavior: "smooth" }
 };
-const router = (path, element, state = {}, options = defaultOptions) => {
-  (0, import_utils.merge)(options, defaultOptions);
+const router = (path, element, state = {}, passedOptions = {}) => {
+  const options = { ...defaultOptions, ...passedOptions };
   lastLevel = options.lastLevel;
   const [pathname, hash] = path.split("#");
-  const route = getActiveRoute(pathname, options.level);
-  const content = element.routes[route] || element.routes["/*"];
+  const rootNode = element.node;
+  const route = getActiveRoute(options.level, pathname);
+  const content = element.routes[route || "/"] || element.routes["/*"];
+  const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
+  const hashChanged = hash && hash !== import_globals.window.location.hash.slice(1);
+  const pathChanged = pathname !== lastPathname;
+  lastPathname = pathname;
   if (!content)
     return;
-  if (options.pushState)
+  if (options.pushState) {
     import_globals.window.history.pushState(state, null, pathname + (hash ? `#${hash}` : ""));
-  element.set({ tag: options.useFragment && "fragment", extend: content });
-  if (options.updateState) {
-    element.state.update({ route, hash }, {
-      preventContentUpdate: !options.stateContentUpdate
+  }
+  if (pathChanged || !hashChanged) {
+    if (options.updateState) {
+      element.state.update({ route, hash }, { preventContentUpdate: true });
+    }
+    element.set({
+      tag: options.useFragment && "fragment",
+      extend: content
     });
   }
-  const rootNode = element.node;
-  const scrollNode = options.scrollNode;
   if (options.scrollToTop) {
     scrollNode.scrollTo({
       ...options.scrollToOptions || {},
@@ -67,9 +80,11 @@ const router = (path, element, state = {}, options = defaultOptions) => {
     });
   }
   if (options.scrollToNode) {
-    content.content.node.scrollIntoView(
-      options.scrollToOptions
-    );
+    content.content.node.scrollTo({
+      ...options.scrollToOptions || {},
+      top: 0,
+      left: 0
+    });
   }
   if (hash) {
     const activeNode = import_globals.document.getElementById(hash);

package/index.js

@@ -1,22 +1,24 @@
 'use strict'
 
 import { document, window } from '@domql/globals'
-import { merge } from '@domql/utils'
 
-export const getActiveRoute = (
-  route = window.location.pathname, level
-) => `/${route.split('/')[level + 1]}`
+export const getActiveRoute = (level = 0, route = window.location.pathname) => {
+  const routeArray = route.split('/')
+  const activeRoute = routeArray[level + 1]
+  if (activeRoute) return `/${activeRoute}`
+}
 
+export let lastPathname
 export let lastLevel = 0
 
 const defaultOptions = {
   level: lastLevel,
   pushState: true,
+  initialRender: false,
   scrollToTop: true,
   scrollToNode: false,
   scrollNode: document && document.documentElement,
   scrollBody: false,
-  scrollDocument: true,
   useFragment: false,
   updateState: true,
   scrollToOffset: 0,
@@ -27,37 +29,46 @@ export const router = (
   path,
   element,
   state = {},
-  options = defaultOptions
+  passedOptions = {}
 ) => {
-  merge(options, defaultOptions)
+  const options = { ...defaultOptions, ...passedOptions }
   lastLevel = options.lastLevel
 
   const [pathname, hash] = path.split('#')
 
-  const route = getActiveRoute(pathname, options.level)
-  const content = element.routes[route] || element.routes['/*']
+  const rootNode = element.node
+  const route = getActiveRoute(options.level, pathname)
+  const content = element.routes[route || '/'] || element.routes['/*']
+  const scrollNode = options.scrollToNode ? rootNode : options.scrollNode
+  const hashChanged = hash && hash !== window.location.hash.slice(1)
+  const pathChanged = pathname !== lastPathname
+  lastPathname = pathname
 
   if (!content) return
-  if (options.pushState) window.history.pushState(state, null, pathname + (hash ? `#${hash}` : ''))
+  if (options.pushState) {
+    window.history.pushState(state, null, pathname + (hash ? `#${hash}` : ''))
+  }
+
+  if (pathChanged || !hashChanged) {
+    if (options.updateState) {
+      element.state.update({ route, hash }, { preventContentUpdate: true })
+    }
 
-  element.set({ tag: options.useFragment && 'fragment', extend: content })
-  if (options.updateState) {
-    element.state.update({ route, hash }, {
-      preventContentUpdate: !options.stateContentUpdate
+    element.set({
+      tag: options.useFragment && 'fragment',
+      extend: content
     })
   }
 
-  const rootNode = element.node
-  const scrollNode = options.scrollNode
   if (options.scrollToTop) {
     scrollNode.scrollTo({
       ...(options.scrollToOptions || {}), top: 0, left: 0
     })
   }
   if (options.scrollToNode) {
-    content.content.node.scrollIntoView(
-      options.scrollToOptions
-    )
+    content.content.node.scrollTo({
+      ...(options.scrollToOptions || {}), top: 0, left: 0
+    })
   }
 
   if (hash) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/router",
-  "version": "2.3.133",
+  "version": "2.3.136",
   "license": "MIT",
   "type": "module",
   "module": "dist/esm/index.js",
@@ -25,7 +25,7 @@
     "@domql/globals": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "fdc5138690250d90270d85b51e3ec2714c75c247",
+  "gitHead": "4014d9ecfc6c7b6c1dd7019848786c9b6a0e41e3",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }