npm - kiru - Versions diffs - 0.52.4 → 0.54.0-preview.0 - Mend

kiru 0.52.4 → 0.54.0-preview.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

package/dist/appContext.d.ts.map +1 -1
package/dist/appContext.js +14 -11
package/dist/appContext.js.map +1 -1
package/dist/components/derive.d.ts +20 -0
package/dist/components/derive.d.ts.map +1 -0
package/dist/components/derive.js +57 -0
package/dist/components/derive.js.map +1 -0
package/dist/components/errorBoundary.d.ts +1 -1
package/dist/components/errorBoundary.d.ts.map +1 -1
package/dist/components/index.d.ts +1 -1
package/dist/components/index.d.ts.map +1 -1
package/dist/components/index.js +1 -1
package/dist/components/index.js.map +1 -1
package/dist/components/memo.d.ts +6 -3
package/dist/components/memo.d.ts.map +1 -1
package/dist/components/memo.js.map +1 -1
package/dist/constants.d.ts +3 -3
package/dist/constants.d.ts.map +1 -1
package/dist/constants.js +3 -3
package/dist/constants.js.map +1 -1
package/dist/dom.d.ts.map +1 -1
package/dist/dom.js +69 -66
package/dist/dom.js.map +1 -1
package/dist/element.d.ts +2 -2
package/dist/element.d.ts.map +1 -1
package/dist/element.js +20 -32
package/dist/element.js.map +1 -1
package/dist/globalContext.d.ts +6 -1
package/dist/globalContext.d.ts.map +1 -1
package/dist/globalContext.js +14 -2
package/dist/globalContext.js.map +1 -1
package/dist/globals.d.ts +1 -1
package/dist/globals.d.ts.map +1 -1
package/dist/globals.js.map +1 -1
package/dist/hooks/usePromise.d.ts +4 -9
package/dist/hooks/usePromise.d.ts.map +1 -1
package/dist/hooks/usePromise.js +25 -28
package/dist/hooks/usePromise.js.map +1 -1
package/dist/hooks/useRef.d.ts +2 -2
package/dist/hooks/useRef.d.ts.map +1 -1
package/dist/jsx.d.ts +1 -1
package/dist/jsx.d.ts.map +1 -1
package/dist/reconciler.d.ts +1 -1
package/dist/reconciler.d.ts.map +1 -1
package/dist/reconciler.js +57 -117
package/dist/reconciler.js.map +1 -1
package/dist/recursiveRender.d.ts +4 -3
package/dist/recursiveRender.d.ts.map +1 -1
package/dist/recursiveRender.js +20 -19
package/dist/recursiveRender.js.map +1 -1
package/dist/renderToString.js +2 -2
package/dist/renderToString.js.map +1 -1
package/dist/router/client/index.d.ts +4 -2
package/dist/router/client/index.d.ts.map +1 -1
package/dist/router/client/index.js +49 -11
package/dist/router/client/index.js.map +1 -1
package/dist/router/context.d.ts +2 -0
package/dist/router/context.d.ts.map +1 -1
package/dist/router/context.js +5 -1
package/dist/router/context.js.map +1 -1
package/dist/router/fileRouterController.d.ts +3 -1
package/dist/router/fileRouterController.d.ts.map +1 -1
package/dist/router/fileRouterController.js +80 -9
package/dist/router/fileRouterController.js.map +1 -1
package/dist/router/globals.d.ts +3 -0
package/dist/router/globals.d.ts.map +1 -1
package/dist/router/globals.js +3 -0
package/dist/router/globals.js.map +1 -1
package/dist/router/guard.d.ts +17 -0
package/dist/router/guard.d.ts.map +1 -0
package/dist/router/guard.js +45 -0
package/dist/router/guard.js.map +1 -0
package/dist/router/head.d.ts.map +1 -1
package/dist/router/head.js +5 -7
package/dist/router/head.js.map +1 -1
package/dist/router/index.d.ts +3 -2
package/dist/router/index.d.ts.map +1 -1
package/dist/router/index.js +2 -1
package/dist/router/index.js.map +1 -1
package/dist/router/{server → ssg}/index.d.ts +4 -3
package/dist/router/ssg/index.d.ts.map +1 -0
package/dist/router/{server → ssg}/index.js +7 -4
package/dist/router/ssg/index.js.map +1 -0
package/dist/router/ssr/index.d.ts +20 -0
package/dist/router/ssr/index.d.ts.map +1 -0
package/dist/router/ssr/index.js +160 -0
package/dist/router/ssr/index.js.map +1 -0
package/dist/router/types.d.ts +37 -4
package/dist/router/types.d.ts.map +1 -1
package/dist/router/types.internal.d.ts +4 -0
package/dist/router/types.internal.d.ts.map +1 -1
package/dist/router/utils/index.d.ts +9 -4
package/dist/router/utils/index.d.ts.map +1 -1
package/dist/router/utils/index.js +38 -6
package/dist/router/utils/index.js.map +1 -1
package/dist/signals/base.d.ts +1 -3
package/dist/signals/base.d.ts.map +1 -1
package/dist/signals/base.js +3 -3
package/dist/signals/base.js.map +1 -1
package/dist/signals/computed.d.ts +4 -2
package/dist/signals/computed.d.ts.map +1 -1
package/dist/signals/computed.js +29 -6
package/dist/signals/computed.js.map +1 -1
package/dist/signals/for.d.ts +10 -0
package/dist/signals/for.d.ts.map +1 -0
package/dist/signals/for.js +7 -0
package/dist/signals/for.js.map +1 -0
package/dist/signals/index.d.ts +1 -1
package/dist/signals/index.js +1 -1
package/dist/signals/types.d.ts +1 -1
package/dist/signals/types.d.ts.map +1 -1
package/dist/ssr/client.d.ts +1 -1
package/dist/ssr/client.d.ts.map +1 -1
package/dist/ssr/server.d.ts +1 -2
package/dist/ssr/server.d.ts.map +1 -1
package/dist/ssr/server.js +26 -29
package/dist/ssr/server.js.map +1 -1
package/dist/types.d.ts +13 -11
package/dist/types.d.ts.map +1 -1
package/dist/types.dom.d.ts +33 -32
package/dist/types.dom.d.ts.map +1 -1
package/dist/types.utils.d.ts +5 -1
package/dist/types.utils.d.ts.map +1 -1
package/dist/utils/format.d.ts +4 -3
package/dist/utils/format.d.ts.map +1 -1
package/dist/utils/format.js +8 -4
package/dist/utils/format.js.map +1 -1
package/dist/utils/index.d.ts +0 -1
package/dist/utils/index.d.ts.map +1 -1
package/dist/utils/index.js +0 -1
package/dist/utils/index.js.map +1 -1
package/dist/utils/promise.d.ts +16 -0
package/dist/utils/promise.d.ts.map +1 -0
package/dist/utils/promise.js +14 -0
package/dist/utils/promise.js.map +1 -0
package/dist/utils/runtime.d.ts +11 -2
package/dist/utils/runtime.d.ts.map +1 -1
package/dist/utils/runtime.js +26 -2
package/dist/utils/runtime.js.map +1 -1
package/dist/utils/vdom.d.ts +4 -4
package/dist/utils/vdom.d.ts.map +1 -1
package/dist/utils/vdom.js +18 -17
package/dist/utils/vdom.js.map +1 -1
package/dist/vNode.d.ts +4 -0
package/dist/vNode.d.ts.map +1 -0
package/dist/vNode.js +22 -0
package/dist/vNode.js.map +1 -0
package/package.json +8 -4
package/src/appContext.ts +15 -13
package/src/components/derive.ts +121 -0
package/src/components/index.ts +1 -1
package/src/components/memo.ts +3 -2
package/src/constants.ts +4 -4
package/src/dom.ts +71 -66
package/src/element.ts +22 -35
package/src/globalContext.ts +24 -3
package/src/globals.ts +1 -1
package/src/hooks/usePromise.ts +32 -41
package/src/hooks/useRef.ts +2 -2
package/src/reconciler.ts +87 -125
package/src/recursiveRender.ts +25 -23
package/src/renderToString.ts +3 -3
package/src/router/client/index.ts +100 -14
package/src/router/context.ts +7 -1
package/src/router/fileRouterController.ts +137 -8
package/src/router/globals.ts +4 -0
package/src/router/guard.ts +72 -0
package/src/router/head.ts +5 -7
package/src/router/index.ts +12 -1
package/src/router/{server → ssg}/index.ts +16 -9
package/src/router/ssr/index.ts +247 -0
package/src/router/types.internal.ts +5 -0
package/src/router/types.ts +48 -4
package/src/router/utils/index.ts +74 -8
package/src/signals/base.ts +3 -3
package/src/signals/computed.ts +43 -6
package/src/signals/for.ts +25 -0
package/src/signals/index.ts +1 -1
package/src/signals/types.ts +5 -1
package/src/ssr/client.ts +1 -1
package/src/ssr/server.ts +31 -33
package/src/types.dom.ts +40 -40
package/src/types.ts +14 -11
package/src/types.utils.ts +11 -1
package/src/utils/format.ts +12 -4
package/src/utils/index.ts +0 -2
package/src/utils/promise.ts +26 -0
package/src/utils/runtime.ts +30 -2
package/src/utils/vdom.ts +20 -23
package/src/vNode.ts +30 -0
package/dist/components/suspense.d.ts +0 -24
package/dist/components/suspense.d.ts.map +0 -1
package/dist/components/suspense.js +0 -36
package/dist/components/suspense.js.map +0 -1
package/dist/router/server/index.d.ts.map +0 -1
package/dist/router/server/index.js.map +0 -1
package/dist/signals/jsx.d.ts +0 -17
package/dist/signals/jsx.d.ts.map +0 -1
package/dist/signals/jsx.js +0 -11
package/dist/signals/jsx.js.map +0 -1
package/src/components/suspense.ts +0 -72
package/src/signals/jsx.ts +0 -46

package/src/router/ssr/index.ts ADDED Viewed

@@ -0,0 +1,247 @@
+import path from "path"
+import { createElement, Fragment } from "../../element.js"
+import { __DEV__ } from "../../env.js"
+import { renderToString } from "../../renderToString.js"
+import { renderToReadableStream } from "../../ssr/server.js"
+import { toArray } from "../../utils/format.js"
+import {
+  matchModules,
+  matchRoute,
+  match404Route,
+  parseQuery,
+  wrapWithLayouts,
+  runBeforeEachGuards,
+  runAfterEachGuards,
+  runBeforeEnterHooks,
+} from "../utils/index.js"
+import { RouterContext, RequestContext } from "../context.js"
+import type { PageConfig, PageProps, RouterState } from "../types.js"
+import type {
+  FormattedViteImportMap,
+  GuardModule,
+  PageModule,
+} from "../types.internal.js"
+export interface SSRRenderContext {
+  pages: FormattedViteImportMap<PageModule>
+  layouts: FormattedViteImportMap
+  guards: FormattedViteImportMap<GuardModule>
+  Document: Kiru.FC
+  userContext: Kiru.RequestContext
+  registerModule: (moduleId: string) => void
+}
+export interface SSRHttpResponse {
+  html: string
+  statusCode: number
+  headers: Array<[string, string]>
+  stream: ReadableStream | null
+}
+export interface SSRRenderResult {
+  httpResponse: SSRHttpResponse | null
+}
+export async function render(
+  url: string,
+  ctx: SSRRenderContext
+): Promise<SSRRenderResult> {
+  const extName = path.extname(url)
+  if (extName && extName.length > 0) {
+    return {
+      httpResponse: null,
+    }
+  } else if (url.startsWith("/@")) {
+    return {
+      httpResponse: null,
+    }
+  }
+  const u = new URL(url, "http://localhost")
+  const pathSegments = u.pathname.split("/").filter(Boolean)
+  let routeMatch = matchRoute(ctx.pages, pathSegments)
+  if (!routeMatch) {
+    // Try to find a 404 page in parent directories
+    const fourOhFourMatch = match404Route(ctx.pages, pathSegments)
+    if (fourOhFourMatch) {
+      routeMatch = fourOhFourMatch
+    } else {
+      // Fallback to root 404 or default fallback
+      if (url === "/404") {
+        if (__DEV__) {
+          console.warn(
+            "[kiru/router]: No 404 route defined. Using fallback 404 page."
+          )
+        }
+        return {
+          httpResponse: {
+            statusCode: 404,
+            headers: [["Content-Type", "text/html"]],
+            html: "<!doctype html><html><head><title>Not Found</title></head><body><h1>404</h1></body></html>",
+            stream: null,
+          },
+        }
+      }
+      // Recursively render the 404 page
+      const notFoundResponse = await render("/404", ctx)
+      return {
+        httpResponse: {
+          html: notFoundResponse.httpResponse?.html ?? "",
+          headers: notFoundResponse.httpResponse?.headers ?? [
+            ["Content-Type", "text/html"],
+          ],
+          ...notFoundResponse,
+          statusCode: 404,
+          stream: null,
+        },
+      }
+    }
+  }
+  const { pageEntry, routeSegments, params } = routeMatch
+  const is404Route = routeMatch.routeSegments.includes("404")
+  const guardEntries = matchModules(ctx.guards, routeSegments)
+  const guardModules = await Promise.all(
+    guardEntries.map((entry) => entry.load() as unknown as Promise<GuardModule>)
+  )
+  const redirectPath = await runBeforeEachGuards(
+    guardModules,
+    { ...ctx.userContext },
+    u.pathname
+  )
+  if (redirectPath !== null) {
+    return createRedirectResult(redirectPath)
+  }
+  const layoutEntries = matchModules(ctx.layouts, routeSegments)
+  // Register all modules for CSS collection
+  ;[pageEntry, ...layoutEntries].forEach((e) => {
+    ctx.registerModule(e.filePath)
+  })
+  const [page, ...layouts] = await Promise.all([
+    pageEntry.load(),
+    ...layoutEntries.map((layoutEntry) => layoutEntry.load()),
+  ])
+  const onBeforeEnter = page.config?.hooks?.onBeforeEnter
+  if (onBeforeEnter) {
+    const redirectPath = await runBeforeEnterHooks(
+      toArray(onBeforeEnter),
+      { ...ctx.userContext },
+      u.pathname
+    )
+    if (redirectPath) {
+      return createRedirectResult(redirectPath)
+    }
+  }
+  const query = parseQuery(u.search)
+  let props = {} as PageProps<PageConfig>
+  const config = page.config ?? {}
+  const abortController = new AbortController()
+  // PageConfig loaders don't run on the server
+  if (config.loader) {
+    props = {
+      data: null,
+      error: null,
+      loading: true,
+    }
+  }
+  let documentShell = renderToString(createElement(ctx.Document))
+  if (
+    documentShell.includes("</body>") ||
+    !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#general-usage"
+    )
+  }
+  const children = wrapWithLayouts(
+    layouts
+      .map((layout) => layout.default)
+      .filter((l) => typeof l === "function"),
+    page.default,
+    props
+  )
+  const routerContextValue = {
+    state: {
+      params,
+      query,
+      pathname: u.pathname,
+      hash: "",
+      signal: abortController.signal,
+    } satisfies RouterState,
+  }
+  const app = createElement(RouterContext.Provider, {
+    children: createElement(RequestContext.Provider, {
+      children: Fragment({ children }),
+      value: ctx.userContext,
+    }),
+    value: routerContextValue,
+  })
+  let { immediate: pageOutletContent, stream } = renderToReadableStream(app)
+  const hasHeadContent = pageOutletContent.includes("<kiru-head-content>")
+  const hasHeadOutlet = documentShell.includes("<kiru-head-outlet>")
+  if (hasHeadOutlet && hasHeadContent) {
+    let [preHeadContent = "", headContentInner = "", postHeadContent = ""] =
+      pageOutletContent.split(/<kiru-head-content>|<\/kiru-head-content>/)
+    documentShell = documentShell.replace(
+      "<kiru-head-outlet>",
+      headContentInner
+    )
+    pageOutletContent = `${preHeadContent}${postHeadContent}`
+  } else if (hasHeadContent) {
+    // remove head content element and everything within it
+    pageOutletContent = pageOutletContent.replace(
+      /<kiru-head-content>(.*?)<\/kiru-head-content>/,
+      ""
+    )
+  } else if (hasHeadOutlet) {
+    // remove head outlet element and everything within it
+    documentShell = documentShell.replaceAll("<kiru-head-outlet>", "")
+  }
+  const [prePageOutlet, postPageOutlet] =
+    documentShell.split("<kiru-body-outlet>")
+  const html = `<!DOCTYPE html>${prePageOutlet}<body>${pageOutletContent}</body>${postPageOutlet}`
+  const statusCode = is404Route ? 404 : 200
+  queueMicrotask(() => {
+    runAfterEachGuards(guardModules, { ...ctx.userContext }, u.pathname)
+  })
+  return {
+    httpResponse: {
+      html,
+      statusCode,
+      headers: [["Content-Type", "text/html;charset=utf-8"]],
+      stream,
+    },
+  }
+}
+function createRedirectResult(to: string): SSRRenderResult {
+  return {
+    httpResponse: {
+      statusCode: 302,
+      headers: [["Location", to]],
+      html: "",
+      stream: null,
+    },
+  }
+}

package/src/router/types.internal.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { FileRouterContextType } from "./context"
 import type { PageConfig } from "./types"
+import type { NavGuardBuilder } from "./guard"
 export interface CurrentPage {
   component: Kiru.FC<any>
@@ -20,6 +21,10 @@ export interface PageModule {
   >
 }
+export interface GuardModule {
+  guard: NavGuardBuilder
+}
 export interface ViteImportMap {
   [fp: string]: () => Promise<DefaultComponentModule>
 }

package/src/router/types.ts CHANGED Viewed

@@ -3,12 +3,14 @@ import type { FileRouterDataLoadError } from "./errors"
 import type {
   DefaultComponentModule,
   FormattedViteImportMap,
+  GuardModule,
   PageModule,
 } from "./types.internal"
 export interface FileRouterPreloadConfig {
-  pages: FormattedViteImportMap
+  pages: FormattedViteImportMap<PageModule>
   layouts: FormattedViteImportMap
+  guards?: FormattedViteImportMap<GuardModule>
   page: PageModule
   pageProps: Record<string, unknown>
   pageLayouts: DefaultComponentModule[]
@@ -40,6 +42,14 @@ export interface FileRouterConfig {
    * ```
    */
   layouts: Record<string, unknown>
+  /**
+   * The import map to use for loading nav guards
+   * @example
+   * ```tsx
+   * <FileRouter config={{ guards: import.meta.glob("/∗∗/guard.{ts,js}"), ... }} />
+   * ```
+   */
+  guards?: Record<string, unknown>
   /**
    * The base url to use as a prefix for route matching
@@ -98,18 +108,34 @@ export interface RouterState {
   signal: AbortSignal
 }
-type PageDataLoaderContext = RouterState & {}
 export interface PageDataLoaderCacheConfig {
   type: "memory" | "localStorage" | "sessionStorage"
   ttl: number
 }
+interface LoaderContext extends RouterState {
+  /**
+   * The request context - in SSR, this is the data from the server
+   * that's passed to the `renderPage` function
+   * @example
+   * ```ts
+   * // server.ts
+   * renderPage({ url, context: { test: 123 } })
+   *
+   * // page.tsx
+   * loader: {
+   *   load: ({ context }) => context.test
+   * }
+   * ```
+   */
+  context: Kiru.RequestContext
+}
 export type PageDataLoaderConfig<T = unknown> = {
   /**
    * The function to load the page data
    */
-  load: (context: PageDataLoaderContext) => Promise<T>
+  load: (context: LoaderContext) => Promise<T>
 } & (
   | {
       /**
@@ -149,6 +175,22 @@ export type PageDataLoaderConfig<T = unknown> = {
     }
 )
+export type NavigationHook<T> = (
+  context: Kiru.RequestContext,
+  to: string,
+  from: string
+) => T
+export type OnBeforeEnterHook = NavigationHook<
+  string | void | Promise<string | void>
+>
+export type OnBeforeLeaveHook = NavigationHook<false | void>
+interface PageContextHooks {
+  onBeforeEnter?: OnBeforeEnterHook | OnBeforeEnterHook[]
+  onBeforeLeave?: OnBeforeLeaveHook | OnBeforeLeaveHook[]
+}
 export interface PageConfig<T = unknown> {
   /**
    * The loader configuration for this page
@@ -159,6 +201,8 @@ export interface PageConfig<T = unknown> {
    * returned, a page will be generated
    */
   generateStaticParams?: () => RouteParams[] | Promise<RouteParams[]>
+  hooks?: PageContextHooks
 }
 export type PageProps<T extends PageConfig<any>> = T extends PageConfig<infer U>

package/src/router/utils/index.ts CHANGED Viewed

@@ -1,19 +1,27 @@
 import { createElement } from "../../element.js"
 import { __DEV__ } from "../../env.js"
+import { resolveNavguard } from "../guard.js"
 import type {
+  DefaultComponentModule,
   FormattedViteImportMap,
+  GuardModule,
   RouteMatch,
   ViteImportMap,
 } from "../types.internal"
+import { OnBeforeEnterHook, OnBeforeLeaveHook } from "../types.js"
 export {
   formatViteImportMap,
   matchRoute,
   match404Route,
-  matchLayouts,
+  matchModules,
   normalizePrefixPath,
   parseQuery,
   wrapWithLayouts,
+  runBeforeLeaveHooks,
+  runBeforeEnterHooks,
+  runBeforeEachGuards,
+  runAfterEachGuards,
 }
 function formatViteImportMap(
@@ -177,20 +185,20 @@ function match404Route(
   return null
 }
-function matchLayouts(
-  layouts: FormattedViteImportMap,
+function matchModules<T = DefaultComponentModule>(
+  modules: FormattedViteImportMap<T>,
   routeSegments: string[]
 ) {
   return ["/", ...routeSegments].reduce((acc, _, i) => {
-    const layoutPath = "/" + routeSegments.slice(0, i).join("/")
-    const layout = layouts[layoutPath]
+    const modulePath = "/" + routeSegments.slice(0, i).join("/")
+    const module = modules[modulePath]
-    if (!layout) {
+    if (!module) {
       return acc
     }
-    return [...acc, layout]
-  }, [] as FormattedViteImportMap[string][])
+    return [...acc, module]
+  }, [] as FormattedViteImportMap<T>[string][])
 }
 function normalizePrefixPath(path: string) {
@@ -239,3 +247,61 @@ function wrapWithLayouts(
     createElement(page, props)
   )
 }
+function runBeforeLeaveHooks(
+  hooks: OnBeforeLeaveHook[],
+  context: Kiru.RequestContext,
+  to: string,
+  from: string = to
+): false | void {
+  for (const hook of hooks) {
+    const res = hook(context, to, from)
+    if (res === false) {
+      return false
+    }
+  }
+}
+async function runBeforeEnterHooks(
+  hooks: OnBeforeEnterHook[],
+  context: Kiru.RequestContext,
+  to: string,
+  from: string = to
+) {
+  for (const hook of hooks) {
+    const result = await hook(context, to, from)
+    if (typeof result === "string") {
+      return result
+    }
+  }
+  return null
+}
+async function runBeforeEachGuards(
+  guardModules: GuardModule[],
+  context: Kiru.RequestContext,
+  to: string,
+  from: string = to
+): Promise<string | null> {
+  const beforeHooks = guardModules
+    .map((guardModule) => resolveNavguard(guardModule)?.beforeEach)
+    .filter((x) => typeof x === "function")
+  return runBeforeEnterHooks(beforeHooks, context, to, from)
+}
+async function runAfterEachGuards(
+  guardModules: GuardModule[],
+  context: Kiru.RequestContext,
+  to: string,
+  from: string = to
+): Promise<void> {
+  const afterHooks = guardModules
+    .map((guardModule) => resolveNavguard(guardModule)?.afterEach)
+    .filter((x) => typeof x === "function")
+  for (const hook of afterHooks) {
+    await hook(context, to, from)
+  }
+}

package/src/signals/base.ts CHANGED Viewed

@@ -125,16 +125,16 @@ export class Signal<T> {
     return () => this.$subs!.delete(cb)
   }
-  notify(options?: { filter?: (sub: Function | Kiru.VNode) => boolean }) {
+  notify(filter?: (sub: SignalSubscriber) => boolean) {
     if (__DEV__) {
       return signalSubsMap.get(this.$id)?.forEach((sub) => {
-        if (options?.filter && !options.filter(sub)) return
+        if (filter && !filter(sub)) return
         const { $value, $prevValue } = latest(this)
         return sub($value, $prevValue)
       })
     }
     this.$subs!.forEach((sub) => {
-      if (options?.filter && !options.filter(sub)) return
+      if (filter && !filter(sub)) return
       return sub(this.$value, this.$prevValue)
     })
   }

package/src/signals/computed.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import { useHook } from "../hooks/utils.js"
+import { depsRequireChange, useHook } from "../hooks/utils.js"
 import { latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
@@ -69,6 +69,16 @@ export class ComputedSignal<T> extends Signal<T> {
     Signal.dispose(signal)
   }
+  static updateGetter<T>(signal: ComputedSignal<T>, getter: (prev?: T) => T) {
+    const $computed = latest(signal)
+    $computed.$getter = getter
+    $computed.$isDirty = true
+    ComputedSignal.run($computed)
+    if (Object.is($computed.$value, $computed.$prevValue)) return
+    $computed.notify()
+  }
   private static stop<T>(computed: ComputedSignal<T>) {
     const { $id, $unsubs } = latest(computed)
@@ -103,20 +113,35 @@ export class ComputedSignal<T> extends Signal<T> {
   }
 }
-export const computed = <T>(
+export function computed<T>(
   getter: (prev?: T) => T,
   displayName?: string
-): ComputedSignal<T> => {
+): ComputedSignal<T> {
   return new ComputedSignal(getter, displayName)
 }
-export const useComputed = <T>(
+export function useComputed<T>(
+  getter: (prev?: T) => T,
+  displayName?: string
+): ComputedSignal<T>
+export function useComputed<T>(
   getter: (prev?: T) => T,
+  deps?: unknown[],
   displayName?: string
-) => {
+): ComputedSignal<T>
+export function useComputed<T>(
+  getter: (prev?: T) => T,
+  depsOrDisplayName?: string | unknown[],
+  displayName?: string
+) {
   return useHook(
     "useComputedSignal",
-    { signal: null! as ComputedSignal<T> },
+    {
+      signal: null! as ComputedSignal<T>,
+      deps: void 0 as unknown[] | undefined,
+    },
     ({ hook, isInit, isHMR }) => {
       if (__DEV__) {
         hook.dev = {
@@ -134,8 +159,20 @@ export const useComputed = <T>(
         }
       }
       if (isInit) {
+        if (typeof depsOrDisplayName === "string") {
+          displayName = depsOrDisplayName
+          depsOrDisplayName = void 0
+        }
+        hook.deps = depsOrDisplayName
         hook.cleanup = () => ComputedSignal.dispose(hook.signal)
         hook.signal = computed(getter, displayName)
+      } else if (
+        hook.deps &&
+        typeof depsOrDisplayName !== "string" &&
+        depsRequireChange(hook.deps, depsOrDisplayName)
+      ) {
+        hook.deps = depsOrDisplayName
+        ComputedSignal.updateGetter(hook.signal, getter)
       }
       return hook.signal

package/src/signals/for.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { Signal } from "./base.js"
+type InferArraySignalItemType<T extends Signal<any[]>> = T extends Signal<
+  infer V
+>
+  ? V extends Array<infer W>
+    ? W
+    : never
+  : never
+type ForProps<T extends Signal<any[]>, U = InferArraySignalItemType<T>> = {
+  each: T
+  fallback?: JSX.Element
+  children: (value: U, index: number, array: U[]) => JSX.Element
+}
+export function For<T extends Signal<any[]>>({
+  each,
+  fallback,
+  children,
+}: ForProps<T>) {
+  const items = each.value
+  if (items.length === 0) return fallback
+  return items.map(children)
+}

package/src/signals/index.ts CHANGED Viewed

@@ -8,5 +8,5 @@ export { Signal, signal, useSignal } from "./base.js"
 export { ComputedSignal, computed, useComputed } from "./computed.js"
 export { WatchEffect, watch, useWatch } from "./watch.js"
 export { unwrap, tick } from "./utils.js"
-export * from "./jsx.js"
+export * from "./for.js"
 export * from "./types.js"

package/src/signals/types.ts CHANGED Viewed

@@ -6,5 +6,9 @@ export type ReadonlySignal<T> = Signal<T> & {
 export type SignalSubscriber<T = unknown> = (value: T, prevValue?: T) => void
 export type SignalValues<T extends readonly Signal<unknown>[]> = {
-  [I in keyof T]: T[I] extends Signal<infer V> ? V : never
+  [I in keyof T]: T[I] extends Signal<infer V>
+    ? V extends Kiru.StatefulPromise<infer P>
+      ? P
+      : V
+    : never
 }

package/src/ssr/client.ts CHANGED Viewed

@@ -10,7 +10,7 @@ interface HydrationAppContextOptions extends AppContextOptions {
    * - "dynamic": SSR with lazy promise hydration
    * @default "dynamic"
    */
-  hydrationMode?: "static" | "dynamic"
+  hydrationMode?: Kiru.HydrationMode
 }
 export function hydrate(