kiru 0.48.3 → 0.49.1

package/src/dom.ts

@@ -4,7 +4,7 @@ import {
   propFilters,
   propToHtmlAttr,
   getVNodeAppContext,
-} from "./utils.js"
+} from "./utils/index.js"
 import {
   booleanAttributes,
   FLAG_PLACEMENT,
@@ -100,15 +100,14 @@ function createDom(vNode: DomVNode): SomeDom {
   return dom
 }
 function createTextNode(vNode: VNode): Text {
-  const nodeValue = vNode.props.nodeValue
-  if (Signal.isSignal(nodeValue)) {
-    const value = nodeValue.peek()
-    const textNode = document.createTextNode(value)
-    subTextNode(vNode, textNode, nodeValue)
-    return textNode
+  const { nodeValue } = vNode.props
+  if (!Signal.isSignal(nodeValue)) {
+    return document.createTextNode(nodeValue)
   }
 
-  const textNode = document.createTextNode(nodeValue)
+  const value = nodeValue.peek() ?? ""
+  const textNode = document.createTextNode(value)
+  subTextNode(vNode, textNode, nodeValue)
   return textNode
 }
 
@@ -720,9 +719,7 @@ function placeAndCommitNoopChildren(
     const nextSiblingDom = getNextSiblingDom(parent, node)
     const parentDom = node.dom
     if (nextSiblingDom) {
-      const [first, ...rest] = domChildren
-      parentDom.insertBefore(first, nextSiblingDom)
-      first.after(...rest)
+      nextSiblingDom.before(...domChildren)
     } else {
       parentDom.append(...domChildren)
     }

package/src/element.ts

@@ -1,6 +1,6 @@
 import { $FRAGMENT, $MEMO, FLAG_MEMO } from "./constants.js"
-import { isMemoFn } from "./memo.js"
-import { isValidElementKeyProp, isValidElementRefProp } from "./props.js"
+import { isMemoFn } from "./components/memo.js"
+import { isValidElementKeyProp, isValidElementRefProp } from "./utils/index.js"
 
 export function createElement<T extends Kiru.VNode["type"]>(
   type: T,

package/src/error.ts

@@ -1,6 +1,6 @@
 import { $KIRU_ERROR } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import { findParent, noop } from "./utils.js"
+import { findParent, noop } from "./utils/index.js"
 
 type KiruErrorOptions =
   | string

package/src/form/index.ts

@@ -1,7 +1,10 @@
 import { __DEV__ } from "../env.js"
 import { Fragment } from "../element.js"
-import { generateRandomID } from "../generateId.js"
-import { safeStringify, shallowCompare } from "../utils.js"
+import {
+  safeStringify,
+  shallowCompare,
+  generateRandomID,
+} from "../utils/index.js"
 import { useEffect } from "../hooks/useEffect.js"
 import { useMemo } from "../hooks/useMemo.js"
 import { useRef } from "../hooks/useRef.js"

package/src/hmr.ts

@@ -1,6 +1,6 @@
 import { $HMR_ACCEPT } from "./constants.js"
 import { __DEV__ } from "./env.js"
-import { traverseApply } from "./utils.js"
+import { traverseApply } from "./utils/index.js"
 import { requestUpdate } from "./scheduler.js"
 import { Signal } from "./signals/base.js"
 import type { WatchEffect } from "./signals/watch.js"

package/src/hooks/useAsync.ts

@@ -1,6 +1,6 @@
 import { __DEV__ } from "../env.js"
-import { noop } from "../utils.js"
-import { depsRequireChange, sideEffectsEnabled, useHook } from "./utils.js"
+import { noop, sideEffectsEnabled } from "../utils/index.js"
+import { depsRequireChange, useHook } from "./utils.js"
 import type { AsyncTaskState } from "../types.utils.js"
 
 export type UseAsyncState<T> = AsyncTaskState<T, UseAsyncError> & {
@@ -48,7 +48,9 @@ export function useAsync<T>(
       deps,
       id: 0,
       task: null as any as InternalTaskState<T>,
-      load: noop as (func: (ctx: UseAsyncCallbackContext) => Promise<T>) => void,
+      load: noop as (
+        func: (ctx: UseAsyncCallbackContext) => Promise<T>
+      ) => void,
     },
     ({ hook, isInit, isHMR, update }) => {
       if (__DEV__) {

package/src/hooks/useCallback.ts

@@ -1,5 +1,6 @@
 import { __DEV__ } from "../env.js"
-import { depsRequireChange, useHook, sideEffectsEnabled } from "./utils.js"
+import { sideEffectsEnabled } from "../utils/index.js"
+import { depsRequireChange, useHook } from "./utils.js"
 
 /**
  * Creates a memoized callback function.

package/src/hooks/useEffect.ts

@@ -1,10 +1,6 @@
+import { sideEffectsEnabled } from "../utils/index.js"
 import { __DEV__ } from "../env.js"
-import {
-  cleanupHook,
-  depsRequireChange,
-  sideEffectsEnabled,
-  useHook,
-} from "./utils.js"
+import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
 
 /**
  * Runs a function after the component is rendered, or when a value provided in the optional [dependency

package/src/hooks/useEffectEvent.ts

@@ -1,6 +1,7 @@
+import { sideEffectsEnabled } from "../utils/index.js"
 import { node } from "../globals.js"
 import { __DEV__ } from "../env.js"
-import { sideEffectsEnabled, useHook } from "./utils.js"
+import { useHook } from "./utils.js"
 
 /**
  * Wraps a function to be called within effects and other callbacks.

package/src/hooks/useLayoutEffect.ts

@@ -1,10 +1,6 @@
+import { sideEffectsEnabled } from "../utils/index.js"
 import { __DEV__ } from "../env.js"
-import {
-  cleanupHook,
-  depsRequireChange,
-  sideEffectsEnabled,
-  useHook,
-} from "./utils.js"
+import { cleanupHook, depsRequireChange, useHook } from "./utils.js"
 
 /**
  * Runs a function before the component is rendered, or when a value provided in the optional [dependency

package/src/hooks/useMemo.ts

@@ -1,5 +1,6 @@
+import { sideEffectsEnabled } from "../utils/index.js"
 import { __DEV__ } from "../env.js"
-import { depsRequireChange, sideEffectsEnabled, useHook } from "./utils.js"
+import { depsRequireChange, useHook } from "./utils.js"
 
 /**
  * Creates a memoized value that only changes when the [dependency

package/src/hooks/useReducer.ts

@@ -1,6 +1,6 @@
 import { __DEV__ } from "../env.js"
-import { noop } from "../utils.js"
-import { sideEffectsEnabled, useHook } from "./utils.js"
+import { noop, sideEffectsEnabled } from "../utils/index.js"
+import { useHook } from "./utils.js"
 
 /**
  * Creates 'dispatcher-driven' state.

package/src/hooks/useRef.ts

@@ -1,5 +1,6 @@
 import { __DEV__ } from "../env.js"
-import { sideEffectsEnabled, useHook } from "./utils.js"
+import { sideEffectsEnabled } from "../utils/index.js"
+import { useHook } from "./utils.js"
 
 /**
  * Creates a ref object. Useful for persisting values between renders or getting

package/src/hooks/useState.ts

@@ -1,6 +1,6 @@
 import { __DEV__ } from "../env.js"
-import { noop } from "../utils.js"
-import { sideEffectsEnabled, useHook } from "./utils.js"
+import { noop, sideEffectsEnabled } from "../utils/index.js"
+import { useHook } from "./utils.js"
 
 /**
  * Creates a stateful value, and returns the current value and a function to update it.

package/src/hooks/useSyncExternalStore.ts

@@ -1,7 +1,7 @@
 import { node } from "../globals.js"
 import { KiruError } from "../error.js"
-import { noop } from "../utils.js"
-import { sideEffectsEnabled, useHook } from "./utils.js"
+import { noop, sideEffectsEnabled } from "../utils/index.js"
+import { useHook } from "./utils.js"
 import { __DEV__ } from "../env.js"
 
 /**

package/src/hooks/useViewTransition.ts

@@ -1,7 +1,6 @@
 import { flushSync } from "../scheduler.js"
 import { node } from "../globals.js"
-import { noop } from "../utils.js"
-import { sideEffectsEnabled } from "./utils.js"
+import { noop, sideEffectsEnabled } from "../utils/index.js"
 
 /**
  * Allows you to easily use the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition)

package/src/hooks/utils.ts

@@ -1,9 +1,8 @@
 import { KiruError } from "../error.js"
 import { __DEV__ } from "../env.js"
 import { hookIndex, node } from "../globals.js"
-import { noop } from "../utils.js"
+import { noop } from "../utils/index.js"
 import { requestUpdate } from "../scheduler.js"
-export { sideEffectsEnabled } from "../utils.js"
 export {
   cleanupHook,
   depsRequireChange,
@@ -158,6 +157,7 @@ function useHook<
         console.warn(
           `[kiru]: hooks must be called in the same order. Hook "${hookName}" was called in place of "${vNode.hookSig[index]}". Strange things may happen.`
         )
+        oldHook?.cleanup?.()
         vNode.hooks.length = index
         vNode.hookSig.length = index
         oldHook = undefined

package/src/index.ts

@@ -3,19 +3,16 @@ import { createKiruGlobalContext } from "./globalContext.js"
 
 export type * from "./types"
 export * from "./signals/index.js"
+export * from "./action.js"
 export * from "./appContext.js"
-export * from "./cloneVNode.js"
 export * from "./context.js"
 export * from "./customEvents.js"
 export * from "./element.js"
 export * from "./hooks/index.js"
-export * from "./lazy.js"
-export { memo } from "./memo.js"
-export * from "./portal.js"
+export * from "./components/index.js"
 export * from "./renderToString.js"
 export { nextIdle, flushSync, requestUpdate } from "./scheduler.js"
 export * from "./store.js"
-export * from "./transition.js"
 
 if (__DEV__) {
   if ("window" in globalThis) {

package/src/reconciler.ts

@@ -1,5 +1,5 @@
 import { $FRAGMENT, FLAG_PLACEMENT, FLAG_UPDATE } from "./constants.js"
-import { getVNodeAppContext, isVNode, latest } from "./utils.js"
+import { getVNodeAppContext, isVNode, latest } from "./utils/index.js"
 import { Signal } from "./signals/base.js"
 import { __DEV__ } from "./env.js"
 import { createElement, Fragment } from "./element.js"
@@ -150,11 +150,7 @@ function reconcileChildrenArray(parent: VNode, children: unknown[]) {
 function updateSlot(parent: VNode, oldChild: VNode | null, child: unknown) {
   // Update the node if the keys match, otherwise return null.
   const key = oldChild?.props.key
-  if (
-    (typeof child === "string" && child !== "") ||
-    typeof child === "number" ||
-    typeof child === "bigint"
-  ) {
+  if (isValidTextNodeValue(child)) {
     if (key !== undefined) return null
     if (
       oldChild?.type === "#text" &&
@@ -272,11 +268,7 @@ function updateFragment(
 }
 
 function createChild(parent: VNode, child: unknown): VNode | null {
-  if (
-    (typeof child === "string" && child !== "") ||
-    typeof child === "number" ||
-    typeof child === "bigint"
-  ) {
+  if (isValidTextNodeValue(child)) {
     if (__DEV__) {
       dev_emitCreateNode()
     }
@@ -438,6 +430,16 @@ function updateFromMap(
   return null
 }
 
+function isValidTextNodeValue(
+  value: unknown
+): value is string | number | bigint {
+  return (
+    (typeof value === "string" && value !== "") ||
+    typeof value === "number" ||
+    typeof value === "bigint"
+  )
+}
+
 function propsChanged(oldProps: VNode["props"], newProps: VNode["props"]) {
   const aKeys = Object.keys(oldProps)
   const bKeys = Object.keys(newProps)

package/src/renderToString.ts

@@ -5,10 +5,10 @@ import {
   encodeHtmlEntities,
   propsToElementAttributes,
   isExoticType,
-} from "./utils.js"
+  assertValidElementProps,
+} from "./utils/index.js"
 import { Signal } from "./signals/base.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "./constants.js"
-import { assertValidElementProps } from "./props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./ssr/hydrationBoundary.js"
 import { __DEV__ } from "./env.js"
 
@@ -39,8 +39,7 @@ function renderToString_internal(
   el.parent = parent
   el.depth = (parent?.depth ?? -1) + 1
   el.index = idx
-  const props = el.props ?? {}
-  const type = el.type
+  const { type, props = {} } = el
   if (type === "#text") return encodeHtmlEntities(props.nodeValue ?? "")
 
   const children = props.children

package/src/scheduler.ts

@@ -23,14 +23,14 @@ import { __DEV__ } from "./env.js"
 import { KiruError } from "./error.js"
 import { hookIndex, node, renderMode } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
-import { assertValidElementProps } from "./props.js"
+import { assertValidElementProps } from "./utils/index.js"
 import { reconcileChildren } from "./reconciler.js"
 import {
   latest,
   traverseApply,
   isExoticType,
   getVNodeAppContext,
-} from "./utils.js"
+} from "./utils/index.js"
 import type { AppContext } from "./appContext"
 
 type VNode = Kiru.VNode
@@ -318,6 +318,20 @@ function updateFunctionComponent(vNode: FunctionVNode) {
 
       if (__DEV__) {
         newChild = latest(type)(props)
+
+        if (vNode.hmrUpdated && vNode.hooks && vNode.hookSig) {
+          const len = vNode.hooks.length
+          if (hookIndex.current < len) {
+            // clean up any hooks that were removed
+            for (let i = hookIndex.current; i < len; i++) {
+              const hook = vNode.hooks[i]
+              hook.cleanup?.()
+            }
+            vNode.hooks.length = hookIndex.current
+            vNode.hookSig.length = hookIndex.current
+          }
+        }
+
         delete vNode.hmrUpdated
         if (++renderTryCount > CONSECUTIVE_DIRTY_LIMIT) {
           throw new KiruError({

package/src/signals/base.ts

@@ -1,9 +1,13 @@
-import { latest, safeStringify, sideEffectsEnabled } from "../utils.js"
+import {
+  latest,
+  safeStringify,
+  sideEffectsEnabled,
+  generateRandomID,
+} from "../utils/index.js"
 import { $HMR_ACCEPT, $SIGNAL } from "../constants.js"
 import { __DEV__ } from "../env.js"
 import { node } from "../globals.js"
 import { useHook } from "../hooks/utils.js"
-import { generateRandomID } from "../generateId.js"
 import { requestUpdate } from "../scheduler.js"
 import { tracking, signalSubsMap } from "./globals.js"
 import type { SignalSubscriber, ReadonlySignal } from "./types.js"

package/src/signals/computed.ts

@@ -1,7 +1,7 @@
 import { __DEV__ } from "../env.js"
 import { $HMR_ACCEPT } from "../constants.js"
 import { useHook } from "../hooks/utils.js"
-import { latest } from "../utils.js"
+import { latest } from "../utils/index.js"
 import { effectQueue, signalSubsMap } from "./globals.js"
 import { executeWithTracking } from "./effect.js"
 import { Signal } from "./base.js"

package/src/signals/effect.ts

@@ -1,5 +1,5 @@
 import { node } from "../globals.js"
-import { sideEffectsEnabled } from "../utils.js"
+import { sideEffectsEnabled } from "../utils/index.js"
 import { tracking, effectQueue } from "./globals.js"
 import { tick } from "./utils.js"
 import type { Signal } from "./base.js"

package/src/signals/watch.ts

@@ -1,11 +1,10 @@
 import { __DEV__ } from "../env.js"
 import type { HMRAccept } from "../hmr.js"
 import { $HMR_ACCEPT } from "../constants.js"
-import { sideEffectsEnabled, useHook } from "../hooks/utils.js"
+import { useHook } from "../hooks/utils.js"
 import { effectQueue } from "./globals.js"
-import { generateRandomID } from "../generateId.js"
 import { executeWithTracking } from "./effect.js"
-import { latest } from "../utils.js"
+import { latest, sideEffectsEnabled, generateRandomID } from "../utils/index.js"
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 

package/src/ssr/server.ts

@@ -6,10 +6,10 @@ import {
   encodeHtmlEntities,
   propsToElementAttributes,
   isExoticType,
-} from "../utils.js"
+  assertValidElementProps,
+} from "../utils/index.js"
 import { Signal } from "../signals/base.js"
 import { $HYDRATION_BOUNDARY, voidElements } from "../constants.js"
-import { assertValidElementProps } from "../props.js"
 import { HYDRATION_BOUNDARY_MARKER } from "./hydrationBoundary.js"
 import { __DEV__ } from "../env.js"
 
@@ -58,9 +58,8 @@ function renderToStream_internal(
   el.parent = parent
   el.depth = (parent?.depth ?? -1) + 1
   el.index = idx
-  const props = el.props ?? {}
+  const { type, props = {} } = el
   const children = props.children
-  const type = el.type
   if (type === "#text") {
     stream.push(encodeHtmlEntities(props.nodeValue ?? ""))
     return

package/src/store.ts

@@ -1,9 +1,13 @@
 import type { Prettify } from "./types.utils.js"
 import { __DEV__ } from "./env.js"
-import { sideEffectsEnabled, useHook } from "./hooks/utils.js"
-import { safeStringify, shallowCompare } from "./utils.js"
+import { useHook } from "./hooks/utils.js"
 import { $HMR_ACCEPT } from "./constants.js"
 import { HMRAccept } from "./hmr.js"
+import {
+  safeStringify,
+  shallowCompare,
+  sideEffectsEnabled,
+} from "./utils/index.js"
 
 export { createStore }
 export type { Store, MethodFactory }

package/src/swr.ts

@@ -3,12 +3,12 @@ import { useHook } from "./hooks/utils.js"
 import { Signal } from "./signals/base.js"
 import { AsyncTaskState } from "./types.utils.js"
 import {
-  noop,
   deepCompare,
+  noop,
   safeStringify,
-  sideEffectsEnabled,
   shallowCompare,
-} from "./utils.js"
+  sideEffectsEnabled,
+} from "./utils/index.js"
 
 export type UseSWRState<T> = AsyncTaskState<T, UseSWRError> & {
   mutate: (callback: () => Promise<T>) => void

package/src/types.dom.ts

@@ -1,4 +1,4 @@
-import { Signal } from "./signals"
+import type { Signal } from "./signals"
 import type { Prettify, Signalable } from "./types.utils"
 
 export type {
@@ -60,6 +60,7 @@ type NumericStyleKeys =
   | "width"
 
   // Flexbox
+  | "flex"
   | "flexBasis"
   | "flexGrow"
   | "flexShrink"

package/src/types.ts

@@ -16,7 +16,12 @@ import type {
   HTMLTagToElement,
   SVGTagToElement,
 } from "./types.dom"
-import { AsyncTaskState, Prettify, Signalable, SomeDom } from "./types.utils"
+import type {
+  AsyncTaskState,
+  Prettify,
+  Signalable,
+  SomeDom,
+} from "./types.utils"
 import type { AppContext } from "./appContext"
 
 export type { AsyncTaskState, ElementProps, Prettify, Signalable, StyleObject }
@@ -128,10 +133,12 @@ declare global {
       displayName?: string
     }
 
-    type FC<T = {}> = ((props: FCProps<T>) => JSX.Element) & {
+    interface FC<T = {}> {
+      (props: FCProps<T>): JSX.Element
       /** Used to display the name of the component in devtools  */
       displayName?: string
     }
+
     type FCProps<T = {}> = T & { children?: JSX.Children }
     type InferProps<T> = T extends Kiru.FC<infer P> ? P : never
 

package/src/utils/compare.ts

@@ -0,0 +1,125 @@
+export function deepCompare<T>(a: T, b: T): boolean {
+  return compare(a, b, true)
+}
+
+export function shallowCompare<T>(a: T, b: T): boolean {
+  return compare(a, b, false)
+}
+
+function compare<T>(a: T, b: T, deep = false): boolean {
+  // Fast path: identity comparison
+  if (a === b) return true
+
+  // Handle primitive types and null/undefined
+  if (
+    a == null ||
+    b == null ||
+    typeof a !== "object" ||
+    typeof b !== "object"
+  ) {
+    return false
+  }
+
+  // Handle arrays efficiently
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false
+
+    if (deep) {
+      for (let i = 0; i < a.length; i++) {
+        if (!compare(a[i], b[i], true)) return false
+      }
+    } else {
+      for (let i = 0; i < a.length; i++) {
+        if (!Object.is(a[i], b[i])) return false
+      }
+    }
+    return true
+  }
+
+  // Handle Maps
+  if (a instanceof Map && b instanceof Map) {
+    if (a.size !== b.size) return false
+
+    for (const [key, valueA] of a) {
+      if (!b.has(key)) return false
+
+      const valueB = b.get(key)
+      if (deep) {
+        if (!compare(valueA, valueB, true)) return false
+      } else {
+        if (!Object.is(valueA, valueB)) return false
+      }
+    }
+    return true
+  }
+
+  // Handle Sets more efficiently
+  if (a instanceof Set && b instanceof Set) {
+    if (a.size !== b.size) return false
+
+    if (deep) {
+      // For deep equality of Sets, we need to compare the values themselves
+      // Convert to arrays and sort for comparison
+      const aValues = Array.from(a)
+      const bValues = Array.from(b)
+
+      if (aValues.length !== bValues.length) return false
+
+      // Simple compare doesn't work for objects in Sets with deep comparison
+      // Using a matching algorithm instead
+      for (const valueA of aValues) {
+        // Find matching element in bValues
+        let found = false
+        for (let i = 0; i < bValues.length; i++) {
+          if (compare(valueA, bValues[i], true)) {
+            bValues.splice(i, 1) // Remove the matched element
+            found = true
+            break
+          }
+        }
+        if (!found) return false
+      }
+      return true
+    } else {
+      // Regular Set comparison
+      for (const valueA of a) {
+        if (!b.has(valueA)) return false
+      }
+      return true
+    }
+  }
+
+  // Handle Date objects
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime()
+  }
+
+  // Handle RegExp objects
+  if (a instanceof RegExp && b instanceof RegExp) {
+    return a.toString() === b.toString()
+  }
+
+  // Handle plain objects
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+
+  if (keysA.length !== keysB.length) return false
+
+  // Use a Set for faster key lookup
+  const keySet = new Set(keysB)
+
+  for (const key of keysA) {
+    if (!keySet.has(key)) return false
+
+    const valueA = a[key as keyof T]
+    const valueB = b[key as keyof T]
+
+    if (deep) {
+      if (!compare(valueA, valueB, true)) return false
+    } else {
+      if (!Object.is(valueA, valueB)) return false
+    }
+  }
+
+  return true
+}