@solidrt/components 0.0.37 → 0.0.38

package/README.md

@@ -194,10 +194,20 @@ Accepts `layout`, `style`, and all pointer event props, plus:
 | Prop       | Type                     | Description                                                                          |
 | ---------- | ------------------------ | ------------------------------------------------------------------------------------ |
 | `src`      | `string \| Uint8Array`   | URL to fetch, or raw image bytes to decode                                            |
+| `fit`      | `"fill" \| "cover" \| "contain" \| "none" \| "scale-down"` | How the image maps into the box (CSS object-fit, centered)  |
 | `fallback` | `string \| Uint8Array`   | Source shown when `src` fails; if it also fails, the `backgroundColor` placeholder stays |
 | `onLoad`   | `() => void`             | Called each time a source finishes loading                                            |
 | `onError`  | `(err: unknown) => void` | Called when `src` fails to load or decode                                             |
 
+With `fit` the image fills whatever box `layout` gives the component - numbers,
+`pct()`, or flex - and the fit decides how the pixels map into it (`"cover"` is
+the ported-web-hero-image answer). Without `fit`, only *numeric* layout sizes
+reach the image; anything else draws at intrinsic size.
+
+```jsx
+<Image src={hero} fit="cover" layout={{ width: pct(100), height: 240 }} />
+```
+
 A failing `src` is contained by the component (the fallback or placeholder
 shows); it does not propagate to an outer `<Errored>` boundary.
 

package/package.json

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

package/src/image.tsx

@@ -1,9 +1,18 @@
-import { createImage, createEffect, Loading, Errored } from "@solidrt/core"
-import type { ImageSource, LayoutProps, PointerProps } from "@solidrt/core"
+import { createImage, createEffect, Loading, Errored, pct } from "@solidrt/core"
+import type { ImageSource, LayoutProps, Pct, PointerProps, TextureProps } from "@solidrt/core"
 import type { StyleProps } from "./types"
 
 export interface ImageProps extends PointerProps {
   src: string | Uint8Array
+  /**
+   * How the image maps into the Image's box (CSS object-fit): "fill"
+   * stretches, "cover"/"none" crop, "contain"/"scale-down" letterbox,
+   * everything centered. Requires the Image to have a box: give `layout` a
+   * size in any form (numbers, `pct()`, flex). Without `fit` the image keeps
+   * its legacy sizing: numeric layout sizes are honored, anything else draws
+   * at intrinsic size.
+   */
+  fit?: TextureProps["fit"]
   /** Image source to show when `src` fails to load. If this also fails, only
    * the `backgroundColor` placeholder remains. */
   fallback?: ImageSource
@@ -22,11 +31,16 @@ export interface ImageProps extends PointerProps {
 // 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 }) {
+function FallbackTexture(props: {
+  src: ImageSource
+  fit?: TextureProps["fit"]
+  width?: number | Pct
+  height?: number | Pct
+}) {
   let tex = createImage(() => props.src)
   return (
     <Errored fallback={(_err: unknown) => null}>
-      <texture src={tex()} width={props.width} height={props.height} />
+      <texture src={tex()} fit={props.fit} width={props.width} height={props.height} />
     </Errored>
   )
 }
@@ -47,11 +61,14 @@ export function Image(props: ImageProps) {
     error: (err: unknown) => props.onError?.(err),
   })
 
-  // A texture sizes from its own width/height (not the box around it), so the
-  // numeric layout dimensions are forwarded to it. Omitting height lets the
-  // texture follow the image's intrinsic aspect ratio.
-  let texW = () => (typeof props.layout?.width === "number" ? props.layout.width : undefined)
-  let texH = () => (typeof props.layout?.height === "number" ? props.layout.height : undefined)
+  // A texture sizes from its own width/height (not the box around it). With
+  // `fit` the texture simply fills the Image's box and the fit maps the pixels
+  // into it. Without it, legacy sizing: numeric layout dimensions are
+  // forwarded, and omitting height lets the texture follow the image's
+  // intrinsic aspect ratio.
+  let texW = () => (props.fit != null ? pct(100) : typeof props.layout?.width === "number" ? props.layout.width : undefined)
+  let texH = () =>
+    props.fit != null ? pct(100) : typeof props.layout?.height === "number" ? props.layout.height : undefined
 
   return (
     <view
@@ -82,10 +99,12 @@ export function Image(props: ImageProps) {
       <Loading fallback={null}>
         <Errored
           fallback={(_err: unknown) =>
-            props.fallback != null ? <FallbackTexture src={props.fallback} width={texW()} height={texH()} /> : null
+            props.fallback != null ? (
+              <FallbackTexture src={props.fallback} fit={props.fit} width={texW()} height={texH()} />
+            ) : null
           }
         >
-          <texture src={src()} width={texW()} height={texH()} />
+          <texture src={src()} fit={props.fit} width={texW()} height={texH()} />
         </Errored>
       </Loading>
       {hasBorder() ? (

package/src/pressable.tsx

@@ -30,7 +30,8 @@ export function Pressable(props: PressableProps) {
   // zero-arg functions.
   let resolved = children(() => props.children)
   let kids = () => {
-    let c = resolved()
+    // children()'s return type erases the render-prop variant, hence the any.
+    let c = resolved() as any
     return typeof c === "function" ? c(press.state()) : c
   }