Update Prerender Support (#352)

* remove 1 prerender limit, same origin checking, and pre-existing spec rules checking

* minor convention fixes

* Update the related prerendering docs on the API docs site

* Adapt .size-limit.json

* minor documentation reference link update to use shortener

---------

Co-authored-by: XhmikosR <[email protected]>

Author: hadyan

.size-limit.json

@@ -1,18 +1,18 @@
 [
   {
     "path": "dist/quicklink.js",
-    "limit": "2.05 kB"
+    "limit": "2 kB"
   },
   {
     "path": "dist/quicklink.mjs",
-    "limit": "2.05 kB"
+    "limit": "2 kB"
   },
   {
     "path": "dist/quicklink.modern.mjs",
-    "limit": "1.75 kB"
+    "limit": "1.6 kB"
   },
   {
     "path": "dist/quicklink.umd.js",
-    "limit": "2.1 kB"
+    "limit": "2 kB"
   }
 ]

README.md

@@ -127,6 +127,13 @@ Whether to switch from the default prefetching mode to the prerendering mode for
 
 > **Note:** The prerendering mode (when this option is set to true) will fallback to the prefetching mode if the browser does not support prerender.
 
+#### options.prerenderAndPrefetch
+
+* Type: `Boolean`
+* Default: `false`
+
+Whether to activate both the prefetching and prerendering mode at the same time.
+
 #### options.delay
 
 - Type: `Number`
@@ -146,7 +153,7 @@ The DOM element to observe for in-viewport links to prefetch or the NodeList of
 - Type: `Number`
 - Default: `Infinity`
 
-The _total_ requests that can be prefetched while observing the `options.el` container.
+The _total_ requests that can be prefetched or prerendered while observing the `options.el` container.
 
 #### options.threshold
 
@@ -272,7 +279,7 @@ Returns: `Promise`
 
 One or many URLs to be prerendered.
 
-> **Note:** As prerendering using Speculative Rules API only supports same-origin at this point, only same-origin urls are accepted. Any non same-origin urls will return a rejected Promise.
+> **Note:** Speculative Rules API supports same-site cross origin Prerendering with [opt-in header](https://bit.ly/ss-cross-origin-pre).
 
 ## Polyfills
 

site/src/api.njk

@@ -31,6 +31,13 @@ Whether to switch from the default prefetching mode to the prerendering mode for
 
 > **Note:** The prerendering mode (when this option is set to true) will fallback to the prefetching mode if the browser does not support prerender.
 
+#### options.prerenderAndPrefetch
+
+* Type: `Boolean`
+* Default: `false`
+
+Whether to activate both the prefetching and prerendering mode at the same time.
+
 #### options.delay
 
 - Type: `Number`
@@ -50,7 +57,7 @@ The DOM element to observe for in-viewport links to prefetch or the NodeList of
 - Type: `Number`
 - Default: `Infinity`
 
-The _total_ requests that can be prefetched while observing the `options.el` container.
+The _total_ requests that can be prefetched or prerendered while observing the `options.el` container.
 
 #### options.threshold
 
@@ -176,7 +183,7 @@ Returns: `Promise`
 
 One or many URLs to be prerendered.
 
-> **Note:** As prerendering using Speculative Rules API only supports same-origin at this point, only same-origin urls are accepted. Any non same-origin urls will return a rejected Promise.
+> **Note:** Speculative Rules API supports same-site cross origin Prerendering with [opt-in header](https://bit.ly/ss-cross-origin-pre).
 
 ## Polyfills
 

src/index.mjs

@@ -17,7 +17,7 @@
 import throttle from 'throttles';
 import {priority, supported} from './prefetch.mjs';
 import requestIdleCallback from './request-idle-callback.mjs';
-import {isSameOrigin, addSpeculationRules, hasSpecRulesSupport, isSpecRulesExists} from './prerender.mjs';
+import {addSpeculationRules, hasSpecRulesSupport} from './prerender.mjs';
 
 // Cache of URLs we've prefetched
 // Its `size` is compared against `opts.limit` value.
@@ -105,8 +105,6 @@ export function listen(options = {}) {
   const shouldOnlyPrerender = options.prerender || false;
   shouldPrerenderAndPrefetch = options.prerenderAndPrefetch || false;
 
-  const prerenderLimit = 1;
-
   const setTimeoutIfDelay = (callback, delay) => {
     if (!delay) {
       callback();
@@ -133,8 +131,8 @@ export function listen(options = {}) {
 
           // prerender, if..
           // either it's the prerender + prefetch mode or it's prerender *only* mode
-          // && no link has been prerendered before (no spec rules defined)
-          if ((shouldPrerenderAndPrefetch || shouldOnlyPrerender) && toPrerender.size < prerenderLimit) {
+          // Prerendering limit is following options.limit. UA may impose arbitraty numeric limit
+          if ((shouldPrerenderAndPrefetch || shouldOnlyPrerender) && toPrerender.size < limit) {
             prerender(hrefFn ? hrefFn(entry) : entry.href).catch(error => {
               if (options.onError) {
                 options.onError(error);
@@ -245,22 +243,13 @@ export function prerender(urls) {
 
   // prerendering preconditions:
   // 1) whether UA supports spec rules.. If not, fallback to prefetch
+  // Note: Prerendering supports same-site cross origin with opt-in header
   if (!hasSpecRulesSupport()) {
     prefetch(urls);
     return Promise.reject(new Error('This browser does not support the speculation rules API. Falling back to prefetch.'));
   }
 
-  // 2) whether spec rules is already defined (and with this we also covered when we have created spec rules before)
-  if (isSpecRulesExists()) {
-    return Promise.reject(new Error('Speculation Rules is already defined and cannot be altered.'));
-  }
-
-  // 3) whether it's a same origin url,
   for (const url of [].concat(urls)) {
-    if (!isSameOrigin(url)) {
-      return Promise.reject(new Error(`Only same origin URLs are allowed: ${url}`));
-    }
-
     toPrerender.add(url);
   }
 

src/prerender.mjs

@@ -17,15 +17,6 @@
  * limitations under the License.
  **/
 
-/**
- * Checks if the given string is a same origin url
- * @param {string} str - the URL to check
- * @return {Boolean} true for same origin url
- */
-export function isSameOrigin(str) {
-  return window.location.origin === (new URL(str, window.location.href)).origin;
-}
-
 /**
  * Add a given set of urls to the speculation rules
  * @param {Set} urlsToPrerender - the URLs to add to speculation rules
@@ -51,11 +42,3 @@ export function addSpeculationRules(urlsToPrerender) {
 export function hasSpecRulesSupport() {
   return HTMLScriptElement.supports('speculationrules');
 }
-
-/**
- * Check whether Spec Rules is already defined in the document
- * @return {Boolean} whether Spec Rules exists/already defined
- */
-export function isSpecRulesExists() {
-  return document.querySelector('script[type="speculationrules"]');
-}