diff --git a/.changeset/large-goats-double.md b/.changeset/large-goats-double.md
new file mode 100644
index 00000000000..83483f7857d
--- /dev/null
+++ 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/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index fb1937a43bc..3dbf4ee2b05 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -381,37 +381,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 ? "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 (
);
})}
diff --git a/packages/remix-react/links.ts b/packages/remix-react/links.ts
index 6c070d5746d..66098237318 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"
@@ -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;
- // 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-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"