@solidrt/components 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "MIT",
   "author": "Antoine van Wel",
   "type": "module",

package/src/image.tsx

@@ -1,6 +1,4 @@
-import { createSignal, createEffect, onCleanup } from "@solidjs/signals"
-import { createTexture, destroyTexture } from "@solidrt/core/gpu"
-import { decodeImage } from "@solidrt/core/image"
+import { createImage, Loading } from "@solidrt/core"
 import type { LayoutProps, PointerProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
@@ -12,41 +10,11 @@ export interface ImageProps extends PointerProps {
 
 //TODO onLoad, onError
 export function Image(props: ImageProps) {
-  let [res, setRes] = createSignal<{ id: number; width: number; height: number }>()
-
-  // Load (and decode) whenever src changes. A url is fetched; bytes are used
-  // directly. The async result is pushed into the signal so the texture shows
-  // once ready; a stale flag drops results from a superseded src. The old
-  // texture is destroyed before installing the new one; on unmount the current
-  // texture is destroyed by onCleanup below.
-  createEffect(
-    () => props.src,
-    (source) => {
-      let stale = false
-
-      ;(async () => {
-        let bytes: Uint8Array
-        if (typeof source === "string") {
-          let response = await fetch(source)
-          bytes = await response.bytes()
-        } else {
-          bytes = source
-        }
-        if (stale) return
-        let { data, width, height } = decodeImage(bytes)
-        let id = createTexture(data, width, height)
-        let old = res()
-        setRes({ id, width, height })
-        if (old !== undefined) destroyTexture(old.id)
-      })()
-
-      return () => {
-        stale = true
-      }
-    },
-  )
-
-  let src = () => res()?.id
+  // createImage fetches/decodes/uploads, swaps the texture when src changes, and
+  // frees it on cleanup, returning the texture id. Pass an accessor so a reactive
+  // src reloads. Reading src() suspends until ready (a SolidJS 2.0 async value),
+  // so the <texture> below sits in a <Loading> boundary.
+  let src = createImage(() => props.src)
   let hasBorder = () => (props.style?.borderWidth ?? 0) > 0
 
   // A texture sizes from its own width/height (not the box around it), so the
@@ -55,11 +23,6 @@ export function Image(props: ImageProps) {
   let texW = () => (typeof props.layout?.width === "number" ? props.layout.width : undefined)
   let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
 
-  onCleanup(() => {
-    let r = res()
-    if (r !== undefined) destroyTexture(r.id)
-  })
-
   return (
     <view
       {...props.layout}
@@ -85,7 +48,9 @@ export function Image(props: ImageProps) {
       {props.style?.backgroundColor != null ? (
         <d-rect color={props.style?.backgroundColor} radius={props.style?.borderRadius} />
       ) : null}
-      <texture src={src()} width={texW()} height={texH()} />
+      <Loading fallback={null}>
+        <texture src={src()} width={texW()} height={texH()} />
+      </Loading>
       {hasBorder() ? (
         <d-rect
           drawStyle="stroke"

package/src/modal.tsx

@@ -53,6 +53,6 @@ export function Modal(props: ModalProps) {
         <d-rect color={props.backdropColor ?? theme.color.scrim} />
       </view>
       {props.children}
-    </view> as any,
+    </view>
   )
 }