kiru 0.52.3 → 0.53.0

package/src/signals/computed.ts

@@ -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

@@ -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

@@ -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

@@ -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/server.ts

@@ -1,19 +1,19 @@
 import { Readable } from "node:stream"
 import { Fragment } from "../element.js"
 import { renderMode } from "../globals.js"
-import { PREFETCHED_DATA_EVENT } from "../constants.js"
+import { STREAMED_DATA_EVENT } from "../constants.js"
 import { __DEV__ } from "../env.js"
-import { recursiveRender, RecursiveRenderContext } from "../recursiveRender.js"
+import { headlessRender, HeadlessRenderContext } from "../recursiveRender.js"
 
-const PREFETCH_EVENTS_SETUP = `
+const STREAMED_DATA_SETUP = `
 <script type="text/javascript">
 const d = document,
-  m = (window["${PREFETCHED_DATA_EVENT}"] ??= new Map());
-d.querySelectorAll("[x-data]").forEach((p) => {
+  m = (window["${STREAMED_DATA_EVENT}"] ??= new Map());
+d.querySelectorAll("[k-data]").forEach((p) => {
   const id = p.getAttribute("id");
   const { data, error } = JSON.parse(p.innerHTML);
   m.set(id, { data, error });
-  const event = new CustomEvent("${PREFETCHED_DATA_EVENT}", { detail: { id, data, error } });
+  const event = new CustomEvent("${STREAMED_DATA_EVENT}", { detail: { id, data, error } });
   window.dispatchEvent(event);
   p.remove();
 });
@@ -27,17 +27,17 @@ export function renderToReadableStream(element: JSX.Element): {
 } {
   const stream = new Readable({ read() {} })
   const rootNode = Fragment({ children: element })
-  const prefetchPromises = new Set<Kiru.StatefulPromise<unknown>>()
-  const pendingWritePromises: Promise<unknown>[] = []
+  const streamPromises = new Set<Kiru.StatefulPromise<unknown>>()
+  const pendingWritePromises: Promise<void>[] = []
 
   let immediate = ""
 
-  const ctx: RecursiveRenderContext = {
+  const ctx: HeadlessRenderContext = {
     write: (chunk) => (immediate += chunk),
-    onPending(data) {
+    onStreamData(data) {
       for (const promise of data) {
-        if (prefetchPromises.has(promise)) continue
-        prefetchPromises.add(promise)
+        if (streamPromises.has(promise)) continue
+        streamPromises.add(promise)
 
         const writePromise = promise
           .then(() => ({ data: promise.value }))
@@ -45,7 +45,7 @@ export function renderToReadableStream(element: JSX.Element): {
           .then((value) => {
             const content = JSON.stringify(value)
             stream.push(
-              `<script id="${promise.id}" x-data type="application/json">${content}</script>`
+              `<script id="${promise.id}" k-data type="application/json">${content}</script>`
             )
           })
 
@@ -56,12 +56,12 @@ export function renderToReadableStream(element: JSX.Element): {
 
   const prev = renderMode.current
   renderMode.current = "stream"
-  recursiveRender(ctx, rootNode, null, 0)
+  headlessRender(ctx, rootNode, null, 0)
   renderMode.current = prev
 
   if (pendingWritePromises.length > 0) {
     Promise.all(pendingWritePromises).then(() => {
-      stream.push(PREFETCH_EVENTS_SETUP)
+      stream.push(STREAMED_DATA_SETUP)
       stream.push(null)
     })
   } else {

package/src/types.dom.ts

@@ -352,6 +352,8 @@ type NoChildElementElement =
   | HTMLTrackElement
   | HTMLTextAreaElement
 
+type DomElement = Element
+
 declare global {
   namespace Kiru {
     type DOMEvent<E = Event, C = unknown, T = unknown> = Omit<
@@ -368,98 +370,96 @@ declare global {
       bivarianceHack(event: E): void
     }["bivarianceHack"]
 
-    interface BaseEvent<T extends Element = Element>
+    interface BaseEvent<T extends DomElement = DomElement>
       extends DOMEvent<Event, T> {}
 
-    interface AnimationEvent<T extends Element = Element>
+    interface AnimationEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeAnimationEvent, T> {}
 
-    interface ClipboardEvent<T extends Element = Element>
+    interface ClipboardEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeClipboardEvent, T> {}
 
-    interface CompositionEvent<T extends Element = Element>
+    interface CompositionEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeCompositionEvent, T> {}
 
-    interface DragEvent<T extends Element = Element>
+    interface DragEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeDragEvent, T> {}
 
-    interface FocusEvent<T extends Element = Element>
+    interface FocusEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeFocusEvent, T> {}
 
-    interface FormEvent<T extends Element = Element>
+    interface FormEvent<T extends DomElement = DomElement>
       extends DOMEvent<Event, T> {}
 
-    interface KeyboardEvent<T extends Element = Element>
+    interface KeyboardEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeKeyboardEvent, T> {}
 
-    interface MouseEvent<T extends Element = Element>
+    interface MouseEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeMouseEvent, T> {}
 
-    interface PointerEvent<T extends Element = Element>
+    interface PointerEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativePointerEvent, T> {}
 
-    interface SubmitEvent<T extends Element = Element>
+    interface SubmitEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeSubmitEvent, T> {}
 
-    interface TouchEvent<T extends Element = Element>
+    interface TouchEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeTouchEvent, T> {}
 
-    interface ToggleEvent<T extends Element = Element>
+    interface ToggleEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeToggleEvent, T> {}
 
-    interface TransitionEvent<T extends Element = Element>
+    interface TransitionEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeTransitionEvent, T> {}
 
-    interface UIEvent<T extends Element = Element>
+    interface UIEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeUIEvent, T> {}
 
-    interface WheelEvent<T extends Element = Element>
+    interface WheelEvent<T extends DomElement = DomElement>
       extends DOMEvent<NativeWheelEvent, T> {}
 
-    type BaseEventHandler<T extends Element = Element> = EventHandler<
+    type BaseEventHandler<T extends DomElement = DomElement> = EventHandler<
       BaseEvent<T>
     >
 
-    type ClipboardEventHandler<T extends Element = Element> = EventHandler<
-      ClipboardEvent<T>
-    >
-    type CompositionEventHandler<T extends Element = Element> = EventHandler<
-      CompositionEvent<T>
-    >
-    type DragEventHandler<T extends Element = Element> = EventHandler<
+    type ClipboardEventHandler<T extends DomElement = DomElement> =
+      EventHandler<ClipboardEvent<T>>
+    type CompositionEventHandler<T extends DomElement = DomElement> =
+      EventHandler<CompositionEvent<T>>
+    type DragEventHandler<T extends DomElement = DomElement> = EventHandler<
       DragEvent<T>
     >
-    type FocusEventHandler<T extends Element = Element> = EventHandler<
+    type FocusEventHandler<T extends DomElement = DomElement> = EventHandler<
       FocusEvent<T>
     >
-    type FormEventHandler<T extends Element = Element> = EventHandler<
+    type FormEventHandler<T extends DomElement = DomElement> = EventHandler<
       FormEvent<T>
     >
-    type KeyboardEventHandler<T extends Element = Element> = EventHandler<
+    type KeyboardEventHandler<T extends DomElement = DomElement> = EventHandler<
       KeyboardEvent<T>
     >
-    type MouseEventHandler<T extends Element = Element> = EventHandler<
+    type MouseEventHandler<T extends DomElement = DomElement> = EventHandler<
       MouseEvent<T>
     >
-    type TouchEventHandler<T extends Element = Element> = EventHandler<
+    type TouchEventHandler<T extends DomElement = DomElement> = EventHandler<
       TouchEvent<T>
     >
-    type PointerEventHandler<T extends Element = Element> = EventHandler<
+    type PointerEventHandler<T extends DomElement = DomElement> = EventHandler<
       PointerEvent<T>
     >
-    type UIEventHandler<T extends Element = Element> = EventHandler<UIEvent<T>>
-    type WheelEventHandler<T extends Element = Element> = EventHandler<
-      WheelEvent<T>
+    type UIEventHandler<T extends DomElement = DomElement> = EventHandler<
+      UIEvent<T>
     >
-    type AnimationEventHandler<T extends Element = Element> = EventHandler<
-      AnimationEvent<T>
+    type WheelEventHandler<T extends DomElement = DomElement> = EventHandler<
+      WheelEvent<T>
     >
-    type ToggleEventHandler<T extends Element = Element> = EventHandler<
+    type AnimationEventHandler<T extends DomElement = DomElement> =
+      EventHandler<AnimationEvent<T>>
+    type ToggleEventHandler<T extends DomElement = DomElement> = EventHandler<
       ToggleEvent<T>
     >
-    type TransitionEventHandler<T extends Element = Element> = EventHandler<
-      TransitionEvent<T>
-    >
+    type TransitionEventHandler<T extends DomElement = DomElement> =
+      EventHandler<TransitionEvent<T>>
 
     type CustomEventAttributes = {
       [Key in keyof Kiru.CustomEvents as `on:${Key}`]?: (
@@ -467,7 +467,7 @@ declare global {
       ) => void
     }
 
-    interface EventAttributes<T extends Element = Element>
+    interface EventAttributes<T extends DomElement = DomElement>
       extends CustomEventAttributes {
       // Clipboard Events
       oncopy?: ClipboardEventHandler<T> | undefined

package/src/types.ts

@@ -103,7 +103,7 @@ declare global {
 
     type Element =
       | Element[]
-      | Kiru.VNode
+      | Kiru.Element
       | PrimitiveChild
       | Kiru.Signal<PrimitiveChild>
 
@@ -156,16 +156,13 @@ declare global {
       }
     }
     interface RefObject<T> {
-      readonly current: T | null
-    }
-    interface MutableRefObject<T> {
       current: T
     }
     type RefCallback<T> = {
       bivarianceHack(instance: T | null): void
     }["bivarianceHack"]
 
-    type Ref<T> = RefCallback<T> | RefObject<T> | null | undefined
+    type Ref<T> = RefCallback<T> | RefObject<T>
 
     interface PromiseState<T> {
       id: string
@@ -187,25 +184,27 @@ declare global {
       | typeof $CONTEXT_PROVIDER
       | typeof $ERROR_BOUNDARY
 
-    interface VNode {
-      app?: AppContext
-      dom?: SomeDom
-      lastChildDom?: SomeDom
+    interface Element {
       type: Function | ExoticSymbol | "#text" | (string & {})
+      key: JSX.ElementKey | null
       props: {
         [key: string]: any
         children?: unknown
-        key?: JSX.ElementKey
         ref?: Kiru.Ref<unknown>
       }
+    }
+
+    interface VNode extends Element {
+      app?: AppContext
+      dom?: SomeDom
       index: number
       depth: number
+      flags: number
       parent: VNode | null
       child: VNode | null
       sibling: VNode | null
       prev: VNodeSnapshot | null
       deletions: VNode[] | null
-      flags: number
       hooks?: Hook<unknown>[]
       subs?: Set<Function>
       cleanups?: Record<string, Function>
@@ -223,6 +222,7 @@ declare global {
   }
   interface VNodeSnapshot {
     props: Kiru.VNode["props"]
+    key: Kiru.VNode["key"]
     memoizedProps: Kiru.VNode["memoizedProps"]
     index: number
   }

package/src/types.utils.ts

@@ -8,7 +8,7 @@ export type MaybeElement = SomeElement | undefined
 export type MaybeDom = SomeDom | undefined
 
 export interface FunctionVNode extends Kiru.VNode {
-  type: (...args: any) => JSX.Element
+  type: (props: Record<string, unknown>) => JSX.Element
 }
 
 export interface ElementVNode extends Kiru.VNode {
@@ -65,3 +65,13 @@ export type AsyncTaskState<T, E extends Error = Error> =
 export type Guard<T, K extends keyof T> = {
   [P in K]: T[P]
 }
+
+export type ArrayHas<T extends any[], U> =
+  // does the union of element types intersect U?
+  Extract<T[number], U> extends never ? false : true
+
+export type RecordHas<T extends Record<string, any>, U> = [
+  Extract<T[keyof T], U>
+] extends [never]
+  ? false
+  : true

package/src/utils/format.ts

@@ -34,11 +34,14 @@ function encodeHtmlEntities(text: string): string {
     .replace(REGEX_SLASH, "/")
 }
 
+const internalProps = new Set(["children", "ref", "key", "innerHTML"])
 const propFilters = {
-  internalProps: ["children", "ref", "key", "innerHTML"],
+  isInternalProp: (
+    key: string
+  ): key is "children" | "ref" | "key" | "innerHTML" => internalProps.has(key),
   isEvent: (key: string) => key.startsWith("on"),
-  isProperty: (key: string) =>
-    !propFilters.internalProps.includes(key) && !propFilters.isEvent(key),
+  isStringRenderableProperty: (key: string) =>
+    !internalProps.has(key) && !propFilters.isEvent(key),
 }
 
 function propToHtmlAttr(key: string): string {
@@ -110,7 +113,7 @@ function propsToElementAttributes(props: Record<string, unknown>): string {
     if (!!val) attrs.push(`style="${stylePropToString(val)}"`)
   }
 
-  const keys = Object.keys(rest).filter(propFilters.isProperty)
+  const keys = Object.keys(rest).filter(propFilters.isStringRenderableProperty)
   for (let i = 0; i < keys.length; i++) {
     let k = keys[i]
     let val = unwrap(props[k])

package/src/utils/index.ts

@@ -4,5 +4,3 @@ export * from "./format.js"
 export * from "./runtime.js"
 export * from "./vdom.js"
 export * from "./generateId.js"
-
-export const noop = Object.freeze(() => {})

package/src/utils/promise.ts

@@ -0,0 +1,26 @@
+import { $STREAM_DATA } from "../constants.js"
+
+export interface StreamDataThrowValue {
+  [$STREAM_DATA]: {
+    fallback?: JSX.Element
+    data: Kiru.StatefulPromise<unknown>[]
+  }
+}
+
+/**
+ * Returns true if the value is a {@link StreamDataThrowValue}
+ */
+export function isStreamDataThrowValue(
+  value: unknown
+): value is StreamDataThrowValue {
+  return typeof value === "object" && !!value && $STREAM_DATA in value
+}
+
+/**
+ * Returns true if the value is a {@link Kiru.StatefulPromise}
+ */
+export function isStatefulPromise(
+  thing: unknown
+): thing is Kiru.StatefulPromise<unknown> {
+  return thing instanceof Promise && "id" in thing && "state" in thing
+}

package/src/utils/runtime.ts

@@ -1,7 +1,10 @@
+import { Signal } from "../signals/base.js"
 import { __DEV__ } from "../env.js"
 import { renderMode } from "../globals.js"
 
-export { latest, sideEffectsEnabled }
+export { noop, latest, composeRefs, setRef, sideEffectsEnabled }
+
+const noop = Object.freeze(() => {})
 
 /**
  * This is a no-op in production. It is used to get the latest
@@ -17,6 +20,31 @@ function latest<T extends Exclude<object, null>>(thing: T): T {
   return tgt
 }
 
+/**
+ * Composes multiple refs into a single ref callback.
+ */
+
+function composeRefs<T>(...refs: Array<Kiru.Ref<T>>): Kiru.RefCallback<T> {
+  return (value: T) => {
+    refs.forEach((ref) => setRef(ref, value))
+  }
+}
+
+/**
+ * Sets the value of a ref.
+ */
+function setRef<T>(ref: Kiru.Ref<T>, value: T): void {
+  if (typeof ref === "function") {
+    ref(value)
+    return
+  }
+  if (Signal.isSignal(ref)) {
+    ref.value = value
+    return
+  }
+  ref.current = value
+}
+
 /**
  * Returns false if called during "stream" or "string" render modes.
  */

package/src/utils/vdom.ts

@@ -1,4 +1,3 @@
-import { Signal } from "../signals/base.js"
 import {
   FLAG_DELETION,
   $FRAGMENT,
@@ -12,10 +11,12 @@ import { KiruError } from "../error.js"
 import { node } from "../globals.js"
 import type { AppContext } from "../appContext.js"
 import type { ErrorBoundaryNode } from "../types.utils.js"
+import { isMemoFn } from "../components/memo.js"
 
 export {
-  cloneVNode,
+  cloneElement,
   isVNodeDeleted,
+  isElement,
   isVNode,
   isValidTextChild,
   isExoticType,
@@ -31,17 +32,16 @@ export {
   findParent,
   findParentErrorBoundary,
   assertValidElementProps,
-  isValidElementKeyProp,
-  isValidElementRefProp,
+  normalizeElementKey,
 }
 
-function cloneVNode(vNode: Kiru.VNode): Kiru.VNode {
+function cloneElement(vNode: Kiru.VNode): Kiru.Element {
   const children = vNode.props.children
   let clonedChildren: unknown
   if (isVNode(children)) {
-    clonedChildren = cloneVNode(children)
+    clonedChildren = cloneElement(children)
   } else if (Array.isArray(children)) {
-    clonedChildren = children.map((c) => (isVNode(c) ? cloneVNode(c) : c))
+    clonedChildren = children.map((c) => (isVNode(c) ? cloneElement(c) : c))
   }
 
   return createElement(vNode.type, { ...vNode.props, children: clonedChildren })
@@ -55,6 +55,10 @@ function isVNode(thing: unknown): thing is Kiru.VNode {
   return typeof thing === "object" && thing !== null && "type" in thing
 }
 
+function isElement(thing: unknown): thing is Kiru.Element {
+  return typeof thing === "object" && thing !== null && "type" in thing
+}
+
 function isValidTextChild(thing: unknown): thing is string | number | bigint {
   return (
     (typeof thing === "string" && thing !== "") ||
@@ -84,11 +88,7 @@ function isLazy(vNode: Kiru.VNode): boolean {
 }
 
 function isMemo(vNode: Kiru.VNode): boolean {
-  return (
-    typeof vNode.type === "function" &&
-    "displayName" in vNode.type &&
-    vNode.type.displayName === "Kiru.memo"
-  )
+  return typeof vNode.type === "function" && isMemoFn(vNode.type)
 }
 
 function isContextProvider(
@@ -116,10 +116,11 @@ function getVNodeAppContext(vNode: Kiru.VNode): AppContext | null {
 function commitSnapshot(vNode: Kiru.VNode): void {
   const {
     props: { children, ...props },
+    key,
     memoizedProps,
     index,
   } = vNode
-  vNode.prev = { props, memoizedProps, index }
+  vNode.prev = { props, key, memoizedProps, index }
   vNode.flags &= ~(FLAG_UPDATE | FLAG_PLACEMENT | FLAG_DELETION)
 }
 
@@ -187,14 +188,10 @@ function assertValidElementProps(vNode: Kiru.VNode) {
   }
 }
 
-function isValidElementKeyProp(thing: unknown): thing is string | number {
-  return typeof thing === "string" || typeof thing === "number"
-}
-
-function isValidElementRefProp(thing: unknown): thing is Kiru.Ref<any> {
-  return (
-    typeof thing === "function" ||
-    (typeof thing === "object" && !!thing && "current" in thing) ||
-    Signal.isSignal(thing)
-  )
+function normalizeElementKey(thing: unknown): JSX.ElementKey | null {
+  if (thing === undefined) return null
+  if (typeof thing === "string" || typeof thing === "number") {
+    return thing
+  }
+  return null
 }