feat!(remix-react,remix-server-runtime): remove imagesizes & imagesizes properties from HtmlLinkDescriptor, LinkDescriptor & PrefetchPageDescriptor types

Author: MichaelDeBoey

.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

packages/remix-react/components.tsx

@@ -374,37 +374,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,
+            }}
           />
         );
       })}

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";
 }
 

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"