support all link types as resources

packages/react-dom-bindings/src/client/ReactDOMFloatClient.js

@@ -13,7 +13,7 @@ import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals.js';
 const {Dispatcher} = ReactDOMSharedInternals;
 import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
 import {
-  validateUnmatchedLinkResourceProps,
+  warnOnMissingHrefAndRel,
   validatePreloadResourceDifference,
   validateURLKeyedUpdatedProps,
   validateStyleResourceDifference,
@@ -629,13 +629,16 @@ export function getResource(
           }
           return null;
         }
-        case 'icon':
-        case 'apple-touch-icon': {
-          const {href} = pendingProps;
-          if (typeof href === 'string') {
-            const key = rel + href;
+        default: {
+          const {href, sizes, media} = pendingProps;
+          if (typeof rel === 'string' && typeof href === 'string') {
+            const sizeKey =
+              '::sizes:' + (typeof sizes === 'string' ? sizes : '');
+            const mediaKey =
+              '::media:' + (typeof media === 'string' ? media : '');
+            const key = 'rel:' + rel + '::href:' + href + sizeKey + mediaKey;
             const headRoot = getDocumentFromRoot(resourceRoot);
-            const headResources = getResourcesFromRoot(resourceRoot).head;
+            const headResources = getResourcesFromRoot(headRoot).head;
             let resource = headResources.get(key);
             if (!resource) {
               resource = {
@@ -649,11 +652,8 @@ export function getResource(
             }
             return resource;
           }
-          return null;
-        }
-        default: {
           if (__DEV__) {
-            validateUnmatchedLinkResourceProps(pendingProps, currentProps);
+            warnOnMissingHrefAndRel(pendingProps, currentProps);
           }
           return null;
         }
@@ -768,6 +768,7 @@ export function acquireResource(resource: Resource): Instance {
 
 export function releaseResource(resource: Resource): void {
   switch (resource.type) {
+    case 'link':
     case 'title':
     case 'meta': {
       return releaseHeadResource(resource);
@@ -1094,9 +1095,20 @@ function acquireHeadResource(resource: HeadResource): Instance {
         const limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(
           linkProps.href,
         );
-        const existingEl = root.querySelector(
-          `link[rel="${limitedEscapedRel}"][href="${limitedEscapedHref}"]`,
-        );
+        let selector = `link[rel="${limitedEscapedRel}"][href="${limitedEscapedHref}"]`;
+        if (typeof linkProps.sizes === 'string') {
+          const limitedEscapedSizes = escapeSelectorAttributeValueInsideDoubleQuotes(
+            linkProps.sizes,
+          );
+          selector += `[sizes="${limitedEscapedSizes}"]`;
+        }
+        if (typeof linkProps.media === 'string') {
+          const limitedEscapedMedia = escapeSelectorAttributeValueInsideDoubleQuotes(
+            linkProps.media,
+          );
+          selector += `[media="${limitedEscapedMedia}"]`;
+        }
+        const existingEl = root.querySelector(selector);
         if (existingEl) {
           instance = resource.instance = existingEl;
           markNodeAsResource(instance);
@@ -1325,30 +1337,27 @@ export function isHostResourceType(type: string, props: Props): boolean {
       return true;
     }
     case 'link': {
+      const {onLoad, onError} = props;
+      if (onLoad || onError) {
+        return false;
+      }
       switch (props.rel) {
         case 'stylesheet': {
           if (__DEV__) {
             validateLinkPropsForStyleResource(props);
           }
-          const {href, precedence, onLoad, onError, disabled} = props;
+          const {href, precedence, disabled} = props;
           return (
             typeof href === 'string' &&
             typeof precedence === 'string' &&
-            !onLoad &&
-            !onError &&
             disabled == null
           );
         }
-        case 'preload': {
-          const {href, onLoad, onError} = props;
-          return !onLoad && !onError && typeof href === 'string';
-        }
-        case 'icon':
-        case 'apple-touch-icon': {
-          return true;
+        default: {
+          const {rel, href} = props;
+          return typeof href === 'string' && typeof rel === 'string';
         }
       }
-      return false;
     }
     case 'script': {
       // We don't validate because it is valid to use async with onLoad/onError unlike combining

packages/react-dom-bindings/src/server/ReactDOMFloatServer.js

@@ -113,6 +113,7 @@ export type Resources = {
 
   // Flushing queues for Resource dependencies
   charset: null | MetaResource,
+  preconnects: Set<LinkResource>,
   fontPreloads: Set<PreloadResource>,
   // usedImagePreloads: Set<PreloadResource>,
   precedences: Map<string, Set<StyleResource>>,
@@ -143,6 +144,7 @@ export function createResources(): Resources {
 
     // cleared on flush
     charset: null,
+    preconnects: new Set(),
     fontPreloads: new Set(),
     // usedImagePreloads: new Set(),
     precedences: new Map(),
@@ -709,10 +711,11 @@ export function resourcesFromLink(props: Props): boolean {
   const resources = currentResources;
 
   const {rel, href} = props;
-  if (!href || typeof href !== 'string') {
+  if (!href || typeof href !== 'string' || !rel || typeof rel !== 'string') {
     return false;
   }
 
+  let key = '';
   switch (rel) {
     case 'stylesheet': {
       const {onLoad, onError, precedence, disabled} = props;
@@ -825,25 +828,37 @@ export function resourcesFromLink(props: Props): boolean {
           return true;
         }
       }
-      return false;
+      break;
     }
-    case 'icon':
-    case 'apple-touch-icon': {
-      const key = rel + href;
-      let resource = resources.headsMap.get(key);
-      if (!resource) {
-        resource = {
-          type: 'link',
-          props: Object.assign({}, props),
-          flushed: false,
-        };
-        resources.headsMap.set(key, resource);
+  }
+  if (props.onLoad || props.onError) {
+    return false;
+  }
+
+  const sizes = typeof props.sizes === 'string' ? props.sizes : '';
+  const media = typeof props.media === 'string' ? props.media : '';
+  key =
+    'rel:' + rel + '::href:' + href + '::sizes:' + sizes + '::media:' + media;
+  let resource = resources.headsMap.get(key);
+  if (!resource) {
+    resource = {
+      type: 'link',
+      props: Object.assign({}, props),
+      flushed: false,
+    };
+    resources.headsMap.set(key, resource);
+    switch (rel) {
+      case 'preconnect':
+      case 'prefetch-dns': {
+        resources.preconnects.add(resource);
+        break;
+      }
+      default: {
         resources.headResources.add(resource);
       }
-      return true;
     }
   }
-  return false;
+  return true;
 }
 
 // Construct a resource from link props.

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

@@ -2340,6 +2340,7 @@ export function writeInitialResources(
 
   const {
     charset,
+    preconnects,
     fontPreloads,
     precedences,
     usedStylePreloads,
@@ -2356,6 +2357,13 @@ export function writeInitialResources(
     resources.charset = null;
   }
 
+  preconnects.forEach(r => {
+    // font preload Resources should not already be flushed so we elide this check
+    pushLinkImpl(target, r.props, responseState);
+    r.flushed = true;
+  });
+  preconnects.clear();
+
   fontPreloads.forEach(r => {
     // font preload Resources should not already be flushed so we elide this check
     pushLinkImpl(target, r.props, responseState);
@@ -2454,6 +2462,7 @@ export function writeImmediateResources(
 
   const {
     charset,
+    preconnects,
     fontPreloads,
     usedStylePreloads,
     scripts,
@@ -2469,6 +2478,13 @@ export function writeImmediateResources(
     resources.charset = null;
   }
 
+  preconnects.forEach(r => {
+    // font preload Resources should not already be flushed so we elide this check
+    pushLinkImpl(target, r.props, responseState);
+    r.flushed = true;
+  });
+  preconnects.clear();
+
   fontPreloads.forEach(r => {
     // font preload Resources should not already be flushed so we elide this check
     pushLinkImpl(target, r.props, responseState);

packages/react-dom-bindings/src/shared/ReactDOMResourceValidation.js

@@ -11,7 +11,7 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 
 type Props = {[string]: mixed};
 
-export function validateUnmatchedLinkResourceProps(
+export function warnOnMissingHrefAndRel(
   pendingProps: Props,
   currentProps: ?Props,
 ) {
@@ -24,34 +24,52 @@ export function validateUnmatchedLinkResourceProps(
       const originalRelStatement = getValueDescriptorExpectingEnumForWarning(
         currentProps.rel,
       );
-      const pendingRelStatement = getValueDescriptorExpectingEnumForWarning(
+      const pendingRel = getValueDescriptorExpectingEnumForWarning(
         pendingProps.rel,
       );
-      const pendingHrefStatement =
-        typeof pendingProps.href === 'string'
-          ? ` and the updated href is "${pendingProps.href}"`
-          : '';
-      console.error(
-        'A <link> previously rendered as a %s but was updated with a rel type that is not' +
-          ' valid for a Resource type. Generally Resources are not expected to ever have updated' +
-          ' props however in some limited circumstances it can be valid when changing the href.' +
-          ' When React encounters props that invalidate the Resource it is the same as not rendering' +
-          ' a Resource at all. valid rel types for Resources are "stylesheet" and "preload". The previous' +
-          ' rel for this instance was %s. The updated rel is %s%s.',
-        originalResourceName,
-        originalRelStatement,
-        pendingRelStatement,
-        pendingHrefStatement,
+      const pendingHref = getValueDescriptorExpectingEnumForWarning(
+        pendingProps.href,
       );
+      if (typeof pendingProps.rel !== 'string') {
+        console.error(
+          'A <link> previously rendered as a %s with rel "%s" but was updated with an invalid rel: %s. When a link' +
+            ' does not have a valid rel prop it is not represented in the DOM. If this is intentional, instead' +
+            ' do not render the <link> anymore.',
+          originalResourceName,
+          originalRelStatement,
+          pendingRel,
+        );
+      } else if (typeof pendingProps.href !== 'string') {
+        console.error(
+          'A <link> previously rendered as a %s but was updated with an invalid href prop: %s. When a link' +
+            ' does not have a valid href prop it is not represented in the DOM. If this is intentional, instead' +
+            ' do not render the <link> anymore.',
+          originalResourceName,
+          pendingHref,
+        );
+      }
     } else {
-      const pendingRelStatement = getValueDescriptorExpectingEnumForWarning(
+      const pendingRel = getValueDescriptorExpectingEnumForWarning(
         pendingProps.rel,
       );
-      console.error(
-        'A <link> is rendering as a Resource but has an invalid rel property. The rel encountered is %s.' +
-          ' This is a bug in React.',
-        pendingRelStatement,
+      const pendingHref = getValueDescriptorExpectingEnumForWarning(
+        pendingProps.href,
       );
+      if (typeof pendingProps.rel !== 'string') {
+        console.error(
+          'A <link> is rendering with an invalid rel: %s. When a link' +
+            ' does not have a valid rel prop it is not represented in the DOM. If this is intentional, instead' +
+            ' do not render the <link> anymore.',
+          pendingRel,
+        );
+      } else if (typeof pendingProps.href !== 'string') {
+        console.error(
+          'A <link> is rendering with an invalid href: %s. When a link' +
+            ' does not have a valid href prop it is not represented in the DOM. If this is intentional, instead' +
+            ' do not render the <link> anymore.',
+          pendingHref,
+        );
+      }
     }
   }
 }