kiru 1.4.0 → 1.5.0

package/src/types.dom.ts

@@ -1,5 +1,5 @@
-import type { Signal } from "./signals"
-import type { Prettify, Signalable } from "./types.utils"
+import type { Signal } from "./signals/base.js"
+import type { Prettify, Signalable } from "./types.utils.js"
 
 export type {
   HTMLTagToElement,
@@ -16,8 +16,8 @@ type HTMLTagToElement<T extends keyof HtmlElementAttributes> =
   T extends keyof HTMLElementTagNameMap
     ? HTMLElementTagNameMap[T]
     : T extends keyof HTMLElementDeprecatedTagNameMap
-    ? HTMLElementDeprecatedTagNameMap[T]
-    : never
+      ? HTMLElementDeprecatedTagNameMap[T]
+      : never
 
 type SVGTagToElement<T extends keyof SvgElementAttributes> =
   T extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[T] : never
@@ -369,53 +369,81 @@ declare global {
       bivarianceHack(event: E): void
     }["bivarianceHack"]
 
-    interface BaseEvent<T extends DomElement = DomElement>
-      extends DOMEvent<Event, T> {}
-
-    interface AnimationEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeAnimationEvent, T> {}
-
-    interface ClipboardEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeClipboardEvent, T> {}
-
-    interface CompositionEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeCompositionEvent, T> {}
-
-    interface DragEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeDragEvent, T> {}
-
-    interface FocusEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeFocusEvent, T> {}
-
-    interface FormEvent<T extends DomElement = DomElement>
-      extends DOMEvent<Event, T> {}
-
-    interface KeyboardEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeKeyboardEvent, T> {}
-
-    interface MouseEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeMouseEvent, T> {}
-
-    interface PointerEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativePointerEvent, T> {}
-
-    interface SubmitEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeSubmitEvent, T> {}
-
-    interface TouchEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeTouchEvent, T> {}
-
-    interface ToggleEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeToggleEvent, T> {}
-
-    interface TransitionEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeTransitionEvent, T> {}
-
-    interface UIEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeUIEvent, T> {}
-
-    interface WheelEvent<T extends DomElement = DomElement>
-      extends DOMEvent<NativeWheelEvent, T> {}
+    interface BaseEvent<T extends DomElement = DomElement> extends DOMEvent<
+      Event,
+      T
+    > {}
+
+    interface AnimationEvent<
+      T extends DomElement = DomElement,
+    > extends DOMEvent<NativeAnimationEvent, T> {}
+
+    interface ClipboardEvent<
+      T extends DomElement = DomElement,
+    > extends DOMEvent<NativeClipboardEvent, T> {}
+
+    interface CompositionEvent<
+      T extends DomElement = DomElement,
+    > extends DOMEvent<NativeCompositionEvent, T> {}
+
+    interface DragEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeDragEvent,
+      T
+    > {}
+
+    interface FocusEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeFocusEvent,
+      T
+    > {}
+
+    interface FormEvent<T extends DomElement = DomElement> extends DOMEvent<
+      Event,
+      T
+    > {}
+
+    interface KeyboardEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeKeyboardEvent,
+      T
+    > {}
+
+    interface MouseEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeMouseEvent,
+      T
+    > {}
+
+    interface PointerEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativePointerEvent,
+      T
+    > {}
+
+    interface SubmitEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeSubmitEvent,
+      T
+    > {}
+
+    interface TouchEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeTouchEvent,
+      T
+    > {}
+
+    interface ToggleEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeToggleEvent,
+      T
+    > {}
+
+    interface TransitionEvent<
+      T extends DomElement = DomElement,
+    > extends DOMEvent<NativeTransitionEvent, T> {}
+
+    interface UIEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeUIEvent,
+      T
+    > {}
+
+    interface WheelEvent<T extends DomElement = DomElement> extends DOMEvent<
+      NativeWheelEvent,
+      T
+    > {}
 
     type BaseEventHandler<T extends DomElement = DomElement> = EventHandler<
       BaseEvent<T>
@@ -466,8 +494,9 @@ declare global {
       ) => void
     }
 
-    interface EventAttributes<T extends DomElement = DomElement>
-      extends CustomEventAttributes {
+    interface EventAttributes<
+      T extends DomElement = DomElement,
+    > extends CustomEventAttributes {
       // Clipboard Events
       oncopy?: ClipboardEventHandler<T> | undefined
       oncut?: ClipboardEventHandler<T> | undefined
@@ -1035,6 +1064,7 @@ interface HtmlElementAttributes {
       ev: PictureInPictureEvent
     ) => void
   }
+  wbr: {}
 }
 
 interface SvgGlobalAttributes {
@@ -1091,6 +1121,46 @@ interface FeFuncAttributes {
 }
 
 interface SvgElementAttributes {
+  animate: {
+    begin?: string
+    dur?: string
+    end?: string
+    min?: string
+    max?: string
+    restart?: "always" | "whenNotActive" | "never"
+    repeatCount?: "indefinite" | number
+    repeatDur?: string
+    fill?: "freeze" | "remove" | "default"
+    calcMode?: "linear" | "discrete" | "spline" | "paced"
+    keyTimes?: string
+    keySplines?: string
+    values?: string
+    from?: string
+    to?: string
+    by?: string
+    attributeName?: string
+    attributeType?: "CSS" | "XML"
+    additive?: "replace" | "sum"
+    accumulate?: "none" | "sum"
+  }
+  animateMotion: {
+    begin?: string
+    dur?: string
+    end?: string
+    min?: string
+    max?: string
+    restart?: "always" | "whenNotActive" | "never"
+    repeatCount?: "indefinite" | number
+    repeatDur?: string
+    fill?: "freeze" | "remove" | "default"
+    calcMode?: "linear" | "discrete" | "spline" | "paced"
+    keyTimes?: string
+    keySplines?: string
+    path?: string
+    keyPoints?: string
+    rotate?: "none" | (string & {})
+    origin?: string
+  }
   animateTransform: {
     begin?: string
     dur?: string
@@ -1126,6 +1196,69 @@ interface SvgElementAttributes {
   }
   defs: {}
   desc: {}
+  foreignObject: {
+    x?: string | number
+    y?: string | number
+    width?: string | number
+    height?: string | number
+    requiredExtensions?: string
+    requiredFeatures?: string
+    systemLanguage?: string
+  }
+  marker: {
+    markerUnits?: "userSpaceOnUse" | "strokeWidth"
+    markerWidth?: string | number
+    markerHeight?: string | number
+    refX?: string | number
+    refY?: string | number
+    orient?: "auto" | "auto-start-reverse" | string
+    viewBox?: string
+  }
+  metadata: {}
+  mpath: {
+    href?: string
+    "xlink:href"?: string
+  }
+  set: {
+    begin?: string
+    dur?: string
+    end?: string
+    min?: string
+    max?: string
+    restart?: "always" | "whenNotActive" | "never"
+    repeatCount?: "indefinite" | number
+    repeatDur?: string
+    fill?: "freeze" | "remove" | "default"
+    attributeName?: string
+    attributeType?: "CSS" | "XML"
+    to?: string
+  }
+  switch: {
+    requiredExtensions?: string
+    requiredFeatures?: string
+    systemLanguage?: string
+  }
+  symbol: {
+    x?: string | number
+    y?: string | number
+    width?: string | number
+    height?: string | number
+    viewBox?: string
+    preserveAspectRatio?: string
+  }
+  use: {
+    href?: string
+    "xlink:href"?: string
+    x?: string | number
+    y?: string | number
+    width?: string | number
+    height?: string | number
+  }
+  view: {
+    viewBox?: string
+    preserveAspectRatio?: string
+    zoomAndPan?: "magnify" | "disable" | string
+  }
   ellipse: SvgStrokeAttributes & {
     cx?: string | number
     cy?: string | number
@@ -1140,6 +1273,90 @@ interface SvgElementAttributes {
     in2?: string
     result?: string
   }
+  feColorMatrix: {
+    in?: string
+    type?: "matrix" | "saturate" | "hueRotate" | "luminanceToAlpha"
+    values?: string
+    result?: string
+  }
+  feComposite: {
+    in?: string
+    in2?: string
+    operator?: "over" | "in" | "out" | "atop" | "xor" | "arithmetic"
+    k1?: string | number
+    k2?: string | number
+    k3?: string | number
+    k4?: string | number
+    result?: string
+  }
+  feConvolveMatrix: {
+    in?: string
+    order?: string
+    kernelMatrix?: string
+    divisor?: string | number
+    bias?: string | number
+    targetX?: string | number
+    targetY?: string | number
+    edgeMode?: "duplicate" | "wrap" | "none"
+    preserveAlpha?: boolean
+    result?: string
+  }
+  feDiffuseLighting: {
+    in?: string
+    surfaceScale?: string | number
+    diffuseConstant?: string | number
+    kernelUnitLength?: string
+    lightingColor?: string
+    azimuth?: string | number
+    elevation?: string | number
+    result?: string
+  }
+  feImage: {
+    x?: string | number
+    y?: string | number
+    width?: string | number
+    height?: string | number
+    preserveAspectRatio?: string
+    href?: string
+    result?: string
+  }
+  feMerge: {
+    result?: string
+  }
+  feMergeNode: {
+    in?: string
+  }
+  feMorphology: {
+    in?: string
+    operator?: "erode" | "dilate"
+    radius?: string | number
+    result?: string
+  }
+  feOffset: {
+    in?: string
+    dx?: string | number
+    dy?: string | number
+    result?: string
+  }
+  feSpecularLighting: {
+    in?: string
+    surfaceScale?: string | number
+    specularConstant?: string | number
+    specularExponent?: string | number
+    kernelUnitLength?: string
+    lightingColor?: string
+    azimuth?: string | number
+    elevation?: string | number
+    result?: string
+  }
+  feTile: {
+    in?: string
+    x?: string | number
+    y?: string | number
+    width?: string | number
+    height?: string | number
+    result?: string
+  }
   feFuncR: FeFuncAttributes
   feFuncG: FeFuncAttributes
   feFuncB: FeFuncAttributes

package/src/types.ts

@@ -1,6 +1,11 @@
-import type { Signal as SignalClass } from "./signals"
-import type { $CONTEXT, $ERROR_BOUNDARY, $FRAGMENT } from "./constants"
-import type { KiruGlobalContext } from "./globalContext"
+import type { Signal as SignalClass } from "./signals/base.js"
+import type {
+  $CONTEXT,
+  $ERROR_BOUNDARY,
+  $FRAGMENT,
+  $INLINE_FN,
+} from "./constants.js"
+import type { KiruGlobalContext } from "./globalContext.js"
 import type {
   GlobalAttributes,
   HtmlElementAttributes,
@@ -10,14 +15,14 @@ import type {
   HtmlElementBindableProps,
   HTMLTagToElement,
   SVGTagToElement,
-} from "./types.dom"
+} from "./types.dom.js"
 import type {
   AsyncTaskState,
   Prettify,
   Signalable,
   SomeDom,
-} from "./types.utils"
-import type { AppHandle } from "./appHandle"
+} from "./types.utils.js"
+import type { AppHandle } from "./appHandle.js"
 
 export type { AsyncTaskState, ElementProps, Prettify, Signalable, StyleObject }
 
@@ -131,7 +136,6 @@ declare global {
       input: HTMLElementProps<"input">
       ins: HTMLElementProps<"ins">
       kbd: HTMLElementProps<"kbd">
-      //keygen: HTMLElementProps<"keygen">
       label: HTMLElementProps<"label">
       legend: HTMLElementProps<"legend">
       li: HTMLElementProps<"li">
@@ -140,7 +144,6 @@ declare global {
       map: HTMLElementProps<"map">
       mark: HTMLElementProps<"mark">
       menu: HTMLElementProps<"menu">
-      //menuitem: HTMLElementProps<"menuitem">
       meta: HTMLElementProps<"meta">
       meter: HTMLElementProps<"meter">
       nav: HTMLElementProps<"nav">
@@ -187,12 +190,11 @@ declare global {
       ul: HTMLElementProps<"ul">
       var: HTMLElementProps<"var">
       video: HTMLElementProps<"video">
-      //wbr: HTMLElementProps<"wbr">
-      //webview: HTMLElementProps<"webview">
+      wbr: HTMLElementProps<"wbr">
 
       // SVG
-      // animate: SVGElementProps<"animate">
-      // animateMotion: SVGElementProps<"animateMotion">
+      animate: SVGElementProps<"animate">
+      animateMotion: SVGElementProps<"animateMotion">
       animateTransform: SVGElementProps<"animateTransform">
       circle: SVGElementProps<"circle">
       clipPath: SVGElementProps<"clipPath">
@@ -200,11 +202,11 @@ declare global {
       desc: SVGElementProps<"desc">
       ellipse: SVGElementProps<"ellipse">
       feBlend: SVGElementProps<"feBlend">
-      //feColorMatrix: SVGElementProps<"feColorMatrix">
+      feColorMatrix: SVGElementProps<"feColorMatrix">
       feComponentTransfer: SVGElementProps<"feComponentTransfer">
-      // feComposite: SVGElementProps<"feComposite">
-      // feConvolveMatrix: SVGElementProps<"feConvolveMatrix">
-      // feDiffuseLighting: SVGElementProps<"feDiffuseLighting">
+      feComposite: SVGElementProps<"feComposite">
+      feConvolveMatrix: SVGElementProps<"feConvolveMatrix">
+      feDiffuseLighting: SVGElementProps<"feDiffuseLighting">
       feDisplacementMap: SVGElementProps<"feDisplacementMap">
       feDropShadow: SVGElementProps<"feDropShadow">
       feFlood: SVGElementProps<"feFlood">
@@ -213,40 +215,41 @@ declare global {
       feFuncG: SVGElementProps<"feFuncG">
       feFuncR: SVGElementProps<"feFuncR">
       feGaussianBlur: SVGElementProps<"feGaussianBlur">
-      // feImage: SVGElementProps<"feImage">
-      // feMerge: SVGElementProps<"feMerge">
-      // feMergeNode: SVGElementProps<"feMergeNode">
-      // feMorphology: SVGElementProps<"feMorphology">
-      // feOffset: SVGElementProps<"feOffset">
-      // feSpecularLighting: SVGElementProps<"feSpecularLighting">
-      // feTile: SVGElementProps<"feTile">
+      feImage: SVGElementProps<"feImage">
+      feMerge: SVGElementProps<"feMerge">
+      feMergeNode: SVGElementProps<"feMergeNode">
+      feMorphology: SVGElementProps<"feMorphology">
+      feOffset: SVGElementProps<"feOffset">
+      feSpotLight: SVGElementProps<"feSpotLight">
+      feSpecularLighting: SVGElementProps<"feSpecularLighting">
+      feTile: SVGElementProps<"feTile">
       feTurbulence: SVGElementProps<"feTurbulence">
       filter: SVGElementProps<"filter">
-      // foreignObject: SVGElementProps<"foreignObject">
+      foreignObject: SVGElementProps<"foreignObject">
       g: SVGElementProps<"g">
       image: SVGElementProps<"image">
       line: SVGElementProps<"line">
       linearGradient: SVGElementProps<"linearGradient">
-      // marker: SVGElementProps<"marker">
+      marker: SVGElementProps<"marker">
       mask: SVGElementProps<"mask">
-      // metadata: SVGElementProps<"metadata">
-      // mpath: SVGElementProps<"mpath">
+      metadata: SVGElementProps<"metadata">
+      mpath: SVGElementProps<"mpath">
       path: SVGElementProps<"path">
       pattern: SVGElementProps<"pattern">
       polygon: SVGElementProps<"polygon">
       polyline: SVGElementProps<"polyline">
       radialGradient: SVGElementProps<"radialGradient">
       rect: SVGElementProps<"rect">
-      // set: SVGElementProps<"set">
+      set: SVGElementProps<"set">
       stop: SVGElementProps<"stop">
-      // switch: SVGElementProps<"switch">
-      // symbol: SVGElementProps<"symbol">
+      switch: SVGElementProps<"switch">
+      symbol: SVGElementProps<"symbol">
       text: SVGElementProps<"text">
       textPath: SVGElementProps<"textPath">
       tspan: SVGElementProps<"tspan">
       svg: SVGElementProps<"svg">
-      // use: SVGElementProps<"use">
-      // view: SVGElementProps<"view">
+      use: SVGElementProps<"use">
+      view: SVGElementProps<"view">
     }
 
     interface IntrinsicAttributes {
@@ -332,6 +335,7 @@ declare global {
       | typeof $FRAGMENT
       | typeof $CONTEXT
       | typeof $ERROR_BOUNDARY
+      | typeof $INLINE_FN
 
     interface Element {
       type:

package/src/types.utils.ts

@@ -1,26 +1,53 @@
-import type { $CONTEXT, $ERROR_BOUNDARY, $FRAGMENT } from "./constants"
-import type { Signal } from "./signals"
-import type { ErrorBoundaryProps } from "./components/errorBoundary"
+import type {
+  $CONTEXT,
+  $ERROR_BOUNDARY,
+  $FRAGMENT,
+  $INLINE_FN,
+} from "./constants.js"
+import type { Signal } from "./signals/base.js"
+import type { ErrorBoundaryProps } from "./components/errorBoundary.js"
 
-export type SomeElement = HTMLElement | SVGElement
-export type SomeDom = HTMLElement | SVGElement | Text
-export type MaybeElement = SomeElement | undefined
-export type MaybeDom = SomeDom | undefined
+export type {
+  SomeElement,
+  SomeDom,
+  MaybeElement,
+  MaybeDom,
+  FunctionVNode,
+  ElementVNode,
+  DomVNode,
+  ContextNode,
+  ErrorBoundaryNode,
+  FragmentNode,
+  InlineFnNode,
+  Prettify,
+  Signalable,
+  AsyncTaskState,
+  Guard,
+  ArrayHas,
+  RecordHas,
+  Falsy,
+  Truthy,
+}
+
+type SomeElement = HTMLElement | SVGElement
+type SomeDom = HTMLElement | SVGElement | Text
+type MaybeElement = SomeElement | undefined
+type MaybeDom = SomeDom | undefined
 
-export interface FunctionVNode extends Kiru.VNode {
+interface FunctionVNode extends Kiru.VNode {
   type: (props: Record<string, unknown>) => JSX.Element
 }
 
-export interface ElementVNode extends Kiru.VNode {
+interface ElementVNode extends Kiru.VNode {
   dom: SomeElement
   type: string
 }
-export interface DomVNode extends Kiru.VNode {
+interface DomVNode extends Kiru.VNode {
   dom: SomeDom
   type: "#text" | (string & {})
 }
 
-export interface ContextNode<T> extends Kiru.VNode {
+interface ContextNode<T> extends Kiru.VNode {
   type: typeof $CONTEXT
   props: Kiru.VNode["props"] & {
     value: T
@@ -28,23 +55,30 @@ export interface ContextNode<T> extends Kiru.VNode {
   }
 }
 
-export interface ErrorBoundaryNode extends Kiru.VNode {
+interface ErrorBoundaryNode extends Kiru.VNode {
   type: typeof $ERROR_BOUNDARY
   props: ErrorBoundaryProps
   error?: Error
 }
 
-export interface FragmentNode extends Kiru.VNode {
+interface FragmentNode extends Kiru.VNode {
   type: typeof $FRAGMENT
 }
 
-export type Prettify<T> = {
+interface InlineFnNode extends Kiru.VNode {
+  type: typeof $INLINE_FN
+  props: {
+    expr: () => JSX.Element
+  }
+}
+
+type Prettify<T> = {
   [K in keyof T]: T[K]
 } & {}
 
-export type Signalable<T> = T | Signal<T>
+type Signalable<T> = T | Signal<T>
 
-export type AsyncTaskState<T, E extends Error = Error> =
+type AsyncTaskState<T, E extends Error = Error> =
   | {
       data: null
       error: null
@@ -61,19 +95,19 @@ export type AsyncTaskState<T, E extends Error = Error> =
       loading: false
     }
 
-export type Guard<T, K extends keyof T> = {
+type Guard<T, K extends keyof T> = {
   [P in K]: T[P]
 }
 
-export type ArrayHas<T extends any[], U> =
+type ArrayHas<T extends any[], U> =
   // does the union of element types intersect U?
   Extract<T[number], U> extends never ? false : true
 
-export type RecordHas<T extends Record<string, any>, U> = [
-  Extract<T[keyof T], U>
+type RecordHas<T extends Record<string, any>, U> = [
+  Extract<T[keyof T], U>,
 ] extends [never]
   ? false
   : true
 
-export type Falsy = false | 0 | 0n | "" | null | undefined
-export type Truthy<T> = Exclude<T, Falsy>
+type Falsy = false | 0 | 0n | "" | null | undefined
+type Truthy<T> = Exclude<T, Falsy>

package/src/utils/vdom.ts

@@ -5,6 +5,7 @@ import {
   FLAG_UPDATE,
   $ERROR_BOUNDARY,
   $CONTEXT,
+  $INLINE_FN,
 } from "../constants.js"
 import { createElement } from "../index.js"
 import { KiruError } from "../error.js"
@@ -70,7 +71,12 @@ function isValidTextChild(thing: unknown): thing is string | number | bigint {
 }
 
 function isExoticType(type: Kiru.VNode["type"]): type is Kiru.ExoticSymbol {
-  return type === $FRAGMENT || type === $CONTEXT || type === $ERROR_BOUNDARY
+  return (
+    type === $FRAGMENT ||
+    type === $CONTEXT ||
+    type === $ERROR_BOUNDARY ||
+    type === $INLINE_FN
+  )
 }
 
 function isFragment(