@wordpress/interactivity-router 1.0.0

package/src/index.js

@@ -0,0 +1,160 @@
+/**
+ * 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 ) =>
+				setTimeout( resolve, 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 ) );
+			}
+		},
+	},
+} );

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDir": "src",
+		"declarationDir": "build-types",
+		"checkJs": false,
+		"strict": false
+	},
+	"references": [ { "path": "../interactivity" } ],
+	"include": [ "src/**/*" ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../../node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/typescript/lib/lib.es2021.d.ts","../../node_modules/typescript/lib/lib.es2022.d.ts","../../node_modules/typescript/lib/lib.es2023.d.ts","../../node_modules/typescript/lib/lib.esnext.d.ts","../../node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../node_modules/typescript/lib/lib.es2021.intl.d.ts","../../node_modules/typescript/lib/lib.es2022.array.d.ts","../../node_modules/typescript/lib/lib.es2022.error.d.ts","../../node_modules/typescript/lib/lib.es2022.intl.d.ts","../../node_modules/typescript/lib/lib.es2022.object.d.ts","../../node_modules/typescript/lib/lib.es2022.sharedmemory.d.ts","../../node_modules/typescript/lib/lib.es2022.string.d.ts","../../node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../node_modules/typescript/lib/lib.es2023.array.d.ts","../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../interactivity/build-types/store.d.ts","../interactivity/build-types/constants.d.ts","../interactivity/build-types/vdom.d.ts","../interactivity/build-types/init.d.ts","../../node_modules/@preact/signals-core/dist/signals-core.d.ts","../interactivity/node_modules/deepsignal/dist/deepsignal.d.ts","../interactivity/node_modules/preact/src/jsx.d.ts","../interactivity/node_modules/preact/src/index.d.ts","../interactivity/build-types/hooks.d.ts","../interactivity/build-types/utils.d.ts","../interactivity/node_modules/preact/hooks/src/index.d.ts","../interactivity/build-types/index.d.ts","./src/index.js"],"fileInfos":[{"version":"f59215c5f1d886b05395ee7aca73e0ac69ddfad2843aa88530e797879d511bad","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","dc48272d7c333ccf58034c0026162576b7d50ea0e69c3b9292f803fc20720fd5","27147504487dc1159369da4f4da8a26406364624fa9bc3db632f7d94a5bae2c3","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","5514e54f17d6d74ecefedc73c504eadffdeda79c7ea205cf9febead32d45c4bc","f4e736d6c8d69ae5b3ab0ddfcaa3dc365c3e76909d6660af5b4e979b3934ac20","eeeb3aca31fbadef8b82502484499dfd1757204799a6f5b33116201c810676ec",{"version":"3dda5344576193a4ae48b8d03f105c86f20b2f2aff0a1d1fd7935f5d68649654","affectsGlobalScope":true},{"version":"9d9885c728913c1d16e0d2831b40341d6ad9a0ceecaabc55209b306ad9c736a5","affectsGlobalScope":true},{"version":"17bea081b9c0541f39dd1ae9bc8c78bdd561879a682e60e2f25f688c0ecab248","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"82d0d8e269b9eeac02c3bd1c9e884e85d483fcb2cd168bccd6bc54df663da031","affectsGlobalScope":true},{"version":"b8deab98702588840be73d67f02412a2d45a417a3c097b2e96f7f3a42ac483d1","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"376d554d042fb409cb55b5cbaf0b2b4b7e669619493c5d18d5fa8bd67273f82a","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"c4138a3dd7cd6cf1f363ca0f905554e8d81b45844feea17786cdf1626cb8ea06","affectsGlobalScope":true},{"version":"6ff3e2452b055d8f0ec026511c6582b55d935675af67cdb67dd1dc671e8065df","affectsGlobalScope":true},{"version":"03de17b810f426a2f47396b0b99b53a82c1b60e9cba7a7edda47f9bb077882f4","affectsGlobalScope":true},{"version":"8184c6ddf48f0c98429326b428478ecc6143c27f79b79e85740f17e6feb090f1","affectsGlobalScope":true},{"version":"261c4d2cf86ac5a89ad3fb3fafed74cbb6f2f7c1d139b0540933df567d64a6ca","affectsGlobalScope":true},{"version":"6af1425e9973f4924fca986636ac19a0cf9909a7e0d9d3009c349e6244e957b6","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"15a630d6817718a2ddd7088c4f83e4673fde19fa992d2eae2cf51132a302a5d3","affectsGlobalScope":true},{"version":"f06948deb2a51aae25184561c9640fb66afeddb34531a9212d011792b1d19e0a","affectsGlobalScope":true},{"version":"01e0ee7e1f661acedb08b51f8a9b7d7f959e9cdb6441360f06522cc3aea1bf2e","affectsGlobalScope":true},{"version":"ac17a97f816d53d9dd79b0d235e1c0ed54a8cc6a0677e9a3d61efb480b2a3e4e","affectsGlobalScope":true},{"version":"bf14a426dbbf1022d11bd08d6b8e709a2e9d246f0c6c1032f3b2edb9a902adbe","affectsGlobalScope":true},{"version":"ec0104fee478075cb5171e5f4e3f23add8e02d845ae0165bfa3f1099241fa2aa","affectsGlobalScope":true},{"version":"2b72d528b2e2fe3c57889ca7baef5e13a56c957b946906d03767c642f386bbc3","affectsGlobalScope":true},{"version":"9cc66b0513ad41cb5f5372cca86ef83a0d37d1c1017580b7dace3ea5661836df","affectsGlobalScope":true},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true},{"version":"709efdae0cb5df5f49376cde61daacc95cdd44ae4671da13a540da5088bf3f30","affectsGlobalScope":true},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true},{"version":"61ed9b6d07af959e745fb11f9593ecd743b279418cc8a99448ea3cd5f3b3eb22","affectsGlobalScope":true},{"version":"038a2f66a34ee7a9c2fbc3584c8ab43dff2995f8c68e3f566f4c300d2175e31e","affectsGlobalScope":true},{"version":"4fa6ed14e98aa80b91f61b9805c653ee82af3502dc21c9da5268d3857772ca05","affectsGlobalScope":true},{"version":"f5c92f2c27b06c1a41b88f6db8299205aee52c2a2943f7ed29bd585977f254e8","affectsGlobalScope":true},{"version":"930b0e15811f84e203d3c23508674d5ded88266df4b10abee7b31b2ac77632d2","affectsGlobalScope":true},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true},{"version":"b9ea5778ff8b50d7c04c9890170db34c26a5358cccba36844fe319f50a43a61a","affectsGlobalScope":true},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true},{"version":"50d53ccd31f6667aff66e3d62adf948879a3a16f05d89882d1188084ee415bbc","affectsGlobalScope":true},{"version":"25de46552b782d43cb7284df22fe2a265de387cf0248b747a7a1b647d81861f6","affectsGlobalScope":true},{"version":"307c8b7ebbd7f23a92b73a4c6c0a697beca05b06b036c23a34553e5fe65e4fdc","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"6115a21cd7d4c5febe505788258735ef3724a23a059ba654a4224089118af21b","8f761f6b43e4dddc4ad37bb18731c43230b93ee7622eaa6de05dd8ab13312265","460cc6a2fddd9fc792a8ab6e3a8b9ac966e42116df530ca91cb1063d992aa697","590d4b7df88872c8e48fab3c125308f1cdf5afd972126e1225a0623852bd220d","a03597e01b6506c238ec0e0de7f4df46f63c29bac200a0f01ef1e9ba858d9881","7f3b868338902dfe19d96d55944f6da8414a3fbcb9e597e3b3846eeb4f788555","290ae21b816c4ed479be7a08a86d99afcc2d200028ecdcf437f1776dfc94ed68","5ff856251ae237dbc86c112d2ef1060eebda755c708a1361904abfbb6fc6ea96","138cba0048b5a60a1021e299e75a750075282b471daf740c537b39d6a7b838e9","a96a67c9f461daf8ca9f0ce8e7dc136b2e181aa8c860be1662a9ae448f2e2cbb","414c9c77766f65ad0b2f005f8cca243df26eebe8a07ee58520365c7df060d37e","60f8f0f47b5b70e31ab228326a8f791359d0f56db0d8c90530023a991c78e2ff",{"version":"0aa3e79b0fa08d987c7658684e84ff6fd7baed02caaf9e79d7d86a9a333e99ff","signature":"4657f705833f2807d7cc1193031d0c3b7ea21a45a47f1ad4cffe9abb15a8fa93"}],"root":[73],"options":{"allowSyntheticDefaultImports":true,"composite":true,"declaration":true,"declarationDir":"./build-types","declarationMap":true,"emitDeclarationOnly":true,"esModuleInterop":false,"jsx":1,"module":99,"noFallthroughCasesInSwitch":true,"noImplicitReturns":true,"noUnusedLocals":true,"noUnusedParameters":true,"rootDir":"./src","strict":false,"target":99},"fileIdsList":[[72],[68],[61,62,63,64,66,68,69,70,71],[65],[67]],"referencedMap":[[73,1],[69,2],[72,3],[66,4],[71,2],[68,5],[67,2]],"exportedModulesMap":[[69,2],[72,3],[66,4],[71,2],[68,5],[67,2]],"semanticDiagnosticsPerFile":[65,59,60,12,14,13,2,15,16,17,18,19,20,21,22,3,4,26,23,24,25,27,28,29,5,30,31,32,33,6,37,34,35,36,38,7,39,44,45,40,41,42,43,8,49,46,47,48,50,9,51,52,53,56,54,55,57,10,1,11,58,73,62,69,72,64,61,70,63,66,71,68,67],"latestChangedDtsFile":"./build-types/index.d.ts"},"version":"5.1.6"}