@wordpress/interactivity-router 2.32.0 → 2.32.1-next.47f435fc9.0

package/build/index.js

@@ -1,21 +1,40 @@
-/* wp:polyfill */
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  actions: () => actions,
+  state: () => state
 });
-exports.state = exports.actions = void 0;
-var _interactivity = require("@wordpress/interactivity");
-var _styles = require("./assets/styles");
-var _scriptModules = require("./assets/script-modules");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
- * WordPress dependencies
- */ /**
- * Internal dependencies
- */
+module.exports = __toCommonJS(index_exports);
+var import_interactivity = require("@wordpress/interactivity");
+var import_styles = require("./assets/styles");
+var import_script_modules = require("./assets/script-modules");
 const {
-  directivePrefix,
   getRegionRootFragment,
   initialVdom,
   toVdom,
@@ -25,93 +44,43 @@ const {
   batch,
   routerRegions,
   cloneElement
-} = (0, _interactivity.privateApis)('I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress.');
-const regionAttr = `data-${directivePrefix}-router-region`;
-const interactiveAttr = `data-${directivePrefix}-interactive`;
+} = (0, import_interactivity.privateApis)(
+  "I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WordPress."
+);
+const regionAttr = `data-wp-router-region`;
+const interactiveAttr = `data-wp-interactive`;
 const regionsSelector = `[${interactiveAttr}][${regionAttr}], [${interactiveAttr}] [${interactiveAttr}][${regionAttr}]`;
-// The cache of visited and prefetched pages, stylesheets and scripts.
-const pages = new Map();
-
-// Helper to remove domain and hash from the URL. We are only interesting in
-// caching the path and the query.
-const getPagePath = url => {
+const pages = /* @__PURE__ */ new Map();
+const getPagePath = (url) => {
   const u = new URL(url, window.location.href);
   return u.pathname + u.search;
 };
-
-/**
- * Parses the given region's directive.
- *
- * @param region Region element.
- * @return Data contained in the region directive value.
- */
-const parseRegionAttribute = region => {
+const parseRegionAttribute = (region) => {
   const value = region.getAttribute(regionAttr);
   try {
-    const {
-      id,
-      attachTo
-    } = JSON.parse(value);
-    return {
-      id,
-      attachTo
-    };
+    const { id, attachTo } = JSON.parse(value);
+    return { id, attachTo };
   } catch (e) {
-    return {
-      id: value
-    };
+    return { id: value };
   }
 };
-
-/**
- * Clones the content of the router region vDOM passed as argument.
- *
- * The function creates a new VNode instance removing all priority levels up to
- * the one containing the router-region directive, which should have evaluated
- * in advance.
- *
- * @param vdom A router region's VNode.
- * @return The VNode for the passed router region's content.
- */
-const cloneRouterRegionContent = vdom => {
+const cloneRouterRegionContent = (vdom) => {
   if (!vdom) {
     return vdom;
   }
   const allPriorityLevels = vdom.props.priorityLevels;
-  const routerRegionLevel = allPriorityLevels.findIndex(level => level.includes('router-region'));
+  const routerRegionLevel = allPriorityLevels.findIndex(
+    (level) => level.includes("router-region")
+  );
   const priorityLevels = routerRegionLevel !== -1 ? allPriorityLevels.slice(routerRegionLevel + 1) : allPriorityLevels;
   return priorityLevels.length > 0 ? cloneElement(vdom, {
     ...vdom.props,
     priorityLevels
   }) : vdom.props.element;
 };
-
-/**
- * IDs of router regions with an `attachTo` property pointing to the same parent
- * element.
- */
-const regionsToAttachByParent = new WeakMap();
-
-/**
- * Map of root fragments by parent element, used to render router regions with
- * the `attachTo` property. Those elements with the same parent are rendered
- * together in the corresponding root fragment.
- */
-const rootFragmentsByParent = new WeakMap();
-
-/**
- * Fetches and prepares a page from a given URL.
- *
- * @param url          The URL of the page to fetch.
- * @param options      Options for the fetch operation.
- * @param options.html Optional HTML content. If provided, the function will use
- *                     this instead of fetching from the URL.
- * @return             A Promise that resolves to the prepared page, or false if
- *                     there was an error during fetching or preparation.
- */
-const fetchPage = async (url, {
-  html
-}) => {
+const regionsToAttachByParent = /* @__PURE__ */ new WeakMap();
+const rootFragmentsByParent = /* @__PURE__ */ new WeakMap();
+const fetchPage = async (url, { html }) => {
   try {
     if (!html) {
       const res = await window.fetch(url);
@@ -120,48 +89,20 @@ const fetchPage = async (url, {
       }
       html = await res.text();
     }
-    const dom = new window.DOMParser().parseFromString(html, 'text/html');
+    const dom = new window.DOMParser().parseFromString(html, "text/html");
     return await preparePage(url, dom);
   } catch (e) {
     return false;
   }
 };
-
-/**
- * Processes a DOM document to extract router regions and related resources.
- *
- * This function analyzes the provided DOM document and creates a virtual DOM
- * representation of all HTML regions marked with a `router-region` directive.
- * It also extracts and preloads associated styles and scripts to prepare for
- * rendering the page.
- *
- * @param url             The URL associated with the page, used for asset
- *                        loading and caching.
- * @param dom             The DOM document to process.
- * @param vdomParams      Optional parameters for virtual DOM processing.
- * @param vdomParams.vdom An optional existing virtual DOM cache to check for
- *                        regions. If a region exists in this cache, it will be
- *                        reused instead of creating a new vDOM representation.
- * @return                A Promise that resolves to a {@link Page} object
- *                        containing the virtual DOM for all router regions,
- *                        preloaded styles and scripts, page title, and initial
- *                        server-rendered data.
- */
-const preparePage = async (url, dom, {
-  vdom
-} = {}) => {
-  // Remove all noscript elements as they're irrelevant when request is served via router.
-  // This prevents browsers from extracting styles from noscript tags.
-  dom.querySelectorAll('noscript').forEach(el => el.remove());
+const preparePage = async (url, dom, { vdom } = {}) => {
+  dom.querySelectorAll("noscript").forEach((el) => el.remove());
   const regions = {};
   const regionsToAttach = {};
-  dom.querySelectorAll(regionsSelector).forEach(region => {
-    const {
-      id,
-      attachTo
-    } = parseRegionAttribute(region);
+  dom.querySelectorAll(regionsSelector).forEach((region) => {
+    const { id, attachTo } = parseRegionAttribute(region);
     if (region.parentElement.closest(`[${regionAttr}]`)) {
-      regions[id] = undefined;
+      regions[id] = void 0;
     } else {
       regions[id] = vdom?.has(region) ? vdom.get(region) : toVdom(region);
     }
@@ -169,11 +110,12 @@ const preparePage = async (url, dom, {
       regionsToAttach[id] = attachTo;
     }
   });
-  const title = dom.querySelector('title')?.innerText;
+  const title = dom.querySelector("title")?.innerText;
   const initialData = parseServerData(dom);
-
-  // Wait for styles and modules to be ready.
-  const [styles, scriptModules] = await Promise.all([Promise.all((0, _styles.preloadStyles)(dom, url)), Promise.all((0, _scriptModules.preloadScriptModules)(dom))]);
+  const [styles, scriptModules] = await Promise.all([
+    Promise.all((0, import_styles.preloadStyles)(dom, url)),
+    Promise.all((0, import_script_modules.preloadScriptModules)(dom))
+  ]);
   return {
     regions,
     regionsToAttach,
@@ -184,31 +126,15 @@ const preparePage = async (url, dom, {
     url
   };
 };
-
-/**
- * Renders a page by applying styles, populating server data, rendering regions,
- * and updating the document title.
- *
- * @param page The {@link Page} object to render.
- */
-const renderPage = page => {
-  (0, _styles.applyStyles)(page.styles);
-
-  // Clone regionsToAttach.
-  const regionsToAttach = {
-    ...page.regionsToAttach
-  };
+const renderPage = (page) => {
+  (0, import_styles.applyStyles)(page.styles);
+  const regionsToAttach = { ...page.regionsToAttach };
   batch(() => {
-    // Update server data.
     populateServerData(page.initialData);
-
-    // Reset all router regions before setting the actual values.
-    routerRegions.forEach(signal => {
+    routerRegions.forEach((signal) => {
       signal.value = null;
     });
-
-    //Init regions with attachTo that don't exist yet.
-    const parentsToUpdate = new Set();
+    const parentsToUpdate = /* @__PURE__ */ new Set();
     for (const id in regionsToAttach) {
       const parent = document.querySelector(regionsToAttach[id]);
       if (!regionsToAttachByParent.has(parent)) {
@@ -220,32 +146,27 @@ const renderPage = page => {
         parentsToUpdate.add(parent);
       }
     }
-
-    //Update all existing regions.
     for (const id in page.regions) {
       if (routerRegions.has(id)) {
-        routerRegions.get(id).value = cloneRouterRegionContent(page.regions[id]);
+        routerRegions.get(id).value = cloneRouterRegionContent(
+          page.regions[id]
+        );
       }
     }
-
-    // Render regions attached to the same parent in the same fragment.
-    parentsToUpdate.forEach(parent => {
+    parentsToUpdate.forEach((parent) => {
       const ids = regionsToAttachByParent.get(parent);
-      const vdoms = ids.map(id => page.regions[id]);
+      const vdoms = ids.map((id) => page.regions[id]);
       if (!rootFragmentsByParent.has(parent)) {
-        const regions = vdoms.map(({
-          props,
-          type
-        }) => {
-          const elementType = typeof type === 'function' ? props.type : type;
-
-          // Create an element with the obtained type where the region will be
-          // rendered. The type should match the one of the root vnode.
+        const regions = vdoms.map(({ props, type }) => {
+          const elementType = typeof type === "function" ? props.type : type;
           const region = document.createElement(elementType);
           parent.appendChild(region);
           return region;
         });
-        rootFragmentsByParent.set(parent, getRegionRootFragment(regions));
+        rootFragmentsByParent.set(
+          parent,
+          getRegionRootFragment(regions)
+        );
       }
       const fragment = rootFragmentsByParent.get(parent);
       render(vdoms, fragment);
@@ -255,55 +176,37 @@ const renderPage = page => {
     document.title = page.title;
   }
 };
-
-/**
- * Loads the given page forcing a full page reload.
- *
- * The function returns a promise that won't resolve, useful to prevent any
- * potential feedback indicating that the navigation has finished while the new
- * page is being loaded.
- *
- * @param href The page href.
- * @return Promise that never resolves.
- */
-const forcePageReload = href => {
+const forcePageReload = (href) => {
   window.location.assign(href);
-  return new Promise(() => {});
+  return new Promise(() => {
+  });
 };
-
-// Listen to the back and forward buttons and restore the page if it's in the
-// cache.
-window.addEventListener('popstate', async () => {
-  const pagePath = getPagePath(window.location.href); // Remove hash.
-  const page = pages.has(pagePath) && (await pages.get(pagePath));
+window.addEventListener("popstate", async () => {
+  const pagePath = getPagePath(window.location.href);
+  const page = pages.has(pagePath) && await pages.get(pagePath);
   if (page) {
     renderPage(page);
-    // Update the URL in the state.
     state.url = window.location.href;
   } else {
     window.location.reload();
   }
 });
-
-// Initialize the router and cache the initial page using the initial vDOM.
-window.document.querySelectorAll('script[type=module][src]').forEach(({
-  src
-}) => (0, _scriptModules.markScriptModuleAsResolved)(src));
-pages.set(getPagePath(window.location.href), Promise.resolve(preparePage(getPagePath(window.location.href), document, {
-  vdom: initialVdom
-})));
-
-// Variable to store the current navigation.
-let navigatingTo = '';
+window.document.querySelectorAll("script[type=module][src]").forEach(({ src }) => (0, import_script_modules.markScriptModuleAsResolved)(src));
+pages.set(
+  getPagePath(window.location.href),
+  Promise.resolve(
+    preparePage(getPagePath(window.location.href), document, {
+      vdom: initialVdom
+    })
+  )
+);
+let navigatingTo = "";
 let hasLoadedNavigationTextsData = false;
 const navigationTexts = {
-  loading: 'Loading page, please wait.',
-  loaded: 'Page Loaded.'
+  loading: "Loading page, please wait.",
+  loaded: "Page Loaded."
 };
-const {
-  state,
-  actions
-} = (0, _interactivity.store)('core/router', {
+const { state, actions } = (0, import_interactivity.store)("core/router", {
   state: {
     url: window.location.href,
     navigation: {
@@ -331,29 +234,22 @@ const {
      * @return  Promise that resolves once the navigation is completed or aborted.
      */
     *navigate(href, options = {}) {
-      const {
-        clientNavigationDisabled
-      } = (0, _interactivity.getConfig)();
+      const { clientNavigationDisabled } = (0, import_interactivity.getConfig)();
       if (clientNavigationDisabled) {
         yield forcePageReload(href);
       }
       const pagePath = getPagePath(href);
-      const {
-        navigation
-      } = state;
+      const { navigation } = state;
       const {
         loadingAnimation = true,
         screenReaderAnnouncement = true,
-        timeout = 10000
+        timeout = 1e4
       } = options;
       navigatingTo = href;
       actions.prefetch(pagePath, options);
-
-      // Create a promise that resolves when the specified timeout ends.
-      // The timeout value is 10 seconds by default.
-      const timeoutPromise = new Promise(resolve => setTimeout(resolve, timeout));
-
-      // Don't update the navigation status immediately, wait 400 ms.
+      const timeoutPromise = new Promise(
+        (resolve) => setTimeout(resolve, timeout)
+      );
       const loadingTimeout = setTimeout(() => {
         if (navigatingTo !== href) {
           return;
@@ -363,42 +259,30 @@ const {
           navigation.hasFinished = false;
         }
         if (screenReaderAnnouncement) {
-          a11ySpeak('loading');
+          a11ySpeak("loading");
         }
       }, 400);
-      const page = yield Promise.race([pages.get(pagePath), timeoutPromise]);
-
-      // Dismiss loading message if it hasn't been added yet.
+      const page = yield Promise.race([
+        pages.get(pagePath),
+        timeoutPromise
+      ]);
       clearTimeout(loadingTimeout);
-
-      // Once the page is fetched, the destination URL could have changed
-      // (e.g., by clicking another link in the meantime). If so, bail
-      // out, and let the newer execution to update the HTML.
       if (navigatingTo !== href) {
         return;
       }
-      if (page && !page.initialData?.config?.['core/router']?.clientNavigationDisabled) {
-        yield (0, _scriptModules.importScriptModules)(page.scriptModules);
+      if (page && !page.initialData?.config?.["core/router"]?.clientNavigationDisabled) {
+        yield (0, import_script_modules.importScriptModules)(page.scriptModules);
         renderPage(page);
-        window.history[options.replace ? 'replaceState' : 'pushState']({}, '', href);
-
-        // Update the URL in the state.
+        window.history[options.replace ? "replaceState" : "pushState"]({}, "", href);
         state.url = href;
-
-        // Update the navigation status once the the new page rendering
-        // has been completed.
         if (loadingAnimation) {
           navigation.hasStarted = false;
           navigation.hasFinished = true;
         }
         if (screenReaderAnnouncement) {
-          a11ySpeak('loaded');
+          a11ySpeak("loaded");
         }
-
-        // Scroll to the anchor if exits in the link.
-        const {
-          hash
-        } = new URL(href, window.location.href);
+        const { hash } = new URL(href, window.location.href);
         if (hash) {
           document.querySelector(hash)?.scrollIntoView();
         }
@@ -420,68 +304,58 @@ const {
      * @return  Promise that resolves once the page has been fetched.
      */
     *prefetch(url, options = {}) {
-      const {
-        clientNavigationDisabled
-      } = (0, _interactivity.getConfig)();
+      const { clientNavigationDisabled } = (0, import_interactivity.getConfig)();
       if (clientNavigationDisabled) {
         return;
       }
       const pagePath = getPagePath(url);
       if (options.force || !pages.has(pagePath)) {
-        pages.set(pagePath, fetchPage(pagePath, {
-          html: options.html
-        }));
+        pages.set(
+          pagePath,
+          fetchPage(pagePath, { html: options.html })
+        );
       }
       yield pages.get(pagePath);
     }
   }
 });
-
-/**
- * Announces a message to screen readers.
- *
- * This is a wrapper around the `@wordpress/a11y` package's `speak` function. It handles importing
- * the package on demand and should be used instead of calling `a11y.speak` directly.
- *
- * @param messageKey The message to be announced by assistive technologies.
- */
-exports.actions = actions;
-exports.state = state;
 function a11ySpeak(messageKey) {
   if (!hasLoadedNavigationTextsData) {
     hasLoadedNavigationTextsData = true;
-    const content = document.getElementById('wp-script-module-data-@wordpress/interactivity-router')?.textContent;
+    const content = document.getElementById(
+      "wp-script-module-data-@wordpress/interactivity-router"
+    )?.textContent;
     if (content) {
       try {
         const parsed = JSON.parse(content);
-        if (typeof parsed?.i18n?.loading === 'string') {
+        if (typeof parsed?.i18n?.loading === "string") {
           navigationTexts.loading = parsed.i18n.loading;
         }
-        if (typeof parsed?.i18n?.loaded === 'string') {
+        if (typeof parsed?.i18n?.loaded === "string") {
           navigationTexts.loaded = parsed.i18n.loaded;
         }
-      } catch {}
+      } catch {
+      }
     } else {
-      // Fallback to localized strings from Interactivity API state.
-      // @todo This block is for Core < 6.7.0. Remove when support is dropped.
-
-      // @ts-expect-error
       if (state.navigation.texts?.loading) {
-        // @ts-expect-error
         navigationTexts.loading = state.navigation.texts.loading;
       }
-      // @ts-expect-error
       if (state.navigation.texts?.loaded) {
-        // @ts-expect-error
         navigationTexts.loaded = state.navigation.texts.loaded;
       }
     }
   }
   const message = navigationTexts[messageKey];
-  Promise.resolve().then(() => _interopRequireWildcard(require('@wordpress/a11y'))).then(({
-    speak
-  }) => speak(message),
-  // Ignore failures to load the a11y module.
-  () => {});
+  import("@wordpress/a11y").then(
+    ({ speak }) => speak(message),
+    // Ignore failures to load the a11y module.
+    () => {
+    }
+  );
 }
-//# sourceMappingURL=index.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  actions,
+  state
+});
+//# sourceMappingURL=index.js.map