kiru 1.4.1 → 1.5.1

package/src/dom/props.ts

@@ -733,8 +733,8 @@ function setStyleProp(
   // Avoid Set allocation for the common case where prevStyle is empty
   if (prevKeys.length === 0) {
     for (let i = 0; i < nextKeys.length; i++) {
-      const k = nextKeys[i] as keyof StyleObject
-      const rawNext = nextStyle[k]
+      const k = nextKeys[i]
+      const rawNext = nextStyle[k as keyof StyleObject]
       const nextVal = unwrap(rawNext)
       if (trackSignals && Signal.isSignal(rawNext)) {
         styleKeyToSignal.set(k, rawNext)
@@ -751,7 +751,7 @@ function setStyleProp(
   // Full merge path: iterate prevKeys for removals, nextKeys for additions/changes
   const nextStyleKeys = new Set(nextKeys)
   for (let i = 0; i < prevKeys.length; i++) {
-    const k = prevKeys[i] as keyof StyleObject
+    const k = prevKeys[i]
     if (!nextStyleKeys.has(k)) {
       // Property was removed
       if ((k as string).startsWith("--")) {
@@ -763,9 +763,9 @@ function setStyleProp(
   }
 
   for (let i = 0; i < nextKeys.length; i++) {
-    const k = nextKeys[i] as keyof StyleObject
-    const rawNext = nextStyle[k]
-    const prevVal = unwrap(prevStyle[k])
+    const k = nextKeys[i]
+    const rawNext = nextStyle[k as keyof StyleObject]
+    const prevVal = unwrap(prevStyle[k as keyof StyleObject])
     const nextVal = unwrap(rawNext)
     if (trackSignals && Signal.isSignal(rawNext)) {
       styleKeyToSignal.set(k, rawNext)

package/src/globalContext.ts

@@ -2,8 +2,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 { AppHandle } from "./appHandle"
+import type { FileRouterController } from "./router/fileRouterController.js"
+import type { AppHandle } from "./appHandle.js"
 
 export { createKiruGlobalContext, type GlobalKiruEvent, type KiruGlobalContext }
 

package/src/headlessRender.ts

@@ -12,7 +12,7 @@ import {
 import { Signal } from "./signals/base.js"
 import { $ERROR_BOUNDARY, voidElements, $STREAM_DATA } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import type { ErrorBoundaryNode } from "./types.utils"
+import type { ErrorBoundaryNode } from "./types.utils.js"
 
 export interface HeadlessRenderContext {
   write(chunk: string): void
@@ -37,6 +37,9 @@ export function headlessRender(
   if (el instanceof Array) {
     return el.forEach((c, i) => headlessRender(ctx, c, parent, i))
   }
+  if (typeof el === "function") {
+    return headlessRender(ctx, el(), parent, idx)
+  }
   if (Signal.isSignal(el)) {
     const value = el.peek()
     if (!isPrimitiveChild(value)) {

package/src/hooks/onCleanup.ts

@@ -1,3 +1,5 @@
+import { $INLINE_FN } from "../constants.js"
+import { __DEV__ } from "../env.js"
 import { node } from "../globals.js"
 import {
   generateRandomID,
@@ -14,7 +16,7 @@ import {
 export function onCleanup(fn: () => void): void {
   if (!sideEffectsEnabled()) return
   const vNode = node.current!
-  if (!vNode) {
+  if (!vNode || (__DEV__ && vNode.type === $INLINE_FN)) {
     throw new Error("Cannot queue onCleanup effect outside of a component")
   }
   registerVNodeCleanup(vNode, generateRandomID(10), fn)

package/src/hooks/setup.ts

@@ -1,11 +1,9 @@
 import { signal, Signal } from "../signals/base.js"
 import { createVNodeId, isVNodeDeleted } from "../utils/vdom.js"
+import { $INLINE_FN } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { node, setups } from "../globals.js"
-import {
-  tracking,
-  type TrackingStackObservations,
-} from "../signals/tracking.js"
+import { executeWithTracking } from "../signals/tracking.js"
 import { registerVNodeCleanup } from "../utils/index.js"
 
 let currentAccessedPaths: Set<string[]> | null = null
@@ -29,7 +27,7 @@ export interface Setup<Props extends {}> {
 export function setup<Props extends {}>(): Setup<Props> {
   const vNode = node.current!
   if (__DEV__) {
-    if (!vNode) {
+    if (!vNode || vNode.type === $INLINE_FN) {
       throw new Error("setup() must be called inside a Kiru component")
     }
     if (vNode.render) {
@@ -94,34 +92,19 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
 
       function sync() {
         accessedPaths.clear()
+        currentAccessedPaths = accessedPaths
+
         const propsProxy = createProxy(
           currentProps.current as Record<string, unknown>
         ) as InferredProps
-        const observations: TrackingStackObservations = new Map()
-        tracking.stack.push(observations)
-        currentAccessedPaths = accessedPaths
-        const value = selector(propsProxy)
+
+        resultSig.value = executeWithTracking({
+          id: Signal.id(resultSig),
+          fn: () => selector(propsProxy),
+          onDepChanged: sync,
+          subs: unsubs,
+        })
         currentAccessedPaths = null
-        tracking.stack.pop()
-        // Always assign and notify so the component re-renders when the derived value changes
-        // (e.g. when parent passes a different signal ref like toggle switching count/double).
-        resultSig.value = value
-
-        for (const [sid, unsub] of unsubs) {
-          if (!observations.has(sid)) {
-            unsub()
-            unsubs.delete(sid)
-          }
-        }
-        for (const [sid, observedSig] of observations) {
-          if (!unsubs.has(sid)) {
-            try {
-              unsubs.set(sid, observedSig.subscribe(sync))
-            } catch {
-              // Signal may be disposed after HMR; skip subscribing
-            }
-          }
-        }
       }
 
       sync()
@@ -143,8 +126,11 @@ function createSetup<Props extends {}>(vNode: Kiru.VNode): Setup<Props> {
           return id
         }
         if (node.current !== vNode) {
-          // @ts-expect-error
-          registerVNodeCleanup(vNode, id.$id, Signal.dispose.bind(null, id))
+          registerVNodeCleanup(
+            vNode,
+            Signal.id(id),
+            Signal.dispose.bind(null, id)
+          )
         }
         prevIndex = vNode.index
         propSyncs.push(() => {

package/src/hooks/utils.ts

@@ -1,10 +1,11 @@
+import { $INLINE_FN } from "../constants.js"
 import { node } from "../globals.js"
 
 export function getVNodeLifecycleHooks(): null | NonNullable<
   Kiru.VNode["hooks"]
 > {
   const vNode = node.current!
-  if (!vNode) return null
+  if (!vNode || vNode.type === $INLINE_FN) return null
 
   return (vNode.hooks ??= {
     pre: [],

package/src/hydration.ts

@@ -1,4 +1,4 @@
-import type { MaybeDom, SomeDom } from "./types.utils"
+import type { MaybeDom, SomeDom } from "./types.utils.js"
 
 const parents: SomeDom[] = []
 const childIdx: number[] = []

package/src/index.ts

@@ -1,7 +1,7 @@
 import { createKiruGlobalContext } from "./globalContext.js"
 import { isBrowser } from "./env.js"
 
-export type * from "./types"
+export type * from "./types.js"
 export * from "./signals/index.js"
 export * from "./action.js"
 export * from "./appHandle.js"

package/src/profiling.ts

@@ -1,4 +1,4 @@
-import type { AppHandle } from "./appHandle"
+import type { AppHandle } from "./appHandle.js"
 
 const MAX_TICKS = 100
 

package/src/reconciler.ts

@@ -1,4 +1,9 @@
-import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
+import {
+  $FRAGMENT,
+  $INLINE_FN,
+  FLAG_PLACEMENT,
+  FLAG_UPDATE,
+} from "./constants.js"
 import {
   getVNodeApp,
   isElement,
@@ -189,6 +194,10 @@ function updateSlot(
     }
     return updateFragment(parent, oldChild, child)
   }
+  if (typeof child === "function") {
+    if (key !== null) return null
+    return updateInlineFnChild(parent, oldChild, child)
+  }
   return null
 }
 
@@ -263,6 +272,23 @@ function updateFragment(
   return oldChild
 }
 
+function updateInlineFnChild(
+  parent: VNode,
+  oldChild: VNode | null,
+  expr: Function
+) {
+  if (oldChild === null || oldChild.type !== $INLINE_FN) {
+    return createVNode(parent, $INLINE_FN, { expr })
+  }
+  if (__DEV__) {
+    dev_emitUpdateNode()
+  }
+  oldChild.props = { expr }
+  oldChild.flags |= FLAG_UPDATE
+  oldChild.sibling = null
+  return oldChild
+}
+
 function createChild(parent: VNode, child: unknown): VNode | null {
   if (isValidTextChild(child)) {
     return createVNode(parent, "#text", { nodeValue: "" + child })
@@ -283,6 +309,10 @@ function createChild(parent: VNode, child: unknown): VNode | null {
     return createVNode(parent, $FRAGMENT, { children: child })
   }
 
+  if (typeof child === "function") {
+    return createVNode(parent, $INLINE_FN, { expr: child })
+  }
+
   return null
 }
 
@@ -316,14 +346,11 @@ function updateFromMap(
   const isSig = Signal.isSignal(child)
   if (isSig || isValidTextChild(child)) {
     const oldChild = existingChildren.get(index)
-    if (oldChild) {
+    if (oldChild?.type === "#text") {
       if (oldChild.props.nodeValue === child) {
         return oldChild
       }
-      if (
-        oldChild.type === "#text" &&
-        Signal.isSignal(oldChild.props.nodeValue)
-      ) {
+      if (Signal.isSignal(oldChild.props.nodeValue)) {
         oldChild.cleanups?.["nodeValue"]?.()
       }
     }
@@ -356,11 +383,11 @@ function updateFromMap(
 
   if (Array.isArray(child)) {
     const props = { children: child }
-    const oldChild = existingChildren.get(index)
     if (__DEV__) {
       markListChild(child)
     }
-    if (oldChild) {
+    const oldChild = existingChildren.get(index)
+    if (oldChild?.type === $FRAGMENT) {
       if (__DEV__) {
         dev_emitUpdateNode()
       }
@@ -372,6 +399,21 @@ function updateFromMap(
     return createVNode(parent, $FRAGMENT, props, null, index)
   }
 
+  if (typeof child === "function") {
+    const props = { expr: child }
+    const oldChild = existingChildren.get(index)
+    if (oldChild?.type === $INLINE_FN) {
+      if (__DEV__) {
+        dev_emitUpdateNode()
+      }
+      oldChild.flags |= FLAG_UPDATE
+      oldChild.props = props
+      return oldChild
+    }
+
+    return createVNode(parent, $INLINE_FN, props, null, index)
+  }
+
   return null
 }
 
@@ -472,7 +514,7 @@ function getNearestParentFcTag(vNode: VNode) {
 function createVNode(
   parent: VNode,
   type: VNode["type"],
-  props: VNode["props"],
+  props?: VNode["props"],
   key: VNode["key"] = null,
   index = 0
 ): VNode {

package/src/resource.ts

@@ -1,23 +1,20 @@
 import { $HMR_ACCEPT, STREAMED_DATA_EVENT } from "./constants.js"
 import { hydrationMode, node, renderMode } from "./globals.js"
 import { Signal, signal } from "./signals/base.js"
+import { executeWithTracking } from "./signals/tracking.js"
 import { createVNodeId, registerVNodeCleanup } from "./utils/vdom.js"
 import { generateRandomID } from "./utils/generateId.js"
 import { __DEV__, isBrowser } from "./env.js"
 import { GenericHMRAcceptor, performHmrAccept } from "./hmr.js"
 
-/**
- * Returns true if the value is a {@link Resource}
- */
-export function isResource(thing: unknown): thing is Resource<unknown> {
-  return (
-    Signal.isSignal(thing) &&
-    "promise" in thing &&
-    thing["promise"] instanceof Promise
-  )
-}
+export type ResourceSource = Record<string, Signal<unknown>> | Signal<unknown>
 
-const resourceMeta = new WeakMap<Kiru.VNode, { id: string; index: number }>()
+type InnerOf<T> = T extends Kiru.Signal<infer V> ? V : never
+
+type UnwrapResourceSource<T extends ResourceSource> =
+  T extends Kiru.Signal<unknown>
+    ? InnerOf<T>
+    : { [K in keyof T]: InnerOf<T[K]> }
 
 interface ResourceState<T> {
   error: Signal<Error | null>
@@ -32,14 +29,31 @@ export interface ResourceLoaderContext {
   signal: AbortSignal
 }
 
-export function resource<T, Source>(
-  source: Kiru.Signal<Source>,
-  callback: (source: Source, ctx: ResourceLoaderContext) => Promise<T>
+const resourceMeta = new WeakMap<Kiru.VNode, { id: string; index: number }>()
+
+export function resource<T>(
+  callback: (ctx: ResourceLoaderContext) => Promise<T>
+): Resource<T>
+export function resource<T, Source extends ResourceSource>(
+  source: Source,
+  callback: (
+    source: UnwrapResourceSource<Source>,
+    ctx: ResourceLoaderContext
+  ) => Promise<T>
+): Resource<T>
+export function resource<T, Source extends ResourceSource>(
+  callbackOrSource: Source | ((ctx: ResourceLoaderContext) => Promise<T>),
+  callback?: (
+    source: UnwrapResourceSource<Source>,
+    ctx: ResourceLoaderContext
+  ) => Promise<T>
 ): Resource<T> {
   const data = signal(void 0 as T)
   const error = signal<Error | null>(null)
   const isPending = signal(true)
 
+  let controller = new AbortController()
+
   let promiseId = ""
   const vNode = node.current
   if (!vNode) {
@@ -62,30 +76,53 @@ export function resource<T, Source>(
     promiseId = generateRandomID()
   }
 
-  const unsub = source.subscribe((src) => {
-    resource.promise = createPromise(src)
+  const updateResource = () => {
+    resource.promise = createPromise()
     resource.notify()
-  })
+  }
 
-  let controller = new AbortController()
+  let unsubFromSource: (() => void) | undefined
+  if (typeof callbackOrSource === "object") {
+    if (Signal.isSignal(callbackOrSource)) {
+      unsubFromSource = callbackOrSource.subscribe(updateResource)
+    } else {
+      const unsubs: (() => void)[] = []
+      for (const key in callbackOrSource) {
+        if (!Signal.isSignal(callbackOrSource[key])) continue
+        unsubs.push(callbackOrSource[key].subscribe(updateResource))
+      }
+      unsubFromSource = () => {
+        unsubs.forEach((unsub) => unsub())
+      }
+    }
+  }
+
+  const observedSignalUnsubs = new Map<string, () => void>()
   const dispose = () => {
     if (!controller.signal.aborted) controller.abort()
     Signal.dispose(data)
     Signal.dispose(isPending)
-    unsub()
+    observedSignalUnsubs.forEach((unsub) => unsub())
+    unsubFromSource?.()
   }
 
   if (vNode) {
     registerVNodeCleanup(vNode, promiseId, dispose)
   }
 
+  let promise: Kiru.StatefulPromise<T>
   const resource: Resource<T> = Object.assign(data, {
     error,
     isPending,
-    promise: undefined as unknown as Kiru.StatefulPromise<T>,
+    get promise() {
+      return (promise ??= createPromise())
+    },
+    set promise(newPromise) {
+      promise = newPromise
+    },
     refetch() {
       data.value = void 0 as T
-      this.promise = createPromise(source.peek())
+      resource.promise = createPromise()
     },
     dispose,
   })
@@ -111,33 +148,38 @@ export function resource<T, Source>(
     }
   }
 
-  if (__DEV__ && isBrowser && window.__kiru.HMRContext?.isReplacement()) {
-    queueMicrotask(() => {
-      resource.promise = createPromise(source.peek())
-    })
-  } else {
-    resource.promise = createPromise(source.peek())
-  }
-
-  function createPromise(source: Source): Kiru.StatefulPromise<T> {
+  function createPromise(): Kiru.StatefulPromise<T> {
     controller.abort()
     const ctrl = (controller = new AbortController())
     isPending.value = true
-    let newPromise: Promise<T>
-    if (renderMode.current === "string") {
-      // if we're rendering to a string, there's no need to fire the callback
-      newPromise = Promise.resolve() as Promise<T>
-    } else if (
-      renderMode.current === "hydrate" &&
-      hydrationMode.current === "dynamic"
-    ) {
-      // if we're hydrating and the hydration mode is not static,
-      // we need to resolve the promise from cache/event
-      newPromise = resolveDeferredPromise<T>(promiseId, ctrl.signal)
-    } else {
-      // stream / dom / (hydrate + static)
-      newPromise = callback(source, { signal: ctrl.signal })
-    }
+    const newPromise = executeWithTracking({
+      fn: () => {
+        let promise: Promise<T>
+        if (renderMode.current === "string") {
+          // if we're rendering to a string, there's no need to fire the callback
+          promise = Promise.resolve() as Promise<T>
+        } else if (
+          renderMode.current === "hydrate" &&
+          hydrationMode.current === "dynamic"
+        ) {
+          // if we're hydrating and the hydration mode is not static,
+          // we need to resolve the promise from cache/event
+          promise = resolveDeferredPromise<T>(promiseId, ctrl.signal)
+        } else {
+          // stream / dom / (hydrate + static)
+          if (typeof callbackOrSource === "function") {
+            promise = callbackOrSource({ signal: ctrl.signal })
+          } else {
+            const source = unwrapResourceSource(callbackOrSource)
+            promise = callback!(source, { signal: ctrl.signal })
+          }
+        }
+        return promise
+      },
+      id: Signal.id(data),
+      onDepChanged: updateResource,
+      subs: observedSignalUnsubs,
+    })
 
     const statefulPromise: Kiru.StatefulPromise<T> = Object.assign(newPromise, {
       id: promiseId,
@@ -162,6 +204,12 @@ export function resource<T, Source>(
     return statefulPromise
   }
 
+  if (__DEV__ && isBrowser && window.__kiru.HMRContext?.isReplacement()) {
+    queueMicrotask(() => (resource.promise = createPromise()))
+  } else {
+    resource.promise ??= createPromise()
+  }
+
   return resource
 }
 
@@ -205,3 +253,29 @@ function resolveDeferredPromise<T>(
     })
   })
 }
+
+/**
+ * Returns true if the value is a {@link Resource}
+ */
+export function isResource(thing: unknown): thing is Resource<unknown> {
+  return (
+    Signal.isSignal(thing) &&
+    "promise" in thing &&
+    thing["promise"] instanceof Promise
+  )
+}
+
+function unwrapResourceSource<T extends ResourceSource>(
+  source: T
+): UnwrapResourceSource<T> {
+  if (Signal.isSignal(source)) {
+    return source.peek() as UnwrapResourceSource<T>
+  }
+  const out: Record<string, unknown> = {}
+  for (const key in source) {
+    if (Signal.isSignal(source[key])) {
+      out[key] = source[key].peek()
+    }
+  }
+  return out as UnwrapResourceSource<T>
+}

package/src/router/client/index.ts

@@ -9,8 +9,8 @@ import {
   match404Route,
   parseQuery,
 } from "../utils/index.js"
-import type { FormattedViteImportMap, PageModule } from "../types.internal"
-import type { FileRouterConfig, FileRouterPreloadConfig } from "../types"
+import type { FormattedViteImportMap, PageModule } from "../types.internal.js"
+import type { FileRouterConfig, FileRouterPreloadConfig } from "../types.js"
 import { fileRouterInstance, fileRouterRoute, routerCache } from "../globals.js"
 import { FileRouterController } from "../fileRouterController.js"
 import { FileRouterDataLoadError } from "../errors.js"

package/src/router/fileRouterController.ts

@@ -2,7 +2,7 @@ import { signal, Signal } from "../signals/base.js"
 import { effect } from "../signals/effect.js"
 import { __DEV__ } from "../env.js"
 import { nextIdle } from "../scheduler.js"
-import { ReloadOptions, type FileRouterContextType } from "./context.js"
+import { type FileRouterContextType } from "./context.js"
 import { FileRouterDataLoadError } from "./errors.js"
 import { fileRouterInstance, fileRouterRoute, routerCache } from "./globals.js"
 import type {
@@ -521,7 +521,7 @@ 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 (context.signal.aborted) return
@@ -661,13 +661,13 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       )
     }
   }
-  private createContextValue() {
+  private createContextValue(): FileRouterContextType {
     const __this = this
     return {
       get baseUrl() {
         return __this.baseUrl
       },
-      invalidate: async (...paths: string[]) => {
+      invalidate: async (...paths) => {
         if (this.invalidate(...paths)) {
           return this.loadRoute(void 0, void 0, true)
         }
@@ -677,7 +677,7 @@ See https://kirujs.dev/docs/api/file-router#404 for more information.`
       },
       navigate: this.navigate.bind(this),
       prefetchRouteModules: this.prefetchRouteModules.bind(this),
-      reload: async (options?: ReloadOptions) => {
+      reload: (options) => {
         if (options?.invalidate ?? true) {
           this.invalidate(this.state.pathname.peek())
         }

package/src/router/globals.ts

@@ -1,5 +1,5 @@
-import type { RouterCache } from "./cache"
-import type { FileRouterController } from "./fileRouterController"
+import type { RouterCache } from "./cache.js"
+import type { FileRouterController } from "./fileRouterController.js"
 
 export const fileRouterInstance = {
   current: null as FileRouterController | null,

package/src/router/link.ts

@@ -1,4 +1,4 @@
-import type { ElementProps } from "../types"
+import type { ElementProps } from "../types.js"
 import { createElement } from "../element.js"
 import { useFileRouter } from "./context.js"
 

package/src/router/pageConfig.ts

@@ -1,6 +1,6 @@
 import { __DEV__, isBrowser } from "../env.js"
 import { fileRouterInstance } from "./globals.js"
-import type { PageConfig } from "./types"
+import type { PageConfig } from "./types.js"
 
 export function definePageConfig<T>(config: PageConfig<T>): PageConfig<T> {
   if (__DEV__ && isBrowser) {

package/src/router/types.internal.ts

@@ -1,5 +1,5 @@
-import type { FileRouterContextType } from "./context"
-import type { PageConfig } from "./types"
+import type { FileRouterContextType } from "./context.js"
+import type { PageConfig } from "./types.js"
 
 export interface CurrentPage {
   component: Kiru.FC<any>

package/src/router/types.ts

@@ -1,10 +1,10 @@
-import type { AsyncTaskState } from "../types.utils"
-import type { FileRouterDataLoadError } from "./errors"
+import type { AsyncTaskState } from "../types.utils.js"
+import type { FileRouterDataLoadError } from "./errors.js"
 import type {
   DefaultComponentModule,
   FormattedViteImportMap,
   PageModule,
-} from "./types.internal"
+} from "./types.internal.js"
 
 export interface FileRouterPreloadConfig {
   pages: FormattedViteImportMap

package/src/router/utils/index.ts

@@ -4,7 +4,7 @@ import type {
   FormattedViteImportMap,
   RouteMatch,
   ViteImportMap,
-} from "../types.internal"
+} from "../types.internal.js"
 
 export {
   formatViteImportMap,