fix(image): setup example

Author: lxsmnsyc

.gitignore

@@ -55,3 +55,5 @@ tsconfig.tsbuildinfo
 
 apps/tests/**/test-results
 .solid-start
+
+.image

apps/tests/src/images/example.jpg

@@ -0,0 +1,31 @@
+import { StartImage as Image } from "@solidjs/start/image";
+import { type JSX, onMount, Show } from "solid-js";
+import exampleImage from "../images/example.jpg?image";
+
+interface PlaceholderProps {
+  show: () => void;
+}
+
+function Placeholder(props: PlaceholderProps): JSX.Element {
+  onMount(() => {
+    props.show();
+  });
+
+  return <div>Loading...</div>;
+}
+
+export default function App(): JSX.Element {
+  return (
+    <div style={{ width: "50vw" }}>
+      <Image
+        {...exampleImage}
+        alt="example"
+        fallback={(visible, show) => (
+          <Show when={visible()}>
+            <Placeholder show={show} />
+          </Show>
+        )}
+      />
+    </div>
+  );
+}

apps/tests/src/routes/image-local.tsx

@@ -0,0 +1,35 @@
+import { StartImage as Image } from "@solidjs/start/image";
+import { type JSX, onMount, Show } from "solid-js";
+// local
+// import exampleImage from './example.jpg?image';
+
+// remote
+import exampleImage from "image:foobar";
+
+interface PlaceholderProps {
+  show: () => void;
+}
+
+function Placeholder(props: PlaceholderProps): JSX.Element {
+  onMount(() => {
+    props.show();
+  });
+
+  return <div>Loading...</div>;
+}
+
+export default function App(): JSX.Element {
+  return (
+    <div style={{ width: "50vw" }}>
+      <Image
+        {...exampleImage}
+        alt="example"
+        fallback={(visible, show) => (
+          <Show when={visible()}>
+            <Placeholder show={show} />
+          </Show>
+        )}
+      />
+    </div>
+  );
+}

apps/tests/src/routes/image-remote.tsx

@@ -1,10 +1,54 @@
 import { defineConfig } from "vite";
-import { solidStart } from "../../packages/start/src/config";
 import { nitroV2Plugin } from "../../packages/start-nitro-v2-vite-plugin/src";
+import { solidStart } from "../../packages/start/src/config";
 
 export default defineConfig({
   server: {
     port: 3000,
   },
-  plugins: [solidStart(), nitroV2Plugin()],
+  plugins: [
+    solidStart({
+      image: {
+        local: {
+          sizes: [480, 600],
+          quality: 80,
+          publicPath: "public",
+        },
+        remote: {
+          transformURL(url) {
+            return {
+              src: {
+                source: `https://picsum.photos/seed/${url}/1200/900.webp`,
+                width: 1080,
+                height: 760,
+              },
+              variants: [
+                {
+                  path: `https://picsum.photos/seed/${url}/800/600.jpg`,
+                  width: 800,
+                  type: "image/jpeg",
+                },
+                {
+                  path: `https://picsum.photos/seed/${url}/400/300.jpg`,
+                  width: 400,
+                  type: "image/jpeg",
+                },
+                {
+                  path: `https://picsum.photos/seed/${url}/800/600.png`,
+                  width: 800,
+                  type: "image/png",
+                },
+                {
+                  path: `https://picsum.photos/seed/${url}/400/300.png`,
+                  width: 400,
+                  type: "image/png",
+                },
+              ],
+            };
+          },
+        },
+      },
+    }),
+    nitroV2Plugin(),
+  ],
 });

apps/tests/vite.config.ts

@@ -7,3 +7,19 @@ declare namespace App {
     [key: string | symbol]: any;
   }
 }
+
+declare module 'image:*' {
+  import type { StartImageProps } from "./src/image.ts";
+
+  const props: Pick<StartImageProps<unknown>, 'src' | 'transformer'>;
+
+  export default props;
+}
+
+declare module '*?image' {
+  import type { StartImageProps } from "./src/image.ts";
+
+  const props: Pick<StartImageProps<unknown>, 'src' | 'transformer'>;
+
+  export default props;
+}