@solidrt/components 0.0.28 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",
@@ -18,6 +18,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.17",
-    "@solidrt/core": "0.0.28"
+    "@solidrt/core": "0.0.30"
   }
 }

package/src/badge.tsx

@@ -1,4 +1,4 @@
-import { Show } from "@solidrt/core"
+import { Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { typeStyle, lightOnDark } from "./typography"
@@ -38,7 +38,10 @@ export function Badge(props: BadgeProps) {
   let bg = () => props.style?.backgroundColor ?? colors().bg
   let fg = () => props.style?.color ?? colors().fg
   let radius = () => props.style?.borderRadius ?? RADIUS
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): the typeof probe and the mount sites must
+  // share one build - reading the raw getter again would orphan native nodes.
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   let labelOnDark = () => lightOnDark(fg(), bg())
 
   return (
@@ -58,9 +61,9 @@ export function Badge(props: BadgeProps) {
       opacity={props.style?.opacity}
     >
       <d-rect color={bg()} radius={radius()} />
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={fg()} {...typeStyle("label", labelOnDark())}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </view>

package/src/button.tsx

@@ -1,4 +1,4 @@
-import { Show } from "@solidrt/core"
+import { Show, children } from "@solidrt/core"
 import { Pressable, type PressState } from "./pressable"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -55,7 +55,11 @@ export function Button(props: ButtonProps) {
         : colors().fill)
   let radius = () => props.style?.borderRadius ?? theme.radius.sm
   let label = () => (props.disabled ? theme.color.textMuted : colors().label)
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): reading the raw children getter builds a new
+  // subtree per read, so the typeof probe and the two mount sites below must
+  // share this single memoized build (an unmounted build leaks native nodes).
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
   // The label's polarity against the idle fill: onPrimary on a saturated fill
   // is light-on-dark even in a light theme, so it needs the low-DPI weight
   // compensation there too.
@@ -92,9 +96,9 @@ export function Button(props: ButtonProps) {
         scale: (props.style?.scale ?? 1) * (s.pressed && policy.motion !== "none" ? 0.97 : 1),
       })}
     >
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={label()} {...typeStyle("body", labelOnDark())}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </Pressable>

package/src/image.tsx

@@ -20,10 +20,12 @@ export interface ImageProps extends PointerProps {
 
 // Renders the fallback source when the main one failed. Its own <Errored>
 // keeps a broken fallback from escaping: the placeholder stays instead.
+// Both fallbacks here take the error argument: an arity >= 1 fallback tells
+// <Errored> the error is handled, so dev builds do not console.error it.
 function FallbackTexture(props: { src: ImageSource; width?: number; height?: number }) {
   let tex = createImage(() => props.src)
   return (
-    <Errored fallback={null}>
+    <Errored fallback={(_err: unknown) => null}>
       <texture src={tex()} width={props.width} height={props.height} />
     </Errored>
   )
@@ -79,7 +81,7 @@ export function Image(props: ImageProps) {
       ) : null}
       <Loading fallback={null}>
         <Errored
-          fallback={() =>
+          fallback={(_err: unknown) =>
             props.fallback != null ? <FallbackTexture src={props.fallback} width={texW()} height={texH()} /> : null
           }
         >

package/src/pressable.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "@solidjs/signals"
+import { createSignal, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -26,7 +26,17 @@ export function Pressable(props: PressableProps) {
 
   let state = (): PressState => ({ pressed: pressed(), hovered: hovered() })
   let style = () => (typeof props.style === "function" ? props.style(state()) : props.style)
-  let kids = () => (typeof props.children === "function" ? props.children(state()) : props.children)
+  // Element-valued props build a fresh native subtree on every read, and a
+  // subtree that is never inserted is never destroyed - probing the raw getter
+  // with typeof would orphan one full copy per evaluation. children() memoizes
+  // the resolve so probe and mount share one build; a render-prop child
+  // ((state) => ...) passes through it intact because flatten only unwraps
+  // zero-arg functions.
+  let resolved = children(() => props.children)
+  let kids = () => {
+    let c = resolved()
+    return typeof c === "function" ? c(state()) : c
+  }
 
   let handleDown = (e: PointerEvent) => {
     if (e.button != null && e.button !== 0) return

package/src/progress-bar.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onFrame, onLayout, getBoundingBox, Show } from "@solidrt/core"
+import { createSignal, onFrame, onLayout, getBoundingBox, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"

package/src/qrcode.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "@solidjs/signals"
+import { createMemo } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import qrcode from "qrcode-generator"
 

package/src/radio.tsx

@@ -1,4 +1,4 @@
-import { createSignal, createContext, useContext, Show } from "@solidrt/core"
+import { createSignal, createContext, useContext, Show, children } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"
@@ -72,7 +72,10 @@ export function Radio(props: RadioProps) {
   let selected = () => ctx.value() === props.value
   let disabled = () => props.disabled || ctx.disabled()
   let ringColor = () => (selected() ? theme.color.primary : theme.color.border)
-  let isText = () => typeof props.children === "string" || typeof props.children === "number"
+  // Resolved once via children(): the typeof probe and the mount sites must
+  // share one build - reading the raw getter again would orphan native nodes.
+  let resolved = children(() => props.children)
+  let isText = () => typeof resolved() === "string" || typeof resolved() === "number"
 
   let ring = () => Math.round(RING * densityScale())
   // Inner dot inset as a fraction of the ring, so it scales with the density.
@@ -91,9 +94,9 @@ export function Radio(props: RadioProps) {
           <d-oval x={inset()} y={inset()} w={ring() - inset() * 2} h={ring() - inset() * 2} color={theme.color.primary} />
         </Show>
       </view>
-      <Show when={isText()} fallback={props.children}>
+      <Show when={isText()} fallback={resolved()}>
         <text color={theme.color.text} {...typeStyle("body")}>
-          {props.children}
+          {resolved()}
         </text>
       </Show>
     </Pressable>

package/src/slider.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
+import { createSignal, getBoundingBox, onLayout, setPointerCapture } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { densityScale } from "./policy"

package/src/spinner.tsx

@@ -1,5 +1,4 @@
-import { createSignal } from "@solidjs/signals"
-import { onFrame, Show } from "@solidrt/core"
+import { createSignal, onFrame, Show } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"

package/src/switch.tsx

@@ -1,4 +1,4 @@
-import { createSignal } from "@solidjs/signals"
+import { createSignal } from "@solidrt/core"
 import type { LayoutProps } from "@solidrt/core"
 import { Pressable } from "./pressable"
 import { theme } from "./theme"

package/src/text-input.tsx

@@ -1,5 +1,4 @@
-import { createEffect, createSignal, onCleanup } from "@solidjs/signals"
-import { measureText, setFocus } from "@solidrt/core"
+import { createEffect, createSignal, onCleanup, measureText, setFocus } from "@solidrt/core"
 import { createCaretScroll, createTextBuffer } from "@solidrt/core/text-input"
 import type { Color, Gradient, LayoutProps } from "@solidrt/core"
 import type { StyleProps } from "./types"

package/src/text.tsx

@@ -1,4 +1,4 @@
-import { createMemo } from "@solidjs/signals"
+import { createMemo } from "@solidrt/core"
 import type { PointerProps } from "@solidrt/core"
 import type { StyleProps, TextLayoutProps } from "./types"
 import { theme, type TextVariant } from "./theme"

package/src/tooltip.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env } from "@solidrt/core"
+import { createSignal, onCleanup, createPortal, onLayout, getBoundingBox, Show, env, children } from "@solidrt/core"
 import type { LayoutProps, PointerEvent } from "@solidrt/core"
 import { theme } from "./theme"
 import { policy } from "./policy"
@@ -66,7 +66,10 @@ export function Tooltip(props: TooltipProps) {
       let cur = pos()
       if (!cur || cur.x !== x || cur.y !== y) setPos({ x, y })
     })
-    let isText = () => typeof props.content === "string" || typeof props.content === "number"
+    // Resolved once via children(): the typeof probe and the mount sites must
+    // share one build - reading the raw getter again would orphan native nodes.
+    let content = children(() => props.content)
+    let isText = () => typeof content() === "string" || typeof content() === "number"
     return createPortal(
       <view
         ref={(n: { id: number }) => (bubble = n)}
@@ -83,9 +86,9 @@ export function Tooltip(props: TooltipProps) {
         pointerEvents="none"
       >
         <d-rect color={theme.color.surfaceAlt} radius={theme.radius.sm} />
-        <Show when={isText()} fallback={props.content}>
+        <Show when={isText()} fallback={content()}>
           <text color={theme.color.text} {...typeStyle("body")}>
-            {props.content}
+            {content()}
           </text>
         </Show>
         <d-rect