kiru 0.54.3 → 1.0.1

package/dist/viewTransitions.js

@@ -0,0 +1,71 @@
+import { flushSync } from "./scheduler.js";
+export var ViewTransitions;
+(function (ViewTransitions) {
+    const jobs = [];
+    let running = false;
+    let scheduled = false;
+    let transition = null;
+    const supported = "window" in globalThis && typeof document.startViewTransition === "function";
+    function run(callback, options) {
+        const signal = options?.signal;
+        return new Promise((resolve) => {
+            const job = async () => {
+                const result = await callback();
+                resolve(result);
+            };
+            jobs.push(job);
+            signal?.addEventListener("abort", () => {
+                const i = jobs.indexOf(job);
+                if (i !== -1) {
+                    jobs.splice(i, 1);
+                }
+                else {
+                    transition?.skipTransition();
+                }
+            }, { once: true });
+            schedule();
+        });
+    }
+    ViewTransitions.run = run;
+    function stop() {
+        transition?.skipTransition();
+        transition = null;
+        jobs.length = 0;
+        running = false;
+        scheduled = false;
+    }
+    ViewTransitions.stop = stop;
+    function schedule() {
+        if (scheduled)
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            runJobs();
+        });
+    }
+    async function runJobs() {
+        if (running || jobs.length === 0)
+            return;
+        running = true;
+        const __jobs = [...jobs];
+        jobs.length = 0;
+        const runJobs = async () => {
+            await Promise.all(__jobs.map((j) => j()));
+            flushSync();
+        };
+        if (!supported) {
+            await runJobs();
+        }
+        else {
+            transition = document.startViewTransition(runJobs);
+            await transition.finished;
+        }
+        transition = null;
+        running = false;
+        if (jobs.length > 0) {
+            schedule();
+        }
+    }
+})(ViewTransitions || (ViewTransitions = {}));
+//# sourceMappingURL=viewTransitions.js.map

package/dist/viewTransitions.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiru",
-  "version": "0.54.3",
+  "version": "1.0.1",
   "description": "A batteries-included, easy-to-use rendering library with a tiny footprint",
   "main": "dist/index.js",
   "type": "module",

package/src/{appContext.ts → appHandle.ts}

@@ -2,17 +2,18 @@ import { FLAG_STATIC_DOM } from "./constants.js"
 import { __DEV__ } from "./env.js"
 import { renderRootSync, requestUpdate } from "./scheduler.js"
 import { createVNode } from "./vNode.js"
+import type { SomeDom } from "./types.utils.js"
 
 type VNode = Kiru.VNode
 
-export interface AppContextOptions {
+export interface AppHandleOptions {
   /**
    * App name - shown in devtools
    */
   name?: string
 }
 
-export interface AppContext {
+export interface AppHandle {
   id: number
   name: string
   rootNode: VNode
@@ -24,9 +25,9 @@ let appId = 0
 
 export function mount(
   children: JSX.Element,
-  container: HTMLElement,
-  options?: AppContextOptions
-): AppContext {
+  container: Kiru.ContainerElement,
+  options?: AppHandleOptions
+): AppHandle {
   if (__DEV__) {
     if (container.__kiruNode) {
       throw new Error(
@@ -36,7 +37,7 @@ export function mount(
   }
   const rootNode = createRootNode(container)
   const id = appId++
-  const appContext: AppContext = {
+  const app: AppHandle = {
     id,
     name: options?.name ?? `App-${id}`,
     rootNode,
@@ -45,39 +46,43 @@ export function mount(
   }
 
   function render(children: JSX.Element) {
-    rootNode.props.children = children
+    rootNode.props = { children }
     renderRootSync(rootNode)
   }
 
   function unmount() {
-    rootNode.props.children = null
+    rootNode.props = { children: null }
     renderRootSync(rootNode)
     if (__DEV__) {
-      delete container.__kiruNode
+      delete (container as HTMLElement).__kiruNode
       delete rootNode.app
     }
-    window.__kiru.emit("unmount", appContext)
+    window.__kiru.emit("unmount", app)
   }
 
   if (__DEV__) {
-    rootNode.app = appContext
+    rootNode.app = app
   }
 
   render(children)
-  window.__kiru.emit("mount", appContext, requestUpdate)
-  if (__DEV__) {
+  window.__kiru.emit("mount", app, requestUpdate)
+  // @ts-expect-error
+  if (__DEV__ && !globalThis.__KIRU_READY__) {
+    // @ts-expect-error
+    globalThis.__KIRU_READY__ = true
+
     queueMicrotask(() => {
       window.dispatchEvent(new Event("kiru:ready"))
     })
   }
 
-  return appContext
+  return app
 }
 
-function createRootNode(container: HTMLElement): Kiru.VNode {
+function createRootNode(container: Kiru.ContainerElement): Kiru.VNode {
   const node = createVNode(container.nodeName.toLowerCase())
   node.flags |= FLAG_STATIC_DOM
-  node.dom = container
+  node.dom = container as SomeDom
   if (__DEV__) {
     container.__kiruNode = node
   }

package/src/components/derive.ts

@@ -1,32 +1,33 @@
 import { node } from "../globals.js"
 import { $STREAM_DATA } from "../constants.js"
 import { requestUpdate } from "../scheduler.js"
-import { useRef } from "../hooks/index.js"
 import { Signal } from "../signals/index.js"
 import { sideEffectsEnabled } from "../utils/index.js"
 import type { RecordHas } from "../types.utils"
-import { isStatefulPromise, StreamDataThrowValue } from "../utils/promise.js"
+import { isStatefulPromise, StreamDataThrowValue } from "../statefulPromise.js"
+import { ref } from "../ref.js"
 
 export type Derivable =
   | Kiru.Signal<unknown>
-  | Kiru.StatefulPromise<unknown>
-  | Record<string, Kiru.Signal<unknown> | Kiru.StatefulPromise<unknown>>
+  | Kiru.StatefulPromiseBase<unknown>
+  | Record<string, Kiru.Signal<unknown> | Kiru.StatefulPromiseBase<unknown>>
 
-type InnerOf<T> = T extends Kiru.Signal<infer V>
-  ? V
-  : T extends Kiru.StatefulPromise<infer P>
-  ? P
-  : never
+type InnerOf<T> =
+  T extends Kiru.Signal<infer V>
+    ? V
+    : T extends Kiru.StatefulPromiseBase<infer P>
+      ? P
+      : never
 
 type UnwrapDerive<T extends Derivable> = T extends
   | Kiru.Signal<unknown>
-  | Kiru.StatefulPromise<any>
+  | Kiru.StatefulPromiseBase<any>
   ? InnerOf<T>
   : { [K in keyof T]: InnerOf<T[K]> }
 
 type RecordHasPromise<T extends Record<string, any>> = RecordHas<
   T,
-  Kiru.StatefulPromise<any>
+  Kiru.StatefulPromiseBase<any>
 >
 
 type ChildFn<T> = (value: T) => JSX.Children
@@ -36,86 +37,90 @@ export type DeriveFallbackMode = "swr" | "fallback"
 
 export interface DeriveProps<
   T extends Derivable,
-  Mode extends DeriveFallbackMode = "fallback"
+  Mode extends DeriveFallbackMode = "fallback",
 > {
   from: T
   mode?: Mode
-  children: T extends Kiru.StatefulPromise<infer U>
+  children: T extends Kiru.StatefulPromiseBase<infer U>
     ? Mode extends "swr"
       ? ChildFnWithStale<U>
       : ChildFn<U>
     : T extends Record<string, any>
-    ? RecordHasPromise<T> extends true
-      ? Mode extends "swr"
-        ? ChildFnWithStale<UnwrapDerive<T>>
+      ? RecordHasPromise<T> extends true
+        ? Mode extends "swr"
+          ? ChildFnWithStale<UnwrapDerive<T>>
+          : ChildFn<UnwrapDerive<T>>
         : ChildFn<UnwrapDerive<T>>
       : ChildFn<UnwrapDerive<T>>
-    : ChildFn<UnwrapDerive<T>>
-  fallback?: T extends Kiru.StatefulPromise<any>
+  fallback?: T extends Kiru.StatefulPromiseBase<any>
     ? JSX.Element
     : T extends Record<string, any>
-    ? RecordHasPromise<T> extends true
-      ? JSX.Element
+      ? RecordHasPromise<T> extends true
+        ? JSX.Element
+        : never
       : never
-    : never
 }
 
-export function Derive<
-  T extends Derivable,
-  U extends DeriveFallbackMode = "swr"
->(props: DeriveProps<T, U>) {
-  const { from, children, fallback, mode } = props
-  const prevSuccess = useRef<UnwrapDerive<T> | null>(null)
+type Derive = {
+  <T extends Derivable, U extends DeriveFallbackMode = "swr">(
+    props: DeriveProps<T, U>
+  ): (props: DeriveProps<T, U>) => JSX.Element
+}
 
-  const promises = new Set<Kiru.StatefulPromise<any>>()
-  let value: UnwrapDerive<T>
+export const Derive: Derive = () => {
+  return (props) => {
+    const { from, children, fallback, mode } = props
+    const prevSuccess = ref<unknown>(null)
 
-  if (isStatefulPromise(from)) {
-    promises.add(from)
-    value = from.value as UnwrapDerive<T>
-  } else if (Signal.isSignal(from)) {
-    value = from.value as UnwrapDerive<T>
-  } else {
-    const out: Record<string, any> = {}
-    for (const key in from) {
-      const v = from[key]
-      if (isStatefulPromise(v)) promises.add(v)
-      out[key] = (v as Signal<unknown> | Kiru.StatefulPromise<unknown>).value
-    }
-    value = out as UnwrapDerive<T>
-  }
+    const promises = new Set<Kiru.StatefulPromiseBase<any>>()
+    let value: unknown
 
-  if (promises.size === 0) {
-    return (children as ChildFn<UnwrapDerive<T>>)(value)
-  }
+    if (isStatefulPromise(from)) {
+      promises.add(from)
+      value = from.value as unknown
+    } else if (Signal.isSignal(from)) {
+      value = from.value as unknown
+    } else {
+      const out: Record<string, any> = {}
+      for (const key in from) {
+        const v = from[key]
+        if (isStatefulPromise(v)) promises.add(v)
+        out[key] = (
+          v as Signal<unknown> | Kiru.StatefulPromiseBase<unknown>
+        ).value
+      }
+      value = out as unknown
+    }
 
-  if (!sideEffectsEnabled()) {
-    throw {
-      [$STREAM_DATA]: {
-        fallback,
-        data: Array.from(promises),
-      },
-    } satisfies StreamDataThrowValue
-  }
+    if (promises.size === 0) {
+      return (children as ChildFn<unknown>)(value)
+    }
 
-  for (const p of promises) {
-    if (p.state === "rejected") {
-      throw p.error
+    if (!sideEffectsEnabled()) {
+      throw {
+        [$STREAM_DATA]: {
+          fallback,
+          data: Array.from(promises),
+        },
+      } satisfies StreamDataThrowValue
     }
-    if (p.state === "pending") {
-      const nodeRef = node.current!
-      Promise.allSettled(promises).then(() => requestUpdate(nodeRef))
+    for (const p of promises) {
+      if (p.state === "rejected") {
+        throw p.error
+      }
+      if (p.state === "pending") {
+        const nodeRef = node.current!
+        Promise.allSettled(promises).then(() => requestUpdate(nodeRef))
 
-      if (mode !== "fallback" && prevSuccess.current) {
-        return (children as ChildFnWithStale<UnwrapDerive<T>>)(
-          prevSuccess.current,
-          true
-        )
+        const prev = prevSuccess.current!
+        if (mode !== "fallback" && prev) {
+          return (children as ChildFnWithStale<unknown>)(prev, true)
+        }
+        return fallback
       }
-      return fallback
     }
-  }
 
-  prevSuccess.current = value
-  return (children as ChildFnWithStale<UnwrapDerive<T>>)(value, false)
+    prevSuccess.current = value
+    return (children as ChildFnWithStale<unknown>)(value, false)
+  }
 }

package/src/components/index.ts

@@ -1,6 +1,5 @@
 export { ErrorBoundary, type ErrorBoundaryProps } from "./errorBoundary.js"
 export * from "./derive.js"
 export * from "./lazy.js"
-export { memo } from "./memo.js"
 export * from "./portal.js"
 export * from "./transition.js"

package/src/components/lazy.ts

@@ -1,7 +1,8 @@
 import { createElement } from "../element.js"
 import { __DEV__ } from "../env.js"
-import { useRequestUpdate } from "../hooks/utils.js"
 import { sideEffectsEnabled } from "../utils/runtime.js"
+import { node } from "../globals.js"
+import { requestUpdate } from "../scheduler.js"
 
 interface FCModule {
   default: Kiru.FC<any>
@@ -33,7 +34,7 @@ export function lazy<T extends LazyImportValue>(
 ): Kiru.FC<LazyComponentProps<T>> {
   function LazyWrapper(props: LazyComponentProps<T>) {
     const { fallback = null, ...rest } = props
-    const requestUpdate = useRequestUpdate()
+    const nodeRef = node.current!
     if (!sideEffectsEnabled()) {
       return fallback
     }
@@ -53,13 +54,13 @@ export function lazy<T extends LazyImportValue>(
           typeof componentOrModule === "function"
             ? componentOrModule
             : componentOrModule.default
-        requestUpdate()
+        requestUpdate(nodeRef)
       })
       return fallback
     }
 
     if (cachedState.result === null) {
-      cachedState.promise.then(requestUpdate)
+      cachedState.promise.then(() => requestUpdate(nodeRef))
       return fallback
     }
 

package/src/components/portal.ts

@@ -1,8 +1,7 @@
 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 { node, renderMode } from "../globals.js"
 import { nextIdle, requestUpdate } from "../scheduler.js"
 
 interface PortalProps {
@@ -11,7 +10,7 @@ interface PortalProps {
 }
 
 export function Portal({ children, container }: PortalProps) {
-  const vNode = useVNode()
+  const vNode = node.current!
   if (!vNode.dom) {
     vNode.flags |= FLAG_STATIC_DOM
     switch (renderMode.current) {

package/src/components/transition.ts

@@ -1,12 +1,11 @@
-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 { onCleanup } from "../hooks/onCleanup.js"
+import { signal, Signal } from "../signals/base.js"
+import { effect } from "../signals/effect.js"
+import { unwrap } from "../signals/utils.js"
 
 export type TransitionState = "entering" | "entered" | "exiting" | "exited"
 interface TransitionProps {
-  in: boolean
+  in: boolean | Signal<boolean>
   /**
    * Initial state of the transition
    * @default "exited"
@@ -22,43 +21,42 @@ interface TransitionProps {
   onTransitionEnd?: (state: "entered" | "exited") => void
 }
 
-export function Transition(props: TransitionProps) {
-  const [tState, setTState] = useState<TransitionState>(
-    props.initialState || "exited"
-  )
-  const timeoutRef = useRef<number | null>(null)
+export const Transition: Kiru.FC<TransitionProps> = (props) => {
+  const tState = signal<TransitionState>(props.initialState || "exited")
+  let timeoutRef: number | null = null
 
-  useLayoutEffect(() => {
-    if (props.in && tState !== "entered" && tState !== "entering") {
+  const setTransitionState = (transitionState: TransitionState) => {
+    clearTimeout(timeoutRef)
+    tState.value = transitionState
+    if (transitionState === "entered" || transitionState === "exited") {
+      if (props.onTransitionEnd) props.onTransitionEnd(transitionState)
+    }
+  }
+
+  const queueStateChange = (transitionState: "entered" | "exited") => {
+    timeoutRef = window.setTimeout(
+      () => setTransitionState(transitionState),
+      getTiming(transitionState, props.duration)
+    )
+  }
+
+  effect(() => {
+    const newIn = unwrap(props.in, true)
+    const current = tState.peek()
+    if (newIn && current !== "entered" && current !== "entering") {
       setTransitionState("entering")
       queueStateChange("entered")
-    } else if (!props.in && tState !== "exited" && tState !== "exiting") {
+    } else if (!newIn && current !== "exited" && current !== "exiting") {
       setTransitionState("exiting")
       queueStateChange("exited")
     }
-  }, [props.in, tState])
+  })
 
-  useEffect(() => () => clearTimeout(timeoutRef.current), [])
+  onCleanup(() => clearTimeout(timeoutRef))
 
-  const setTransitionState = useCallback((transitionState: TransitionState) => {
-    clearTimeout(timeoutRef.current)
-    setTState(transitionState)
-    if (transitionState === "entered" || transitionState === "exited") {
-      if (props.onTransitionEnd) props.onTransitionEnd(transitionState)
-    }
-  }, [])
-
-  const queueStateChange = useCallback(
-    (transitionState: "entered" | "exited") => {
-      timeoutRef.current = window.setTimeout(
-        () => setTransitionState(transitionState),
-        getTiming(transitionState, props.duration)
-      )
-    },
-    [props.duration]
-  )
-
-  return props.element(tState)
+  return (newProps: TransitionProps) => {
+    return newProps.element(tState.value)
+  }
 }
 
 const defaultDuration = 150

package/src/constants.ts

@@ -1,11 +1,9 @@
 export {
   $SIGNAL,
   $CONTEXT,
-  $CONTEXT_PROVIDER,
   $FRAGMENT,
   $KIRU_ERROR,
   $HMR_ACCEPT,
-  $MEMO,
   $ERROR_BOUNDARY,
   $STREAM_DATA,
   $DEV_FILE_LINK,
@@ -16,8 +14,6 @@ export {
   FLAG_PLACEMENT,
   FLAG_DELETION,
   FLAG_STATIC_DOM,
-  FLAG_MEMO,
-  FLAG_NOOP,
   FLAG_DIRTY,
 }
 
@@ -25,11 +21,9 @@ export { voidElements, svgTags, booleanAttributes, snakeCaseAttributes }
 
 const $SIGNAL = Symbol.for("kiru.signal")
 const $CONTEXT = Symbol.for("kiru.context")
-const $CONTEXT_PROVIDER = Symbol.for("kiru.contextProvider")
 const $FRAGMENT = Symbol.for("kiru.fragment")
 const $KIRU_ERROR = Symbol.for("kiru.error")
 const $HMR_ACCEPT = Symbol.for("kiru.hmrAccept")
-const $MEMO = Symbol.for("kiru.memo")
 const $ERROR_BOUNDARY = Symbol.for("kiru.errorBoundary")
 const $STREAM_DATA = Symbol.for("kiru.streamData")
 const $DEV_FILE_LINK = Symbol.for("kiru.devFileLink")
@@ -41,8 +35,6 @@ const FLAG_UPDATE = 1 << 1
 const FLAG_PLACEMENT = 1 << 2
 const FLAG_DELETION = 1 << 3
 const FLAG_STATIC_DOM = 1 << 4
-const FLAG_MEMO = 1 << 5
-const FLAG_NOOP = 1 << 6
 const FLAG_DIRTY = 1 << 7
 
 const EVENT_PREFIX_REGEX = /^on:?/

package/src/context.ts

@@ -1,30 +1,37 @@
-import { $CONTEXT, $CONTEXT_PROVIDER } from "./constants.js"
+import { $CONTEXT } from "./constants.js"
 import { createElement } from "./element.js"
-import { useState } from "./hooks/useState.js"
+import type { ContextNode } from "./types.utils.js"
+import { node } from "./globals.js"
 
 export function createContext<T>(defaultValue: T): Kiru.Context<T> {
-  const ctx: Kiru.Context<T> = {
-    [$CONTEXT]: true,
-    Provider: ({ value, children }: Kiru.ProviderProps<T>) => {
-      const [dependents] = useState(() => new Set<Kiru.VNode>())
-      return createElement(
-        $CONTEXT_PROVIDER,
-        { value, ctx, dependents },
-        typeof children === "function" ? children(value) : children
-      )
-    },
-    default: () => defaultValue,
-    set displayName(name: string) {
-      this.Provider.displayName = name
-    },
-    get displayName() {
-      return this.Provider.displayName || "Anonymous Context"
-    },
-  }
+  const Context: Kiru.Context<T> = Object.assign(
+    ({ value, children }: Kiru.ContextProps<T>) =>
+      createElement($CONTEXT, { value, ctx: Context }, children),
+    { [$CONTEXT]: () => defaultValue }
+  )
+  Context.displayName = "Anonymous Context"
+  return Context
+}
 
-  return ctx
+function getContextValue<T>(vNode: Kiru.VNode, context: Kiru.Context<T>): T {
+  let n = vNode.parent
+  while (n) {
+    if (n.type === $CONTEXT) {
+      const provider = n as ContextNode<unknown>
+      const { ctx, value } = provider.props
+      if (ctx === context) {
+        return value as T
+      }
+    }
+    n = n.parent
+  }
+  return context[$CONTEXT]()
 }
 
-export function isContext<T>(thing: unknown): thing is Kiru.Context<T> {
-  return typeof thing === "object" && !!thing && $CONTEXT in thing
+export function useContext<T>(context: Kiru.Context<T>): T {
+  const n = node.current
+  if (!n) {
+    throw new Error("useContext must be called inside a Kiru component")
+  }
+  return getContextValue(n, context)
 }

package/src/devtools.ts

@@ -0,0 +1,16 @@
+import type { DebuggerEntry } from "./globalContext"
+
+export namespace DevTools {
+  export const track = (signal: Kiru.Signal<unknown>, label?: string) => {
+    window.__kiru.devtools?.track(signal, label)
+  }
+  export const untrack = (signal: Kiru.Signal<unknown>) => {
+    window.__kiru.devtools?.untrack(signal)
+  }
+  export const subscribe = (
+    callback: (entries: Set<DebuggerEntry>) => void
+  ) => {
+    if (!window.__kiru.devtools) return () => {}
+    return window.__kiru.devtools?.subscribe(callback)
+  }
+}