Remove unused ImageClient component and clean up routes in CSR and SSR

Author: manu4543

test-app/app/components/ImageClient.tsx

@@ -12,7 +12,6 @@ export const Basic = () => {
                 alt="Image without ImageKit provider"
                 height={300}
                 width={300}
-                style={{ color: "red" }} // we add `color:red` styles in all Image because otherwise Next.js may add `color:transparent` styles to the image. This may causes flaky tests.
             />
 
             <ImageKitProvider urlEndpoint="https://ik.imagekit.io/demo/">
@@ -21,27 +20,22 @@ export const Basic = () => {
                     alt="Image with ImageKit provider"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
+                {/* Width not number */}
                 <Image
                     src="/default-image.jpg"
-                    alt="With transformation"
-                    transformation={[{ height: 100, width: 100 }]}
-                    height={300}
-                    width={300}
-                    style={{ color: "red" }}
+                    alt="Image with width not number, should produce larger srcset"
+                    // @ts-ignore
+                    width="300px"
                 />
 
-                {/* quality={50} */}
                 <Image
                     src="/default-image.jpg"
-                    alt="Image with quality"
-                    quality={50}
+                    alt="With transformation"
                     transformation={[{ height: 100, width: 100 }]}
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 <Image
@@ -53,7 +47,6 @@ export const Basic = () => {
                     transformation={[{ height: 100, width: 100 }]}
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 {/* responsive images with sizes */}
@@ -63,7 +56,15 @@ export const Basic = () => {
                     sizes="(max-width: 600px) 100vw, 50vw"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
+                />
+
+                {/* responsive images with sizes not having vw token */}
+                <Image
+                    src="/default-image.jpg"
+                    alt="Responsive image with sizes - should have very large srcset for all breakpoints"
+                    sizes="300px"
+                    height={300}
+                    width={300}
                 />
 
                 {/* urlEndpoint override */}
@@ -74,7 +75,6 @@ export const Basic = () => {
                     transformation={[{ height: 100, width: 100 }]}
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 {/* Pass className to the image tag as it is */}
@@ -84,7 +84,6 @@ export const Basic = () => {
                     className="custom-class"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 {/* Lazy loading eager */}
@@ -94,7 +93,6 @@ export const Basic = () => {
                     loading="eager"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 {/* Transformation position test */}
@@ -104,7 +102,16 @@ export const Basic = () => {
                     transformationPosition="path"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
+                />
+
+                {/* Transformation position test with custom transformations */}
+                <Image
+                    src="/default-image.jpg"
+                    alt="Image with path transformation + custom transformations"
+                    transformationPosition="path"
+                    transformation={[{ height: 100, width: 100 }]}
+                    height={300}
+                    width={300}
                 />
 
                 <Image
@@ -113,7 +120,6 @@ export const Basic = () => {
                     transformationPosition="path"
                     height={300}
                     width={300}
-                    style={{ color: "red" }}
                 />
 
                 {/* Responsive off */}
@@ -125,8 +131,7 @@ export const Basic = () => {
                     transformation={[{
                         named: "restrict-unnamed",
                     }]}
-                    style={{ color: "red" }}
-                    responsive={false}
+                    responsive={true}
                     sizes="(max-width: 600px) 100vw, 50vw"
                 />
 

test-app/app/components/basic.tsx

@@ -1,6 +1,5 @@
 import { Basic } from "~/components/basic";
 import type { Route } from "./+types/home";
-import { ImageEvents } from "~/components/ImageClient";
 import { useState, useEffect } from "react";
 
 export function meta({ }: Route.MetaArgs) {
@@ -26,8 +25,6 @@ export default function CSR() {
   return (
     <div className="container">
       <Basic />
-      <h1>Advanced</h1>
-      <ImageEvents />
     </div>
   )
 }

test-app/app/routes/csr.tsx

@@ -1,6 +1,5 @@
 import { Basic } from "~/components/basic";
 import type { Route } from "./+types/home";
-import { ImageEvents } from "~/components/ImageClient";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -13,8 +12,6 @@ export default function SSR() {
   return (
     <div className="container">
       <Basic />
-      <h1>Advanced</h1>
-      <ImageEvents />
     </div>
   )
 }

test-app/app/routes/ssr.tsx

@@ -1,8 +1,7 @@
 import { reactRouter } from "@react-router/dev/vite";
-import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  plugins: [reactRouter(), tsconfigPaths()],
 });