@solidrt/core 0.0.50 → 0.0.52

package/src/renderer.ts

@@ -1,10 +1,10 @@
-import { createRoot, onCleanup } from "@solidjs/signals"
+import { createRoot, onCleanup, NotReadyError } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
+import { createErrorBoundary } from "solid-js"
 import type { Element } from "solid-js"
 import * as tree from "flux:rendertree"
-import { attachWindow } from "./window"
+import { attachWindow, setWindowRoot } from "./window"
 import { setEventHandler, setFocusable, setTextInputHints, cleanupNode, focusedNode, setFocus } from "./core"
-import { parseColor, isGradient } from "./color"
 
 export { getEventHandler } from "./core"
 
@@ -166,53 +166,55 @@ function setTreeProperty(node: ProxyNode, name: string, value: unknown): void {
 // Shared by the renderer's setProperty hook and by createElement, which since
 // the dom-expressions "universal" template passes static props inline as a
 // second argument rather than as separate setProp calls.
+// A property's route is a function of its name alone, so the classifying
+// regex and compares run once per unique name; per write it is one Map get.
+const ROUTE_TREE = 0
+const ROUTE_EVENT = 1
+const ROUTE_FOCUSABLE = 2
+const ROUTE_HINTS = 3
+let propRoutes = new Map<string, number>()
+
+function routeFor(name: string): number {
+  let route = propRoutes.get(name)
+  if (route === undefined) {
+    route = /^on[A-Z]/.test(name)
+      ? ROUTE_EVENT
+      : name === "focusable"
+        ? ROUTE_FOCUSABLE
+        : name === "textInputHints"
+          ? ROUTE_HINTS
+          : ROUTE_TREE
+    propRoutes.set(name, route)
+  }
+  return route
+}
+
 function applyProp<T>(node: ProxyNode, name: string, value: T): void {
   if (!node) return
 
   // console.debug("[srt] applyProp", node.id, name, value)
 
-  if (/^on[A-Z]/.test(name) && (value == null || typeof value === "function")) {
-    setEventHandler(node.id, name, value as Function | null | undefined)
-    return
-  }
-
-  if (name === "focusable") {
-    setFocusable(node.id, value === true)
-    return
-  }
-
-  if (name === "textInputHints") {
-    setTextInputHints(node.id, value as any)
-    return
-  }
-
-  if (name === "color" && isGradient(value)) {
-    setTreeProperty(node, name, value)
-    return
-  }
-
-  if (name === "color" && typeof value === "string") {
-    setTreeProperty(node, name, parseColor(value))
-    return
+  switch (routeFor(name)) {
+    case ROUTE_EVENT:
+      // A non-function, non-null value on an on* name is not a handler;
+      // fall through to the tree so the native side rejects it.
+      if (value == null || typeof value === "function") {
+        setEventHandler(node.id, name, value as Function | null | undefined)
+        return
+      }
+      break
+    case ROUTE_FOCUSABLE:
+      setFocusable(node.id, value === true)
+      return
+    case ROUTE_HINTS:
+      setTextInputHints(node.id, value as any)
+      return
   }
 
   setTreeProperty(node, name, value)
 }
 
-export let {
-  effect,
-  memo,
-  createComponent,
-  createElement,
-  createTextNode,
-  insertNode,
-  insert,
-  spread,
-  setProp,
-  mergeProps,
-  applyRef,
-  ref,
-} = createRenderer<ProxyNode>({
+let renderer = createRenderer<ProxyNode>({
   createElement: (elementType: string, props?: Record<string, any>): ProxyNode => {
     let proxy = createProxyNode(elementType)
 
@@ -221,11 +223,13 @@ export let {
     if (elementType === "window") tree.createRoot(proxy.id)
     else tree.createNode(proxy.id, elementType)
 
-    // The universal JSX template hands static props here as an object; children
-    // and ref arrive through their own hooks, so skip them.
+    // The universal JSX template hands static props here as an object. The
+    // compiler routes children/ref expressions through their own hooks, so
+    // those names only appear here in degenerate literal forms (children="hi",
+    // a bare ref) - let them flow to the tree so the unknown-property warning
+    // reports them instead of dropping them silently.
     if (props) {
       for (let name in props) {
-        if (name === "children" || name === "ref") continue
         applyProp(proxy, name, props[name])
       }
     }
@@ -295,28 +299,185 @@ export let {
   },
 })
 
-// The app's single <window> node, set by render(). Serves as the default mount
-// target for createPortal (single window by design, so one ambient ref).
+export let { memo, createComponent, createElement, createTextNode, insertNode, spread, setProp, mergeProps, applyRef, ref } =
+  renderer
+let { effect: rawEffect, insert: rawInsert } = renderer
+
+// ------ Per-node error containment --------
+//
+// Every reactive write into the tree goes through two exports the compiled
+// JSX calls: `effect` (an element's dynamic props) and `insert` (a child
+// expression). An error thrown while computing either is contained right
+// there: the props or children keep their last good value, the effect stays
+// subscribed (the throwing read is tracked, so fixing it recomputes and the
+// node recovers on its own), and the rest of the app keeps running. Without
+// this one unclaimed error halts the whole reactive system. A NotReadyError
+// is not an error but a pending async read on its way to the nearest
+// <Loading>, so it passes through. Reported once per site until it recovers,
+// not once per run. What escapes these two (a user createEffect that throws)
+// still reaches render()'s root boundary.
+const SKIP = Symbol("skip")
+
+function guard<T>(fn: (prev?: T) => T, describe: () => string, nested: boolean, empty: T): (prev?: T) => T {
+  let last = empty
+  let failing = false
+  return (prev?: T) => {
+    try {
+      let value = fn(prev === SKIP ? undefined : prev)
+      if (failing) {
+        failing = false
+        console.warn(`Recovered: ${describe()} computes again`)
+      }
+      // A child expression resolving to a function is read by an inner
+      // effect (universal's insert); that read gets the same containment.
+      // Solid's flatten only unwraps zero-arity functions and inserts any
+      // other function as a node, so only accessors are wrapped, and the
+      // wrapper keeps arity 0.
+      if (nested && typeof value === "function" && value.length === 0) {
+        let inner = guard(value as any, describe, true, empty)
+        value = (() => inner()) as any
+      }
+      last = value
+      return value
+    } catch (e) {
+      if (e instanceof NotReadyError) throw e
+      if (!failing) {
+        failing = true
+        console.error(`Contained error: ${describe()} threw and keeps its last value until it computes again.`, e)
+      }
+      return last
+    }
+  }
+}
+
+// Universal's declarations trail its runtime (effect takes options, insert
+// takes initial and options), so the wrappers carry the runtime signatures.
+type EffectFn = <T>(fn: (prev?: T) => T, effectFn?: (value: T, prev?: T) => void, options?: unknown) => void
+type InsertFn = (parent: ProxyNode, accessor: unknown, marker?: unknown, initial?: unknown, options?: unknown) => ProxyNode
+let effectRaw = rawEffect as unknown as EffectFn
+let insertRaw = rawInsert as unknown as InsertFn
+
+export let effect: EffectFn = (fn, effectFn, options) =>
+  effectRaw<any>(
+    guard<any>(fn, () => "an element's prop expression", false, SKIP),
+    effectFn && ((value, prev) => (value === SKIP ? undefined : effectFn(value, prev === SKIP ? undefined : prev))),
+    options,
+  )
+
+export let insert: InsertFn = (parent, accessor, marker, initial, options) =>
+  insertRaw(
+    parent,
+    typeof accessor === "function"
+      ? guard(accessor as any, () => `a child expression of <${parent.elementType}> ${getNodePath(parent.id).join("/")}`, true, undefined)
+      : accessor,
+    marker,
+    initial,
+    options,
+  )
+
+// The current <window> node: the app's, or the error window standing in for
+// it. Serves as the default mount target for createPortal (single window by
+// design, so one ambient ref).
 let windowRoot: ProxyNode | undefined
+let rendered = false
+// Ids of error windows built by the root boundary, alive only while shown.
+let errorWindows = new Set<number>()
 
 /**
  * Mounts a SolidRT app. Call once at the top level: `render(() => <App />)`.
  * The element returned by `code` MUST be a `<window>` (it becomes the native
  * window and root of the render tree); anything else throws. Runs inside a
  * reactive root, so the whole tree is disposed together on engine reload.
+ *
+ * The whole app, window included, sits inside an error boundary: an error no
+ * <Errored> claims replaces the app's window with an error window (message,
+ * stack, a reset button) instead of halting the reactive system for good.
+ * The app's subtree stays alive behind it - the boundary keeps it and marks
+ * only the failed computations - so reset recomputes those in place and the
+ * same window node comes back.
  */
 export function render(code: () => any) {
+  // Once per app: there is no unmount; teardown is engine teardown.
+  if (rendered) {
+    throw new Error("render() already called; an app has exactly one render()")
+  }
+  rendered = true
   createRoot(() => {
-    let root = code()
-    if (!root || root.elementType !== "window") {
-      throw new Error("render() root must be a <window> element")
-    }
-    windowRoot = root
-    attachWindow(root.id)
-    insert(null, root)
+    let root = createErrorBoundary(
+      () => {
+        let win = code()
+        if (!win || win.elementType !== "window") {
+          throw new Error("render() root must be a <window> element")
+        }
+        return win
+      },
+      (error, reset) => {
+        // The boundary hands the error as an accessor.
+        let err = error()
+        console.error("Uncaught error: the app is replaced by the error window until reset or reload.", err)
+        let win = errorWindow(err, reset)
+        errorWindows.add(win.id)
+        return win
+      },
+    )
+    rawEffect(
+      () => root() as ProxyNode,
+      (win, prev) => swapRoot(win, prev),
+    )
   })
 }
 
+// The boundary's value changed: the app's window on mount and after a
+// successful reset, an error window after an error. Creating a window already
+// made it the native root; setRoot is the way back to an existing one.
+function swapRoot(win: ProxyNode, prev?: ProxyNode) {
+  windowRoot = win
+  if (prev === undefined) {
+    attachWindow(win.id)
+    return
+  }
+  // Creating the error window made it the native root; the app's window
+  // coming back is the case that needs the explicit way back.
+  if (!errorWindows.has(win.id)) tree.setRoot(win.id)
+  setWindowRoot(win.id)
+  // Keys route to the focused node; one inside the hidden window must not
+  // keep hearing them.
+  setFocus(null)
+  // The app's window survives behind an error window (the boundary keeps its
+  // subtree for reset); an error window replaced by anything is dead.
+  if (errorWindows.has(prev.id) || !errorWindows.has(win.id)) {
+    errorWindows.delete(prev.id)
+    destroyNode(prev)
+  }
+}
+
+// The error window: the in-app sibling of the runtime's startup BSOD, built
+// from the primitives directly (no JSX in core). Static content; the reset
+// button recomputes the failed sources, and a reload replaces everything.
+function errorWindow(err: unknown, reset: () => void): ProxyNode {
+  let message = err instanceof Error ? err.message : String(err)
+  let stack = err instanceof Error && err.stack ? err.stack : ""
+  let text = (content: string, props: Record<string, any>) => {
+    let node = createElement("text", props)
+    insertNode(node, createTextNode(content))
+    return node
+  }
+  let win = createElement("window", { title: "Application error" })
+  insertNode(win, createElement("d-rect", { color: "#1144bb" }))
+  let column = createElement("view", { flexGrow: 1, flexDirection: "column", padding: 40, gap: 12 })
+  insertNode(column, text(":(", { color: "white", fontSize: 64, fontWeight: 700 }))
+  insertNode(column, text("Something went wrong", { color: "white", fontSize: 22 }))
+  insertNode(column, text(message, { color: "white", fontSize: 16 }))
+  if (stack) insertNode(column, text(stack, { color: "#aac2ff", fontSize: 12, fontFamily: "mono" }))
+  insertNode(column, text("Fix the error and save to reload, or reset to retry the failed computations.", { color: "#aac2ff", fontSize: 14 }))
+  let button = createElement("view", { alignSelf: "flex-start", padding: 12, onPointerDown: () => reset() })
+  insertNode(button, createElement("d-rect", { color: "white", radius: 6 }))
+  insertNode(button, text("Reset", { color: "#1144bb", fontSize: 16, fontWeight: 600 }))
+  insertNode(column, button)
+  insertNode(win, column)
+  return win
+}
+
 /**
  * Relocates an already-built node out of its lexical position to `mount` (the
  * window root by default), then removes it again when the surrounding reactive
@@ -348,6 +509,11 @@ export function createPortal(node: Element, mount?: ProxyNode): null {
     throw new Error("createPortal: node must be a single built element")
   }
   insertNode(target, node as ProxyNode)
-  onCleanup(() => removeNode(target, node as ProxyNode))
+  // A destroyed mount target has already swept the portaled node with it
+  // (destroy walks the mount tree), so detaching then would hand freed ids to
+  // the native side, which panics. Gone from the proxy map = already freed.
+  onCleanup(() => {
+    if (nodes.has((node as ProxyNode).id)) removeNode(target, node as ProxyNode)
+  })
   return null
 }

package/src/runtime-modules.d.ts

@@ -47,6 +47,10 @@ declare module "*.ogg" {
   const bytes: Uint8Array
   export default bytes
 }
+declare module "*.glb" {
+  const bytes: Uint8Array
+  export default bytes
+}
 
 // UI event bus (lattice), provided by the runtime as a builtin module.
 // on/once return an unsubscribe function. Notable events: the routed pointer
@@ -88,8 +92,9 @@ declare module "srt:dev" {
   /**
    * Register a named debug command, listable and callable from the dev server
    * (the list_debug / call_debug MCP tools). `args` arrives JSON-parsed; the
-   * return value must be JSON-serializable and synchronous (promises are not
-   * awaited). Re-registering a name replaces it; registrations reset on hot
+   * return value must be JSON-serializable and synchronous (an async command's
+   * Promise is not awaited - the call errors). Re-registering a name replaces
+   * it; registrations reset on hot
    * reload, so register at module init. Callable in every build, but only dev
    * clients ever invoke commands.
    */

package/src/scroll.ts

@@ -2,9 +2,9 @@
 // scrollable region -- the offset and its clamping against the measured content
 // and viewport sizes -- and nothing with a UI opinion. Wheel/drag input,
 // momentum, scrollbars and styling are policy and belong to the component (the
-// "skin") that composes this, the same way createCaretScroll backs TextInput.
+// "skin") that composes this, the same way createTextEditorLayout backs TextInput.
 
-import { createSignal, flush } from "@solidjs/signals"
+import { createSignal } from "@solidjs/signals"
 import { getBoundingBox } from "./core"
 import { onLayout } from "./window"
 
@@ -12,6 +12,15 @@ export type ScrollAxis = "vertical" | "horizontal" | "both"
 
 export type ScrollOffset = { x: number; y: number }
 
+/** The web's scroll behavior word, simplified: "instant" asks the skin for no
+ * motion; "auto" (the default) and "smooth" both mean its usual motion, since
+ * the default already animates. */
+export type ScrollBehavior = "auto" | "instant" | "smooth"
+
+/** Target of scrollTo/scrollBy. An omitted axis keeps its offset (scrollTo)
+ * or moves by 0 (scrollBy). */
+export type ScrollToOptions = { x?: number; y?: number; behavior?: ScrollBehavior }
+
 export type ScrollOptions = {
   /** Which axes can scroll. Locked axes are pinned to 0. Default "vertical". */
   axis?: ScrollAxis
@@ -20,10 +29,18 @@ export type ScrollOptions = {
 export type Scroll = {
   /** Current clamped offset, as a reactive accessor. */
   offset(): ScrollOffset
-  /** Scroll by a delta (positive moves content up/left), clamped to range. */
-  scrollBy(dx: number, dy: number): void
+  /** Largest reachable offset per axis (content overflow, 0 on a locked axis),
+   * as a reactive accessor refreshed each layout. Watching it is how a scroll
+   * policy learns that the content or the viewport changed size. */
+  range(): ScrollOffset
+  /** Behavior of the latest scrollTo/scrollBy, as a reactive accessor: the
+   * skin reads it to withhold its motion for an instant write. Layout
+   * re-clamps leave it alone. */
+  behavior(): ScrollBehavior
   /** Scroll to an absolute offset, clamped to range. */
-  scrollTo(x: number, y: number): void
+  scrollTo(options: ScrollToOptions): void
+  /** Scroll by a delta (positive moves content up/left), clamped to range. */
+  scrollBy(options: ScrollToOptions): void
 }
 
 /**
@@ -32,7 +49,9 @@ export type Scroll = {
  * current content-vs-viewport overflow, so the view stays valid when content
  * grows or shrinks (e.g. an offset that scrolled to the bottom snaps up when the
  * list gets shorter). scrollBy/scrollTo clamp against the most recently measured
- * range. Pure geometry: no input handling and no visual policy.
+ * range. Pure geometry: no input handling and no visual policy. Anything beyond
+ * clamping (following a growing log, keeping an item in view) is a policy the
+ * caller writes against `range()` and `offset()`.
  *
  * The viewport node is the clipping box (overflow hidden); the content node is
  * the inner wrapper that holds the children and takes their natural size. Apply
@@ -48,6 +67,11 @@ export function createScroll(
   let canY = axis === "vertical" || axis === "both"
 
   let [offset, setOffset] = createSignal<ScrollOffset>({ x: 0, y: 0 })
+  let [range, setRange] = createSignal<ScrollOffset>({ x: 0, y: 0 })
+  let [behavior, setBehavior] = createSignal<ScrollBehavior>("auto")
+  // Mirrors the signal: a setter's value is not readable until the flush, and
+  // two writes in one batch must still compare against the latest.
+  let lastBehavior: ScrollBehavior = "auto"
 
   // A scroll viewport with no explicit main-axis size resolves to 0 in flex
   // layout and its content silently vanishes - a classic trap (maxHeight alone
@@ -59,6 +83,8 @@ export function createScroll(
 
   // Last measured overflow, refreshed each layout. scrollBy/scrollTo clamp
   // against these between layouts; onLayout re-clamps once new sizes are known.
+  // Kept as plain values beside the `range` signal because a signal write is
+  // not readable until the flush, and clamping needs the number now.
   let maxX = 0
   let maxY = 0
 
@@ -67,10 +93,14 @@ export function createScroll(
     y: canY ? Math.max(0, Math.min(y, maxY)) : 0,
   })
 
-  let set = (x: number, y: number) => {
+  let set = (x: number, y: number, b: ScrollBehavior = "auto") => {
     let cur = offset()
     let next = clamp(x, y)
     if (next.x !== cur.x || next.y !== cur.y) setOffset(next)
+    if (b !== lastBehavior) {
+      lastBehavior = b
+      setBehavior(b)
+    }
   }
 
   onLayout(() => {
@@ -94,20 +124,26 @@ export function createScroll(
     }
     maxX = Math.max(0, cb.width - vb.width)
     maxY = Math.max(0, cb.height - vb.height)
+    let r = range()
+    let rx = canX ? maxX : 0
+    let ry = canY ? maxY : 0
+    if (r.x !== rx || r.y !== ry) setRange({ x: rx, y: ry })
     let cur = offset()
     let next = clamp(cur.x, cur.y)
-    if (next.x !== cur.x || next.y !== cur.y) {
-      setOffset(next)
-      flush()
-    }
+    if (next.x !== cur.x || next.y !== cur.y) setOffset(next)
   })
 
   return {
     offset,
-    scrollBy: (dx, dy) => {
+    range,
+    behavior,
+    scrollTo: (o) => {
       let cur = offset()
-      set(cur.x + dx, cur.y + dy)
+      set(o.x ?? cur.x, o.y ?? cur.y, o.behavior)
+    },
+    scrollBy: (o) => {
+      let cur = offset()
+      set(cur.x + (o.x ?? 0), cur.y + (o.y ?? 0), o.behavior)
     },
-    scrollTo: (x, y) => set(x, y),
   }
-}
+}

package/src/svg.ts

@@ -46,7 +46,7 @@ export type SvgDocument = {
  * that fits the document's coordinate space into its box:
  *
  *     let doc = createMemo(() => parseSvg(src))
- *     <view repaintBoundary viewBox={[doc().width, doc().height]} width={48} height={48}>
+ *     <view repaintBoundary designSize={[doc().width, doc().height]} width={48} height={48}>
  *       {doc().draws.map((draw) => <d-path {...draw} />)}
  *     </view>
  *