Page Not Found
++ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +
+{children}
+ {scripts}
+
+
+ )}
+ />
+));
diff --git a/apps/fixtures/image/src/images/example.jpg b/apps/fixtures/image/src/images/example.jpg
new file mode 100644
index 000000000..229e7980c
Binary files /dev/null and b/apps/fixtures/image/src/images/example.jpg differ
diff --git a/apps/fixtures/image/src/routes/[...404].tsx b/apps/fixtures/image/src/routes/[...404].tsx
new file mode 100644
index 000000000..4ea71ec7f
--- /dev/null
+++ b/apps/fixtures/image/src/routes/[...404].tsx
@@ -0,0 +1,19 @@
+import { Title } from "@solidjs/meta";
+import { HttpStatusCode } from "@solidjs/start";
+
+export default function NotFound() {
+ return (
+ LOADING...
;
+}
+
+export default function Home() {
+ return (
+ Image fixture
++ This fixture exercises the local image pipeline and the Start image component. +
+
+ (
+
+
+ )}
+ />
+
+ Loading...
: null
+ )}
+ />
+ );
+}
+```
+
+## Local Images
+
+Use the `?image` query to generate responsive variants at build time:
+
+```tsx
+import hero from "./hero.jpg?image";
+
+
@@ -69,8 +71,8 @@ export function StartImage(props: StartImageProps): JSX.Element {
})}
>
- (props: StartImageProps): JSX.Element {
{
if (!defer()) {
diff --git a/packages/image/src/__tests__/components.test.tsx b/packages/image/src/__tests__/components.test.tsx
new file mode 100644
index 000000000..175e496df
--- /dev/null
+++ b/packages/image/src/__tests__/components.test.tsx
@@ -0,0 +1,118 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { renderToString } from "solid-js/web";
+import { createLazyRender } from "../create-lazy-render";
+import { createClientSignal, ClientOnly } from "../client-only";
+import { StartImage } from "../Image";
+
+// ---------------------------------------------------------------------------
+// createLazyRender
+// ---------------------------------------------------------------------------
+describe("createLazyRender", () => {
+ it("starts with visible = false", () => {
+ let visible: boolean | undefined;
+
+ createRoot(dispose => {
+ const laze = createLazyRender();
+ visible = laze.visible;
+ dispose();
+ });
+
+ expect(visible).toBe(false);
+ });
+
+ it("exposes a callable ref setter", () => {
+ createRoot(dispose => {
+ const laze = createLazyRender();
+ expect(typeof laze.ref).toBe("function");
+ dispose();
+ });
+ });
+
+ it("returns correct shape with refresh option", () => {
+ createRoot(dispose => {
+ const laze = createLazyRender({ refresh: true });
+ expect(typeof laze.ref).toBe("function");
+ expect(laze.visible).toBe(false);
+ dispose();
+ });
+ });
+});
+
+// ---------------------------------------------------------------------------
+// createClientSignal (server context -- isServer is true in Node)
+// ---------------------------------------------------------------------------
+describe("createClientSignal", () => {
+ it("returns a function that resolves to false on the server", () => {
+ const signal = createClientSignal();
+ expect(typeof signal).toBe("function");
+ expect(signal()).toBe(false);
+ });
+});
+
+// ---------------------------------------------------------------------------
+// ClientOnly (server context)
+// ---------------------------------------------------------------------------
+describe("ClientOnly", () => {
+ it("renders the fallback in a server environment", () => {
+ const html = renderToString(() => (
+ loading}>
+ client content
+
+ ));
+
+ expect(html).toContain("loading");
+ expect(html).not.toContain("client content");
+ });
+
+ it("renders the fallback element when no children are given", () => {
+ const html = renderToString(() => (
+ placeholder
} />
+ ));
+
+ expect(html).toContain("placeholder");
+ });
+});
+
+// ---------------------------------------------------------------------------
+// StartImage SSR regression
+// ---------------------------------------------------------------------------
+describe("StartImage SSR", () => {
+ it("does not throw ReferenceError: document is not defined", () => {
+ expect(() => {
+ renderToString(() => (
+ loading
}
+ />
+ ));
+ }).not.toThrow();
+ });
+
+ it("produces HTML containing the image container", () => {
+ const html = renderToString(() => (
+ loading
}
+ />
+ ));
+
+ expect(html).toContain('data-start-image');
+ expect(html).toContain("test.jpg");
+ });
+
+ it("renders without a transformer (default