diff --git a/.changeset/large-goats-double.md b/.changeset/large-goats-double.md
new file mode 100644
index 00000000000..7fc8c2324d2
--- /dev/null
+++ b/.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
diff --git a/integration/action-test.ts b/integration/action-test.ts
index bcaf27263ba..6fb06fb1a02 100644
--- 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
index bdd76a9902a..201a59ec2fb 100644
--- a/integration/defer-test.ts
+++ b/integration/defer-test.ts
@@ -1322,8 +1322,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
index 8cf47635673..b9ba250a5bf 100644
--- a/packages/remix-react/components.tsx
+++ b/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 `` 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, and 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 (
);
})}
diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts
index 1edcd6c5841..ec4962fb113 100644
--- 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 `` with an
// `imageSrcSet` and `imageSizes` props
- (
- | (HtmlLinkProps & Pick, "href">)
- | (HtmlLinkPreloadImage &
- Pick, "imageSizes">)
- | (HtmlLinkPreloadImage &
- Pick, "href"> & { imageSizes?: never })
- ) & {
- /**
- * @deprecated Use `imageSrcSet` instead.
- */
- imagesrcset?: string;
-
- /**
- * @deprecated Use `imageSizes` instead.
- */
- imagesizes?: string;
- };
+ | (HtmlLinkProps & Pick, "href">)
+ | (HtmlLinkPreloadImage & Pick, "imageSizes">)
+ | (HtmlLinkPreloadImage &
+ Pick, "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;
+ }
- // may not have an href if is used with imagesrcset + imagesizes
+ // may not have an href if 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-react/warnings.ts b/packages/remix-react/warnings.ts
index 0a1272d46ed..45acd960108 100644
--- a/packages/remix-react/warnings.ts
+++ b/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);
- }
-}
diff --git a/packages/remix-server-runtime/links.ts b/packages/remix-server-runtime/links.ts
index deff8cc4d28..4cfab9f0f05 100644
--- 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 `` with an
// `imageSrcSet` and `imageSizes` props
- (
- | (HtmlLinkProps & Pick, "href">)
- | (HtmlLinkPreloadImage &
- Pick, "imageSizes">)
- | (HtmlLinkPreloadImage &
- Pick, "href"> & { imageSizes?: never })
- ) & {
- /**
- * @deprecated Use `imageSrcSet` instead.
- */
- imagesrcset?: string;
-
- /**
- * @deprecated Use `imageSizes` instead.
- */
- imagesizes?: string;
- };
+ | (HtmlLinkProps & Pick, "href">)
+ | (HtmlLinkPreloadImage & Pick, "imageSizes">)
+ | (HtmlLinkPreloadImage &
+ Pick, "href"> & { imageSizes?: never });
export interface PageLinkDescriptor
extends Omit<
@@ -192,8 +179,6 @@ export interface PageLinkDescriptor
| "sizes"
| "imageSrcSet"
| "imageSizes"
- | "imagesrcset"
- | "imagesizes"
| "as"
| "color"
| "title"