kiru 1.4.1 → 1.5.0

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,17 +76,34 @@ 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) {
@@ -85,7 +116,7 @@ export function resource<T, Source>(
     promise: undefined as unknown as Kiru.StatefulPromise<T>,
     refetch() {
       data.value = void 0 as T
-      this.promise = createPromise(source.peek())
+      this.promise = createPromise()
     },
     dispose,
   })
@@ -111,33 +142,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(resource),
+      onDepChanged: updateResource,
+      subs: observedSignalUnsubs,
+    })
 
     const statefulPromise: Kiru.StatefulPromise<T> = Object.assign(newPromise, {
       id: promiseId,
@@ -162,6 +198,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 +247,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/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,

package/src/scheduler.ts

@@ -1,6 +1,12 @@
-import type { DomVNode, ErrorBoundaryNode, FunctionVNode } from "./types.utils"
+import type {
+  DomVNode,
+  ErrorBoundaryNode,
+  FunctionVNode,
+  InlineFnNode,
+} from "./types.utils.js"
 import {
   $ERROR_BOUNDARY,
+  $INLINE_FN,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
@@ -30,7 +36,7 @@ import { node, postEffectCleanups, renderMode, setups } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
 import { reconcileChildren } from "./reconciler.js"
 import { isHmrUpdate } from "./hmr.js"
-import type { AppHandle } from "./appHandle"
+import type { AppHandle } from "./appHandle.js"
 
 type VNode = Kiru.VNode
 
@@ -298,7 +304,18 @@ function updateExoticComponent(vNode: VNode): VNode | null {
   const { props, type } = vNode
   let children = props.children
 
-  if (type === $ERROR_BOUNDARY) {
+  if (type === $INLINE_FN) {
+    node.current = vNode
+    let render = (props as InlineFnNode["props"]).expr
+    if (__DEV__) {
+      render = latest(render)
+    }
+    try {
+      children = render()
+    } finally {
+      node.current = null
+    }
+  } else if (type === $ERROR_BOUNDARY) {
     const n = vNode as ErrorBoundaryNode
     const { error } = n
     if (error) {

package/src/signals/base.ts

@@ -5,8 +5,14 @@ import {
   generateRandomID,
   registerVNodeCleanup,
 } from "../utils/index.js"
-import { $DEV_FILE_LINK, $HMR_ACCEPT, $SIGNAL } from "../constants.js"
+import {
+  $DEV_FILE_LINK,
+  $HMR_ACCEPT,
+  $INLINE_FN,
+  $SIGNAL,
+} from "../constants.js"
 import { __DEV__, isBrowser } from "../env.js"
+import { KiruError } from "../error.js"
 import { node } from "../globals.js"
 import { requestUpdate } from "../scheduler.js"
 import { tracking } from "./tracking.js"
@@ -58,7 +64,15 @@ export class Signal<T> {
 
     const n = node.current
     if (n) {
-      registerVNodeCleanup(n, this.$id, Signal.dispose.bind(null, this))
+      if (__DEV__ && n.type === $INLINE_FN) {
+        throw new KiruError({
+          message: "Signals cannot be created inside inline functions",
+          vNode: n,
+        })
+      }
+      if (sideEffectsEnabled()) {
+        registerVNodeCleanup(n, this.$id, Signal.dispose.bind(null, this))
+      }
     }
   }
 
@@ -151,6 +165,10 @@ export class Signal<T> {
     return typeof x === "object" && !!x && $SIGNAL in x
   }
 
+  static id(signal: Signal<any>) {
+    return signal.$id
+  }
+
   static subscribers(signal: Signal<any>) {
     return signal.$subs
   }

package/src/signals/effect.ts

@@ -11,6 +11,8 @@ import {
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 import { node } from "../globals.js"
+import { $INLINE_FN } from "../constants.js"
+import { KiruError } from "../error.js"
 
 type EffectCallbackReturn = (() => void) | void
 
@@ -37,6 +39,12 @@ export class Effect<const Deps extends readonly Signal<unknown>[] = []> {
     }
     const n = node.current
     if (n) {
+      if (__DEV__ && n.type === $INLINE_FN) {
+        throw new KiruError({
+          message: "Effects cannot be created inside inline functions",
+          vNode: n,
+        })
+      }
       if (!sideEffectsEnabled()) return // prevent side effects in non-browser environments
       registerVNodeCleanup(n, this.id, this.stop.bind(this))
     }

package/src/signals/tracking.ts

@@ -32,25 +32,19 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
   ctx: TrackedExecutionContext<T, Deps>
 ): T {
   const { id, subs, fn, deps = [], onDepChanged } = ctx
-  let observations: Map<string, Signal<unknown>> | undefined
+  let observations: TrackingStackObservations | undefined
 
   effectQueue.delete(id)
-  const isServer = !!node.current && !sideEffectsEnabled()
 
-  if (!isServer) {
-    observations = new Map<string, Signal<unknown>>()
+  // Prevent side effects in non-browser environments while rendering
+  if (!node.current || sideEffectsEnabled()) {
+    observations = new Map()
     tracking.stack.push(observations)
   }
 
   const result = fn(...(deps.map((s) => s.value) as SignalValues<Deps>))
 
-  if (!isServer) {
-    for (const [id, unsub] of subs) {
-      if (observations!.has(id)) continue
-      unsub()
-      subs.delete(id)
-    }
-
+  if (observations) {
     const effect = () => {
       if (!effectQueue.size) {
         queueMicrotask(tick)
@@ -58,11 +52,19 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
       effectQueue.set(id, onDepChanged)
     }
 
-    for (const [id, sig] of observations!) {
-      if (subs.has(id)) continue
-      const unsub = sig.subscribe(effect)
-      subs.set(id, unsub)
+    for (const [id, signal] of observations) {
+      if (!subs.has(id)) {
+        subs.set(id, signal.subscribe(effect))
+      }
     }
+
+    for (const [id, unsub] of subs) {
+      if (!observations.has(id)) {
+        unsub()
+        subs.delete(id)
+      }
+    }
+
     tracking.stack.pop()
   }
 

package/src/ssr/client.ts

@@ -1,4 +1,4 @@
-import type { AppHandle, AppHandleOptions } from "../appHandle"
+import type { AppHandle, AppHandleOptions } from "../appHandle.js"
 import { hydrationStack } from "../hydration.js"
 import { hydrationMode, renderMode } from "../globals.js"
 import { mount } from "../index.js"