kiru 0.48.0 → 0.48.1

package/src/scheduler.ts

@@ -11,7 +11,14 @@ import {
   FLAG_MEMO,
   FLAG_NOOP,
 } from "./constants.js"
-import { commitDeletion, commitWork, createDom, hydrateDom } from "./dom.js"
+import {
+  commitDeletion,
+  commitWork,
+  createDom,
+  hydrateDom,
+  onAfterFlushDomChanges,
+  onBeforeFlushDomChanges,
+} from "./dom.js"
 import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { hookIndex, node, renderMode } from "./globals.js"
@@ -62,15 +69,21 @@ export function flushSync() {
   doWork()
 }
 
+export function renderRootSync(rootNode: VNode) {
+  rootNode.flags |= FLAG_DIRTY
+  treesInProgress.push(rootNode)
+  if (!isRunningOrQueued) {
+    isRunningOrQueued = true
+    doWork()
+  }
+}
+
 /**
  * Queues a node for an update. Has no effect if the node is already deleted or marked for deletion.
  */
 export function requestUpdate(vNode: VNode): void {
-  if (vNode.flags & FLAG_DELETION) return
   if (renderMode.current === "hydrate") {
-    return nextIdle(() => {
-      vNode.flags & FLAG_DELETION || queueUpdate(vNode)
-    })
+    return nextIdle(() => queueUpdate(vNode))
   }
   queueUpdate(vNode)
 }
@@ -136,6 +149,7 @@ function doWork(): void {
 
   let len = 1
 
+  onBeforeFlushDomChanges()
   while (treesInProgress.length) {
     if (treesInProgress.length > len) {
       treesInProgress.sort(depthSort)
@@ -153,11 +167,12 @@ function doWork(): void {
       while (deletions.length) {
         commitDeletion(deletions.pop()!)
       }
-      commitWork(currentWorkRoot)
 
+      commitWork(currentWorkRoot)
       currentWorkRoot.flags &= ~FLAG_DIRTY
     }
   }
+  onAfterFlushDomChanges()
 
   isImmediateEffectsMode = true
   flushEffects(preEffects)
@@ -193,18 +208,16 @@ function performUnitOfWork(vNode: VNode): VNode | void {
       updateHostComponent(vNode as DomVNode)
     } else if (isExoticType(vNode.type)) {
       if (vNode?.type === $CONTEXT_PROVIDER) {
-        const asProvider = vNode as ContextProviderNode<any>
         const {
           props: { dependents, value },
           prev,
-        } = asProvider
+        } = vNode as ContextProviderNode<unknown>
 
         if (dependents.size && prev && prev.props.value !== value) {
           dependents.forEach(queueUpdate)
         }
       }
       vNode.child = reconcileChildren(vNode, props.children)
-      queueNodeChildDeletions(vNode)
     } else {
       renderChild = updateFunctionComponent(vNode as FunctionVNode)
     }
@@ -234,6 +247,11 @@ function performUnitOfWork(vNode: VNode): VNode | void {
     })
   }
 
+  if (vNode.deletions !== null) {
+    vNode.deletions.forEach(queueDelete)
+    vNode.deletions = null
+  }
+
   if (renderChild && vNode.child) {
     return vNode.child
   }
@@ -315,7 +333,6 @@ function updateFunctionComponent(vNode: FunctionVNode) {
       newChild = type(props)
     } while (isRenderDirtied)
     vNode.child = reconcileChildren(vNode, newChild)
-    queueNodeChildDeletions(vNode)
     return true
   } finally {
     node.current = null
@@ -342,20 +359,12 @@ function updateHostComponent(vNode: DomVNode) {
   // text should _never_ have children
   if (type !== "#text") {
     vNode.child = reconcileChildren(vNode, props.children)
-    queueNodeChildDeletions(vNode)
     if (vNode.child && renderMode.current === "hydrate") {
       hydrationStack.push(vNode.dom!)
     }
   }
 }
 
-function queueNodeChildDeletions(vNode: VNode) {
-  if (vNode.deletions) {
-    vNode.deletions.forEach(queueDelete)
-    vNode.deletions = null
-  }
-}
-
 function checkForTooManyConsecutiveDirtyRenders() {
   if (consecutiveDirtyCount > CONSECUTIVE_DIRTY_LIMIT) {
     throw new KiruError(

package/src/swr.ts

@@ -1,6 +1,7 @@
 import { __DEV__ } from "./env.js"
 import { useHook } from "./hooks/utils.js"
 import { Signal } from "./signals/base.js"
+import { AsyncTaskState } from "./types.utils.js"
 import {
   noop,
   deepCompare,
@@ -9,23 +10,7 @@ import {
   shallowCompare,
 } from "./utils.js"
 
-export type UseSWRState<T> = (
-  | {
-      data: null
-      error: null
-      loading: true
-    }
-  | {
-      data: T
-      error: null
-      loading: false
-    }
-  | {
-      data: null
-      error: UseSWRError
-      loading: false
-    }
-) & {
+export type UseSWRState<T> = AsyncTaskState<T, UseSWRError> & {
   mutate: (callback: () => Promise<T>) => void
   isMutating: Signal<boolean>
   isValidating: Signal<boolean>
@@ -51,7 +36,7 @@ export type SWRRetryState = {
   delay: number
 } | null
 
-export type SWRCacheEntry<T> = {
+export interface SWRCacheEntry<T> {
   key: any
   resource: Signal<SWRResourceState<T>>
   fetcher: (args: any) => Promise<T>
@@ -65,7 +50,7 @@ export type SWRCacheEntry<T> = {
 
 export type SWRCache = Map<string, SWRCacheEntry<any>>
 
-export type SWROptions = {
+export interface SWROptions {
   /**
    * Specify `false` to disable revalidation on focus
    */
@@ -103,19 +88,24 @@ export type SWRKey =
   | undefined
   | false
 
-let SWR_GLOBAL_CACHE: SWRCache
-let IS_ONLINE = false
+const SWRGlobalState = {
+  cache: null as any as SWRCache,
+  online: false,
+}
 
 if ("window" in globalThis) {
-  SWR_GLOBAL_CACHE = window.__kiru!.globalState[Symbol.for("SWR_GLOBAL")] ??=
-    new Map()
+  if (__DEV__) {
+    SWRGlobalState.cache = window.__kiru!.SWRGlobalCache ??= new Map()
+  } else {
+    SWRGlobalState.cache = new Map()
+  }
 
-  IS_ONLINE = navigator.onLine
+  SWRGlobalState.online = navigator.onLine
   window.addEventListener("online", () => {
-    IS_ONLINE = true
+    SWRGlobalState.online = true
   })
   window.addEventListener("offline", () => {
-    IS_ONLINE = false
+    SWRGlobalState.online = false
   })
 
   let blurStart: number | null = null
@@ -127,11 +117,12 @@ if ("window" in globalThis) {
     blurStart = null
     if (blurDuration < 3_000) return // only trigger revalidation after 3 seconds
 
-    SWR_GLOBAL_CACHE.forEach((entry) => {
+    SWRGlobalState.cache.forEach((entry) => {
       if (
         entry.subscribers.size === 0 ||
         entry.options.revalidateOnFocus === false ||
-        (entry.options.refetchWhenOffline === false && IS_ONLINE === false)
+        (entry.options.refetchWhenOffline === false &&
+          SWRGlobalState.online === false)
       ) {
         return
       }
@@ -171,16 +162,16 @@ export function preloadSWR<T>(
   if (!("window" in globalThis)) return
 
   const strKey = safeStringify(key, { functions: false })
-  if (!SWR_GLOBAL_CACHE.has(strKey)) {
+  if (!SWRGlobalState.cache.has(strKey)) {
     const entry = createSWRCacheEntry(key, fetcher)
-    SWR_GLOBAL_CACHE.set(strKey, entry)
+    SWRGlobalState.cache.set(strKey, entry)
     performFetch(entry)
   }
 }
 
 export function getSWRState<T>(key: SWRKey): SWRCacheEntry<T> | null {
   const strKey = safeStringify(key, { functions: false })
-  return SWR_GLOBAL_CACHE.get(strKey) ?? null
+  return SWRGlobalState.cache.get(strKey) ?? null
 }
 
 export function useSWR<T, K extends SWRKey>(
@@ -201,14 +192,14 @@ export function useSWR<T, K extends SWRKey>(
             devtools: {
               get: () => ({
                 key: hook.strKey,
-                value: SWR_GLOBAL_CACHE.get(strKey)!,
+                value: SWRGlobalState.cache.get(strKey)!,
               }),
             },
             initialArgs: [key, options],
           }
         }
         if (isHMR) {
-          const entry = SWR_GLOBAL_CACHE.get(hook.strKey)
+          const entry = SWRGlobalState.cache.get(hook.strKey)
           const [k, o] = hook.dev!.initialArgs
           hook.dev!.initialArgs = [key, options]
 
@@ -239,10 +230,10 @@ export function useSWR<T, K extends SWRKey>(
         hook.update = update
 
         let isNewEntry = false
-        if (!SWR_GLOBAL_CACHE.has(strKey)) {
+        if (!SWRGlobalState.cache.has(strKey)) {
           isNewEntry = true
           entry = createSWRCacheEntry(key, fetcher)
-          SWR_GLOBAL_CACHE.set(strKey, entry)
+          SWRGlobalState.cache.set(strKey, entry)
 
           entry.resource.subscribe(() => {
             entry.subscribers.forEach((sub) => sub.update())
@@ -251,7 +242,7 @@ export function useSWR<T, K extends SWRKey>(
           performFetch(entry)
         }
 
-        entry ??= SWR_GLOBAL_CACHE.get(strKey)!
+        entry ??= SWRGlobalState.cache.get(strKey)!
         const subs = entry.subscribers
         if (subs.size === 0) {
           if (!isNewEntry) {
@@ -279,7 +270,7 @@ export function useSWR<T, K extends SWRKey>(
         }
       }
 
-      entry ??= SWR_GLOBAL_CACHE.get(strKey)!
+      entry ??= SWRGlobalState.cache.get(strKey)!
       const { resource, isMutating, isValidating } = entry
       const { data, loading, error } = resource.peek()
 

package/src/transition.ts

@@ -5,7 +5,7 @@ import { useRef } from "./hooks/useRef.js"
 import { useState } from "./hooks/useState.js"
 
 export type TransitionState = "entering" | "entered" | "exiting" | "exited"
-type TransitionProps = {
+interface TransitionProps {
   in: boolean
   /**
    * Initial state of the transition

package/src/types.dom.ts

@@ -164,7 +164,7 @@ type ListOfUrlsOrPaths = string
 type FileName = string
 
 type MediaPreload = "none" | "metadata" | "auto" | ""
-type HTMLMediaElementAttrs = {
+interface HTMLMediaElementAttrs {
   autoplay?: boolean
   controls?: boolean
   crossOrigin?: string
@@ -298,7 +298,7 @@ type FormMethod = "get" | "post" | "dialog"
 
 type Direction = "ltr" | "rtl" | "auto"
 
-type GlobalAttributes = {
+interface GlobalAttributes {
   accessKey?: string
   autocapitalize?: "on" | "off" | "none" | "sentences" | "words" | "characters"
   className?: string
@@ -364,41 +364,103 @@ declare global {
       bivarianceHack(event: E): void
     }["bivarianceHack"]
 
-    type BaseEventHandler<T = Element> = EventHandler<DOMEvent<Event, T>>
-    type AnimationEvent<T = Element> = DOMEvent<NativeAnimationEvent, T>
-    type ClipboardEvent<T = Element> = DOMEvent<NativeClipboardEvent, T>
-    type CompositionEvent<T = Element> = DOMEvent<NativeCompositionEvent, T>
-    type DragEvent<T = Element> = DOMEvent<NativeDragEvent, T>
-    type FocusEvent<T = Element> = DOMEvent<NativeFocusEvent, T>
-    type FormEvent<T = Element> = DOMEvent<Event, T>
-    type KeyboardEvent<T = Element> = DOMEvent<NativeKeyboardEvent, T>
-    type MouseEvent<T = Element> = DOMEvent<NativeMouseEvent, T>
-    type PointerEvent<T = Element> = DOMEvent<NativePointerEvent, T>
-    type SubmitEvent<T = Element> = DOMEvent<NativeSubmitEvent, T>
-    type TouchEvent<T = Element> = DOMEvent<NativeTouchEvent, T>
-    type ToggleEvent<T = Element> = DOMEvent<NativeToggleEvent, T>
-    type TransitionEvent<T = Element> = DOMEvent<NativeTransitionEvent, T>
-    type UIEvent<T = Element> = DOMEvent<NativeUIEvent, T>
-    type WheelEvent<T = Element> = DOMEvent<NativeWheelEvent, T>
-
-    type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>
-    type CompositionEventHandler<T = Element> = EventHandler<
+    interface BaseEventHandler<T extends Element = Element>
+      extends DOMEvent<Event, T> {}
+
+    interface AnimationEvent<T extends Element = Element>
+      extends DOMEvent<NativeAnimationEvent, T> {}
+
+    interface ClipboardEvent<T extends Element = Element>
+      extends DOMEvent<NativeClipboardEvent, T> {}
+
+    interface CompositionEvent<T extends Element = Element>
+      extends DOMEvent<NativeCompositionEvent, T> {}
+
+    interface DragEvent<T extends Element = Element>
+      extends DOMEvent<NativeDragEvent, T> {}
+
+    interface FocusEvent<T extends Element = Element>
+      extends DOMEvent<NativeFocusEvent, T> {}
+
+    interface FormEvent<T extends Element = Element>
+      extends DOMEvent<Event, T> {}
+
+    interface KeyboardEvent<T extends Element = Element>
+      extends DOMEvent<NativeKeyboardEvent, T> {}
+
+    interface MouseEvent<T extends Element = Element>
+      extends DOMEvent<NativeMouseEvent, T> {}
+
+    interface PointerEvent<T extends Element = Element>
+      extends DOMEvent<NativePointerEvent, T> {}
+
+    interface SubmitEvent<T extends Element = Element>
+      extends DOMEvent<NativeSubmitEvent, T> {}
+
+    interface TouchEvent<T extends Element = Element>
+      extends DOMEvent<NativeTouchEvent, T> {}
+
+    interface ToggleEvent<T extends Element = Element>
+      extends DOMEvent<NativeToggleEvent, T> {}
+
+    interface TransitionEvent<T extends Element = Element>
+      extends DOMEvent<NativeTransitionEvent, T> {}
+
+    interface UIEvent<T extends Element = Element>
+      extends DOMEvent<NativeUIEvent, T> {}
+
+    interface WheelEvent<T extends Element = Element>
+      extends DOMEvent<NativeWheelEvent, T> {}
+
+    type ClipboardEventHandler<T extends Element = Element> = EventHandler<
+      ClipboardEvent<T>
+    >
+    type CompositionEventHandler<T extends Element = Element> = EventHandler<
       CompositionEvent<T>
     >
-    type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>
-    type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>
-    type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>
-    type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>
-    type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>
-    type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>
-    type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>
-    type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>
-    type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>
-    type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>
-    type ToggleEventHandler<T = Element> = EventHandler<ToggleEvent<T>>
-    type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>
-
-    type EventAttributes<T = Element> = {
+    type DragEventHandler<T extends Element = Element> = EventHandler<
+      DragEvent<T>
+    >
+    type FocusEventHandler<T extends Element = Element> = EventHandler<
+      FocusEvent<T>
+    >
+    type FormEventHandler<T extends Element = Element> = EventHandler<
+      FormEvent<T>
+    >
+    type KeyboardEventHandler<T extends Element = Element> = EventHandler<
+      KeyboardEvent<T>
+    >
+    type MouseEventHandler<T extends Element = Element> = EventHandler<
+      MouseEvent<T>
+    >
+    type TouchEventHandler<T extends Element = Element> = EventHandler<
+      TouchEvent<T>
+    >
+    type PointerEventHandler<T extends Element = Element> = EventHandler<
+      PointerEvent<T>
+    >
+    type UIEventHandler<T extends Element = Element> = EventHandler<UIEvent<T>>
+    type WheelEventHandler<T extends Element = Element> = EventHandler<
+      WheelEvent<T>
+    >
+    type AnimationEventHandler<T extends Element = Element> = EventHandler<
+      AnimationEvent<T>
+    >
+    type ToggleEventHandler<T extends Element = Element> = EventHandler<
+      ToggleEvent<T>
+    >
+    type TransitionEventHandler<T extends Element = Element> = EventHandler<
+      TransitionEvent<T>
+    >
+
+    type CustomEventAttributes = {
+      [Key in keyof Kiru.CustomEvents as `on:${Key}`]?: (
+        event: CustomEvent<Kiru.CustomEvents[Key]>
+      ) => void
+    }
+
+    interface EventAttributes<T extends Element = Element>
+      extends CustomEventAttributes {
       // Clipboard Events
       oncopy?: ClipboardEventHandler<T> | undefined
       oncut?: ClipboardEventHandler<T> | undefined
@@ -524,7 +586,7 @@ declare global {
 
 type ElementReference<T extends HTMLElement> = T | null | string
 
-type PopoverControlAttributes = {
+interface PopoverControlAttributes {
   popoverTarget?: string
   popoverTargetAction?: "show" | "hide" | "toggle"
 }

package/src/types.ts

@@ -16,10 +16,10 @@ import type {
   HTMLTagToElement,
   SVGTagToElement,
 } from "./types.dom"
-import { Signalable, SomeDom } from "./types.utils"
+import { AsyncTaskState, Prettify, Signalable, SomeDom } from "./types.utils"
 import type { AppContext } from "./appContext"
 
-export type { ElementProps, StyleObject }
+export type { AsyncTaskState, ElementProps, Prettify, Signalable, StyleObject }
 
 type ElementProps<T extends keyof JSX.IntrinsicElements> =
   JSX.IntrinsicElements[T]
@@ -102,7 +102,7 @@ declare global {
       | PrimitiveChild
       | Kiru.Signal<PrimitiveChild>
 
-    type ElementAttributes = {
+    interface ElementAttributes {
       key?: JSX.ElementKey
       children?: JSX.Children
       innerHTML?:
@@ -112,11 +112,13 @@ declare global {
     }
   }
   namespace Kiru {
-    type ProviderProps<T> = {
+    interface CustomEvents {}
+
+    interface ProviderProps<T> {
       value: T
       children?: JSX.Children | ((value: T) => JSX.Element)
     }
-    type Context<T> = {
+    interface Context<T> {
       [$CONTEXT]: true
       Provider: (({ value, children }: ProviderProps<T>) => JSX.Element) & {
         displayName?: string
@@ -133,7 +135,7 @@ declare global {
     type FCProps<T = {}> = T & { children?: JSX.Children }
     type InferProps<T> = T extends Kiru.FC<infer P> ? P : never
 
-    type HookDevtoolsProvisions<T extends Record<string, any>> = {
+    interface HookDevtoolsProvisions<T extends Record<string, any>> {
       get: () => T
       set?: (value: T) => void
     }
@@ -146,10 +148,10 @@ declare global {
         devtools?: HookDevtoolsProvisions<any>
       }
     }
-    type RefObject<T> = {
+    interface RefObject<T> {
       readonly current: T | null
     }
-    type MutableRefObject<T> = {
+    interface MutableRefObject<T> {
       current: T
     }
     type RefCallback<T> = {
@@ -169,7 +171,7 @@ declare global {
       | typeof $CONTEXT_PROVIDER
       | typeof $HYDRATION_BOUNDARY
 
-    type VNode = {
+    interface VNode {
       app?: AppContext
       dom?: SomeDom
       lastChildDom?: SomeDom
@@ -203,7 +205,7 @@ declare global {
       hmrUpdated?: boolean
     }
   }
-  type VNodeSnapshot = {
+  interface VNodeSnapshot {
     props: Kiru.VNode["props"]
     memoizedProps: Kiru.VNode["memoizedProps"]
     index: number

package/src/types.utils.ts

@@ -1,35 +1,47 @@
-import type { $CONTEXT_PROVIDER, $HYDRATION_BOUNDARY } from "./constants"
+import type {
+  $CONTEXT_PROVIDER,
+  $FRAGMENT,
+  $HYDRATION_BOUNDARY,
+} from "./constants"
 import type { HydrationBoundaryMode } from "./ssr/hydrationBoundary"
 import type { Signal } from "./signals"
 
 export type SomeElement = HTMLElement | SVGElement
 export type SomeDom = HTMLElement | SVGElement | Text
+export type MaybeElement = SomeElement | undefined
 export type MaybeDom = SomeDom | undefined
 
-type VNode = Kiru.VNode
-
-export type FunctionVNode = Omit<VNode, "type"> & {
-  type: (...args: any) => any
-}
-export type ExoticVNode = Omit<VNode, "type"> & {
-  type: Kiru.ExoticSymbol
+export interface FunctionVNode extends Kiru.VNode {
+  type: (...args: any) => JSX.Element
 }
-export type ElementVNode = Omit<VNode, "dom" | "type"> & {
+
+export interface ElementVNode extends Kiru.VNode {
   dom: SomeElement
   type: string
 }
-export type DomVNode = Omit<VNode, "dom" | "type"> & {
+export interface DomVNode extends Kiru.VNode {
   dom: SomeDom
   type: "#text" | (string & {})
 }
 
-export type ContextProviderNode<T> = Kiru.VNode & {
+export interface ContextProviderNode<T> extends Kiru.VNode {
   type: typeof $CONTEXT_PROVIDER
-  props: { value: T; ctx: Kiru.Context<T>; dependents: Set<Kiru.VNode> }
+  props: Kiru.VNode["props"] & {
+    value: T
+    ctx: Kiru.Context<T>
+    dependents: Set<Kiru.VNode>
+  }
 }
-export type HydrationBoundaryNode = Kiru.VNode & {
+
+export interface HydrationBoundaryNode extends Kiru.VNode {
   type: typeof $HYDRATION_BOUNDARY
-  props: { mode: HydrationBoundaryMode }
+  props: Kiru.VNode["props"] & {
+    mode: HydrationBoundaryMode
+  }
+}
+
+export interface FragmentNode extends Kiru.VNode {
+  type: typeof $FRAGMENT
 }
 
 export type Prettify<T> = {
@@ -37,3 +49,20 @@ export type Prettify<T> = {
 } & {}
 
 export type Signalable<T> = T | Signal<T>
+
+export type AsyncTaskState<T, E extends Error = Error> =
+  | {
+      data: null
+      error: null
+      loading: true
+    }
+  | {
+      data: T
+      error: null
+      loading: false
+    }
+  | {
+      data: null
+      error: E
+      loading: false
+    }

package/src/utils.ts

@@ -155,15 +155,15 @@ function vNodeContains(haystack: VNode, needle: VNode): boolean {
 }
 
 function traverseApply(vNode: VNode, func: (node: VNode) => void): void {
-  let applyToSiblings = false
-  const nodes: VNode[] = [vNode]
-  const apply = (node: VNode) => {
-    func(node)
-    node.child && nodes.push(node.child)
-    applyToSiblings && node.sibling && nodes.push(node.sibling)
-    applyToSiblings = true
+  func(vNode)
+  let child = vNode.child
+  while (child) {
+    func(child)
+    if (child.child) {
+      traverseApply(child, func)
+    }
+    child = child.sibling
   }
-  while (nodes.length) apply(nodes.shift()!)
 }
 
 function findParent(vNode: Kiru.VNode, predicate: (n: Kiru.VNode) => boolean) {