feat: improve navigation history

Author: antfu

package.json

@@ -5,7 +5,7 @@
   "packageManager": "pnpm@9.15.4",
   "scripts": {
     "build": "pnpm -r run build",
-    "dev": "nuxt dev packages/node-modules-inspector/src",
+    "dev": "pnpm -C packages/node-modules-inspector run dev",
     "start": "pnpm -C packages/node-modules-inspector run start",
     "prepare": "nuxt prepare packages/node-modules-inspector/src && npx simple-git-hooks",
     "lint": "nuxi prepare && eslint .",

packages/node-modules-inspector/package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "build": "nuxi build src && unbuild",
     "start": "node ./bin.mjs",
-    "dev": "pnpm run -r stub && nuxi dev src",
+    "dev": "pnpm run -r stub && cd src && nuxi dev",
     "prepack": "pnpm build"
   },
   "dependencies": {

packages/node-modules-inspector/src/app/components/panel/Nav.vue

@@ -30,6 +30,8 @@ const isFiltersOpen = computed({
   },
 })
 
+const location = window.location
+
 const tabsMeta = [
   {
     name: 'Graph View',
@@ -104,7 +106,7 @@ function resetPanelState() {
           flex="~ items-center justify-center"
           :title="tab.name"
           :class="route.path.startsWith(tab.path) ? 'text-primary' : 'op50'"
-          :to="{ path: tab.path, query: route.query }"
+          :to="{ path: tab.path, hash: location.hash }"
           @click="resetPanelState()"
         >
           <div :class="tab.icon" text-xl />

packages/node-modules-inspector/src/app/components/panel/PackageDetails.vue

@@ -75,19 +75,21 @@ function toggleExclude() {
           <div p1 flex="~ col">
             <button
               px2 py1 rounded hover:bg-active flex="~ items-center gap-2"
-              :class="filters.focus?.includes(pkg.spec) ? 'text-primary' : 'op50'"
+              :class="filters.focus?.includes(pkg.spec) ? 'text-primary' : 'op75'"
+              :disabled="filters.excludes?.includes(pkg.spec)"
+              class="disabled:op25! disabled:pointer-events-none"
               @click="toggleFocus()"
             >
               <div i-ph-arrows-in-cardinal-duotone flex-none />
               <span class="ml-2">{{ filters.focus?.includes(pkg.spec) ? 'Unfocus' : 'Focus' }} on this package</span>
             </button>
             <button
               px2 py1 rounded hover:bg-active flex="~ items-center gap-2"
-              :class="filters.excludes?.includes(pkg.spec) ? 'text-purple' : 'op50'"
+              :class="filters.excludes?.includes(pkg.spec) ? 'text-purple' : 'op75'"
               @click="toggleExclude()"
             >
               <div i-ph-network-slash-duotone flex-none />
-              <span class="ml-2">{{ filters.focus?.includes(pkg.spec) ? 'Un-exclude' : 'Exclude' }} this package</span>
+              <span class="ml-2">{{ filters.excludes?.includes(pkg.spec) ? 'Un-exclude' : 'Exclude' }} this package</span>
             </button>
           </div>
         </template>
@@ -104,7 +106,7 @@ function toggleExclude() {
     </div>
 
     <div flex="~ col gap-2" p5>
-      <div font-mono text-2xl flex="~ wrap items-center gap-2" pr10>
+      <div font-mono text-2xl flex="~ wrap items-center gap-2" pr20>
         <span>{{ pkg.name }}</span>
         <DisplayModuleType text-sm :pkg :force="true" />
       </div>

packages/node-modules-inspector/src/app/components/report/MostDeps.vue

@@ -14,7 +14,7 @@ const top20 = computed(() => {
 <template>
   <div v-if="top20.length">
     <SubTitle>Packages with the Most of Transitive Dependencies</SubTitle>
-    <div grid="~ cols-[max-content_max-content_1fr] gap-x-4 gap-y-1" border="~ rounded-xl base" p4 bg-glass>
+    <div grid="~ cols-[max-content_max-content_1fr] gap-x-4 gap-y-1" border="~ rounded-xl base" p4 bg-glass of-auto>
       <template v-for="pkg of top20" :key="pkg.spec">
         <button
           font-mono text-left hover:bg-active px2 ml--2 rounded

packages/node-modules-inspector/src/app/state/filters.ts

@@ -32,6 +32,13 @@ export const FILTER_KEYS = [
   'source-type',
 ] satisfies (keyof FilterOptions)[]
 
+export const FILTER_KEYS_ARRAY = [
+  'modules',
+  'focus',
+  'licenses',
+  'excludes',
+] satisfies (keyof FilterOptions)[]
+
 export const FILTER_KEYS_FULL = [
   'excludes',
   'exclude-dts',

packages/node-modules-inspector/src/app/state/query.ts

@@ -1,84 +1,62 @@
-import type { LocationQuery } from 'vue-router'
 import type { FilterOptions } from './filters'
 import { useRoute, useRouter } from '#app/composables/router'
 import { debouncedWatch, ignorableWatch } from '@vueuse/core'
 import { reactive, watch } from 'vue'
-import { FILTER_KEYS_FULL, filters } from './filters'
+import { FILTER_KEYS_ARRAY, FILTER_KEYS_FULL, filters } from './filters'
 
 export interface QueryOptions extends FilterOptions {
   selected?: string
 }
 
-export const query = reactive<QueryOptions>({} as any)
+export const query = reactive<QueryOptions>({
+  selected: '',
+} as any)
 
-const FIELDS_ARRAY: (keyof QueryOptions)[] = [
-  'modules',
-  'focus',
-  'licenses',
-  'excludes',
-]
-
-// function stringifyQuery(object: QueryOptions): string {
-//   const entries = Object.entries(object)
-//     .map(i => [i[0], Array.isArray(i[1]) ? i[1].join(',') : i[1]])
-//     .filter(x => !!x[1]) as [string, string][]
-//   const query = new URLSearchParams(entries)
-//   return query.toString()
-// }
+function stringifyQuery(object: QueryOptions): string {
+  const entries = Object.entries(object)
+    .map(i => [i[0], Array.isArray(i[1]) ? i[1].join(',') : i[1]])
+    .filter(x => !!x[1]) as [string, string][]
+  const query = new URLSearchParams(entries)
+  return query.toString()
+}
 
 function parseQuery(query: string): QueryOptions {
   return Object.fromEntries(
     Array.from(new URLSearchParams(query).entries())
-      .map(([key, value]) => [key, (FIELDS_ARRAY.includes(key as any) && typeof value === 'string') ? value.split(',') : value]),
-  ) as any as QueryOptions
-}
-
-function toVueRouterQuery(query: QueryOptions): Record<string, string> {
-  return Object.fromEntries(
-    Object.entries(query)
-      .map(([key, value]) => [key, Array.isArray(value) ? value.join(',') : value])
-      .filter(x => !!x[1]),
-  )
-}
-
-function fromVueRouterQuery(query: LocationQuery): QueryOptions {
-  return Object.fromEntries(
-    Object.entries(query)
-      .map(([key, value]) => [key, (FIELDS_ARRAY.includes(key as any) && typeof value === 'string') ? value.split(',') : value]),
+      .map(([key, value]) => [key, (FILTER_KEYS_ARRAY.includes(key as any) && typeof value === 'string') ? value.split(',') : value]),
   ) as any as QueryOptions
 }
 
 export function setupQuery() {
-  Object.assign(query, parseQuery(location.search))
-  Object.assign(filters, query)
+  Object.assign(query, parseQuery(location.hash.replace(/^#/, '')))
+
+  FILTER_KEYS_FULL.forEach((key) => {
+    if (query[key] === undefined)
+      (filters as any)[key] = query[key]
+  })
 
   const router = useRouter()
   const route = useRoute()
 
   const { ignoreUpdates } = ignorableWatch(
-    query,
-    () => {
-      // TODO: store the filters in the localStorge
-      // Do soft .replace instead of pushing to history
-      // Navigation should only be recording when changing `selected` or route
-      router.push({ path: route.path, query: toVueRouterQuery(query) })
+    () => [query, query.selected],
+    (n, o) => {
+      const hash = `#${decodeURIComponent(stringifyQuery(query)).replace(/^\?/g, '')}`
+      if (n[1] !== o[1])
+        router.push({ path: route.path, hash })
+      else
+        history.replaceState(null, '', hash)
     },
     { deep: true, flush: 'post' },
   )
 
   watch(
-    () => route.query,
-    (after) => {
+    () => route.hash,
+    () => {
       ignoreUpdates(() => {
-        const target = fromVueRouterQuery(after)
-        for (const [key, value] of Object.entries(target)) {
-          if ((query as any)[key] !== value) {
-            (query as any)[key] = value
-          }
-        }
+        Object.assign(query, parseQuery(location.hash.replace(/^#/, '')))
       })
     },
-    { deep: true },
   )
 
   debouncedWatch(
@@ -89,6 +67,6 @@ export function setupQuery() {
           (query as any)[key] = filters[key]
       }
     },
-    { deep: true, debounce: 500 },
+    { deep: true, debounce: 200 },
   )
 }