kiru 0.47.1 → 0.48.1

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

@@ -5,10 +5,8 @@ import {
   $HYDRATION_BOUNDARY,
   booleanAttributes,
   FLAG_DELETION,
-  FLAG_HAS_MEMO_ANCESTOR,
   FLAG_PLACEMENT,
   FLAG_UPDATE,
-  FLAG_MEMO,
   REGEX_UNIT,
 } from "./constants.js"
 import { unwrap } from "./signals/utils.js"
@@ -25,12 +23,10 @@ export {
   isExoticType,
   isVNodeDeleted,
   vNodeContains,
-  willMemoBlockUpdate,
   getCurrentVNode,
   getVNodeAppContext,
   commitSnapshot,
   traverseApply,
-  postOrderApply,
   findParent,
   propToHtmlAttr,
   propValueToHtmlAttrValue,
@@ -158,79 +154,16 @@ function vNodeContains(haystack: VNode, needle: VNode): boolean {
   return false
 }
 
-function willMemoBlockUpdate(root: VNode, target: VNode): boolean {
-  let node: VNode | null = target
-
-  while (node && node !== root && node.flags & FLAG_HAS_MEMO_ANCESTOR) {
-    const parent = node.parent
-    if (!parent) return false
-    if (
-      parent.flags & FLAG_MEMO &&
-      parent.prev?.memoizedProps &&
-      parent.arePropsEqual!(parent.prev.memoizedProps, parent.props)
-    ) {
-      return true
-    }
-
-    node = node.parent
-  }
-
-  return false
-}
-
 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
-  }
-  while (nodes.length) apply(nodes.shift()!)
-}
-
-function postOrderApply(
-  tree: VNode,
-  callbacks: {
-    /** called upon traversing to the next parent, and on the root */
-    onAscent: (vNode: VNode) => void
-    /** called before traversing to the next parent */
-    onBeforeAscent?: (vNode: VNode) => void
-    /** called before traversing to the next child */
-    onDescent?: (vNode: VNode) => void
-  }
-): void {
-  const root = tree
-  const rootChild = root.child
-  if (!rootChild) {
-    callbacks.onAscent(root)
-    return
-  }
-
-  callbacks.onDescent?.(root)
-  let branch = rootChild
-  while (branch) {
-    let c = branch
-    while (c) {
-      if (!c.child) break
-      callbacks.onDescent?.(c)
-      c = c.child
+  func(vNode)
+  let child = vNode.child
+  while (child) {
+    func(child)
+    if (child.child) {
+      traverseApply(child, func)
     }
-
-    while (c && c !== root) {
-      callbacks.onAscent(c)
-      if (c.sibling) {
-        branch = c.sibling
-        break
-      }
-      callbacks.onBeforeAscent?.(c)
-      c = c.parent!
-    }
-    if (c === root) break
+    child = child.sibling
   }
-
-  callbacks.onAscent(root)
 }
 
 function findParent(vNode: Kiru.VNode, predicate: (n: Kiru.VNode) => boolean) {