@tyndall/core 0.0.1 → 0.0.2

package/dist/client-router-bootstrap.js

@@ -1,59 +1,111 @@
+import { ROUTE_DATA_SCRIPT_ID } from "./route-data.js";
 export const CLIENT_ROUTER_BOOTSTRAP_PATH = "/_hyper/client-bootstrap.js";
 export const renderClientRouterBootstrap = (options) => {
     const navigationMode = JSON.stringify(options.navigationMode);
     const clientRenderMode = JSON.stringify(options.clientRenderMode);
     const prefetchPath = JSON.stringify(options.prefetchPath ?? "/__hyper/prefetch");
     const linkInterceptionMode = JSON.stringify(options.linkInterceptionMode ?? "marked");
-    return `(() => {
-  if (typeof window === "undefined") return;
-  if (window.__HYPER_CLIENT_BOOTSTRAP__) return;
+    const scrollRestoration = JSON.stringify(options.scrollRestoration !== false);
+    const routeDataScriptId = JSON.stringify(ROUTE_DATA_SCRIPT_ID);
+    return `(function () {
+  if (typeof window === "undefined") { return; }
+  if (window.__HYPER_CLIENT_BOOTSTRAP__) { return; }
   window.__HYPER_CLIENT_BOOTSTRAP__ = true;
 
-  const navigationMode = ${navigationMode};
-  const clientRenderMode = ${clientRenderMode};
-  const prefetchPath = ${prefetchPath};
-  const linkInterceptionMode = ${linkInterceptionMode};
+  var navigationMode = ${navigationMode};
+  var clientRenderMode = ${clientRenderMode};
+  var prefetchPath = ${prefetchPath};
+  var linkInterceptionMode = ${linkInterceptionMode};
+  var scrollRestoration = ${scrollRestoration};
+  var ROUTE_DATA_SCRIPT_ID = ${routeDataScriptId};
 
   if (navigationMode !== "client") {
     return;
   }
 
-  const NAVIGATION_HEADER = "x-hyper-navigation";
-  const NAVIGATION_MODE = "csr";
-  const MANAGED_HEAD_ATTR = "data-hyper-head";
-  const ROUTE_PAYLOAD_EVENT = "hyper:route-payload-applied";
+  var NAVIGATION_HEADER = "x-hyper-navigation";
+  var NAVIGATION_MODE = "csr";
+  var MANAGED_HEAD_ATTR = "data-hyper-head";
+  var ROUTE_PAYLOAD_EVENT = "hyper:route-payload-applied";
+  var ROUTE_DATA_EVENT = "hyper:route-data-applied";
+  var ROUTE_REDIRECT_KIND = "hyper-route-redirect";
 
-  const isRecord = (value) =>
-    typeof value === "object" && value !== null && !Array.isArray(value);
+  var isRecord = function (value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  };
+
+  var parseJsonPayload = function (value) {
+    if (typeof value !== "string" || value.length === 0) {
+      return {};
+    }
+    try {
+      return JSON.parse(value);
+    } catch (error) {
+      return {};
+    }
+  };
+
+  var resolveNavigationGuard = function () {
+    var guard = window.__HYPER_NAVIGATION_GUARD__;
+    return typeof guard === "function" ? guard : null;
+  };
+
+  var shouldAllowNavigation = function (href, replace, type) {
+    var guard = resolveNavigationGuard();
+    if (!guard) {
+      return true;
+    }
+    try {
+      return guard({ href: href, replace: Boolean(replace), type: type });
+    } catch (error) {
+      return true;
+    }
+  };
 
-  const findAnchor = (target) => {
-    if (!target || typeof target.closest !== "function") {
+  var findAnchor = function (target) {
+    if (!target) {
       return null;
     }
-    return target.closest("a[href]");
+    if (typeof target.closest === "function") {
+      return target.closest("a[href]");
+    }
+    var node = target;
+    while (node && node.nodeType === 1) {
+      if (
+        node.tagName &&
+        node.tagName.toLowerCase() === "a" &&
+        node.getAttribute &&
+        node.getAttribute("href")
+      ) {
+        return node;
+      }
+      node = node.parentNode;
+    }
+    return null;
   };
 
-  const isModifiedClick = (event) =>
-    event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  var isModifiedClick = function (event) {
+    return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+  };
 
-  const shouldInterceptAnchor = (anchor) => {
-    if (!anchor) return false;
-    if (anchor.getAttribute("data-hyper-link") === "false") return false;
-    if (linkInterceptionMode === "all") return true;
+  var shouldInterceptAnchor = function (anchor) {
+    if (!anchor) { return false; }
+    if (anchor.getAttribute("data-hyper-link") === "false") { return false; }
+    if (linkInterceptionMode === "all") { return true; }
     return anchor.hasAttribute("data-hyper-link");
   };
 
-  const canHandleAnchor = (anchor, event) => {
-    if (!anchor) return false;
-    if (event && event.button !== 0) return false;
-    if (event && isModifiedClick(event)) return false;
-    if (anchor.hasAttribute("download")) return false;
-    if (anchor.getAttribute("target")) return false;
-    if (anchor.getAttribute("rel") === "external") return false;
-    if (!shouldInterceptAnchor(anchor)) return false;
-
-    const url = new URL(anchor.href, window.location.href);
-    if (url.origin !== window.location.origin) return false;
+  var canHandleAnchor = function (anchor, event) {
+    if (!anchor) { return false; }
+    if (event && event.button !== 0) { return false; }
+    if (event && isModifiedClick(event)) { return false; }
+    if (anchor.hasAttribute("download")) { return false; }
+    if (anchor.getAttribute("target")) { return false; }
+    if (anchor.getAttribute("rel") === "external") { return false; }
+    if (!shouldInterceptAnchor(anchor)) { return false; }
+
+    var url = new URL(anchor.href, window.location.href);
+    if (url.origin !== window.location.origin) { return false; }
     if (
       url.hash &&
       url.pathname === window.location.pathname &&
@@ -64,45 +116,137 @@ export const renderClientRouterBootstrap = (options) => {
     return true;
   };
 
-  const removeManagedHead = () => {
-    const managed = document.head.querySelectorAll("[" + MANAGED_HEAD_ATTR + "]");
-    for (const node of managed) {
-      node.remove();
+  var scrollPositions =
+    window.__HYPER_SCROLL_POSITIONS__ && typeof window.__HYPER_SCROLL_POSITIONS__ === "object"
+      ? window.__HYPER_SCROLL_POSITIONS__
+      : {};
+  window.__HYPER_SCROLL_POSITIONS__ = scrollPositions;
+
+  var toScrollKey = function (url) {
+    return url.pathname + url.search;
+  };
+
+  var saveScrollPosition = function (href) {
+    if (!scrollRestoration) { return; }
+    if (!href || typeof href !== "string") { return; }
+    try {
+      var url = new URL(href, window.location.href);
+      var key = toScrollKey(url);
+      scrollPositions[key] = {
+        x: window.scrollX || window.pageXOffset || 0,
+        y: window.scrollY || window.pageYOffset || 0
+      };
+    } catch (error) {
+      // Ignore malformed hrefs for scroll tracking.
     }
   };
 
-  const appendHeadNode = (tagName, attrs) => {
-    const node = document.createElement(tagName);
-    for (const [key, value] of Object.entries(attrs)) {
-      if (value === undefined || value === null) continue;
+  var scrollToHash = function (url) {
+    if (!url.hash) { return false; }
+    var id = url.hash.slice(1);
+    if (!id) { return false; }
+    var node = document.getElementById(id);
+    if (node && typeof node.scrollIntoView === "function") {
+      node.scrollIntoView();
+      return true;
+    }
+    return false;
+  };
+
+  var restoreScrollPosition = function (url, fromHistory) {
+    if (!scrollRestoration) { return; }
+    if (scrollToHash(url)) {
+      return;
+    }
+    var key = toScrollKey(url);
+    if (fromHistory && scrollPositions[key]) {
+      var position = scrollPositions[key];
+      if (position && typeof position === "object") {
+        var x = typeof position.x === "number" ? position.x : 0;
+        var y = typeof position.y === "number" ? position.y : 0;
+        window.scrollTo(x, y);
+        return;
+      }
+    }
+    window.scrollTo(0, 0);
+  };
+
+  if (scrollRestoration && window.history && "scrollRestoration" in window.history) {
+    try {
+      window.history.scrollRestoration = "manual";
+    } catch (error) {
+      // Ignore environments that block scrollRestoration assignment.
+    }
+  }
+
+  var currentHref = window.location.href;
+  var initialRouteDataScript = document.getElementById(ROUTE_DATA_SCRIPT_ID);
+  if (initialRouteDataScript && !window.__HYPER_ROUTE_DATA__) {
+    window.__HYPER_ROUTE_DATA__ = parseJsonPayload(initialRouteDataScript.textContent);
+  }
+
+  var removeManagedHead = function () {
+    if (!document.head) {
+      return;
+    }
+    var managed = document.head.querySelectorAll("[" + MANAGED_HEAD_ATTR + "]");
+    for (var index = 0; index < managed.length; index += 1) {
+      var node = managed[index];
+      if (!node) {
+        continue;
+      }
+      if (typeof node.remove === "function") {
+        node.remove();
+      } else if (node.parentNode) {
+        node.parentNode.removeChild(node);
+      }
+    }
+  };
+
+  var appendHeadNode = function (tagName, attrs) {
+    if (!document.head) {
+      return;
+    }
+    var node = document.createElement(tagName);
+    for (var key in attrs) {
+      if (!Object.prototype.hasOwnProperty.call(attrs, key)) {
+        continue;
+      }
+      var value = attrs[key];
+      if (value === undefined || value === null) {
+        continue;
+      }
       node.setAttribute(key, String(value));
     }
     node.setAttribute(MANAGED_HEAD_ATTR, "true");
     document.head.appendChild(node);
   };
 
-  const applyHead = (head) => {
-    if (!isRecord(head)) return;
+  var applyHead = function (head) {
+    if (!isRecord(head)) { return; }
     if (typeof head.title === "string") {
       document.title = head.title;
     }
     removeManagedHead();
     if (Array.isArray(head.meta)) {
-      for (const meta of head.meta) {
+      for (var index = 0; index < head.meta.length; index += 1) {
+        var meta = head.meta[index];
         if (isRecord(meta)) {
           appendHeadNode("meta", meta);
         }
       }
     }
     if (Array.isArray(head.link)) {
-      for (const link of head.link) {
+      for (var linkIndex = 0; linkIndex < head.link.length; linkIndex += 1) {
+        var link = head.link[linkIndex];
         if (isRecord(link)) {
           appendHeadNode("link", link);
         }
       }
     }
     if (Array.isArray(head.script)) {
-      for (const script of head.script) {
+      for (var scriptIndex = 0; scriptIndex < head.script.length; scriptIndex += 1) {
+        var script = head.script[scriptIndex];
         if (isRecord(script)) {
           appendHeadNode("script", script);
         }
@@ -110,18 +254,52 @@ export const renderClientRouterBootstrap = (options) => {
     }
   };
 
-  const isRoutePayload = (value) => {
-    if (!isRecord(value)) return false;
-    if (value.kind !== "hyper-route-payload") return false;
-    if (typeof value.routeId !== "string") return false;
-    if (typeof value.appHtml !== "string") return false;
-    if (typeof value.propsPayload !== "string") return false;
+  var isRoutePayload = function (value) {
+    if (!isRecord(value)) { return false; }
+    if (value.kind !== "hyper-route-payload") { return false; }
+    if (typeof value.routeId !== "string") { return false; }
+    if (typeof value.appHtml !== "string") { return false; }
+    if (typeof value.propsPayload !== "string") { return false; }
+    if (
+      value.routeDataPayload !== undefined &&
+      value.routeDataPayload !== null &&
+      typeof value.routeDataPayload !== "string"
+    ) {
+      return false;
+    }
     return true;
   };
 
-  const applyPayload = (payload) => {
-    const app = document.getElementById("app");
-    const hasMountedClientApp =
+  var isRouteRedirect = function (value) {
+    if (!isRecord(value)) { return false; }
+    if (value.kind !== ROUTE_REDIRECT_KIND) { return false; }
+    if (typeof value.destination !== "string") { return false; }
+    return true;
+  };
+
+  var applyRouteDataPayload = function (payload, routeId) {
+    var routeDataPayload =
+      typeof payload.routeDataPayload === "string" ? payload.routeDataPayload : "{}";
+    var routeDataScript = document.getElementById(ROUTE_DATA_SCRIPT_ID);
+    if (routeDataScript) {
+      routeDataScript.textContent = routeDataPayload;
+    }
+    var routeData = parseJsonPayload(routeDataPayload);
+    window.__HYPER_ROUTE_DATA__ = routeData;
+    try {
+      window.dispatchEvent(
+        new CustomEvent(ROUTE_DATA_EVENT, {
+          detail: { routeId: routeId, routeData: routeData }
+        })
+      );
+    } catch (error) {
+      // Keep navigation resilient even when CustomEvent is unavailable.
+    }
+  };
+
+  var applyPayload = function (payload) {
+    var app = document.getElementById("app");
+    var hasMountedClientApp =
       payload.hydration !== "islands" && Boolean(window.__HYPER_CLIENT_APP_MOUNTED__);
     if (app) {
       if (!hasMountedClientApp) {
@@ -139,11 +317,12 @@ export const renderClientRouterBootstrap = (options) => {
       }
     }
 
-    const propsScript = document.getElementById("__HYPER_PROPS__");
+    var propsScript = document.getElementById("__HYPER_PROPS__");
     if (propsScript) {
       propsScript.textContent = payload.propsPayload;
     }
 
+    applyRouteDataPayload(payload, payload.routeId);
     applyHead(payload.head);
     window.__HYPER_ROUTE_ID__ = payload.routeId;
     window.__HYPER_HYDRATED__ = false;
@@ -151,77 +330,105 @@ export const renderClientRouterBootstrap = (options) => {
     try {
       window.dispatchEvent(
         new CustomEvent(ROUTE_PAYLOAD_EVENT, {
-          detail: { routeId: payload.routeId },
-        }),
+          detail: { routeId: payload.routeId }
+        })
       );
-    } catch {
+    } catch (error) {
       // Keep navigation resilient even when CustomEvent is unavailable.
     }
   };
 
-  const resolveModuleMap = () => {
-    const raw = window.__HYPER_CLIENT_ROUTE_MODULES__;
+  var resolveModuleMap = function () {
+    var raw = window.__HYPER_CLIENT_ROUTE_MODULES__;
     return isRecord(raw) ? raw : null;
   };
 
-  const tryModuleRender = async (url) => {
-    if (clientRenderMode !== "module") return false;
-    const moduleMap = resolveModuleMap();
-    if (!moduleMap) return false;
-    const loader = moduleMap[url.pathname];
-    if (typeof loader !== "function") return false;
+  var tryModuleRender = function (url) {
+    if (clientRenderMode !== "module") { return Promise.resolve(false); }
+    var moduleMap = resolveModuleMap();
+    if (!moduleMap) { return Promise.resolve(false); }
+    var loader = moduleMap[url.pathname];
+    if (typeof loader !== "function") { return Promise.resolve(false); }
     try {
-      const loaded = await loader();
-      const renderFn =
-        (isRecord(loaded) && typeof loaded.render === "function" && loaded.render) ||
-        (isRecord(loaded) && typeof loaded.default === "function" && loaded.default) ||
-        (typeof loaded === "function" && loaded);
-      if (typeof renderFn !== "function") return false;
-      const rendered = await renderFn({
-        href: url.toString(),
-        pathname: url.pathname,
-        routeId: url.pathname,
-        params: {},
-        query: {},
-      });
-      if (!isRecord(rendered) || typeof rendered.appHtml !== "string") {
-        return false;
-      }
-      applyPayload({
-        kind: "hyper-route-payload",
-        routeId: typeof rendered.routeId === "string" ? rendered.routeId : url.pathname,
-        appHtml: rendered.appHtml,
-        propsPayload:
-          typeof rendered.propsPayload === "string" ? rendered.propsPayload : "{}",
-        head: rendered.head,
-        hydration: rendered.hydration,
-      });
-      return true;
-    } catch {
-      return false;
+      return Promise.resolve(loader())
+        .then(function (loaded) {
+          var renderFn =
+            (isRecord(loaded) && typeof loaded.render === "function" && loaded.render) ||
+            (isRecord(loaded) && typeof loaded.default === "function" && loaded.default) ||
+            (typeof loaded === "function" && loaded);
+          if (typeof renderFn !== "function") { return false; }
+          return Promise.resolve(renderFn({
+            href: url.toString(),
+            pathname: url.pathname,
+            routeId: url.pathname,
+            params: {},
+            query: {}
+          })).then(function (rendered) {
+            if (!isRecord(rendered) || typeof rendered.appHtml !== "string") {
+              return false;
+            }
+            var routeDataPayload = "{}";
+            if (typeof rendered.routeDataPayload === "string") {
+              routeDataPayload = rendered.routeDataPayload;
+            } else if (isRecord(rendered.routeData)) {
+              try {
+                routeDataPayload = JSON.stringify(rendered.routeData);
+              } catch (error) {
+                routeDataPayload = "{}";
+              }
+            }
+            applyPayload({
+              kind: "hyper-route-payload",
+              routeId: typeof rendered.routeId === "string" ? rendered.routeId : url.pathname,
+              appHtml: rendered.appHtml,
+              propsPayload:
+                typeof rendered.propsPayload === "string" ? rendered.propsPayload : "{}",
+              routeDataPayload: routeDataPayload,
+              head: rendered.head,
+              hydration: rendered.hydration
+            });
+            return true;
+          });
+        })
+        .catch(function () {
+          return false;
+        });
+    } catch (error) {
+      return Promise.resolve(false);
     }
   };
 
-  const fetchPayload = async (url) => {
+  var fetchPayload = function (url) {
     try {
-      const response = await fetch(url.toString(), {
+      var headers = { accept: "application/json" };
+      headers[NAVIGATION_HEADER] = NAVIGATION_MODE;
+      return fetch(url.toString(), {
         method: "GET",
-        headers: {
-          [NAVIGATION_HEADER]: NAVIGATION_MODE,
-          accept: "application/json",
-        },
-      });
-      if (!response.ok) return null;
-      const contentType = response.headers.get("content-type") || "";
-      if (!contentType.includes("application/json")) return null;
-      const json = await response.json();
-      return isRoutePayload(json) ? json : null;
-    } catch {
-      return null;
+        headers: headers
+      })
+        .then(function (response) {
+          if (!response || !response.ok) { return null; }
+          var contentType = response.headers.get("content-type") || "";
+          if (contentType.indexOf("application/json") === -1) { return null; }
+          return response.json().then(function (json) {
+            if (isRoutePayload(json)) {
+              return { kind: "payload", payload: json };
+            }
+            if (isRouteRedirect(json)) {
+              return { kind: "redirect", payload: json };
+            }
+            return null;
+          });
+        })
+        .catch(function () {
+          return null;
+        });
+    } catch (error) {
+      return Promise.resolve(null);
     }
   };
 
-  const updateHistory = (url, replace) => {
+  var updateHistory = function (url, replace) {
     if (replace) {
       window.history.replaceState(null, "", url.toString());
       return;
@@ -229,8 +436,8 @@ export const renderClientRouterBootstrap = (options) => {
     window.history.pushState(null, "", url.toString());
   };
 
-  const navigateByUrl = (url, replace) => {
-    const href = url.toString();
+  var navigateByUrl = function (url, replace) {
+    var href = url.toString();
     if (replace) {
       window.location.replace(href);
       return;
@@ -238,81 +445,147 @@ export const renderClientRouterBootstrap = (options) => {
     window.location.assign(href);
   };
 
-  const navigate = async (href, options = {}) => {
-    const url = new URL(href, window.location.href);
-    if (await tryModuleRender(url)) {
-      if (!options.skipHistory) {
-        updateHistory(url, Boolean(options.replace));
-      }
-      return true;
+  var navigate = function (href, options) {
+    options = options || {};
+    var url;
+    try {
+      url = new URL(href, window.location.href);
+    } catch (error) {
+      return Promise.resolve(false);
     }
-    const payload = await fetchPayload(url);
-    if (payload) {
-      applyPayload(payload);
-      if (!options.skipHistory) {
-        updateHistory(url, Boolean(options.replace));
-      }
-      return true;
+    if (!shouldAllowNavigation(url.toString(), Boolean(options.replace), options.type || "navigate")) {
+      return Promise.resolve(false);
     }
-    if (!options.disableUrlFallback) {
-      navigateByUrl(url, Boolean(options.replace));
+    if (!options.skipScrollSave) {
+      saveScrollPosition(currentHref);
     }
-    return false;
+    return tryModuleRender(url).then(function (handled) {
+      if (handled) {
+        if (!options.skipHistory) {
+          updateHistory(url, Boolean(options.replace));
+        }
+        currentHref = url.toString();
+        if (!options.skipScrollRestore) {
+          restoreScrollPosition(url, Boolean(options.fromHistory));
+        }
+        return true;
+      }
+      return fetchPayload(url).then(function (payload) {
+        if (payload && payload.kind === "redirect") {
+          var destination = payload.payload.destination;
+          if (destination) {
+            return navigate(destination, {
+              replace: Boolean(payload.payload.replace),
+              skipHistory: false,
+              disableUrlFallback: false,
+              skipScrollSave: true,
+              type: "redirect"
+            });
+          }
+        }
+        if (payload && payload.kind === "payload") {
+          applyPayload(payload.payload);
+          if (!options.skipHistory) {
+            updateHistory(url, Boolean(options.replace));
+          }
+          currentHref = url.toString();
+          if (!options.skipScrollRestore) {
+            restoreScrollPosition(url, Boolean(options.fromHistory));
+          }
+          return true;
+        }
+        if (!options.disableUrlFallback) {
+          navigateByUrl(url, Boolean(options.replace));
+        }
+        return false;
+      });
+    });
+  };
+
+  var softReload = function () {
+    return navigate(window.location.href, {
+      replace: true,
+      skipHistory: true,
+      disableUrlFallback: true,
+      skipScrollSave: true,
+      skipScrollRestore: true,
+      type: "softReload"
+    }).then(function (ok) {
+      if (!ok && typeof window.location.reload === "function") {
+        window.location.reload();
+      }
+      return ok;
+    });
   };
 
-  const prefetch = async (href) => {
+  window.__HYPER_SOFT_RELOAD__ = softReload;
+
+  var prefetch = function (href) {
     try {
-      const url = new URL(href, window.location.href);
-      const prefetchUrl = new URL(prefetchPath, window.location.origin);
+      var url = new URL(href, window.location.href);
+      var prefetchUrl = new URL(prefetchPath, window.location.origin);
       prefetchUrl.searchParams.set("path", url.pathname + url.search);
-      await fetch(prefetchUrl.toString(), { method: "POST" });
-    } catch {
+      return fetch(prefetchUrl.toString(), { method: "POST" }).catch(function () {});
+    } catch (error) {
       // Best-effort prefetch only.
     }
+    return Promise.resolve();
   };
 
   document.addEventListener(
     "click",
-    (event) => {
-      const anchor = findAnchor(event.target);
+    function (event) {
+      var anchor = findAnchor(event.target);
       if (!canHandleAnchor(anchor, event)) {
         return;
       }
-      event.preventDefault();
-      void navigate(anchor.href);
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false;
+      }
+      navigate(anchor.href, { type: "click" });
     },
-    true,
+    true
   );
 
   document.addEventListener(
     "mouseover",
-    (event) => {
-      const anchor = findAnchor(event.target);
+    function (event) {
+      var anchor = findAnchor(event.target);
       if (!anchor || !shouldInterceptAnchor(anchor)) {
         return;
       }
-      void prefetch(anchor.href);
+      prefetch(anchor.href);
     },
-    true,
+    true
   );
 
   document.addEventListener(
     "focusin",
-    (event) => {
-      const anchor = findAnchor(event.target);
+    function (event) {
+      var anchor = findAnchor(event.target);
       if (!anchor || !shouldInterceptAnchor(anchor)) {
         return;
       }
-      void prefetch(anchor.href);
+      prefetch(anchor.href);
     },
-    true,
+    true
   );
 
-  window.addEventListener("popstate", () => {
-    void navigate(window.location.href, {
+  window.addEventListener("popstate", function () {
+    var previousHref = currentHref;
+    var nextHref = window.location.href;
+    if (previousHref && previousHref !== nextHref) {
+      saveScrollPosition(previousHref);
+    }
+    navigate(nextHref, {
       replace: true,
       skipHistory: true,
       disableUrlFallback: false,
+      fromHistory: true,
+      skipScrollSave: true,
+      type: "popstate"
     });
   });
 })();`;