kiru 0.48.3 → 0.49.0

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,

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"
 

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

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"
 

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
+}

package/src/utils/format.ts

@@ -0,0 +1,158 @@
+import { unwrap } from "../signals/index.js"
+import {
+  booleanAttributes,
+  REGEX_UNIT,
+  snakeCaseAttributes,
+} from "../constants.js"
+
+export {
+  className,
+  encodeHtmlEntities,
+  propFilters,
+  propToHtmlAttr,
+  styleObjectToString,
+  propValueToHtmlAttrValue,
+  propsToElementAttributes,
+  safeStringify,
+}
+
+function className(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(" ")
+}
+
+function encodeHtmlEntities(text: string): string {
+  return text
+    .replace(REGEX_UNIT.AMP_G, "&")
+    .replace(REGEX_UNIT.LT_G, "<")
+    .replace(REGEX_UNIT.GT_G, ">")
+    .replace(REGEX_UNIT.DBLQT_G, """)
+    .replace(REGEX_UNIT.SQT_G, "'")
+    .replace(REGEX_UNIT.SLASH_G, "/")
+}
+
+const propFilters = {
+  internalProps: ["children", "ref", "key", "innerHTML"],
+  isEvent: (key: string) => key.startsWith("on"),
+  isProperty: (key: string) =>
+    !propFilters.internalProps.includes(key) && !propFilters.isEvent(key),
+}
+
+function propToHtmlAttr(key: string): string {
+  switch (key) {
+    case "className":
+      return "class"
+    case "htmlFor":
+      return "for"
+    case "tabIndex":
+    case "formAction":
+    case "formMethod":
+    case "formEncType":
+    case "contentEditable":
+    case "spellCheck":
+    case "allowFullScreen":
+    case "autoPlay":
+    case "disablePictureInPicture":
+    case "disableRemotePlayback":
+    case "formNoValidate":
+    case "noModule":
+    case "noValidate":
+    case "popoverTarget":
+    case "popoverTargetAction":
+    case "playsInline":
+    case "readOnly":
+    case "itemscope":
+    case "rowSpan":
+    case "crossOrigin":
+      return key.toLowerCase()
+
+    default:
+      if (key.indexOf("-") > -1) return key
+      if (key.startsWith("aria"))
+        return "aria-" + key.substring(4).toLowerCase()
+
+      return snakeCaseAttributes.get(key) || key
+  }
+}
+
+function styleObjectToString(obj: Partial<CSSStyleDeclaration>): string {
+  let cssString = ""
+  for (const key in obj) {
+    const cssKey = key.replace(REGEX_UNIT.ALPHA_UPPER_G, "-$&").toLowerCase()
+    cssString += `${cssKey}:${obj[key]};`
+  }
+  return cssString
+}
+
+function stylePropToString(style: unknown) {
+  if (typeof style === "string") return style
+  if (typeof style === "object" && !!style) return styleObjectToString(style)
+  return ""
+}
+
+function propValueToHtmlAttrValue(key: string, value: unknown): string {
+  return key === "style" && typeof value === "object" && !!value
+    ? styleObjectToString(value)
+    : String(value)
+}
+function propsToElementAttributes(props: Record<string, unknown>): string {
+  const attrs: string[] = []
+  const { className, style, ...rest } = props
+  if (className) {
+    const val = unwrap(className)
+    if (!!val) attrs.push(`class="${val}"`)
+  }
+  if (style) {
+    const val = unwrap(style)
+    if (!!val) attrs.push(`style="${stylePropToString(val)}"`)
+  }
+
+  const keys = Object.keys(rest).filter(propFilters.isProperty)
+  for (let i = 0; i < keys.length; i++) {
+    let k = keys[i]
+    let val = unwrap(props[k])
+    if (val === null || val === undefined) continue
+
+    k = k.split("bind:")[1] ?? k // normalize bind props
+    const key = propToHtmlAttr(k)
+
+    switch (typeof val) {
+      case "function":
+      case "symbol":
+        continue
+      case "boolean":
+        if (booleanAttributes.has(key)) {
+          if (val) attrs.push(key)
+          continue
+        }
+    }
+    attrs.push(`${key}="${val}"`)
+  }
+  return attrs.join(" ")
+}
+
+type SafeStringifyOptions = {
+  /**
+   * By default, functions are stringified. Specify `false` to instead produce `[FUNCTION (${fn.name})]`.
+   */
+  functions: boolean
+}
+
+function safeStringify(
+  value: unknown,
+  opts: SafeStringifyOptions = { functions: true }
+): string {
+  const seen = new WeakSet()
+  return JSON.stringify(value, (_, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return "[CIRCULAR]"
+      }
+      seen.add(value)
+    }
+    if (typeof value === "function") {
+      if (!opts.functions) return `[FUNCTION (${value.name || "anonymous"})]`
+      return value.toString()
+    }
+    return value
+  })
+}

package/src/utils/index.ts

@@ -0,0 +1,7 @@
+export * from "./compare.js"
+export * from "./format.js"
+export * from "./runtime.js"
+export * from "./vdom.js"
+export * from "./generateId.js"
+
+export const noop = Object.freeze(() => {})

package/src/utils/runtime.ts

@@ -0,0 +1,25 @@
+import { __DEV__ } from "../env.js"
+import { renderMode } from "../globals.js"
+
+export { latest, sideEffectsEnabled }
+
+/**
+ * This is a no-op in production. It is used to get the latest
+ * iteration of a component or signal after HMR has happened.
+ */
+function latest<T>(thing: T): T {
+  let tgt: any = thing
+  if (__DEV__) {
+    while ("__next" in tgt) {
+      tgt = tgt.__next as typeof tgt
+    }
+  }
+  return tgt
+}
+
+/**
+ * Returns false if called during "stream" or "string" render modes.
+ */
+function sideEffectsEnabled(): boolean {
+  return renderMode.current === "dom" || renderMode.current === "hydrate"
+}