kiru 0.51.7 → 0.51.9

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,13 +93,100 @@ 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()
+        },
+      }
     }
 
     window.addEventListener("popstate", (e) => {
@@ -102,7 +195,7 @@ export class FileRouterController {
       const { pathname: nextPath, hash: nextHash } = window.location
 
       this.loadRoute().then(() => {
-        if (prevHash !== nextHash || prevPath !== nextPath) {
+        if (nextHash !== prevHash || nextPath !== prevPath) {
           this.queueScrollManagement(nextHash)
         }
       })
@@ -154,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,
@@ -176,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
@@ -204,68 +301,6 @@ export class FileRouterController {
     }
   }
 
-  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
@@ -492,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(
@@ -503,22 +540,25 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       transition?: boolean
     }
   ) {
-    const url = new URL(path, "http://localhost")
-    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)
     }
 
+    const url = new URL(path, "http://localhost")
+    const { hash: nextHash, pathname: nextPath } = url
+    const { hash: prevHash, pathname: prevPath } = this.state
+
     this.loadRoute(
       void 0,
       void 0,
       options?.transition ?? this.enableTransitions
     ).then(() => {
-      if (prevHash !== nextHash || prevPath !== nextPath) {
+      if (nextHash !== prevHash) {
+        window.dispatchEvent(new HashChangeEvent("hashchange"))
+      }
+      if (nextHash !== prevHash || nextPath !== prevPath) {
         this.queueScrollManagement(nextHash)
       }
     })
@@ -622,7 +662,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)"

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([
@@ -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 {

package/src/signals/watch.ts

@@ -1,6 +1,4 @@
 import { __DEV__ } from "../env.js"
-import type { HMRAccept } from "../hmr.js"
-import { $HMR_ACCEPT } from "../constants.js"
 import { useHook } from "../hooks/utils.js"
 import { effectQueue } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
@@ -17,7 +15,6 @@ export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
   protected unsubs: Map<string, Function>
   protected cleanup: (() => void) | null
   protected isRunning?: boolean
-  protected [$HMR_ACCEPT]?: HMRAccept<WatchEffect<Deps>>
 
   constructor(
     getter: (...values: SignalValues<Deps>) => WatchCallbackReturn,
@@ -30,16 +27,6 @@ export class WatchEffect<const Deps extends readonly Signal<unknown>[] = []> {
     this.isRunning = false
     this.cleanup = null
     if (__DEV__) {
-      this[$HMR_ACCEPT] = {
-        provide: () => this,
-        inject: (prev) => {
-          if (prev.isRunning) return
-          this.stop()
-        },
-        destroy: () => {
-          this.stop()
-        },
-      }
       if ("window" in globalThis) {
         const signals = window.__kiru.HMRContext!.signals
         if (signals.isWaitingForNextWatchCall()) {

package/src/types.dom.ts

@@ -297,7 +297,7 @@ type IFrameSandbox = string | boolean
 // | "allow-top-navigation-by-user-activation"
 
 type InputAccept = "audio/*" | "video/*" | "image/*" | MimeType
-type AutoComplete = "on" | "off"
+type AutoComplete = string
 type FormMethod = "get" | "post" | "dialog"
 
 type Direction = "ltr" | "rtl" | "auto"