kiru 0.54.3 → 1.0.1

package/src/router/fileRouterController.ts

@@ -1,7 +1,7 @@
-import { Signal } from "../signals/base.js"
-import { watch } from "../signals/watch.js"
+import { signal, Signal } from "../signals/base.js"
+import { effect } from "../signals/effect.js"
 import { __DEV__ } from "../env.js"
-import { flushSync, nextIdle } from "../scheduler.js"
+import { nextIdle } from "../scheduler.js"
 import { ReloadOptions, type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
 import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js"
@@ -9,7 +9,9 @@ import type {
   FileRouterConfig,
   PageConfig,
   PageDataLoaderConfig,
+  PageDataLoaderContext,
   PageProps,
+  RouteParams,
   RouteQuery,
   RouterState,
 } from "./types.js"
@@ -31,6 +33,7 @@ import {
 } from "./utils/index.js"
 import { RouterCache, type CacheKey } from "./cache.js"
 import { scrollStack } from "./scrollStack.js"
+import { ViewTransitions } from "../viewTransitions.js"
 
 interface PageConfigWithLoader<T = unknown> extends PageConfig {
   loader: PageDataLoaderConfig<T>
@@ -62,18 +65,18 @@ export class FileRouterController {
   constructor() {
     routerCache.current ??= new RouterCache()
     this.abortController = new AbortController()
-    this.currentPage = new Signal(null)
-    this.currentPageProps = new Signal({})
-    this.currentLayouts = new Signal([])
+    this.currentPage = signal(null)
+    this.currentPageProps = signal({})
+    this.currentLayouts = signal([])
     this.enableTransitions = false
     this.historyIndex = 0
     this.layouts = {}
     this.pages = {}
     this.state = {
-      pathname: window.location.pathname,
-      hash: window.location.hash,
-      params: {},
-      query: {},
+      pathname: signal(window.location.pathname),
+      hash: signal(window.location.hash),
+      params: signal<RouteParams>({}),
+      query: signal<RouteQuery>({}),
       signal: this.abortController.signal,
     }
     this.contextValue = this.createContextValue()
@@ -99,10 +102,11 @@ export class FileRouterController {
           // Check cache first if caching is enabled
           let cachedData = null
           if (loader.mode !== "static" && loader.cache) {
+            const { pathname, params, query } = this.state
             const cacheKey: CacheKey = {
-              path: this.state.pathname,
-              params: this.state.params,
-              query: this.state.query,
+              path: pathname.peek(),
+              params: params.peek(),
+              query: query.peek(),
             }
             cachedData = routerCache.current!.get(cacheKey, loader.cache)
           }
@@ -130,10 +134,18 @@ export class FileRouterController {
               this.currentPageProps.value = props
             })
 
+            const { pathname, hash, params, query, signal } = this.state
+
             this.loadRouteData(
               config as PageConfigWithLoader,
               props,
-              this.state,
+              {
+                pathname: pathname.peek(),
+                hash: hash.peek(),
+                params: params.peek(),
+                query: query.peek(),
+                signal,
+              },
               transition
             )
           }
@@ -150,15 +162,12 @@ export class FileRouterController {
         },
         navigate: this.navigate.bind(this),
         reload: () => {
-          this.invalidate(this.state.pathname)
+          this.invalidate(this.state.pathname.peek())
           return this.loadRoute()
         },
         subscribe: (callback) => {
-          const watcher = watch(
-            [this.currentPage, this.currentPageProps],
-            callback
-          )
-          return () => watcher.stop()
+          const e = effect([this.currentPage, this.currentPageProps], callback)
+          return () => e.stop()
         },
       }
     }
@@ -192,13 +201,11 @@ export class FileRouterController {
         query,
         cacheData,
       } = preloaded
-      this.state = {
-        params,
-        query,
-        pathname: window.location.pathname,
-        hash: window.location.hash,
-        signal: this.abortController.signal,
-      }
+      this.state.pathname.value = window.location.pathname
+      this.state.hash.value = window.location.hash
+      this.state.params.value = params
+      this.state.query.value = query
+      this.state.signal = this.abortController.signal
       this.currentPage.value = {
         component: page.default,
         config: page.config,
@@ -222,11 +229,14 @@ export class FileRouterController {
         ((loader.mode !== "static" && pageProps.loading === true) || __DEV__)
       ) {
         if (cacheData === null) {
-          this.loadRouteData(
-            page.config as PageConfigWithLoader,
-            pageProps,
-            this.state
-          )
+          const { pathname, hash, params, query, signal } = this.state
+          this.loadRouteData(page.config as PageConfigWithLoader, pageProps, {
+            pathname: pathname.peek(),
+            hash: hash.peek(),
+            params: params.peek(),
+            query: query.peek(),
+            signal,
+          })
         } else {
           nextIdle(() => {
             const props = {
@@ -385,7 +395,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         )
       }
 
-      const routerState: RouterState = {
+      const loaderContext: PageDataLoaderContext = {
         pathname: path,
         hash: window.location.hash,
         params,
@@ -408,9 +418,9 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
           let cachedData = null
           if (loader.mode !== "static" && loader.cache) {
             const cacheKey: CacheKey = {
-              path: routerState.pathname,
-              params: routerState.params,
-              query: routerState.query,
+              path: loaderContext.pathname,
+              params: loaderContext.params,
+              query: loaderContext.query,
             }
             cachedData = routerCache.current!.get(cacheKey, loader.cache)
           }
@@ -435,7 +445,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
             this.loadRouteData(
               config as PageConfigWithLoader,
               props,
-              routerState,
+              loaderContext,
               enableTransition
             )
           }
@@ -456,8 +466,11 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       }
 
       return handleStateTransition(signal, enableTransition, () => {
-        this.state = routerState
-        this.contextValue = this.createContextValue()
+        this.state.pathname.value = path
+        this.state.hash.value = window.location.hash
+        this.state.params.value = params
+        this.state.query.value = query
+        this.state.signal = signal
         this.currentPage.value = {
           component: page.default,
           config,
@@ -477,22 +490,22 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
   private async loadRouteData(
     config: PageConfigWithLoader,
     props: Record<string, unknown>,
-    routerState: RouterState,
+    context: PageDataLoaderContext,
     enableTransition = this.enableTransitions
   ) {
     const { loader } = config
 
     // Load data from loader (cache check is now done earlier in loadRoute)
     loader
-      .load(routerState)
+      .load(context)
       .then(
         (data) => {
           // Cache the data if caching is enabled
           if (loader.mode !== "static" && loader.cache) {
             const cacheKey: CacheKey = {
-              path: routerState.pathname,
-              params: routerState.params,
-              query: routerState.query,
+              path: context.pathname,
+              params: context.params,
+              query: context.query,
             }
             routerCache.current!.set(cacheKey, data, loader.cache)
           }
@@ -508,15 +521,15 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
             data: null,
             error: new FileRouterDataLoadError(error),
             loading: false,
-          }) satisfies PageProps<PageConfig<unknown>>
+          } satisfies PageProps<PageConfig<unknown>>)
       )
       .then((state) => {
-        if (routerState.signal.aborted) return
+        if (context.signal.aborted) return
 
         const transition =
           (loader.mode !== "static" && loader.transition) ?? enableTransition
 
-        handleStateTransition(routerState.signal, transition, () => {
+        handleStateTransition(context.signal, transition, () => {
           this.currentPageProps.value = {
             ...props,
             ...state,
@@ -530,7 +543,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
     routerCache.current!.invalidate(...paths)
 
     // Check if current page matches any invalidated paths
-    const currentPath = this.state.pathname
+    const currentPath = this.state.pathname.peek()
     const shouldRefresh = routerCache.current!.pathMatchesPattern(
       currentPath,
       paths
@@ -548,7 +561,8 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
   ) {
     const url = new URL(path, "http://localhost")
     const { hash: nextHash, pathname: nextPath } = url
-    const { hash: prevHash, pathname: prevPath } = this.state
+    const prevHash = this.state.hash.peek()
+    const prevPath = this.state.pathname.peek()
     if (nextHash === prevHash && nextPath === prevPath) {
       return
     }
@@ -598,11 +612,11 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
 
   private setQuery(query: RouteQuery, options?: { replace?: boolean }) {
     const queryString = buildQueryString(query)
-    const newUrl = `${this.state.pathname}${
+    const newUrl = `${this.state.pathname.peek()}${
       queryString ? `?${queryString}` : ""
     }`
     this.updateHistoryState(newUrl, options)
-    this.state = { ...this.state, query }
+    this.state.query.value = query
     return this.loadRoute()
   }
 
@@ -612,11 +626,11 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
     } else if (hash.length && !hash.startsWith("#")) {
       hash = `#${hash}`
     }
-    if (hash === this.state.hash) {
+    if (hash === this.state.hash.peek()) {
       return
     }
-    this.updateHistoryState(`${this.state.pathname}${hash}`, options)
-    this.state = { ...this.state, hash }
+    this.updateHistoryState(`${this.state.pathname.peek()}${hash}`, options)
+    this.state.hash.value = hash
     return this.loadRoute()
   }
 
@@ -659,13 +673,13 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
         }
       },
       get state() {
-        return { ...__this.state }
+        return __this.state
       },
       navigate: this.navigate.bind(this),
       prefetchRouteModules: this.prefetchRouteModules.bind(this),
       reload: async (options?: ReloadOptions) => {
         if (options?.invalidate ?? true) {
-          this.invalidate(this.state.pathname)
+          this.invalidate(this.state.pathname.peek())
         }
         return this.loadRoute(void 0, void 0, options?.transition)
       },
@@ -698,19 +712,13 @@ async function handleStateTransition(
   enableTransition: boolean,
   callback: () => void
 ) {
-  if (!enableTransition || typeof document.startViewTransition !== "function") {
+  if (!enableTransition) {
     return new Promise<void>((resolve) => {
       callback()
       nextIdle(resolve)
     })
   }
-  const vt = document.startViewTransition(() => {
-    callback()
-    flushSync()
-  })
-
-  signal.addEventListener("abort", () => vt.skipTransition())
-  await vt.ready
+  await ViewTransitions.run(callback, { signal })
 }
 
 function validateRoutes(pageMap: FormattedViteImportMap) {

package/src/router/link.ts

@@ -1,6 +1,5 @@
 import type { ElementProps } from "../types"
 import { createElement } from "../element.js"
-import { useCallback } from "../hooks/index.js"
 import { useFileRouter } from "./context.js"
 
 export interface LinkProps extends ElementProps<"a"> {
@@ -40,40 +39,27 @@ export const Link: Kiru.FC<LinkProps> = ({
   const { navigate, prefetchRouteModules, baseUrl } = useFileRouter()
 
   const href = baseUrl + to
-  const handleMouseOver = useCallback(
-    (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
+
+  return createElement("a", {
+    href: href,
+    onclick: (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
+      onclick?.(e)
+      if (e.defaultPrevented) return
+      e.preventDefault()
+      navigate(href, { replace, transition })
+    },
+    onmouseover: (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
       if (prefetchJs !== false) {
         prefetchRouteModules(href)
       }
       onmouseover?.(e)
     },
-    [onmouseover, href]
-  )
-  const handleFocus = useCallback(
-    (e: Kiru.FocusEvent<HTMLAnchorElement>) => {
+    onfocus: (e: Kiru.FocusEvent<HTMLAnchorElement>) => {
       if (prefetchJs !== false) {
         prefetchRouteModules(href)
       }
       onfocus?.(e)
     },
-    [onfocus, href]
-  )
-
-  const handleClick = useCallback(
-    (e: Kiru.MouseEvent<HTMLAnchorElement>) => {
-      onclick?.(e)
-      if (e.defaultPrevented) return
-      e.preventDefault()
-      navigate(href, { replace, transition })
-    },
-    [onclick, navigate, href, replace, transition]
-  )
-
-  return createElement("a", {
-    href: href,
-    onclick: handleClick,
-    onmouseover: handleMouseOver,
-    onfocus: handleFocus,
     ...props,
   })
 }

package/src/router/server/index.ts

@@ -8,7 +8,13 @@ import {
   wrapWithLayouts,
 } from "../utils/index.js"
 import { RouterContext } from "../context.js"
-import type { PageConfig, PageProps, RouterState } from "../types.js"
+import { signal, Signal } from "../../signals/base.js"
+import type {
+  PageConfig,
+  PageDataLoaderContext,
+  PageProps,
+  RouterState,
+} from "../types.js"
 import { FormattedViteImportMap, PageModule } from "../types.internal.js"
 import { __DEV__ } from "../../env.js"
 import { FileRouterDataLoadError } from "../errors.js"
@@ -86,7 +92,7 @@ export async function render(
     if (config.loader.mode !== "static" || __DEV__) {
       props = { loading: true, data: null, error: null }
     } else {
-      const routerState: RouterState = {
+      const loaderContext: PageDataLoaderContext = {
         pathname: u.pathname,
         hash: "",
         params,
@@ -100,7 +106,7 @@ export async function render(
       }, 10000)
 
       try {
-        const data = await config.loader.load(routerState)
+        const data = await config.loader.load(loaderContext)
         props = {
           data,
           error: null,
@@ -127,6 +133,14 @@ export async function render(
     props
   )
 
+  const routerState: RouterState = {
+    pathname: signal(u.pathname),
+    hash: signal(""),
+    params: signal(params),
+    query: signal(query),
+    signal: abortController.signal,
+  }
+
   let documentShell = renderToString(createElement(ctx.Document))
 
   if (
@@ -138,16 +152,11 @@ export async function render(
     )
   }
 
-  const app = createElement(RouterContext.Provider, {
+  const app = createElement(RouterContext, {
     children: Fragment({ children }),
     value: {
       baseUrl: ctx.baseUrl.slice(0, -1),
-      state: {
-        params,
-        query,
-        pathname: u.pathname,
-        signal: abortController.signal, // Server-side signal (not abortable)
-      } as RouterState,
+      state: routerState,
     },
   })
 
@@ -175,13 +184,15 @@ export async function render(
     documentShell = documentShell.replaceAll("<kiru-head-outlet>", "")
   }
 
+  Object.values(routerState).forEach(
+    (s) => Signal.isSignal(s) && Signal.dispose(s)
+  )
+
   const [prePageOutlet, postPageOutlet] =
     documentShell.split("<kiru-body-outlet>")
 
-  // console.log("immediate", immediate)
-
   return {
-    status: is404Route ? 404 : (result?.status ?? 200),
+    status: is404Route ? 404 : result?.status ?? 200,
     body: `<!doctype html>${prePageOutlet}<body>${pageOutletContent}</body>${postPageOutlet}`,
   }
 }

package/src/router/types.ts

@@ -74,23 +74,23 @@ export interface RouterState {
    * @example
    * "/users/[id]" -> "/users/123"
    */
-  pathname: string
+  pathname: Kiru.Signal<string>
   /**
    * The current hash
    * @example
    * "/users/123#profile" -> "#profile"
    */
-  hash: string
+  hash: Kiru.Signal<string>
   /**
    * The current route params
    * @example
    * "/foo/[id]/page.tsx" -> { id: "123" }
    */
-  params: RouteParams
+  params: Kiru.Signal<RouteParams>
   /**
    * The current route query
    */
-  query: RouteQuery
+  query: Kiru.Signal<RouteQuery>
   /**
    * The abort signal for the current route, aborted and
    * renewed each time the route changes or reloads
@@ -98,7 +98,13 @@ export interface RouterState {
   signal: AbortSignal
 }
 
-type PageDataLoaderContext = RouterState & {}
+export interface PageDataLoaderContext {
+  pathname: string
+  hash: string
+  params: RouteParams
+  query: RouteQuery
+  signal: AbortSignal
+}
 
 export interface PageDataLoaderCacheConfig {
   type: "memory" | "localStorage" | "sessionStorage"
@@ -161,6 +167,7 @@ export interface PageConfig<T = unknown> {
   generateStaticParams?: () => RouteParams[] | Promise<RouteParams[]>
 }
 
-export type PageProps<T extends PageConfig<any>> = T extends PageConfig<infer U>
-  ? AsyncTaskState<U, FileRouterDataLoadError>
-  : {}
+export type PageProps<T extends PageConfig<any>> =
+  T extends PageConfig<infer U>
+    ? AsyncTaskState<U, FileRouterDataLoadError>
+    : {}