kiru 1.4.1 → 1.5.1

package/src/scheduler.ts

@@ -1,6 +1,12 @@
-import type { DomVNode, ErrorBoundaryNode, FunctionVNode } from "./types.utils"
+import type {
+  DomVNode,
+  ErrorBoundaryNode,
+  FunctionVNode,
+  InlineFnNode,
+} from "./types.utils.js"
 import {
   $ERROR_BOUNDARY,
+  $INLINE_FN,
   CONSECUTIVE_DIRTY_LIMIT,
   FLAG_DELETION,
   FLAG_DIRTY,
@@ -30,7 +36,7 @@ import { node, postEffectCleanups, renderMode, setups } from "./globals.js"
 import { hydrationStack } from "./hydration.js"
 import { reconcileChildren } from "./reconciler.js"
 import { isHmrUpdate } from "./hmr.js"
-import type { AppHandle } from "./appHandle"
+import type { AppHandle } from "./appHandle.js"
 
 type VNode = Kiru.VNode
 
@@ -298,7 +304,18 @@ function updateExoticComponent(vNode: VNode): VNode | null {
   const { props, type } = vNode
   let children = props.children
 
-  if (type === $ERROR_BOUNDARY) {
+  if (type === $INLINE_FN) {
+    node.current = vNode
+    let render = (props as InlineFnNode["props"]).expr
+    if (__DEV__) {
+      render = latest(render)
+    }
+    try {
+      children = render()
+    } finally {
+      node.current = null
+    }
+  } else if (type === $ERROR_BOUNDARY) {
     const n = vNode as ErrorBoundaryNode
     const { error } = n
     if (error) {

package/src/signals/base.ts

@@ -5,8 +5,14 @@ import {
   generateRandomID,
   registerVNodeCleanup,
 } from "../utils/index.js"
-import { $DEV_FILE_LINK, $HMR_ACCEPT, $SIGNAL } from "../constants.js"
+import {
+  $DEV_FILE_LINK,
+  $HMR_ACCEPT,
+  $INLINE_FN,
+  $SIGNAL,
+} from "../constants.js"
 import { __DEV__, isBrowser } from "../env.js"
+import { KiruError } from "../error.js"
 import { node } from "../globals.js"
 import { requestUpdate } from "../scheduler.js"
 import { tracking } from "./tracking.js"
@@ -58,7 +64,15 @@ export class Signal<T> {
 
     const n = node.current
     if (n) {
-      registerVNodeCleanup(n, this.$id, Signal.dispose.bind(null, this))
+      if (__DEV__ && n.type === $INLINE_FN) {
+        throw new KiruError({
+          message: "Signals cannot be created inside inline functions",
+          vNode: n,
+        })
+      }
+      if (sideEffectsEnabled()) {
+        registerVNodeCleanup(n, this.$id, Signal.dispose.bind(null, this))
+      }
     }
   }
 
@@ -151,6 +165,10 @@ export class Signal<T> {
     return typeof x === "object" && !!x && $SIGNAL in x
   }
 
+  static id(signal: Signal<any>) {
+    return signal.$id
+  }
+
   static subscribers(signal: Signal<any>) {
     return signal.$subs
   }

package/src/signals/effect.ts

@@ -11,6 +11,8 @@ import {
 import type { Signal } from "./base.js"
 import type { SignalValues } from "./types.js"
 import { node } from "../globals.js"
+import { $INLINE_FN } from "../constants.js"
+import { KiruError } from "../error.js"
 
 type EffectCallbackReturn = (() => void) | void
 
@@ -37,6 +39,12 @@ export class Effect<const Deps extends readonly Signal<unknown>[] = []> {
     }
     const n = node.current
     if (n) {
+      if (__DEV__ && n.type === $INLINE_FN) {
+        throw new KiruError({
+          message: "Effects cannot be created inside inline functions",
+          vNode: n,
+        })
+      }
       if (!sideEffectsEnabled()) return // prevent side effects in non-browser environments
       registerVNodeCleanup(n, this.id, this.stop.bind(this))
     }

package/src/signals/tracking.ts

@@ -9,7 +9,7 @@ export type TrackingStackObservations = Map<string, Signal<unknown>>
 export const tracking = {
   enabled: true,
   stack: new Array<TrackingStackObservations>(),
-  current: function (): TrackingStackObservations | undefined {
+  current(): TrackingStackObservations | undefined {
     return this.stack[this.stack.length - 1]
   },
 }
@@ -32,25 +32,19 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
   ctx: TrackedExecutionContext<T, Deps>
 ): T {
   const { id, subs, fn, deps = [], onDepChanged } = ctx
-  let observations: Map<string, Signal<unknown>> | undefined
+  let observations: TrackingStackObservations | undefined
 
   effectQueue.delete(id)
-  const isServer = !!node.current && !sideEffectsEnabled()
 
-  if (!isServer) {
-    observations = new Map<string, Signal<unknown>>()
+  // Prevent side effects in non-browser environments while rendering
+  if (!node.current || sideEffectsEnabled()) {
+    observations = new Map()
     tracking.stack.push(observations)
   }
 
   const result = fn(...(deps.map((s) => s.value) as SignalValues<Deps>))
 
-  if (!isServer) {
-    for (const [id, unsub] of subs) {
-      if (observations!.has(id)) continue
-      unsub()
-      subs.delete(id)
-    }
-
+  if (observations) {
     const effect = () => {
       if (!effectQueue.size) {
         queueMicrotask(tick)
@@ -58,11 +52,19 @@ export function executeWithTracking<T, Deps extends readonly Signal<unknown>[]>(
       effectQueue.set(id, onDepChanged)
     }
 
-    for (const [id, sig] of observations!) {
-      if (subs.has(id)) continue
-      const unsub = sig.subscribe(effect)
-      subs.set(id, unsub)
+    for (const [id, signal] of observations) {
+      if (!subs.has(id)) {
+        subs.set(id, signal.subscribe(effect))
+      }
     }
+
+    for (const [id, unsub] of subs) {
+      if (!observations.has(id)) {
+        unsub()
+        subs.delete(id)
+      }
+    }
+
     tracking.stack.pop()
   }
 

package/src/ssr/client.ts

@@ -1,4 +1,4 @@
-import type { AppHandle, AppHandleOptions } from "../appHandle"
+import type { AppHandle, AppHandleOptions } from "../appHandle.js"
 import { hydrationStack } from "../hydration.js"
 import { hydrationMode, renderMode } from "../globals.js"
 import { mount } from "../index.js"

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