feat!(remix-react,remix-server-runtime): remove imagesizes & `image…

…sizes` properties from `HtmlLinkDescriptor`, `LinkDescriptor` & `PrefetchPageDescriptor` types
remix-run · Apr 13, 2023 · 5fb82d9 · 5fb82d9
1 parent 0c3afcd
commit 5fb82d9
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 72 deletions.
diff --git a/.changeset/large-goats-double.md b/.changeset/large-goats-double.md
@@ -0,0 +1,6 @@
+---
+"@remix-run/react": major
+"@remix-run/server-runtime": major
+---
+
+remove `imagesizes` & `imagesizes` properties from `HtmlLinkDescriptor`, `LinkDescriptor` & `PrefetchPageDescriptor` types
diff --git a/integration/action-test.ts b/integration/action-test.ts
@@ -105,10 +105,7 @@ test.describe("actions", () => {
 
   test.beforeEach(({ page }) => {
     page.on("console", (msg) => {
-      let text = msg.text();
-      if (!/DEPRECATED.*imagesizes.*imagesrcset/.test(text)) {
-        logs.push(text);
-      }
+      logs.push(msg.text());
     });
   });
 

diff --git a/integration/defer-test.ts b/integration/defer-test.ts
@@ -1283,8 +1283,7 @@ function monitorConsole(page: Page) {
         let arg0 = await args[0].jsonValue();
         if (
           typeof arg0 === "string" &&
-          (arg0.includes("Download the React DevTools") ||
-            /DEPRECATED.*imagesizes.*imagesrcset/.test(arg0))
+          arg0.includes("Download the React DevTools")
         ) {
           continue;
         }

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
@@ -306,37 +306,32 @@ export function Links() {
         }
 
         let imageSrcSet: string | null = null;
+        let imageSizes: string | null = null;
 
         // In React 17, <link imageSrcSet> and <link imageSizes> will warn
         // because the DOM attributes aren't recognized, so users need to pass
         // them in all lowercase to forward the attributes to the node without a
         // warning. Normalize so that either property can be used in Remix.
-        if ("useId" in React) {
-          if (link.imagesrcset) {
-            link.imageSrcSet = imageSrcSet = link.imagesrcset;
-            delete link.imagesrcset;
-          }
-
-          if (link.imagesizes) {
-            link.imageSizes = link.imagesizes;
-            delete link.imagesizes;
-          }
-        } else {
-          if (link.imageSrcSet) {
-            link.imagesrcset = imageSrcSet = link.imageSrcSet;
-            delete link.imageSrcSet;
-          }
+        let imageSizesKey = "useId" in React ? "imageSizesKey" : "imagesizes";
+        let imageSrcSetKey = "useId" in React ? "imageSrcSet" : "imagesrcset";
+        if (link.imageSrcSet) {
+          imageSrcSet = link.imageSrcSet;
+          delete link.imageSrcSet;
+        }
 
-          if (link.imageSizes) {
-            link.imagesizes = link.imageSizes;
-            delete link.imageSizes;
-          }
+        if (link.imageSizes) {
+          imageSizes = link.imageSizes;
+          delete link.imageSizes;
         }
 
         return (
           <link
             key={link.rel + (link.href || "") + (imageSrcSet || "")}
-            {...link}
+            {...{
+              ...link,
+              [imageSizesKey]: imageSizes,
+              [imageSrcSetKey]: imageSrcSet,
+            }}
           />
         );
       })}

diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts
@@ -173,23 +173,10 @@ interface HtmlLinkPreloadImage extends HtmlLinkProps {
 export type HtmlLinkDescriptor =
   // Must have an href *unless* it's a `<link rel="preload" as="image">` with an
   // `imageSrcSet` and `imageSizes` props
-  (
-    | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
-    | (HtmlLinkPreloadImage &
-        Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
-    | (HtmlLinkPreloadImage &
-        Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never })
-  ) & {
-    /**
-     * @deprecated Use `imageSrcSet` instead.
-     */
-    imagesrcset?: string;
-
-    /**
-     * @deprecated Use `imageSizes` instead.
-     */
-    imagesizes?: string;
-  };
+  | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
+  | (HtmlLinkPreloadImage & Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
+  | (HtmlLinkPreloadImage &
+      Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never });
 
 export interface PrefetchPageDescriptor
   extends Omit<
@@ -200,8 +187,6 @@ export interface PrefetchPageDescriptor
     | "sizes"
     | "imageSrcSet"
     | "imageSizes"
-    | "imagesrcset"
-    | "imagesizes"
     | "as"
     | "color"
     | "title"
@@ -299,23 +284,20 @@ export function isPageLinkDescriptor(
   return object != null && typeof object.page === "string";
 }
 
-export function isHtmlLinkDescriptor(
-  object: any
-): object is HtmlLinkDescriptor {
+function isHtmlLinkDescriptor(object: any): object is HtmlLinkDescriptor {
   if (object == null) return false;
 
-  // <link> may not have an href if <link rel="preload"> is used with imagesrcset + imagesizes
+  // <link> may not have an href if <link rel="preload"> is used with imageSrcSet + imageSizes
   // https://github.com/remix-run/remix/issues/184
   // https://html.spec.whatwg.org/commit-snapshots/cb4f5ff75de5f4cbd7013c4abad02f21c77d4d1c/#attr-link-imagesrcset
   if (object.href == null) {
     return (
       object.rel === "preload" &&
-      (typeof object.imageSrcSet === "string" ||
-        typeof object.imagesrcset === "string") &&
-      (typeof object.imageSizes === "string" ||
-        typeof object.imagesizes === "string")
+      typeof object.imageSrcSet === "string" &&
+      typeof object.imageSizes === "string"
     );
   }
+
   return typeof object.rel === "string" && typeof object.href === "string";
 }
 

diff --git a/packages/remix-server-runtime/links.ts b/packages/remix-server-runtime/links.ts
@@ -165,23 +165,10 @@ interface HtmlLinkPreloadImage extends HtmlLinkProps {
 export type HtmlLinkDescriptor =
   // Must have an href *unless* it's a `<link rel="preload" as="image">` with an
   // `imageSrcSet` and `imageSizes` props
-  (
-    | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
-    | (HtmlLinkPreloadImage &
-        Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
-    | (HtmlLinkPreloadImage &
-        Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never })
-  ) & {
-    /**
-     * @deprecated Use `imageSrcSet` instead.
-     */
-    imagesrcset?: string;
-
-    /**
-     * @deprecated Use `imageSizes` instead.
-     */
-    imagesizes?: string;
-  };
+  | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
+  | (HtmlLinkPreloadImage & Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
+  | (HtmlLinkPreloadImage &
+      Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never });
 
 export interface PageLinkDescriptor
   extends Omit<
@@ -192,8 +179,6 @@ export interface PageLinkDescriptor
     | "sizes"
     | "imageSrcSet"
     | "imageSizes"
-    | "imagesrcset"
-    | "imagesizes"
     | "as"
     | "color"
     | "title"