feat(pat-inject): More metadata updates for history:record injections.

When a URL manipulating injection with the history:record setting is
done, we also want a bunch of other data be updated. That includes:

- title
- canonical link
- base URL

We already had support for the title tag in the head section of the
document. This PR adds support for ``<link rel="canonical" href="..."
/>`` and `<base href="...">` tags.

Author: thet

src/pat/inject/inject.js

@@ -463,7 +463,16 @@ const inject = {
         return $target;
     },
 
-    _performInjection(target, $el, $sources, cfg, trigger, $title) {
+    _performInjection(
+        target,
+        $el,
+        $sources,
+        cfg,
+        trigger,
+        $title_tag,
+        $canonical_tag,
+        $base_tag
+    ) {
         /* Called after the XHR has succeeded and we have a new $sources
          * element to inject.
          */
@@ -472,7 +481,9 @@ const inject = {
             const method = cfg.sourceMod === "content" ? "innerHTML" : "outerHTML";
             // There might be multiple sources, so we need to loop over them.
             // Access them with "innerHTML" or "outerHTML" depending on the sourceMod.
-            const sources_string = [...$sources].map(source => source[method]).join("\n");
+            const sources_string = [...$sources]
+                .map((source) => source[method])
+                .join("\n");
             wrapper.innerHTML = sources_string;
 
             for (const img of wrapper.content.querySelectorAll("img")) {
@@ -494,13 +505,13 @@ const inject = {
         // Now the injection actually happens.
         if (this._inject(trigger, source_nodes, target, cfg)) {
             // Update history
-            this._update_history(cfg, trigger, $title);
+            this._update_history(cfg, trigger, $title_tag, $canonical_tag, $base_tag);
             // Post-injection
             this._afterInjection($el, cfg.$created_target || $(source_nodes), cfg);
         }
     },
 
-    _update_history(cfg, trigger, $title) {
+    _update_history(cfg, trigger, $title_tag, $canonical_tag, $base_tag) {
         // History support. if subform is submitted, append form params
         if (cfg.history !== "record" || !history?.pushState) {
             return;
@@ -510,16 +521,45 @@ const inject = {
             const glue = url.indexOf("?") > -1 ? "&" : "?";
             url = `${url}${glue}${cfg.params}`;
         }
-        history.pushState({ url: url }, "", url);
+
+        // We have a URL changing injection. We also need to update other data:
+        // - title
+        // - canonical link
+        // - base url
+
         // Also inject title element if we have one
-        if ($title?.length) {
+        if ($title_tag?.length) {
             const title_el = document.querySelector("title");
             if (title_el) {
-                this._inject(trigger, $title, title_el, {
+                this._inject(trigger, $title_tag, title_el, {
+                    action: "element",
+                });
+            }
+        }
+
+        // Also inject canonical element if we have one
+        if ($canonical_tag?.length) {
+            const canonical_el = document.querySelector("link[rel=canonical]");
+            if (canonical_el) {
+                this._inject(trigger, $canonical_tag, canonical_el, {
                     action: "element",
                 });
             }
         }
+
+        // Also inject base element if we have one
+        if ($base_tag?.length) {
+            const base_el = document.querySelector("base");
+            if (base_el) {
+                this._inject(trigger, $base_tag, base_el, {
+                    action: "element",
+                });
+            }
+        }
+
+        // At last position - other patterns can react on already changed title,
+        // canonical or base.
+        history.pushState({ url: url }, "", url);
     },
 
     _afterInjection($el, $injected, cfg) {
@@ -592,16 +632,21 @@ const inject = {
             data,
             ev,
         ]);
-        /* pick the title source for dedicated handling later
-          Title - if present - is always appended at the end. */
-        let $title;
-        if (
-            sources$ &&
-            sources$[sources$.length - 1] &&
-            sources$[sources$.length - 1][0] &&
-            sources$[sources$.length - 1][0].nodeName === "TITLE"
-        ) {
-            $title = sources$[sources$.length - 1];
+
+        const extra_sources = sources$.filter((source) => source instanceof Array);
+        let $title_tag;
+        let $canonical_tag;
+        let $base_tag;
+        for (const extra_source of extra_sources) {
+            if (extra_source[0] === "head_title") {
+                $title_tag = extra_source[1];
+            }
+            if (extra_source[0] === "head_canonical") {
+                $canonical_tag = extra_source[1];
+            }
+            if (extra_source[0] === "head_base") {
+                $base_tag = extra_source[1];
+            }
         }
 
         for (const [idx1, cfg] of cfgs.entries()) {
@@ -614,7 +659,9 @@ const inject = {
                             sources$[idx1],
                             cfg,
                             ev.target,
-                            $title
+                            $title_tag,
+                            $canonical_tag,
+                            $base_tag
                         );
                     }
                 }
@@ -834,19 +881,33 @@ const inject = {
 
     _sourcesFromHtml(html, url, sources) {
         const $html = this._parseRawHtml(html, url);
-        return sources.map((source) => {
+        const $sources = sources.map((source) => {
+            // Special cases for automatic title and canonical manipulation for
+            // history:records injections.
+
+            if (source === "head_title") {
+                return ["head_title", $html.find("title")];
+            }
+            if (source === "head_canonical") {
+                return ["head_canonical", $html.find("link[rel=canonical]")];
+            }
+            if (source === "head_base") {
+                return ["head_base", $html.find("base")];
+            }
+
+            // Special case for body
             if (source === "body") {
                 source = "#__original_body";
             }
+
+            // Special case for "none";
             if (source === "none") {
                 return $("<!-- -->");
             }
             const $source = $html.find(source);
 
             if ($source.length === 0) {
-                if (source != "title") {
-                    log.warn("No source elements for selector:", source, $html);
-                }
+                log.warn("No source elements for selector:", source, $html);
             }
 
             $source.find('a[href^="#"]').each((idx, el_) => {
@@ -868,6 +929,7 @@ const inject = {
             });
             return $source;
         });
+        return $sources;
     },
 
     _rebaseAttrs: {
@@ -973,7 +1035,11 @@ const inject = {
 
     _parseRawHtml(html, url = "") {
         // remove script tags and head and replace body by a div
-        const title = html.match(/\<title\>(.*)\<\/title\>/);
+        const title_tag = html.match(/\<title\>(.*)\<\/title\>/);
+        const canonical_tag = html.match(
+            /<link\b[^>]*\brel\s*=\s*["']canonical["'][^>]*>/i
+        );
+        const base_tag = html.match(/<base\b[^>]*>/i);
         let clean_html = html
             .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
             .replace(/<head\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/head>/gi, "")
@@ -982,8 +1048,14 @@ const inject = {
             .replace(/<body([^>]*?)>/gi, '<div id="__original_body">')
             .replace(/<\/body([^>]*?)>/gi, "</div>");
 
-        if (title && title.length == 2) {
-            clean_html = title[0] + clean_html;
+        if (title_tag && title_tag.length == 2) {
+            clean_html = title_tag[0] + clean_html;
+        }
+        if (canonical_tag) {
+            clean_html = canonical_tag[0] + clean_html;
+        }
+        if (base_tag) {
+            clean_html = base_tag[0] + clean_html;
         }
         try {
             clean_html = this._rebaseHTML(url, clean_html);
@@ -1121,7 +1193,9 @@ const inject = {
         html: {
             sources(cfgs, data) {
                 const sources = cfgs.map((cfg) => cfg.source);
-                sources.push("title");
+                sources.push("head_title");
+                sources.push("head_canonical");
+                sources.push("head_base");
                 const result = this._sourcesFromHtml(data, cfgs[0].url, sources);
                 return result;
             },