@wordpress/interactivity-router 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# Interactivity Router
+
+> **Note**
+> This package is a extension of the API shared at [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/). As part of an [Open Source project](https://developer.wordpress.org/block-editor/getting-started/faq/#the-gutenberg-project) we encourage participation in helping shape this API and the [discussions in GitHub](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) is the best place to engage.
+
+This package defines an Interactivity API store with the `core/router` namespace, exposing state and actions like `navigate` and `prefetch` to handle client-side navigations.
+
+## Usage
+
+The package is intended to be imported dynamically in the `view.js` files of interactive blocks.
+
+```js
+import { store } from '@wordpress/interactivity';
+
+store( 'myblock', {
+	actions: {
+		*navigate( e ) {
+			e.preventDefault();
+			const { actions } = yield import(
+				'@wordpress/interactivity-router'
+			);
+			yield actions.navigate( e.target.href );
+		},
+	},
+} );
+```
+
+## Frequently Asked Questions
+
+At this point, some of the questions you have about the Interactivity API may be:
+
+### What is this?
+
+This is the base of a new standard to create interactive blocks. Read [the proposal](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/) to learn more about this.
+
+### Can I use it?
+
+You can test it, but it's still very experimental.
+
+### How do I get started?
+
+The best place to start with the Interactivity API is this [**Getting started guide**](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md). There you'll will find a very quick start guide and the current requirements of the Interactivity API.
+
+### Where can I ask questions?
+
+The [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is the best place to ask questions about the Interactivity API.
+
+### Where can I share my feedback about the API?
+
+The [“Interactivity API” category](https://github.com/WordPress/gutenberg/discussions/categories/interactivity-api) in Gutenberg repo discussions is also the best place to share your feedback about the Interactivity API.
+
+## Installation
+
+Install the module:
+
+```bash
+npm install @wordpress/interactivity --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+
+## Docs & Examples
+
+**[Interactivity API Documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/interactivity/docs)** is the best place to learn about this proposal. Although it's still in progress, some key pages are already available:
+
+-   **[Getting Started Guide](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/1-getting-started.md)**: Follow this Getting Started guide to learn how to scaffold a new project and create your first interactive blocks.
+-   **[API Reference](https://github.com/WordPress/gutenberg/blob/trunk/packages/interactivity/docs/2-api-reference.md)**: Check this page for technical detailed explanations and examples of the directives and the store.
+
+Here you have some more resources to learn/read more about the Interactivity API:
+
+-   **[Interactivity API Discussions](https://github.com/WordPress/gutenberg/discussions/52882)**
+-   [Proposal: The Interactivity API – A better developer experience in building interactive blocks](https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/)
+-   Developer Hours sessions ([Americas](https://www.youtube.com/watch?v=RXNoyP2ZiS8&t=664s) & [APAC/EMEA](https://www.youtube.com/watch?v=6ghbrhyAcvA))
+-   [wpmovies.dev](http://wpmovies.dev/) demo and its [wp-movies-demo](https://github.com/WordPress/wp-movies-demo) repo
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

package/build/index.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.state = exports.actions = void 0;
+var _interactivity = require("@wordpress/interactivity");
+/**
+ * WordPress dependencies
+ */
+
+// The cache of visited and prefetched pages.
+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 cleanUrl = url => {
+  const u = new URL(url, window.location);
+  return u.pathname + u.search;
+};
+
+// Fetch a new page and convert it to a static virtual DOM.
+const fetchPage = async (url, {
+  html
+}) => {
+  try {
+    if (!html) {
+      const res = await window.fetch(url);
+      if (res.status !== 200) return false;
+      html = await res.text();
+    }
+    const dom = new window.DOMParser().parseFromString(html, 'text/html');
+    return regionsToVdom(dom);
+  } catch (e) {
+    return false;
+  }
+};
+
+// Return an object with VDOM trees of those HTML regions marked with a
+// `router-region` directive.
+const regionsToVdom = dom => {
+  const regions = {};
+  const attrName = `data-${_interactivity.directivePrefix}-router-region`;
+  dom.querySelectorAll(`[${attrName}]`).forEach(region => {
+    const id = region.getAttribute(attrName);
+    regions[id] = (0, _interactivity.toVdom)(region);
+  });
+  const title = dom.querySelector('title')?.innerText;
+  return {
+    regions,
+    title
+  };
+};
+
+// Render all interactive regions contained in the given page.
+const renderRegions = page => {
+  const attrName = `data-${_interactivity.directivePrefix}-router-region`;
+  document.querySelectorAll(`[${attrName}]`).forEach(region => {
+    const id = region.getAttribute(attrName);
+    const fragment = (0, _interactivity.getRegionRootFragment)(region);
+    (0, _interactivity.render)(page.regions[id], fragment);
+  });
+  if (page.title) {
+    document.title = page.title;
+  }
+};
+
+// Variable to store the current navigation.
+let navigatingTo = '';
+
+// Listen to the back and forward buttons and restore the page if it's in the
+// cache.
+window.addEventListener('popstate', async () => {
+  const url = cleanUrl(window.location); // Remove hash.
+  const page = pages.has(url) && (await pages.get(url));
+  if (page) {
+    renderRegions(page);
+  } else {
+    window.location.reload();
+  }
+});
+
+// Cache the current regions.
+pages.set(cleanUrl(window.location), Promise.resolve(regionsToVdom(document)));
+const {
+  state,
+  actions
+} = (0, _interactivity.store)('core/router', {
+  actions: {
+    /**
+     * Navigates to the specified page.
+     *
+     * This function normalizes the passed href, fetchs the page HTML if
+     * needed, and updates any interactive regions whose contents have
+     * changed. It also creates a new entry in the browser session history.
+     *
+     * @param {string}  href              The page href.
+     * @param {Object}  [options]         Options object.
+     * @param {boolean} [options.force]   If true, it forces re-fetching the
+     *                                    URL.
+     * @param {string}  [options.html]    HTML string to be used instead of
+     *                                    fetching the requested URL.
+     * @param {boolean} [options.replace] If true, it replaces the current
+     *                                    entry in the browser session
+     *                                    history.
+     * @param {number}  [options.timeout] Time until the navigation is
+     *                                    aborted, in milliseconds. Default
+     *                                    is 10000.
+     *
+     * @return {Promise} Promise that resolves once the navigation is
+     *                   completed or aborted.
+     */
+    *navigate(href, options = {}) {
+      const url = cleanUrl(href);
+      navigatingTo = href;
+      actions.prefetch(url, options);
+
+      // Create a promise that resolves when the specified timeout ends.
+      // The timeout value is 10 seconds by default.
+      const timeoutPromise = new Promise(resolve => {
+        var _options$timeout;
+        return setTimeout(resolve, (_options$timeout = options.timeout) !== null && _options$timeout !== void 0 ? _options$timeout : 10000);
+      });
+      const page = yield Promise.race([pages.get(url), timeoutPromise]);
+
+      // 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) {
+        renderRegions(page);
+        window.history[options.replace ? 'replaceState' : 'pushState']({}, '', href);
+      } else {
+        window.location.assign(href);
+        yield new Promise(() => {});
+      }
+    },
+    /**
+     * Prefetchs the page with the passed URL.
+     *
+     * The function normalizes the URL and stores internally the fetch
+     * promise, to avoid triggering a second fetch for an ongoing request.
+     *
+     * @param {string}  url             The page URL.
+     * @param {Object}  [options]       Options object.
+     * @param {boolean} [options.force] Force fetching the URL again.
+     * @param {string}  [options.html]  HTML string to be used instead of
+     *                                  fetching the requested URL.
+     */
+    prefetch(url, options = {}) {
+      url = cleanUrl(url);
+      if (options.force || !pages.has(url)) {
+        pages.set(url, fetchPage(url, options));
+      }
+    }
+  }
+});
+exports.actions = actions;
+exports.state = state;
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_interactivity","require","pages","Map","cleanUrl","url","u","URL","window","location","pathname","search","fetchPage","html","res","fetch","status","text","dom","DOMParser","parseFromString","regionsToVdom","e","regions","attrName","directivePrefix","querySelectorAll","forEach","region","id","getAttribute","toVdom","title","querySelector","innerText","renderRegions","page","document","fragment","getRegionRootFragment","render","navigatingTo","addEventListener","has","get","reload","set","Promise","resolve","state","actions","store","navigate","href","options","prefetch","timeoutPromise","_options$timeout","setTimeout","timeout","race","history","replace","assign","force","exports"],"sources":["@wordpress/interactivity-router/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trender,\n\tdirectivePrefix,\n\ttoVdom,\n\tgetRegionRootFragment,\n\tstore,\n} from '@wordpress/interactivity';\n\n// The cache of visited and prefetched pages.\nconst pages = new Map();\n\n// Helper to remove domain and hash from the URL. We are only interesting in\n// caching the path and the query.\nconst cleanUrl = ( url ) => {\n\tconst u = new URL( url, window.location );\n\treturn u.pathname + u.search;\n};\n\n// Fetch a new page and convert it to a static virtual DOM.\nconst fetchPage = async ( url, { html } ) => {\n\ttry {\n\t\tif ( ! html ) {\n\t\t\tconst res = await window.fetch( url );\n\t\t\tif ( res.status !== 200 ) return false;\n\t\t\thtml = await res.text();\n\t\t}\n\t\tconst dom = new window.DOMParser().parseFromString( html, 'text/html' );\n\t\treturn regionsToVdom( dom );\n\t} catch ( e ) {\n\t\treturn false;\n\t}\n};\n\n// Return an object with VDOM trees of those HTML regions marked with a\n// `router-region` directive.\nconst regionsToVdom = ( dom ) => {\n\tconst regions = {};\n\tconst attrName = `data-${ directivePrefix }-router-region`;\n\tdom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {\n\t\tconst id = region.getAttribute( attrName );\n\t\tregions[ id ] = toVdom( region );\n\t} );\n\tconst title = dom.querySelector( 'title' )?.innerText;\n\treturn { regions, title };\n};\n\n// Render all interactive regions contained in the given page.\nconst renderRegions = ( page ) => {\n\tconst attrName = `data-${ directivePrefix }-router-region`;\n\tdocument.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {\n\t\tconst id = region.getAttribute( attrName );\n\t\tconst fragment = getRegionRootFragment( region );\n\t\trender( page.regions[ id ], fragment );\n\t} );\n\tif ( page.title ) {\n\t\tdocument.title = page.title;\n\t}\n};\n\n// Variable to store the current navigation.\nlet navigatingTo = '';\n\n// Listen to the back and forward buttons and restore the page if it's in the\n// cache.\nwindow.addEventListener( 'popstate', async () => {\n\tconst url = cleanUrl( window.location ); // Remove hash.\n\tconst page = pages.has( url ) && ( await pages.get( url ) );\n\tif ( page ) {\n\t\trenderRegions( page );\n\t} else {\n\t\twindow.location.reload();\n\t}\n} );\n\n// Cache the current regions.\npages.set(\n\tcleanUrl( window.location ),\n\tPromise.resolve( regionsToVdom( document ) )\n);\n\nexport const { state, actions } = store( 'core/router', {\n\tactions: {\n\t\t/**\n\t\t * Navigates to the specified page.\n\t\t *\n\t\t * This function normalizes the passed href, fetchs the page HTML if\n\t\t * needed, and updates any interactive regions whose contents have\n\t\t * changed. It also creates a new entry in the browser session history.\n\t\t *\n\t\t * @param {string}  href              The page href.\n\t\t * @param {Object}  [options]         Options object.\n\t\t * @param {boolean} [options.force]   If true, it forces re-fetching the\n\t\t *                                    URL.\n\t\t * @param {string}  [options.html]    HTML string to be used instead of\n\t\t *                                    fetching the requested URL.\n\t\t * @param {boolean} [options.replace] If true, it replaces the current\n\t\t *                                    entry in the browser session\n\t\t *                                    history.\n\t\t * @param {number}  [options.timeout] Time until the navigation is\n\t\t *                                    aborted, in milliseconds. Default\n\t\t *                                    is 10000.\n\t\t *\n\t\t * @return {Promise} Promise that resolves once the navigation is\n\t\t *                   completed or aborted.\n\t\t */\n\t\t*navigate( href, options = {} ) {\n\t\t\tconst url = cleanUrl( href );\n\t\t\tnavigatingTo = href;\n\t\t\tactions.prefetch( url, options );\n\n\t\t\t// Create a promise that resolves when the specified timeout ends.\n\t\t\t// The timeout value is 10 seconds by default.\n\t\t\tconst timeoutPromise = new Promise( ( resolve ) =>\n\t\t\t\tsetTimeout( resolve, options.timeout ?? 10000 )\n\t\t\t);\n\n\t\t\tconst page = yield Promise.race( [\n\t\t\t\tpages.get( url ),\n\t\t\t\ttimeoutPromise,\n\t\t\t] );\n\n\t\t\t// Once the page is fetched, the destination URL could have changed\n\t\t\t// (e.g., by clicking another link in the meantime). If so, bail\n\t\t\t// out, and let the newer execution to update the HTML.\n\t\t\tif ( navigatingTo !== href ) return;\n\n\t\t\tif ( page ) {\n\t\t\t\trenderRegions( page );\n\t\t\t\twindow.history[\n\t\t\t\t\toptions.replace ? 'replaceState' : 'pushState'\n\t\t\t\t]( {}, '', href );\n\t\t\t} else {\n\t\t\t\twindow.location.assign( href );\n\t\t\t\tyield new Promise( () => {} );\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Prefetchs the page with the passed URL.\n\t\t *\n\t\t * The function normalizes the URL and stores internally the fetch\n\t\t * promise, to avoid triggering a second fetch for an ongoing request.\n\t\t *\n\t\t * @param {string}  url             The page URL.\n\t\t * @param {Object}  [options]       Options object.\n\t\t * @param {boolean} [options.force] Force fetching the URL again.\n\t\t * @param {string}  [options.html]  HTML string to be used instead of\n\t\t *                                  fetching the requested URL.\n\t\t */\n\t\tprefetch( url, options = {} ) {\n\t\t\turl = cleanUrl( url );\n\t\t\tif ( options.force || ! pages.has( url ) ) {\n\t\t\t\tpages.set( url, fetchPage( url, options ) );\n\t\t\t}\n\t\t},\n\t},\n} );\n"],"mappings":"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"}

package/build-module/index.js

@@ -0,0 +1,152 @@
+/**
+ * WordPress dependencies
+ */
+import { render, directivePrefix, toVdom, getRegionRootFragment, store } from '@wordpress/interactivity';
+
+// The cache of visited and prefetched pages.
+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 cleanUrl = url => {
+  const u = new URL(url, window.location);
+  return u.pathname + u.search;
+};
+
+// Fetch a new page and convert it to a static virtual DOM.
+const fetchPage = async (url, {
+  html
+}) => {
+  try {
+    if (!html) {
+      const res = await window.fetch(url);
+      if (res.status !== 200) return false;
+      html = await res.text();
+    }
+    const dom = new window.DOMParser().parseFromString(html, 'text/html');
+    return regionsToVdom(dom);
+  } catch (e) {
+    return false;
+  }
+};
+
+// Return an object with VDOM trees of those HTML regions marked with a
+// `router-region` directive.
+const regionsToVdom = dom => {
+  const regions = {};
+  const attrName = `data-${directivePrefix}-router-region`;
+  dom.querySelectorAll(`[${attrName}]`).forEach(region => {
+    const id = region.getAttribute(attrName);
+    regions[id] = toVdom(region);
+  });
+  const title = dom.querySelector('title')?.innerText;
+  return {
+    regions,
+    title
+  };
+};
+
+// Render all interactive regions contained in the given page.
+const renderRegions = page => {
+  const attrName = `data-${directivePrefix}-router-region`;
+  document.querySelectorAll(`[${attrName}]`).forEach(region => {
+    const id = region.getAttribute(attrName);
+    const fragment = getRegionRootFragment(region);
+    render(page.regions[id], fragment);
+  });
+  if (page.title) {
+    document.title = page.title;
+  }
+};
+
+// Variable to store the current navigation.
+let navigatingTo = '';
+
+// Listen to the back and forward buttons and restore the page if it's in the
+// cache.
+window.addEventListener('popstate', async () => {
+  const url = cleanUrl(window.location); // Remove hash.
+  const page = pages.has(url) && (await pages.get(url));
+  if (page) {
+    renderRegions(page);
+  } else {
+    window.location.reload();
+  }
+});
+
+// Cache the current regions.
+pages.set(cleanUrl(window.location), Promise.resolve(regionsToVdom(document)));
+export const {
+  state,
+  actions
+} = store('core/router', {
+  actions: {
+    /**
+     * Navigates to the specified page.
+     *
+     * This function normalizes the passed href, fetchs the page HTML if
+     * needed, and updates any interactive regions whose contents have
+     * changed. It also creates a new entry in the browser session history.
+     *
+     * @param {string}  href              The page href.
+     * @param {Object}  [options]         Options object.
+     * @param {boolean} [options.force]   If true, it forces re-fetching the
+     *                                    URL.
+     * @param {string}  [options.html]    HTML string to be used instead of
+     *                                    fetching the requested URL.
+     * @param {boolean} [options.replace] If true, it replaces the current
+     *                                    entry in the browser session
+     *                                    history.
+     * @param {number}  [options.timeout] Time until the navigation is
+     *                                    aborted, in milliseconds. Default
+     *                                    is 10000.
+     *
+     * @return {Promise} Promise that resolves once the navigation is
+     *                   completed or aborted.
+     */
+    *navigate(href, options = {}) {
+      const url = cleanUrl(href);
+      navigatingTo = href;
+      actions.prefetch(url, options);
+
+      // Create a promise that resolves when the specified timeout ends.
+      // The timeout value is 10 seconds by default.
+      const timeoutPromise = new Promise(resolve => {
+        var _options$timeout;
+        return setTimeout(resolve, (_options$timeout = options.timeout) !== null && _options$timeout !== void 0 ? _options$timeout : 10000);
+      });
+      const page = yield Promise.race([pages.get(url), timeoutPromise]);
+
+      // 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) {
+        renderRegions(page);
+        window.history[options.replace ? 'replaceState' : 'pushState']({}, '', href);
+      } else {
+        window.location.assign(href);
+        yield new Promise(() => {});
+      }
+    },
+    /**
+     * Prefetchs the page with the passed URL.
+     *
+     * The function normalizes the URL and stores internally the fetch
+     * promise, to avoid triggering a second fetch for an ongoing request.
+     *
+     * @param {string}  url             The page URL.
+     * @param {Object}  [options]       Options object.
+     * @param {boolean} [options.force] Force fetching the URL again.
+     * @param {string}  [options.html]  HTML string to be used instead of
+     *                                  fetching the requested URL.
+     */
+    prefetch(url, options = {}) {
+      url = cleanUrl(url);
+      if (options.force || !pages.has(url)) {
+        pages.set(url, fetchPage(url, options));
+      }
+    }
+  }
+});
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["render","directivePrefix","toVdom","getRegionRootFragment","store","pages","Map","cleanUrl","url","u","URL","window","location","pathname","search","fetchPage","html","res","fetch","status","text","dom","DOMParser","parseFromString","regionsToVdom","e","regions","attrName","querySelectorAll","forEach","region","id","getAttribute","title","querySelector","innerText","renderRegions","page","document","fragment","navigatingTo","addEventListener","has","get","reload","set","Promise","resolve","state","actions","navigate","href","options","prefetch","timeoutPromise","_options$timeout","setTimeout","timeout","race","history","replace","assign","force"],"sources":["@wordpress/interactivity-router/src/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\trender,\n\tdirectivePrefix,\n\ttoVdom,\n\tgetRegionRootFragment,\n\tstore,\n} from '@wordpress/interactivity';\n\n// The cache of visited and prefetched pages.\nconst pages = new Map();\n\n// Helper to remove domain and hash from the URL. We are only interesting in\n// caching the path and the query.\nconst cleanUrl = ( url ) => {\n\tconst u = new URL( url, window.location );\n\treturn u.pathname + u.search;\n};\n\n// Fetch a new page and convert it to a static virtual DOM.\nconst fetchPage = async ( url, { html } ) => {\n\ttry {\n\t\tif ( ! html ) {\n\t\t\tconst res = await window.fetch( url );\n\t\t\tif ( res.status !== 200 ) return false;\n\t\t\thtml = await res.text();\n\t\t}\n\t\tconst dom = new window.DOMParser().parseFromString( html, 'text/html' );\n\t\treturn regionsToVdom( dom );\n\t} catch ( e ) {\n\t\treturn false;\n\t}\n};\n\n// Return an object with VDOM trees of those HTML regions marked with a\n// `router-region` directive.\nconst regionsToVdom = ( dom ) => {\n\tconst regions = {};\n\tconst attrName = `data-${ directivePrefix }-router-region`;\n\tdom.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {\n\t\tconst id = region.getAttribute( attrName );\n\t\tregions[ id ] = toVdom( region );\n\t} );\n\tconst title = dom.querySelector( 'title' )?.innerText;\n\treturn { regions, title };\n};\n\n// Render all interactive regions contained in the given page.\nconst renderRegions = ( page ) => {\n\tconst attrName = `data-${ directivePrefix }-router-region`;\n\tdocument.querySelectorAll( `[${ attrName }]` ).forEach( ( region ) => {\n\t\tconst id = region.getAttribute( attrName );\n\t\tconst fragment = getRegionRootFragment( region );\n\t\trender( page.regions[ id ], fragment );\n\t} );\n\tif ( page.title ) {\n\t\tdocument.title = page.title;\n\t}\n};\n\n// Variable to store the current navigation.\nlet navigatingTo = '';\n\n// Listen to the back and forward buttons and restore the page if it's in the\n// cache.\nwindow.addEventListener( 'popstate', async () => {\n\tconst url = cleanUrl( window.location ); // Remove hash.\n\tconst page = pages.has( url ) && ( await pages.get( url ) );\n\tif ( page ) {\n\t\trenderRegions( page );\n\t} else {\n\t\twindow.location.reload();\n\t}\n} );\n\n// Cache the current regions.\npages.set(\n\tcleanUrl( window.location ),\n\tPromise.resolve( regionsToVdom( document ) )\n);\n\nexport const { state, actions } = store( 'core/router', {\n\tactions: {\n\t\t/**\n\t\t * Navigates to the specified page.\n\t\t *\n\t\t * This function normalizes the passed href, fetchs the page HTML if\n\t\t * needed, and updates any interactive regions whose contents have\n\t\t * changed. It also creates a new entry in the browser session history.\n\t\t *\n\t\t * @param {string}  href              The page href.\n\t\t * @param {Object}  [options]         Options object.\n\t\t * @param {boolean} [options.force]   If true, it forces re-fetching the\n\t\t *                                    URL.\n\t\t * @param {string}  [options.html]    HTML string to be used instead of\n\t\t *                                    fetching the requested URL.\n\t\t * @param {boolean} [options.replace] If true, it replaces the current\n\t\t *                                    entry in the browser session\n\t\t *                                    history.\n\t\t * @param {number}  [options.timeout] Time until the navigation is\n\t\t *                                    aborted, in milliseconds. Default\n\t\t *                                    is 10000.\n\t\t *\n\t\t * @return {Promise} Promise that resolves once the navigation is\n\t\t *                   completed or aborted.\n\t\t */\n\t\t*navigate( href, options = {} ) {\n\t\t\tconst url = cleanUrl( href );\n\t\t\tnavigatingTo = href;\n\t\t\tactions.prefetch( url, options );\n\n\t\t\t// Create a promise that resolves when the specified timeout ends.\n\t\t\t// The timeout value is 10 seconds by default.\n\t\t\tconst timeoutPromise = new Promise( ( resolve ) =>\n\t\t\t\tsetTimeout( resolve, options.timeout ?? 10000 )\n\t\t\t);\n\n\t\t\tconst page = yield Promise.race( [\n\t\t\t\tpages.get( url ),\n\t\t\t\ttimeoutPromise,\n\t\t\t] );\n\n\t\t\t// Once the page is fetched, the destination URL could have changed\n\t\t\t// (e.g., by clicking another link in the meantime). If so, bail\n\t\t\t// out, and let the newer execution to update the HTML.\n\t\t\tif ( navigatingTo !== href ) return;\n\n\t\t\tif ( page ) {\n\t\t\t\trenderRegions( page );\n\t\t\t\twindow.history[\n\t\t\t\t\toptions.replace ? 'replaceState' : 'pushState'\n\t\t\t\t]( {}, '', href );\n\t\t\t} else {\n\t\t\t\twindow.location.assign( href );\n\t\t\t\tyield new Promise( () => {} );\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Prefetchs the page with the passed URL.\n\t\t *\n\t\t * The function normalizes the URL and stores internally the fetch\n\t\t * promise, to avoid triggering a second fetch for an ongoing request.\n\t\t *\n\t\t * @param {string}  url             The page URL.\n\t\t * @param {Object}  [options]       Options object.\n\t\t * @param {boolean} [options.force] Force fetching the URL again.\n\t\t * @param {string}  [options.html]  HTML string to be used instead of\n\t\t *                                  fetching the requested URL.\n\t\t */\n\t\tprefetch( url, options = {} ) {\n\t\t\turl = cleanUrl( url );\n\t\t\tif ( options.force || ! pages.has( url ) ) {\n\t\t\t\tpages.set( url, fetchPage( url, options ) );\n\t\t\t}\n\t\t},\n\t},\n} );\n"],"mappings":"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"}

package/build-types/index.d.ts

@@ -0,0 +1,49 @@
+export const state: any;
+export namespace actions {
+    /**
+     * Navigates to the specified page.
+     *
+     * This function normalizes the passed href, fetchs the page HTML if
+     * needed, and updates any interactive regions whose contents have
+     * changed. It also creates a new entry in the browser session history.
+     *
+     * @param {string}  href              The page href.
+     * @param {Object}  [options]         Options object.
+     * @param {boolean} [options.force]   If true, it forces re-fetching the
+     *                                    URL.
+     * @param {string}  [options.html]    HTML string to be used instead of
+     *                                    fetching the requested URL.
+     * @param {boolean} [options.replace] If true, it replaces the current
+     *                                    entry in the browser session
+     *                                    history.
+     * @param {number}  [options.timeout] Time until the navigation is
+     *                                    aborted, in milliseconds. Default
+     *                                    is 10000.
+     *
+     * @return {Promise} Promise that resolves once the navigation is
+     *                   completed or aborted.
+     */
+    function navigate(href: string, options?: {
+        force?: boolean;
+        html?: string;
+        replace?: boolean;
+        timeout?: number;
+    }): Promise<any>;
+    /**
+     * Prefetchs the page with the passed URL.
+     *
+     * The function normalizes the URL and stores internally the fetch
+     * promise, to avoid triggering a second fetch for an ongoing request.
+     *
+     * @param {string}  url             The page URL.
+     * @param {Object}  [options]       Options object.
+     * @param {boolean} [options.force] Force fetching the URL again.
+     * @param {string}  [options.html]  HTML string to be used instead of
+     *                                  fetching the requested URL.
+     */
+    function prefetch(url: string, options?: {
+        force?: boolean;
+        html?: string;
+    }): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":";;IAqFE;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH;;;;;qBA8BC;IAED;;;;;;;;;;;OAWG;IACH;;;aAKC"}

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/interactivity-router",
+	"version": "1.0.0",
+	"description": "Package that exposes state and actions from the `core/router` store, part of the Interactivity API.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"interactivity"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/interactivity-router/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/interactivity-router"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"types": "build-types",
+	"dependencies": {
+		"@wordpress/interactivity": "^4.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
+}