kiru 0.48.3 → 0.49.0

package/dist/utils/vdom.js

@@ -0,0 +1,124 @@
+import { Signal } from "../signals/index.js";
+import { FLAG_DELETION, $FRAGMENT, $CONTEXT_PROVIDER, $HYDRATION_BOUNDARY, FLAG_PLACEMENT, FLAG_UPDATE, } from "../constants.js";
+import { createElement } from "../index.js";
+import { KiruError } from "../error.js";
+import { node } from "../globals.js";
+export { cloneVNode, isVNodeDeleted, isVNode, isExoticType, isFragment, isLazy, isMemo, isContextProvider, vNodeContains, getCurrentVNode, getVNodeAppContext, commitSnapshot, traverseApply, findParent, assertValidElementProps, isValidElementKeyProp, isValidElementRefProp, };
+function cloneVNode(vNode) {
+    const children = vNode.props.children;
+    let clonedChildren;
+    if (isVNode(children)) {
+        clonedChildren = cloneVNode(children);
+    }
+    else if (Array.isArray(children)) {
+        clonedChildren = children.map((c) => (isVNode(c) ? cloneVNode(c) : c));
+    }
+    return createElement(vNode.type, { ...vNode.props, children: clonedChildren });
+}
+function isVNodeDeleted(vNode) {
+    return (vNode.flags & FLAG_DELETION) !== 0;
+}
+function isVNode(thing) {
+    return typeof thing === "object" && thing !== null && "type" in thing;
+}
+function isExoticType(type) {
+    return (type === $FRAGMENT ||
+        type === $CONTEXT_PROVIDER ||
+        type === $HYDRATION_BOUNDARY);
+}
+function isFragment(vNode) {
+    return vNode.type === $FRAGMENT;
+}
+function isLazy(vNode) {
+    return (typeof vNode.type === "function" &&
+        "displayName" in vNode.type &&
+        vNode.type.displayName === "Kiru.lazy");
+}
+function isMemo(vNode) {
+    return (typeof vNode.type === "function" &&
+        "displayName" in vNode.type &&
+        vNode.type.displayName === "Kiru.memo");
+}
+function isContextProvider(thing) {
+    return isVNode(thing) && thing.type === $CONTEXT_PROVIDER;
+}
+function getCurrentVNode() {
+    return node.current;
+}
+function getVNodeAppContext(vNode) {
+    let n = vNode;
+    while (n) {
+        if (n.app) {
+            return (vNode.app = n.app);
+        }
+        n = n.parent;
+    }
+    return null;
+}
+function commitSnapshot(vNode) {
+    const { props: { children, ...props }, memoizedProps, index, } = vNode;
+    vNode.prev = { props, memoizedProps, index };
+    vNode.flags &= ~(FLAG_UPDATE | FLAG_PLACEMENT | FLAG_DELETION);
+}
+function vNodeContains(haystack, needle) {
+    if (needle.depth < haystack.depth)
+        return false;
+    if (haystack === needle)
+        return true;
+    let checkSiblings = false;
+    const stack = [haystack];
+    while (stack.length) {
+        const n = stack.pop();
+        if (n === needle)
+            return true;
+        n.child && stack.push(n.child);
+        checkSiblings && n.sibling && stack.push(n.sibling);
+        checkSiblings = true;
+    }
+    return false;
+}
+function traverseApply(vNode, func) {
+    func(vNode);
+    let child = vNode.child;
+    while (child) {
+        func(child);
+        if (child.child) {
+            traverseApply(child, func);
+        }
+        child = child.sibling;
+    }
+}
+function findParent(vNode, predicate) {
+    let n = vNode.parent;
+    while (n) {
+        if (predicate(n))
+            return n;
+        n = n.parent;
+    }
+    return null;
+}
+function assertValidElementProps(vNode) {
+    if ("children" in vNode.props && vNode.props.innerHTML) {
+        throw new KiruError({
+            message: "Cannot use both children and innerHTML on an element",
+            vNode,
+        });
+    }
+    for (const key in vNode.props) {
+        if ("bind:" + key in vNode.props) {
+            throw new KiruError({
+                message: `Cannot use both bind:${key} and ${key} on an element`,
+                vNode,
+            });
+        }
+    }
+}
+function isValidElementKeyProp(thing) {
+    return typeof thing === "string" || typeof thing === "number";
+}
+function isValidElementRefProp(thing) {
+    return (typeof thing === "function" ||
+        (typeof thing === "object" && !!thing && "current" in thing) ||
+        Signal.isSignal(thing));
+}
+//# sourceMappingURL=vdom.js.map

package/dist/utils/vdom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vdom.js","sourceRoot":"","sources":["../../src/utils/vdom.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiru",
-  "version": "0.48.3",
+  "version": "0.49.0",
   "description": "A batteries-included, easy-to-use rendering library with a tiny footprint",
   "main": "dist/index.js",
   "type": "module",
@@ -15,16 +15,16 @@
       "default": "./dist/form/index.js"
     },
     "./router": {
-      "types": "./dist/router/index.d.ts",
-      "default": "./dist/router/index.js"
+      "types": "./dist/components/router/index.d.ts",
+      "default": "./dist/components/router/index.js"
     },
     "./swr": {
       "types": "./dist/swr.d.ts",
       "default": "./dist/swr.js"
     },
     "./utils": {
-      "types": "./dist/utils.d.ts",
-      "default": "./dist/utils.js"
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
     },
     "./ssr": {
       "types": "./dist/ssr/index.d.ts",
@@ -75,7 +75,7 @@
   },
   "scripts": {
     "build": "rm -rf dist && pnpm i && tsc",
-    "test": "node --test",
+    "test": "node --test dist/**/*.test.js",
     "dev": "tsc --watch"
   }
 }

package/src/action.ts

@@ -0,0 +1,42 @@
+export type ActionResult<T> =
+  | {
+      error: ActionError
+      data: null
+    }
+  | {
+      error: null
+      data: T
+    }
+
+export interface ActionConfig<T> {
+  /**
+   * Executes the action and returns the result.
+   */
+  execute: () => Promise<T>
+  /**
+   * Called when the action fails.
+   */
+  onError?: (error: ActionError) => void
+}
+
+export class ActionError extends Error {
+  constructor(cause: unknown) {
+    super("Error occurred during action execution", { cause })
+  }
+}
+
+export function defineAction<T extends readonly unknown[], R>(
+  callback: (...args: T) => ActionConfig<R>
+): (...args: T) => Promise<ActionResult<R>> {
+  return async (...args: T) => {
+    const { execute, onError } = callback(...args)
+    try {
+      const data = await execute()
+      return { error: null, data }
+    } catch (e) {
+      const error = new ActionError(e)
+      onError?.(error)
+      return { error, data: null }
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./lazy.js"
+export { memo } from "./memo.js"
+export * from "./portal.js"
+export * from "./transition.js"

package/src/{lazy.ts → components/lazy.ts}

@@ -1,18 +1,18 @@
-import { createElement } from "./element.js"
-import { __DEV__ } from "./env.js"
-import { KiruError } from "./error.js"
-import { node, renderMode } from "./globals.js"
-import { useContext } from "./hooks/useContext.js"
-import { useRef } from "./hooks/useRef.js"
-import { useRequestUpdate } from "./hooks/utils.js"
-import { hydrationStack } from "./hydration.js"
-import { flushSync, nextIdle } from "./scheduler.js"
+import { createElement } from "../element.js"
+import { __DEV__ } from "../env.js"
+import { KiruError } from "../error.js"
+import { node, renderMode } from "../globals.js"
+import { useContext } from "../hooks/useContext.js"
+import { useRef } from "../hooks/useRef.js"
+import { useRequestUpdate } from "../hooks/utils.js"
+import { hydrationStack } from "../hydration.js"
+import { flushSync, nextIdle } from "../scheduler.js"
 import {
   HYDRATION_BOUNDARY_MARKER,
   HydrationBoundaryContext,
-} from "./ssr/hydrationBoundary.js"
-import type { SomeDom } from "./types.utils"
-import { noop } from "./utils.js"
+} from "../ssr/hydrationBoundary.js"
+import { noop } from "../utils/index.js"
+import type { SomeDom } from "../types.utils"
 
 interface FCModule {
   default: Kiru.FC<any>

package/src/{memo.ts → components/memo.ts}

@@ -1,6 +1,6 @@
-import { $MEMO } from "./constants.js"
-import { createElement } from "./element.js"
-import { __DEV__ } from "./env.js"
+import { $MEMO } from "../constants.js"
+import { createElement } from "../element.js"
+import { __DEV__ } from "../env.js"
 
 function _arePropsEqual<T extends Record<string, unknown>>(
   prevProps: T,

package/src/{portal.ts → components/portal.ts}

@@ -1,9 +1,9 @@
-import { FLAG_STATIC_DOM } from "./constants.js"
-import { __DEV__ } from "./env.js"
-import { KiruError } from "./error.js"
-import { renderMode } from "./globals.js"
-import { useVNode } from "./hooks/utils.js"
-import { nextIdle, requestUpdate } from "./scheduler.js"
+import { FLAG_STATIC_DOM } from "../constants.js"
+import { __DEV__ } from "../env.js"
+import { KiruError } from "../error.js"
+import { renderMode } from "../globals.js"
+import { useVNode } from "../hooks/utils.js"
+import { nextIdle, requestUpdate } from "../scheduler.js"
 
 interface PortalProps {
   children?: JSX.Children

package/src/{router → components/router}/route.ts

@@ -1,4 +1,4 @@
-import { isVNode } from "../utils.js"
+import { isVNode } from "../../utils/index.js"
 
 interface RouteProps {
   /**

package/src/{router → components/router}/router.ts

@@ -1,23 +1,23 @@
-import { createElement } from "../element.js"
+import { createElement } from "../../element.js"
 import {
   useState,
   useMemo,
   useContext,
   useLayoutEffect,
   useRef,
-} from "../hooks/index.js"
-import { __DEV__ } from "../env.js"
+} from "../../hooks/index.js"
+import { __DEV__ } from "../../env.js"
+import { createContext } from "../../context.js"
+import { isRoute, Route } from "./route.js"
+import { noop } from "../../utils/index.js"
+import { node } from "../../globals.js"
+import type { ElementProps } from "../../types.js"
+import { flushSync, nextIdle } from "../../scheduler.js"
 import {
   parsePathParams,
   parseSearchParams,
   routeMatchesPath,
 } from "./routerUtils.js"
-import { createContext } from "../context.js"
-import { isRoute, Route } from "./route.js"
-import { noop } from "../utils.js"
-import { node } from "../globals.js"
-import type { ElementProps } from "../types"
-import { flushSync, nextIdle } from "../scheduler.js"
 
 export interface LinkProps extends Omit<ElementProps<"a">, "href"> {
   /**

package/src/{transition.ts → components/transition.ts}

@@ -1,8 +1,8 @@
-import { useCallback } from "./hooks/useCallback.js"
-import { useEffect } from "./hooks/useEffect.js"
-import { useLayoutEffect } from "./hooks/useLayoutEffect.js"
-import { useRef } from "./hooks/useRef.js"
-import { useState } from "./hooks/useState.js"
+import { useCallback } from "../hooks/useCallback.js"
+import { useEffect } from "../hooks/useEffect.js"
+import { useLayoutEffect } from "../hooks/useLayoutEffect.js"
+import { useRef } from "../hooks/useRef.js"
+import { useState } from "../hooks/useState.js"
 
 export type TransitionState = "entering" | "entered" | "exiting" | "exited"
 interface TransitionProps {

package/src/constants.ts

@@ -19,7 +19,7 @@ export {
   FLAG_DIRTY,
 }
 
-export { voidElements, svgTags, booleanAttributes }
+export { voidElements, svgTags, booleanAttributes, snakeCaseAttributes }
 
 const $SIGNAL = Symbol.for("kiru.signal")
 const $CONTEXT = Symbol.for("kiru.context")
@@ -155,3 +155,82 @@ const booleanAttributes = new Set([
   "translate",
   "wrap",
 ])
+
+const snakeCaseAttributes = new Map([
+  ["acceptCharset", "accept-charset"],
+  ["accentHeight", "accent-height"],
+  ["alignmentBaseline", "alignment-baseline"],
+  ["arabicForm", "arabic-form"],
+  ["baselineShift", "baseline-shift"],
+  ["capHeight", "cap-height"],
+  ["clipPath", "clip-path"],
+  ["clipRule", "clip-rule"],
+  ["colorInterpolation", "color-interpolation"],
+  ["colorInterpolationFilters", "color-interpolation-filters"],
+  ["colorProfile", "color-profile"],
+  ["colorRendering", "color-rendering"],
+  ["dominantBaseline", "dominant-baseline"],
+  ["enableBackground", "enable-background"],
+  ["fillOpacity", "fill-opacity"],
+  ["fillRule", "fill-rule"],
+  ["floodColor", "flood-color"],
+  ["floodOpacity", "flood-opacity"],
+  ["fontFamily", "font-family"],
+  ["fontSize", "font-size"],
+  ["fontSizeAdjust", "font-size-adjust"],
+  ["fontStretch", "font-stretch"],
+  ["fontStyle", "font-style"],
+  ["fontVariant", "font-variant"],
+  ["fontWeight", "font-weight"],
+  ["glyphName", "glyph-name"],
+  ["glyphOrientationHorizontal", "glyph-orientation-horizontal"],
+  ["glyphOrientationVertical", "glyph-orientation-vertical"],
+  ["horizAdvX", "horiz-adv-x"],
+  ["horizOriginX", "horiz-origin-x"],
+  ["httpEquiv", "http-equiv"],
+  ["imageRendering", "image-rendering"],
+  ["letterSpacing", "letter-spacing"],
+  ["lightingColor", "lighting-color"],
+  ["markerEnd", "marker-end"],
+  ["markerMid", "marker-mid"],
+  ["markerStart", "marker-start"],
+  ["overlinePosition", "overline-position"],
+  ["overlineThickness", "overline-thickness"],
+  ["paintOrder", "paint-order"],
+  ["panose-1", "panose-1"],
+  ["pointerEvents", "pointer-events"],
+  ["renderingIntent", "rendering-intent"],
+  ["shapeRendering", "shape-rendering"],
+  ["stopColor", "stop-color"],
+  ["stopOpacity", "stop-opacity"],
+  ["strikethroughPosition", "strikethrough-position"],
+  ["strikethroughThickness", "strikethrough-thickness"],
+  ["strokeDasharray", "stroke-dasharray"],
+  ["strokeDashoffset", "stroke-dashoffset"],
+  ["strokeLinecap", "stroke-linecap"],
+  ["strokeLinejoin", "stroke-linejoin"],
+  ["strokeMiterlimit", "stroke-miterlimit"],
+  ["strokeOpacity", "stroke-opacity"],
+  ["strokeWidth", "stroke-width"],
+  ["textAnchor", "text-anchor"],
+  ["textDecoration", "text-decoration"],
+  ["textRendering", "text-rendering"],
+  ["transformOrigin", "transform-origin"],
+  ["underlinePosition", "underline-position"],
+  ["underlineThickness", "underline-thickness"],
+  ["unicodeBidi", "unicode-bidi"],
+  ["unicodeRange", "unicode-range"],
+  ["unitsPerEm", "units-per-em"],
+  ["vAlphabetic", "v-alphabetic"],
+  ["vHanging", "v-hanging"],
+  ["vIdeographic", "v-ideographic"],
+  ["vMathematical", "v-mathematical"],
+  ["vectorEffect", "vector-effect"],
+  ["vertAdvY", "vert-adv-y"],
+  ["vertOriginX", "vert-origin-x"],
+  ["vertOriginY", "vert-origin-y"],
+  ["wordSpacing", "word-spacing"],
+  ["writingMode", "writing-mode"],
+  ["xmlnsXlink", "xmlns:xlink"],
+  ["xHeight", "x-height"],
+])

package/src/context.ts

@@ -4,7 +4,7 @@ import { __DEV__ } from "./env.js"
 import { GenericHMRAcceptor } from "./hmr.js"
 import { useState } from "./hooks/useState.js"
 import { requestUpdate } from "./scheduler.js"
-import { traverseApply } from "./utils.js"
+import { traverseApply } from "./utils/index.js"
 
 export function createContext<T>(defaultValue: T): Kiru.Context<T> {
   const ctx: Kiru.Context<T> = {

package/src/customEvents.ts

@@ -1,22 +1,22 @@
-export class CustomEvents {
-  private constructor() {}
-
-  static on<K extends keyof Kiru.CustomEvents & string>(
-    type: K,
-    callback: (event: CustomEvent<Kiru.CustomEvents[K]>) => void
-  ) {
-    window.addEventListener(type, callback as unknown as EventListener)
-    return () =>
-      window.removeEventListener(type, callback as unknown as EventListener)
-  }
-
-  static dispatch<K extends keyof Kiru.CustomEvents & string>(
-    type: K,
-    detail: Kiru.CustomEvents[K],
-    target?: Element
-  ) {
-    ;(target || document).dispatchEvent(
-      new CustomEvent(type, { detail, bubbles: true })
-    )
-  }
-}
+export class CustomEvents {
+  private constructor() {}
+
+  static on<K extends keyof Kiru.CustomEvents & string>(
+    type: K,
+    callback: (event: CustomEvent<Kiru.CustomEvents[K]>) => void
+  ) {
+    window.addEventListener(type, callback as unknown as EventListener)
+    return () =>
+      window.removeEventListener(type, callback as unknown as EventListener)
+  }
+
+  static dispatch<K extends keyof Kiru.CustomEvents & string>(
+    type: K,
+    detail: Kiru.CustomEvents[K],
+    target?: Element
+  ) {
+    ;(target || document).dispatchEvent(
+      new CustomEvent(type, { detail, bubbles: true })
+    )
+  }
+}

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
 }
 

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