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

package/build-module/index.js

@@ -1,16 +1,11 @@
-/* wp:polyfill */
-/**
- * WordPress dependencies
- */
-import { store, privateApis, getConfig } from '@wordpress/interactivity';
-
-/**
- * Internal dependencies
- */
-import { preloadStyles, applyStyles } from './assets/styles';
-import { preloadScriptModules, importScriptModules, markScriptModuleAsResolved } from './assets/script-modules';
+import { store, privateApis, getConfig } from "@wordpress/interactivity";
+import { preloadStyles, applyStyles } from "./assets/styles";
+import {
+  preloadScriptModules,
+  importScriptModules,
+  markScriptModuleAsResolved
+} from "./assets/script-modules";
 const {
-  directivePrefix,
   getRegionRootFragment,
   initialVdom,
   toVdom,
@@ -20,93 +15,43 @@ const {
   batch,
   routerRegions,
   cloneElement
-} = 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`;
+} = 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);
@@ -115,48 +60,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);
     }
@@ -164,11 +81,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(preloadStyles(dom, url)), Promise.all(preloadScriptModules(dom))]);
+  const [styles, scriptModules] = await Promise.all([
+    Promise.all(preloadStyles(dom, url)),
+    Promise.all(preloadScriptModules(dom))
+  ]);
   return {
     regions,
     regionsToAttach,
@@ -179,31 +97,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 => {
+const renderPage = (page) => {
   applyStyles(page.styles);
-
-  // Clone regionsToAttach.
-  const regionsToAttach = {
-    ...page.regionsToAttach
-  };
+  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)) {
@@ -215,32 +117,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);
@@ -250,55 +147,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
-}) => 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 }) => 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."
 };
-export const {
-  state,
-  actions
-} = store('core/router', {
+const { state, actions } = store("core/router", {
   state: {
     url: window.location.href,
     navigation: {
@@ -326,29 +205,22 @@ export const {
      * @return  Promise that resolves once the navigation is completed or aborted.
      */
     *navigate(href, options = {}) {
-      const {
-        clientNavigationDisabled
-      } = getConfig();
+      const { clientNavigationDisabled } = 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;
@@ -358,42 +230,30 @@ export 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) {
+      if (page && !page.initialData?.config?.["core/router"]?.clientNavigationDisabled) {
         yield 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();
         }
@@ -415,66 +275,57 @@ export const {
      * @return  Promise that resolves once the page has been fetched.
      */
     *prefetch(url, options = {}) {
-      const {
-        clientNavigationDisabled
-      } = getConfig();
+      const { clientNavigationDisabled } = 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.
- */
 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];
-  import('@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
+export {
+  actions,
+  state
+};
+//# sourceMappingURL=index.js.map