kiru 0.51.6 → 0.51.8

package/src/constants.ts

@@ -8,6 +8,7 @@ export {
   $MEMO,
   $ERROR_BOUNDARY,
   $SUSPENSE_THROW,
+  $DEV_FILE_LINK,
   CONSECUTIVE_DIRTY_LIMIT,
   PREFETCHED_DATA_EVENT,
   EVENT_PREFIX_REGEX,
@@ -31,6 +32,7 @@ const $HMR_ACCEPT = Symbol.for("kiru.hmrAccept")
 const $MEMO = Symbol.for("kiru.memo")
 const $ERROR_BOUNDARY = Symbol.for("kiru.errorBoundary")
 const $SUSPENSE_THROW = Symbol.for("kiru.suspenseThrow")
+const $DEV_FILE_LINK = Symbol.for("kiru.devFileLink")
 
 const CONSECUTIVE_DIRTY_LIMIT = 50
 const PREFETCHED_DATA_EVENT = "kiru:prefetched"

package/src/globalContext.ts

@@ -1,6 +1,8 @@
 import { __DEV__ } from "./env.js"
 import { createHMRContext } from "./hmr.js"
 import { createProfilingContext } from "./profiling.js"
+import { fileRouterInstance } from "./router/globals.js"
+import type { FileRouterController } from "./router/fileRouterController"
 import type { AppContext } from "./appContext"
 import type { Store } from "./store"
 import type { SWRCache } from "./swr"
@@ -86,6 +88,9 @@ interface KiruGlobalContext {
   HMRContext?: ReturnType<typeof createHMRContext>
   profilingContext?: ReturnType<typeof createProfilingContext>
   SWRGlobalCache?: SWRCache
+  fileRouterInstance?: {
+    current: FileRouterController | null
+  }
 }
 
 function createKiruGlobalContext(): KiruGlobalContext {
@@ -136,6 +141,7 @@ function createKiruGlobalContext(): KiruGlobalContext {
     globalContext.HMRContext = createHMRContext()
     globalContext.profilingContext = createProfilingContext()
     globalContext.stores = createReactiveMap()
+    globalContext.fileRouterInstance = fileRouterInstance
   }
 
   return globalContext

package/src/hmr.ts

@@ -1,4 +1,4 @@
-import { $HMR_ACCEPT } from "./constants.js"
+import { $HMR_ACCEPT, $DEV_FILE_LINK } from "./constants.js"
 import { __DEV__ } from "./env.js"
 import { traverseApply } from "./utils/index.js"
 import { requestUpdate } from "./scheduler.js"
@@ -56,7 +56,6 @@ export function createHMRContext() {
   let isModuleReplacementExecution = false
   const isReplacement = () => isModuleReplacementExecution
   let isWaitingForNextWatchCall = false
-  let tmpUnnamedWatchers: WatchEffect[] = []
 
   const onHmrCallbacks: Array<() => void> = []
   const onHmr = (callback: () => void) => {
@@ -74,7 +73,11 @@ export function createHMRContext() {
       moduleMap.set(filePath, mod)
     } else {
       while (onHmrCallbacks.length) onHmrCallbacks.shift()!()
+      for (const prevWatcher of mod.unnamedWatchers.splice(0)) {
+        prevWatcher.stop()
+      }
     }
+
     currentModuleMemory = mod!
     currentModuleFilePath = filePath
   }
@@ -90,7 +93,7 @@ export function createHMRContext() {
       const oldEntry = currentModuleMemory.hotVars.get(name)
 
       // @ts-ignore - this is how we tell devtools what file the hotvar is from
-      newEntry.value.__devtoolsFileLink = newEntry.link
+      newEntry.value[$DEV_FILE_LINK] = newEntry.link
 
       if (typeof newEntry.value === "function") {
         if (oldEntry?.value) {
@@ -134,25 +137,6 @@ export function createHMRContext() {
     dirtiedApps.forEach((ctx) => ctx.rootNode && requestUpdate(ctx.rootNode))
     isModuleReplacementExecution = false
 
-    if (tmpUnnamedWatchers.length) {
-      let i = 0
-      for (; i < tmpUnnamedWatchers.length; i++) {
-        const newWatcher = tmpUnnamedWatchers[i]
-        const oldWatcher = currentModuleMemory.unnamedWatchers[i]
-        if (oldWatcher) {
-          newWatcher[$HMR_ACCEPT]!.inject(oldWatcher[$HMR_ACCEPT]!.provide())
-          oldWatcher[$HMR_ACCEPT]!.destroy()
-        }
-        currentModuleMemory.unnamedWatchers[i] = newWatcher
-      }
-      for (; i < currentModuleMemory.unnamedWatchers.length; i++) {
-        const oldWatcher = currentModuleMemory.unnamedWatchers[i]
-        oldWatcher[$HMR_ACCEPT]!.destroy()
-      }
-      currentModuleMemory.unnamedWatchers.length = tmpUnnamedWatchers.length
-      tmpUnnamedWatchers.length = 0
-    }
-
     currentModuleMemory = null
     currentModuleFilePath = null
   }
@@ -165,7 +149,7 @@ export function createHMRContext() {
       return isWaitingForNextWatchCall
     },
     pushWatch(watch: WatchEffect) {
-      tmpUnnamedWatchers.push(watch)
+      currentModuleMemory!.unnamedWatchers.push(watch)
       isWaitingForNextWatchCall = false
     },
   }

package/src/router/context.ts

@@ -3,6 +3,19 @@ import { __DEV__ } from "../env.js"
 import { useContext } from "../hooks/index.js"
 import type { RouteQuery, RouterState } from "./types.js"
 
+export interface ReloadOptions {
+  /**
+   * Trigger a view transition (overrides transition from config)
+   * @default false
+   */
+  transition?: boolean
+  /**
+   * Invalidate the cache for the current route
+   * @default true
+   */
+  invalidate?: boolean
+}
+
 export interface FileRouterContextType {
   /**
    * Invalidate cached loader data for the given paths
@@ -41,7 +54,10 @@ export interface FileRouterContextType {
   /**
    * Reload the current route, optionally triggering a view transition
    */
-  reload: (options?: { transition?: boolean }) => Promise<void>
+  reload: (options?: {
+    transition?: boolean
+    invalidate?: boolean
+  }) => Promise<void>
 
   /**
    * Set the current query parameters

package/src/router/fileRouterController.ts

@@ -1,7 +1,7 @@
 import { Signal } from "../signals/base.js"
 import { flushSync, nextIdle } from "../scheduler.js"
 import { __DEV__ } from "../env.js"
-import { type FileRouterContextType } from "./context.js"
+import { ReloadOptions, type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
 import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js"
 import type {
@@ -13,6 +13,8 @@ import type {
   RouterState,
 } from "./types.js"
 import type {
+  CurrentPage,
+  DevtoolsInterface,
   FormattedViteImportMap,
   PageModule,
   ViteImportMap,
@@ -27,6 +29,7 @@ import {
   wrapWithLayouts,
 } from "./utils/index.js"
 import { RouterCache, type CacheKey } from "./cache.js"
+import { watch } from "../signals/watch.js"
 
 interface PageConfigWithLoader<T = unknown> extends PageConfig {
   loader: PageDataLoaderConfig<T>
@@ -38,11 +41,7 @@ export class FileRouterController {
   private pages: FormattedViteImportMap<PageModule>
   private layouts: FormattedViteImportMap
   private abortController: AbortController
-  private currentPage: Signal<{
-    component: Kiru.FC<any>
-    config?: PageConfig
-    route: string
-  } | null>
+  private currentPage: Signal<CurrentPage | null>
   private currentPageProps: Signal<Record<string, unknown>>
   private currentLayouts: Signal<Kiru.FC[]>
   private state: RouterState
@@ -52,6 +51,11 @@ export class FileRouterController {
     { route: string; config: PageConfig }
   >
   private pageRouteToConfig?: Map<string, PageConfig>
+  public dev_onPageConfigDefined?: <T extends PageConfig<any>>(
+    fp: string,
+    config: T
+  ) => void
+  public devtools?: DevtoolsInterface
 
   constructor() {
     routerCache.current ??= new RouterCache()
@@ -71,7 +75,9 @@ export class FileRouterController {
     }
     const __this = this
     this.contextValue = {
-      invalidate: this.invalidate.bind(this),
+      invalidate: (...paths: string[]) => {
+        this.invalidate(...paths)
+      },
       get state() {
         return {
           ...__this.state,
@@ -87,38 +93,113 @@ export class FileRouterController {
       },
       navigate: this.navigate.bind(this),
       prefetchRouteModules: this.prefetchRouteModules.bind(this),
-      reload: (options?: { transition?: boolean }) =>
-        this.loadRoute(void 0, void 0, options?.transition),
+      reload: (options?: ReloadOptions) => {
+        if (
+          (options?.invalidate ?? true) &&
+          this.invalidate(this.state.pathname)
+        ) {
+          return Promise.resolve() // invalidate triggered a reload
+        }
+
+        return this.loadRoute(void 0, void 0, options?.transition)
+      },
       setQuery: this.setQuery.bind(this),
     }
     if (__DEV__) {
       this.filePathToPageRoute = new Map()
       this.pageRouteToConfig = new Map()
+      this.dev_onPageConfigDefined = (fp, config) => {
+        const existing = this.filePathToPageRoute?.get(fp)
+        if (existing === undefined) {
+          const route = fileRouterRoute.current
+          if (!route) return
+          this.filePathToPageRoute?.set(fp, { route, config })
+          return
+        }
+        const curPage = this.currentPage.value
+        const loader = config.loader
+        if (curPage?.route === existing.route && loader) {
+          const p = this.currentPageProps.value
+          const transition =
+            (loader.mode !== "static" && loader.transition) ??
+            this.enableTransitions
+
+          // Check cache first if caching is enabled
+          let cachedData = null
+          if (loader.mode !== "static" && loader.cache) {
+            const cacheKey: CacheKey = {
+              path: this.state.pathname,
+              params: this.state.params,
+              query: this.state.query,
+            }
+            cachedData = routerCache.current!.get(cacheKey, loader.cache)
+          }
+
+          if (cachedData !== null) {
+            // Use cached data immediately - no loading state needed
+            const props = {
+              ...p,
+              data: cachedData.value,
+              error: null,
+              loading: false,
+            }
+            handleStateTransition(this.state.signal, transition, () => {
+              this.currentPageProps.value = props
+            })
+          } else {
+            // No cached data - show loading state and load data
+            const props = {
+              ...p,
+              loading: true,
+              data: null,
+              error: null,
+            }
+            handleStateTransition(this.state.signal, transition, () => {
+              this.currentPageProps.value = props
+            })
+
+            this.loadRouteData(
+              config as PageConfigWithLoader,
+              props,
+              this.state,
+              transition
+            )
+          }
+        }
+
+        this.pageRouteToConfig?.set(existing.route, config)
+      }
+      this.devtools = {
+        getPages: () => this.pages,
+        invalidate: this.invalidate.bind(this),
+        navigate: this.navigate.bind(this),
+        reload: () => {
+          if (this.invalidate(this.state.pathname)) {
+            return Promise.resolve() // invalidate triggered a reload
+          }
+          return this.loadRoute()
+        },
+        subscribe: (callback) => {
+          const watcher = watch(
+            [this.currentPage, this.currentPageProps],
+            callback
+          )
+          return () => watcher.stop()
+        },
+      }
     }
 
-    const handlePopState = () => this.loadRoute()
     window.addEventListener("popstate", (e) => {
-      const state = e.state
-      if (!isCustomNavigationState(state)) {
-        this.loadRoute()
-        return
-      }
+      e.preventDefault()
+      const { pathname: prevPath, hash: prevHash } = this.state
+      const { pathname: nextPath, hash: nextHash } = window.location
 
       this.loadRoute().then(() => {
-        nextIdle(() => {
-          if (state.prevHash !== state.nextHash) {
-            window.location.hash = ""
-            window.location.hash = state.nextHash
-          }
-          if (!state.nextHash) {
-            window.scrollTo(0, 0)
-          }
-        })
+        if (prevHash !== nextHash || prevPath !== nextPath) {
+          this.queueScrollManagement(nextHash)
+        }
       })
     })
-    this.cleanups.push(() =>
-      window.removeEventListener("popstate", handlePopState)
-    )
   }
 
   public init(config: FileRouterConfig) {
@@ -166,14 +247,17 @@ export class FileRouterController {
       this.layouts = layouts
       if (__DEV__) {
         if (page.config) {
-          this.onPageConfigDefined(route, page.config)
+          this.dev_onPageConfigDefined!(route, page.config)
         }
       }
       if (__DEV__) {
         validateRoutes(this.pages)
       }
       const loader = page.config?.loader
-      if (loader && loader.mode !== "static" && pageProps.loading === true) {
+      if (
+        loader &&
+        ((loader.mode !== "static" && pageProps.loading === true) || __DEV__)
+      ) {
         if (cacheData === null) {
           this.loadRouteData(
             page.config as PageConfigWithLoader,
@@ -188,6 +272,7 @@ export class FileRouterController {
               error: null,
               loading: false,
             }
+            // @ts-ignore
             const transition = loader.transition ?? this.enableTransitions
             handleStateTransition(this.state.signal, transition, () => {
               this.currentPageProps.value = props
@@ -195,6 +280,7 @@ export class FileRouterController {
           })
         }
       }
+      // window.history.scrollRestoration = "manual"
     } else {
       this.pages = formatViteImportMap(
         pages as ViteImportMap,
@@ -210,72 +296,11 @@ export class FileRouterController {
       if (__DEV__) {
         validateRoutes(this.pages)
       }
+      //window.history.scrollRestoration = "manual"
       this.loadRoute()
     }
   }
 
-  public onPageConfigDefined<T extends PageConfig<any>>(fp: string, config: T) {
-    const existing = this.filePathToPageRoute?.get(fp)
-    if (existing === undefined) {
-      const route = fileRouterRoute.current
-      if (!route) return
-      this.filePathToPageRoute?.set(fp, { route, config })
-      return
-    }
-    const curPage = this.currentPage.value
-    const loader = config.loader
-    if (curPage?.route === existing.route && loader) {
-      const p = this.currentPageProps.value
-      const transition =
-        (loader.mode !== "static" && loader.transition) ??
-        this.enableTransitions
-
-      // Check cache first if caching is enabled
-      let cachedData = null
-      if (loader.mode !== "static" && loader.cache) {
-        const cacheKey: CacheKey = {
-          path: this.state.pathname,
-          params: this.state.params,
-          query: this.state.query,
-        }
-        cachedData = routerCache.current!.get(cacheKey, loader.cache)
-      }
-
-      if (cachedData !== null) {
-        // Use cached data immediately - no loading state needed
-        const props = {
-          ...p,
-          data: cachedData.value,
-          error: null,
-          loading: false,
-        }
-        handleStateTransition(this.state.signal, transition, () => {
-          this.currentPageProps.value = props
-        })
-      } else {
-        // No cached data - show loading state and load data
-        const props = {
-          ...p,
-          loading: true,
-          data: null,
-          error: null,
-        }
-        handleStateTransition(this.state.signal, transition, () => {
-          this.currentPageProps.value = props
-        })
-
-        this.loadRouteData(
-          config as PageConfigWithLoader,
-          props,
-          this.state,
-          transition
-        )
-      }
-    }
-
-    this.pageRouteToConfig?.set(existing.route, config)
-  }
-
   public getChildren() {
     const page = this.currentPage.value
     if (!page) return null
@@ -502,8 +527,10 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
     if (shouldRefresh) {
       // Refresh the current page to get fresh data
-      this.loadRoute(currentPath, {}, this.enableTransitions)
+      this.loadRoute()
+      return true
     }
+    return false
   }
 
   private async navigate(
@@ -513,27 +540,36 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       transition?: boolean
     }
   ) {
-    const { pathname: prevPath, hash: prevHash } = window.location
-
     const url = new URL(path, "http://localhost")
-    const { pathname: nextPath, hash: nextHash } = url
+    const { hash: prevHash, pathname: prevPath } = this.state
+    const { hash: nextHash, pathname: nextPath } = url
+
     if (options?.replace) {
       window.history.replaceState({}, "", path)
     } else {
       window.history.pushState({}, "", path)
     }
-    window.dispatchEvent(
-      new PopStateEvent("popstate", {
-        state: {
-          ["kiru-router-event"]: true,
-          prevPath,
-          nextPath,
-          prevHash,
-          nextHash,
-          transition: options?.transition ?? this.enableTransitions,
-        } satisfies CustomNavigationState,
-      })
-    )
+
+    this.loadRoute(
+      void 0,
+      void 0,
+      options?.transition ?? this.enableTransitions
+    ).then(() => {
+      if (prevHash !== nextHash || prevPath !== nextPath) {
+        this.queueScrollManagement(nextHash)
+      }
+    })
+  }
+
+  private queueScrollManagement(nextHash: string) {
+    nextIdle(() => {
+      let nextEl: HTMLElement | null = null
+      if (nextHash && (nextEl = document.getElementById(nextHash.slice(1)))) {
+        nextEl.scrollIntoView()
+      } else {
+        window.scrollTo(0, 0)
+      }
+    })
   }
 
   private async prefetchRouteModules(path: string) {
@@ -623,7 +659,7 @@ function validateRoutes(pageMap: FormattedViteImportMap) {
     let warning = "[kiru/router]: Route conflicts detected:\n"
     warning += routeConflicts
       .map(([route1, route2]) => {
-        return `  - "${route1.absolutePath}" conflicts with "${route2.absolutePath}"\n`
+        return `  - "${route1.filePath}" conflicts with "${route2.filePath}"\n`
       })
       .join("")
     warning += "Routes are ordered by specificity (higher specificity wins)"
@@ -678,23 +714,3 @@ function routesConflict(route1: string, route2: string): boolean {
 
   return true
 }
-
-interface CustomNavigationState {
-  ["kiru-router-event"]: true
-  prevHash: string
-  nextHash: string
-  prevPath: string
-  nextPath: string
-  transition: boolean
-}
-
-function isCustomNavigationState(
-  state: unknown
-): state is CustomNavigationState {
-  return (
-    typeof state === "object" &&
-    state !== null &&
-    "kiru-router-event" in state &&
-    state["kiru-router-event"] === true
-  )
-}

package/src/router/link.ts

@@ -65,7 +65,7 @@ export const Link: Kiru.FC<LinkProps> = ({
       e.preventDefault()
       navigate(to, { replace, transition })
     },
-    [to, navigate, onclick, replace]
+    [onclick, navigate, to, replace, transition]
   )
 
   return createElement("a", {

package/src/router/pageConfig.ts

@@ -7,7 +7,7 @@ export function definePageConfig<T>(config: PageConfig<T>): PageConfig<T> {
     const filePath = window.__kiru?.HMRContext?.getCurrentFilePath()
     const fileRouter = fileRouterInstance.current
     if (filePath && fileRouter) {
-      fileRouter.onPageConfigDefined(filePath, config)
+      fileRouter.dev_onPageConfigDefined!(filePath, config)
     }
   }
 

package/src/router/server/index.ts

@@ -67,7 +67,7 @@ export async function render(
   const layoutEntries = matchLayouts(ctx.layouts, routeSegments)
 
   ;[pageEntry, ...layoutEntries].forEach((e) => {
-    ctx.registerModule(e.absolutePath!)
+    ctx.registerModule(e.filePath)
   })
 
   const [page, ...layouts] = await Promise.all([
@@ -133,7 +133,7 @@ export async function render(
     !documentShell.includes("<kiru-body-outlet>")
   ) {
     throw new Error(
-      "[kiru/router]: Document is expected to contain a <Body.Outlet> element. See https://kirujs.dev/docs/api/file-router#ssg"
+      "[kiru/router]: Document is expected to contain a <Body.Outlet> element. See https://kirujs.dev/docs/api/file-router#general-usage"
     )
   }
 
@@ -198,7 +198,7 @@ export async function generateStaticPaths(pages: FormattedViteImportMap) {
 
     const hasDynamic = urlSegments.some((s) => s.startsWith(":"))
     if (!hasDynamic) {
-      results[basePath === "" ? "/" : basePath] = entry.absolutePath
+      results[basePath === "" ? "/" : basePath] = entry.filePath
       continue
     }
     try {
@@ -214,7 +214,7 @@ export async function generateStaticPaths(pages: FormattedViteImportMap) {
           const value = params[key]
           p = p.replace(`:${key}*`, value).replace(`:${key}`, value)
         }
-        results[p] = entry.absolutePath
+        results[p] = entry.filePath
       }
     } catch {}
   }

package/src/router/types.internal.ts

@@ -1,5 +1,12 @@
+import type { FileRouterContextType } from "./context"
 import type { PageConfig } from "./types"
 
+export interface CurrentPage {
+  component: Kiru.FC<any>
+  config?: PageConfig
+  route: string
+}
+
 export interface DefaultComponentModule {
   default: Kiru.FC
 }
@@ -18,10 +25,12 @@ export interface ViteImportMap {
 }
 
 export interface FormattedViteImportMapEntry<T = DefaultComponentModule> {
+  filePath: string
   load: () => Promise<T>
-  specificity: number
+  params: string[]
+  route: string
   segments: string[]
-  absolutePath: string
+  specificity: number
 }
 
 export interface FormattedViteImportMap<T = DefaultComponentModule> {
@@ -34,3 +43,13 @@ export interface RouteMatch {
   params: Record<string, string>
   routeSegments: string[]
 }
+
+export interface DevtoolsInterface {
+  getPages: () => FormattedViteImportMap<PageModule>
+  invalidate: FileRouterContextType["invalidate"]
+  navigate: FileRouterContextType["navigate"]
+  reload: FileRouterContextType["reload"]
+  subscribe: (
+    cb: (page: CurrentPage | null, props: Record<string, unknown>) => void
+  ) => () => void
+}

package/src/router/utils/index.ts

@@ -39,6 +39,7 @@ function formatViteImportMap(
     }
     const segments: string[] = []
     const parts = k.split("/").slice(0, -1)
+    const params = new Set<string>()
 
     for (let i = 0; i < parts.length; i++) {
       const part = parts[i]
@@ -48,12 +49,26 @@ function formatViteImportMap(
             `[kiru/router]: Catchall must be the folder name. Got "${key}"`
           )
         }
-        segments.push(`:${part.slice(4, -1)}*`)
+        const param = part.slice(4, -1)
+        if (params.has(param)) {
+          throw new Error(
+            `[kiru/router]: Duplicate parameter "${param}" in "${key}"`
+          )
+        }
+        params.add(param)
+        segments.push(`:${param}*`)
         specificity += 1
         break
       }
       if (part.startsWith("[") && part.endsWith("]")) {
-        segments.push(`:${part.slice(1, -1)}`)
+        const param = part.slice(1, -1)
+        if (params.has(param)) {
+          throw new Error(
+            `[kiru/router]: Duplicate parameter "${param}" in "${key}"`
+          )
+        }
+        params.add(param)
+        segments.push(`:${param}`)
         specificity += 10
         continue
       }
@@ -62,10 +77,12 @@ function formatViteImportMap(
     }
 
     const value: FormattedViteImportMap[string] = {
+      filePath: key,
       load: map[key],
-      specificity,
+      params: Array.from(params),
+      route: "/" + parts.join("/"),
       segments,
-      absolutePath: key,
+      specificity,
     }
 
     return {