feat!: remove deprecated 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` & `imagesrcset` properties from `HtmlLinkDescriptor`, `LinkDescriptor` & `PrefetchPageDescriptor` types

integration/action-test.ts

@@ -110,10 +110,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());
     });
   });
 

integration/defer-test.ts

@@ -1330,8 +1330,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;
         }

packages/remix-react/components.tsx

@@ -52,7 +52,6 @@ import type {
   V2_MetaMatch,
   V2_MetaMatches,
 } from "./routeModules";
-import { logDeprecationOnce } from "./warnings";
 
 function useDataRouterContext() {
   let context = React.useContext(DataRouterContext);
@@ -314,12 +313,6 @@ export function composeEventHandlers<
   };
 }
 
-let linksWarning =
-  "⚠️ REMIX FUTURE CHANGE: The behavior of links `imagesizes` and `imagesrcset` will be changing in v2. " +
-  "Only the React camel case versions will be valid. Please change to `imageSizes` and `imageSrcSet`. " +
-  "For instructions on making this change see " +
-  "https://remix.run/docs/en/v1.15.0/pages/v2#links-imagesizes-and-imagesrcset";
-
 /**
  * Renders the `<link>` tags for the current routes.
  *
@@ -341,12 +334,6 @@ export function Links() {
     [matches, routeModules, manifest]
   );
 
-  React.useEffect(() => {
-    if (links.some((link) => "imagesizes" in link || "imagesrcset" in link)) {
-      logDeprecationOnce(linksWarning);
-    }
-  }, [links]);
-
   return (
     <>
       {links.map((link) => {
@@ -355,37 +342,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 ? "imageSizes" : "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"
@@ -302,23 +287,22 @@ export function isPageLinkDescriptor(
   return object != null && typeof object.page === "string";
 }
 
-export function isHtmlLinkDescriptor(
-  object: any
-): object is HtmlLinkDescriptor {
-  if (object == null) return false;
+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-react/warnings.ts

@@ -6,13 +6,3 @@ export function warnOnce(condition: boolean, message: string): void {
     console.warn(message);
   }
 }
-
-export function logDeprecationOnce(
-  message: string,
-  key: string = message
-): void {
-  if (process.env.NODE_ENV !== "production" && !alreadyWarned[key]) {
-    alreadyWarned[key] = true;
-    console.warn(message);
-  }
-}

packages/remix-server-runtime/links.ts

@@ -163,25 +163,12 @@ interface HtmlLinkPreloadImage extends HtmlLinkProps {
  * WHATWG Specification: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
  */
 export type HtmlLinkDescriptor =
-  // Must have an href *unless* it's a `<link rel="preload" as="image">` with an
+  // Must have a 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"