Merge pull request #11960 from remix-run/pedro/deduplicate-link-types

deduplicate link types

Author: pcattori

.changeset/remove-prefetchpagedescriptor.md

@@ -0,0 +1,5 @@
+---
+"react-router": major
+---
+
+PrefetchPageDescriptor replaced by PageLinkDescriptor

packages/react-router/index.ts

@@ -201,11 +201,6 @@ export {
 } from "./lib/dom/ssr/components";
 export type { ScriptsProps } from "./lib/dom/ssr/components";
 export type { EntryContext } from "./lib/dom/ssr/entry";
-export type {
-  HtmlLinkDescriptor,
-  LinkDescriptor,
-  PrefetchPageDescriptor,
-} from "./lib/dom/ssr/links";
 export type {
   ClientActionFunction,
   ClientActionFunctionArgs,
@@ -282,11 +277,10 @@ export type {
 export type { AppLoadContext } from "./lib/server-runtime/data";
 
 export type {
-  // TODO: (v7) Clean up code paths for these exports
-  // HtmlLinkDescriptor,
-  // LinkDescriptor,
   PageLinkDescriptor,
-} from "./lib/server-runtime/links";
+  HtmlLinkDescriptor,
+  LinkDescriptor,
+} from "./lib/router/links";
 
 export type { TypedResponse } from "./lib/server-runtime/responses";
 

packages/react-router/lib/dom/ssr/components.tsx

@@ -18,7 +18,7 @@ import {
   getNewMatchesForLinks,
   isPageLinkDescriptor,
 } from "./links";
-import type { KeyedHtmlLinkDescriptor, PrefetchPageDescriptor } from "./links";
+import type { KeyedHtmlLinkDescriptor } from "./links";
 import { createHtml } from "./markup";
 import type {
   MetaFunction,
@@ -30,6 +30,7 @@ import { addRevalidationParam, singleFetchUrl } from "./single-fetch";
 import { DataRouterContext, DataRouterStateContext } from "../../context";
 import { useLocation } from "../../hooks";
 import { getPartialManifest, isFogOfWarEnabled } from "./fog-of-war";
+import type { PageLinkDescriptor } from "../../router/links";
 
 // TODO: Temporary shim until we figure out the way to handle typings in v7
 export type SerializeFrom<D> = D extends () => {} ? Awaited<ReturnType<D>> : D;
@@ -273,7 +274,7 @@ export function Links() {
 export function PrefetchPageLinks({
   page,
   ...dataLinkProps
-}: PrefetchPageDescriptor) {
+}: PageLinkDescriptor) {
   let { router } = useDataRouterContext();
   let matches = React.useMemo(
     () => matchRoutes(router.routes, page, router.basename),
@@ -320,7 +321,7 @@ function PrefetchPageLinksImpl({
   page,
   matches: nextMatches,
   ...linkProps
-}: PrefetchPageDescriptor & {
+}: PageLinkDescriptor & {
   matches: AgnosticDataRouteMatch[];
 }) {
   let location = useLocation();

packages/react-router/lib/dom/ssr/links.ts

@@ -6,201 +6,11 @@ import type { AssetsManifest } from "./entry";
 import type { RouteModules, RouteModule } from "./routeModules";
 import type { EntryRoute } from "./routes";
 import { loadRouteModule } from "./routeModules";
-
-type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-
-type LiteralUnion<LiteralType, BaseType extends Primitive> =
-  | LiteralType
-  | (BaseType & Record<never, never>);
-
-interface HtmlLinkProps {
-  /**
-   * Address of the hyperlink
-   */
-  href?: string;
-
-  /**
-   * How the element handles crossorigin requests
-   */
-  crossOrigin?: "anonymous" | "use-credentials";
-
-  /**
-   * Relationship between the document containing the hyperlink and the destination resource
-   */
-  rel: LiteralUnion<
-    | "alternate"
-    | "dns-prefetch"
-    | "icon"
-    | "manifest"
-    | "modulepreload"
-    | "next"
-    | "pingback"
-    | "preconnect"
-    | "prefetch"
-    | "preload"
-    | "prerender"
-    | "search"
-    | "stylesheet",
-    string
-  >;
-
-  /**
-   * Applicable media: "screen", "print", "(max-width: 764px)"
-   */
-  media?: string;
-
-  /**
-   * Integrity metadata used in Subresource Integrity checks
-   */
-  integrity?: string;
-
-  /**
-   * Language of the linked resource
-   */
-  hrefLang?: string;
-
-  /**
-   * Hint for the type of the referenced resource
-   */
-  type?: string;
-
-  /**
-   * Referrer policy for fetches initiated by the element
-   */
-  referrerPolicy?:
-    | ""
-    | "no-referrer"
-    | "no-referrer-when-downgrade"
-    | "same-origin"
-    | "origin"
-    | "strict-origin"
-    | "origin-when-cross-origin"
-    | "strict-origin-when-cross-origin"
-    | "unsafe-url";
-
-  /**
-   * Sizes of the icons (for rel="icon")
-   */
-  sizes?: string;
-
-  /**
-   * Potential destination for a preload request (for rel="preload" and rel="modulepreload")
-   */
-  as?: LiteralUnion<
-    | "audio"
-    | "audioworklet"
-    | "document"
-    | "embed"
-    | "fetch"
-    | "font"
-    | "frame"
-    | "iframe"
-    | "image"
-    | "manifest"
-    | "object"
-    | "paintworklet"
-    | "report"
-    | "script"
-    | "serviceworker"
-    | "sharedworker"
-    | "style"
-    | "track"
-    | "video"
-    | "worker"
-    | "xslt",
-    string
-  >;
-
-  /**
-   * Color to use when customizing a site's icon (for rel="mask-icon")
-   */
-  color?: string;
-
-  /**
-   * Whether the link is disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * The title attribute has special semantics on this element: Title of the link; CSS style sheet set name.
-   */
-  title?: string;
-
-  /**
-   * Images to use in different situations, e.g., high-resolution displays,
-   * small monitors, etc. (for rel="preload")
-   */
-  imageSrcSet?: string;
-
-  /**
-   * Image sizes for different page layouts (for rel="preload")
-   */
-  imageSizes?: string;
-}
-
-interface HtmlLinkPreloadImage extends HtmlLinkProps {
-  /**
-   * Relationship between the document containing the hyperlink and the destination resource
-   */
-  rel: "preload";
-
-  /**
-   * Potential destination for a preload request (for rel="preload" and rel="modulepreload")
-   */
-  as: "image";
-
-  /**
-   * Address of the hyperlink
-   */
-  href?: string;
-
-  /**
-   * Images to use in different situations, e.g., high-resolution displays,
-   * small monitors, etc. (for rel="preload")
-   */
-  imageSrcSet: string;
-
-  /**
-   * Image sizes for different page layouts (for rel="preload")
-   */
-  imageSizes?: string;
-}
-
-/**
- * Represents a `<link>` element.
- *
- * 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
-  // `imageSrcSet` and `imageSizes` props
-  | (HtmlLinkProps & Pick<Required<HtmlLinkProps>, "href">)
-  | (HtmlLinkPreloadImage & Pick<Required<HtmlLinkPreloadImage>, "imageSizes">)
-  | (HtmlLinkPreloadImage &
-      Pick<Required<HtmlLinkPreloadImage>, "href"> & { imageSizes?: never });
-
-export interface PrefetchPageDescriptor
-  extends Omit<
-    HtmlLinkDescriptor,
-    | "href"
-    | "rel"
-    | "type"
-    | "sizes"
-    | "imageSrcSet"
-    | "imageSizes"
-    | "as"
-    | "color"
-    | "title"
-  > {
-  /**
-   * The absolute path of the page to prefetch.
-   */
-  page: string;
-}
-
-export type LinkDescriptor = HtmlLinkDescriptor | PrefetchPageDescriptor;
-
-////////////////////////////////////////////////////////////////////////////////
+import type {
+  HtmlLinkDescriptor,
+  LinkDescriptor,
+  PageLinkDescriptor,
+} from "../../router/links";
 
 /**
  * Gets all the links for a set of matches. The modules are assumed to have been
@@ -296,7 +106,7 @@ async function prefetchStyleLink(
 ////////////////////////////////////////////////////////////////////////////////
 export function isPageLinkDescriptor(
   object: any
-): object is PrefetchPageDescriptor {
+): object is PageLinkDescriptor {
   return object != null && typeof object.page === "string";
 }
 

packages/react-router/lib/dom/ssr/routeModules.ts

@@ -12,9 +12,9 @@ import type {
 
 import type { SerializeFrom } from "./components";
 import type { AppData } from "./data";
-import type { LinkDescriptor } from "./links";
 import type { EntryRoute } from "./routes";
 import type { DataRouteMatch } from "../../context";
+import type { LinkDescriptor } from "../../router/links";
 
 export interface RouteModules {
   [routeId: string]: RouteModule | undefined;

packages/react-router/lib/server-runtime/links.ts renamed to packages/react-router/lib/router/links.ts

@@ -8,8 +8,8 @@ import type {
   Params,
 } from "../router/utils";
 import type { AppData, AppLoadContext } from "./data";
-import type { LinkDescriptor } from "./links";
 import type { SerializeFrom } from "../dom/ssr/components";
+import type { LinkDescriptor } from "../router/links";
 
 export interface RouteModules<RouteModule> {
   [routeId: string]: RouteModule | undefined;