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 91567759cba..cb32da18da1 100644 --- a/packages/remix-react/components.tsx +++ b/packages/remix-react/components.tsx @@ -331,37 +331,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"