simplify user-facing API

Author: atilafassina

apps/fixtures/image/src/routes/index.tsx

@@ -2,8 +2,6 @@ import { Image } from "@solidjs/image";
 import { Title } from "@solidjs/meta";
 import imageData from "../images/example.jpg?image";
 
-const { src, transformer } = imageData;
-
 export default function Home() {
   return (
     <main>
@@ -14,8 +12,7 @@ export default function Home() {
       </p>
       <div style={{ width: "60vw", "margin-left": "auto", "margin-right": "auto", background: "white", padding: "1rem" }}>
         <Image
-          src={src}
-          transformer={transformer}
+          src={imageData}
           alt="Example"
         />
       </div>

packages/image/src/Image.tsx

@@ -3,9 +3,11 @@ import { ssr as ssrHtml, isServer } from "solid-js/web";
 import type { StartImageSource, StartImageTransformer, StartImageVariant } from "./types";
 
 export interface ImageProps<T> {
-  src: StartImageSource<T>;
+  src: {
+    src: StartImageSource<T>
+    transformer?: StartImageTransformer<T>
+  }
   alt: string;
-  transformer?: StartImageTransformer<T>;
   fallback?: (visible: () => boolean, onLoad: () => void) => JSX.Element;
 }
 
@@ -25,13 +27,13 @@ function mergeImageVariantsToSrcSet(variants: StartImageVariant[]) {
 
 export function Image<T>(props: ImageProps<T>): JSX.Element {
   if (isServer) {
-    const variants = props.transformer 
-      ? props.transformer.transform(props.src) 
+    const variants = props.src.transformer 
+      ? props.src.transformer.transform(props.src.src) 
       : [];
     const variantArray = Array.isArray(variants) ? variants : [variants];
 
     let html = `<div data-start-image="container">`;
-    html += `<div data-start-image="aspect-ratio" style="position:relative;padding-top:${(props.src.height * 100) / props.src.width}%;width:100%;height:0;overflow:hidden;">`;
+    html += `<div data-start-image="aspect-ratio" style="position:relative;padding-top:${(props.src.src.height * 100) / props.src.src.width}%;width:100%;height:0;overflow:hidden;">`;
     html += `<picture data-start-picture="picture">`;
 
     if (variantArray.length > 0) {
@@ -42,7 +44,7 @@ export function Image<T>(props: ImageProps<T>): JSX.Element {
       }
     }
 
-    html += `<img data-start-image="image" src="${props.src.source}" alt="${props.alt}" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;"/>`;
+    html += `<img data-start-image="image" src="${props.src.src.source}" alt="${props.alt}" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;"/>`;
     html += `</picture></div></div>`;
 
     return ssrHtml(html) as unknown as JSX.Element;
@@ -54,15 +56,15 @@ export function Image<T>(props: ImageProps<T>): JSX.Element {
         data-start-image="aspect-ratio" 
         style={{
           position: "relative",
-          "padding-top": `${(props.src.height * 100) / props.src.width}%`,
+          "padding-top": `${(props.src.src.height * 100) / props.src.src.width}%`,
           width: "100%",
           height: "0",
           overflow: "hidden",
         }}
       >
         <picture data-start-picture="picture">
-          {props.transformer && (() => {
-            const variants = props.transformer!.transform(props.src);
+          {props.src.transformer && (() => {
+            const variants = props.src.transformer!.transform(props.src.src);
             const variantArray = Array.isArray(variants) ? variants : [variants];
             const merged = mergeImageVariantsByType(variantArray);
             return Array.from(merged).map(([type, vars]) => (
@@ -74,7 +76,7 @@ export function Image<T>(props: ImageProps<T>): JSX.Element {
           })()}
           <img 
             data-start-image="image" 
-            src={props.src.source} 
+            src={props.src.src.source} 
             alt={props.alt}
             style={{
               position: "absolute",