@wordpress/interactivity-router 2.25.0 → 2.26.0

package/src/assets/dynamic-importmap/resolver.ts

@@ -0,0 +1,292 @@
+/**
+ * This code is derived from the following projects:
+ *
+ * 1. dynamic-importmap (https://github.com/keller-mark/dynamic-importmap)
+ * 2. es-module-shims (https://github.com/guybedford/es-module-shims)
+ *
+ * The original implementation was created by Guy Bedford in es-module-shims,
+ * then adapted by Mark Keller in dynamic-importmap, and further modified
+ * for use in this project.
+ *
+ * Both projects are licensed under the MIT license.
+ *
+ * MIT License: https://opensource.org/licenses/MIT
+ */
+
+const backslashRegEx = /\\/g;
+
+function isURL( url: string ) {
+	if ( url.indexOf( ':' ) === -1 ) {
+		return false;
+	}
+	try {
+		new URL( url );
+		return true;
+	} catch ( _ ) {
+		return false;
+	}
+}
+
+function resolveIfNotPlainOrUrl( relUrl, parentUrl ) {
+	const hIdx = parentUrl.indexOf( '#' ),
+		qIdx = parentUrl.indexOf( '?' );
+	if ( hIdx + qIdx > -2 ) {
+		parentUrl = parentUrl.slice(
+			0,
+			// eslint-disable-next-line no-nested-ternary
+			hIdx === -1 ? qIdx : qIdx === -1 || qIdx > hIdx ? hIdx : qIdx
+		);
+	}
+	if ( relUrl.indexOf( '\\' ) !== -1 ) {
+		relUrl = relUrl.replace( backslashRegEx, '/' );
+	}
+	// protocol-relative
+	if ( relUrl[ 0 ] === '/' && relUrl[ 1 ] === '/' ) {
+		return parentUrl.slice( 0, parentUrl.indexOf( ':' ) + 1 ) + relUrl;
+	}
+	// relative-url
+	else if (
+		( relUrl[ 0 ] === '.' &&
+			( relUrl[ 1 ] === '/' ||
+				( relUrl[ 1 ] === '.' &&
+					( relUrl[ 2 ] === '/' ||
+						( relUrl.length === 2 && ( relUrl += '/' ) ) ) ) ||
+				( relUrl.length === 1 && ( relUrl += '/' ) ) ) ) ||
+		relUrl[ 0 ] === '/'
+	) {
+		const parentProtocol = parentUrl.slice(
+			0,
+			parentUrl.indexOf( ':' ) + 1
+		);
+		// Disabled, but these cases will give inconsistent results for deep backtracking
+		//if (parentUrl[parentProtocol.length] !== '/')
+		//  throw new Error('Cannot resolve');
+		// read pathname from parent URL
+		// pathname taken to be part after leading "/"
+		let pathname;
+		if ( parentUrl[ parentProtocol.length + 1 ] === '/' ) {
+			// resolving to a :// so we need to read out the auth and host
+			if ( parentProtocol !== 'file:' ) {
+				pathname = parentUrl.slice( parentProtocol.length + 2 );
+				pathname = pathname.slice( pathname.indexOf( '/' ) + 1 );
+			} else {
+				pathname = parentUrl.slice( 8 );
+			}
+		} else {
+			// resolving to :/ so pathname is the /... part
+			pathname = parentUrl.slice(
+				parentProtocol.length +
+					( parentUrl[ parentProtocol.length ] === '/' )
+			);
+		}
+
+		if ( relUrl[ 0 ] === '/' ) {
+			return (
+				parentUrl.slice( 0, parentUrl.length - pathname.length - 1 ) +
+				relUrl
+			);
+		}
+
+		// join together and split for removal of .. and . segments
+		// looping the string instead of anything fancy for perf reasons
+		// '../../../../../z' resolved to 'x/y' is just 'z'
+		const segmented =
+			pathname.slice( 0, pathname.lastIndexOf( '/' ) + 1 ) + relUrl;
+
+		const output = [];
+		let segmentIndex = -1;
+		for ( let i = 0; i < segmented.length; i++ ) {
+			// busy reading a segment - only terminate on '/'
+			if ( segmentIndex !== -1 ) {
+				if ( segmented[ i ] === '/' ) {
+					output.push( segmented.slice( segmentIndex, i + 1 ) );
+					segmentIndex = -1;
+				}
+				continue;
+			}
+			// new segment - check if it is relative
+			else if ( segmented[ i ] === '.' ) {
+				// ../ segment
+				if (
+					segmented[ i + 1 ] === '.' &&
+					( segmented[ i + 2 ] === '/' || i + 2 === segmented.length )
+				) {
+					output.pop();
+					i += 2;
+					continue;
+				}
+				// ./ segment
+				else if (
+					segmented[ i + 1 ] === '/' ||
+					i + 1 === segmented.length
+				) {
+					i += 1;
+					continue;
+				}
+			}
+			// it is the start of a new segment
+			while ( segmented[ i ] === '/' ) {
+				i++;
+			}
+			segmentIndex = i;
+		}
+		// finish reading out the last segment
+		if ( segmentIndex !== -1 ) {
+			output.push( segmented.slice( segmentIndex ) );
+		}
+		return (
+			parentUrl.slice( 0, parentUrl.length - pathname.length ) +
+			output.join( '' )
+		);
+	}
+}
+
+function resolveUrl( relUrl, parentUrl ) {
+	return (
+		resolveIfNotPlainOrUrl( relUrl, parentUrl ) ||
+		( isURL( relUrl )
+			? relUrl
+			: resolveIfNotPlainOrUrl( './' + relUrl, parentUrl ) )
+	);
+}
+
+function getMatch( path, matchObj ) {
+	if ( matchObj[ path ] ) {
+		return path;
+	}
+	let sepIndex = path.length;
+	do {
+		const segment = path.slice( 0, sepIndex + 1 );
+		if ( segment in matchObj ) {
+			return segment;
+		}
+	} while ( ( sepIndex = path.lastIndexOf( '/', sepIndex - 1 ) ) !== -1 );
+}
+
+function applyPackages( id, packages ) {
+	const pkgName = getMatch( id, packages );
+	if ( pkgName ) {
+		const pkg = packages[ pkgName ];
+		if ( pkg === null ) {
+			return;
+		}
+		return pkg + id.slice( pkgName.length );
+	}
+}
+
+function resolveImportMap( importMap, resolvedOrPlain, parentUrl ) {
+	let scopeUrl = parentUrl && getMatch( parentUrl, importMap.scopes );
+	while ( scopeUrl ) {
+		const packageResolution = applyPackages(
+			resolvedOrPlain,
+			importMap.scopes[ scopeUrl ]
+		);
+		if ( packageResolution ) {
+			return packageResolution;
+		}
+		scopeUrl = getMatch(
+			scopeUrl.slice( 0, scopeUrl.lastIndexOf( '/' ) ),
+			importMap.scopes
+		);
+	}
+	return (
+		applyPackages( resolvedOrPlain, importMap.imports ) ||
+		( resolvedOrPlain.indexOf( ':' ) !== -1 && resolvedOrPlain )
+	);
+}
+
+function resolveAndComposePackages(
+	packages,
+	outPackages,
+	baseUrl,
+	parentMap
+) {
+	for ( const p in packages ) {
+		const resolvedLhs = resolveIfNotPlainOrUrl( p, baseUrl ) || p;
+		const target = packages[ p ];
+		if ( typeof target !== 'string' ) {
+			continue;
+		}
+		const mapped = resolveImportMap(
+			parentMap,
+			resolveIfNotPlainOrUrl( target, baseUrl ) || target,
+			baseUrl
+		);
+		if ( mapped ) {
+			outPackages[ resolvedLhs ] = mapped;
+			continue;
+		}
+		// console.warn(
+		// 	`Mapping "${ p }" -> "${ packages[ p ] }" does not resolve`
+		// );
+	}
+}
+
+function resolveAndComposeImportMap( json, baseUrl, parentMap ) {
+	const outMap = {
+		imports: Object.assign( {}, parentMap.imports ),
+		scopes: Object.assign( {}, parentMap.scopes ),
+	};
+
+	if ( json.imports ) {
+		resolveAndComposePackages(
+			json.imports,
+			outMap.imports,
+			baseUrl,
+			parentMap
+		);
+	}
+
+	if ( json.scopes ) {
+		for ( const s in json.scopes ) {
+			const resolvedScope = resolveUrl( s, baseUrl );
+			resolveAndComposePackages(
+				json.scopes[ s ],
+				outMap.scopes[ resolvedScope ] ||
+					( outMap.scopes[ resolvedScope ] = {} ),
+				baseUrl,
+				parentMap
+			);
+		}
+	}
+
+	return outMap;
+}
+
+let importMap = { imports: {}, scopes: {} };
+
+// TODO: check if this baseURI should change per document, and so
+// it need to be passed as a parameter to methods like `resolve`.
+const baseUrl = document.baseURI;
+const pageBaseUrl = baseUrl;
+
+/**
+ * Extends the internal dynamic import map with the passed one.
+ *
+ * @param importMapIn         Import map.
+ * @param importMapIn.imports Imports declaration.
+ * @param importMapIn.scopes  Scopes declaration.
+ */
+export function addImportMap( importMapIn: {
+	imports?: Record< string, string >;
+	scopes?: Record< string, any >;
+} ) {
+	importMap = resolveAndComposeImportMap(
+		importMapIn,
+		pageBaseUrl,
+		importMap
+	);
+}
+
+/**
+ * Resolves the URL of the passed module ID against the current internal
+ * dynamic import map.
+ *
+ * @param id        Module ID.
+ * @param parentUrl Parent URL, in case the module ID is relative.
+ * @return Resolved module URL.
+ */
+export function resolve( id: string, parentUrl: string ): string {
+	const urlResolved = resolveIfNotPlainOrUrl( id, parentUrl );
+	return resolveImportMap( importMap, urlResolved || id, parentUrl ) || id;
+}

package/src/assets/script-modules.ts

@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import {
+	initialImportMap,
+	importPreloadedModule,
+	preloadWithMap,
+	type ModuleLoad,
+} from './dynamic-importmap';
+
+/**
+ * IDs of modules that should be resolved by the browser rather than
+ * processed internally.
+ */
+const resolvedScriptModules = new Set< string >();
+
+/**
+ * Marks the specified module as natively resolved.
+ * @param url Script module URL.
+ */
+export const markScriptModuleAsResolved = ( url: string ) => {
+	resolvedScriptModules.add( url );
+};
+
+/**
+ * Resolves and fetches modules present in the passed document, using the
+ * document's import map to resolve them.
+ *
+ * @param doc Document containing the modules to preload.
+ * @return Array of promises that resolve to a `ScriptModuleLoad` instance.
+ */
+export const preloadScriptModules = ( doc: Document ) => {
+	// Extract the import map from the document.
+	const importMapElement = doc.querySelector< HTMLScriptElement >(
+		'script#wp-importmap[type=importmap]'
+	);
+	const importMap = importMapElement
+		? JSON.parse( importMapElement.text )
+		: { imports: {}, scopes: {} };
+
+	// Remove imports also in the initial page's import map.
+	// Those should be handled natively.
+	for ( const key in initialImportMap.imports ) {
+		delete importMap.imports[ key ];
+	}
+
+	// Get the URL of all modules contained in the document.
+	const moduleUrls = [
+		...doc.querySelectorAll< HTMLScriptElement >(
+			'script[type=module][src]'
+		),
+	].map( ( s ) => s.src );
+
+	// Resolve and fetch those not resolved natively.
+	return moduleUrls
+		.filter( ( url ) => ! resolvedScriptModules.has( url ) )
+		.map( ( url ) => preloadWithMap( url, importMap ) );
+};
+
+/**
+ * Imports modules respresented by the passed `ScriptModuleLoad` instances.
+ *
+ * @param modules Array of `MoudleLoad` instances.
+ * @return Promise that resolves once all modules are imported.
+ */
+export const importScriptModules = ( modules: ScriptModuleLoad[] ) =>
+	Promise.all( modules.map( ( m ) => importPreloadedModule( m ) ) );
+
+export type ScriptModuleLoad = ModuleLoad;

package/src/assets/scs.ts

@@ -0,0 +1,61 @@
+/**
+ * Calculates the Shortest Common Supersequence (SCS) of two sequences.
+ *
+ * A supersequence is a sequence that contains both input sequences as subsequences.
+ * The shortest common supersequence is the shortest possible such sequence.
+ *
+ * This implementation uses dynamic programming with a time complexity of O(mn)
+ * and space complexity of O(mn), where m and n are the lengths of sequences X and Y.
+ *
+ * @example
+ * ```ts
+ * const seq1 = [1, 3, 5];
+ * const seq2 = [2, 3, 4];
+ * const scs = shortestCommonSupersequence(seq1, seq2); // [1, 2, 3, 4, 5]
+ * ```
+ *
+ * @param X       The first sequence.
+ * @param Y       The second sequence.
+ * @param isEqual Optional equality function to compare elements.
+ *                Defaults to strict equality (===).
+ * @return The shortest common supersequence of X and Y.
+ */
+export function shortestCommonSupersequence< E = unknown >(
+	X: E[],
+	Y: E[],
+	isEqual = ( a: E, b: E ) => a === b
+) {
+	const m = X.length;
+	const n = Y.length;
+
+	// Create a 2D dp table where dp[i][j] is the SCS for X[0..i-1] and Y[0..j-1].
+	const dp: E[][][] = Array.from( { length: m + 1 }, () =>
+		Array( n + 1 ).fill( null )
+	);
+
+	// Base cases: one of the sequences is empty.
+	for ( let i = 0; i <= m; i++ ) {
+		dp[ i ][ 0 ] = X.slice( 0, i );
+	}
+	for ( let j = 0; j <= n; j++ ) {
+		dp[ 0 ][ j ] = Y.slice( 0, j );
+	}
+
+	// Fill in the dp table.
+	for ( let i = 1; i <= m; i++ ) {
+		for ( let j = 1; j <= n; j++ ) {
+			if ( isEqual( X[ i - 1 ], Y[ j - 1 ] ) ) {
+				// When X[i-1] equals Y[j-1], use the reference from X.
+				dp[ i ][ j ] = dp[ i - 1 ][ j - 1 ].concat( X[ i - 1 ] );
+			} else {
+				// Choose the shorter option between appending X[i-1] or Y[j-1].
+				const option1 = dp[ i - 1 ][ j ].concat( X[ i - 1 ] );
+				const option2 = dp[ i ][ j - 1 ].concat( Y[ j - 1 ] );
+				dp[ i ][ j ] =
+					option1.length <= option2.length ? option1 : option2;
+			}
+		}
+	}
+
+	return dp[ m ][ n ];
+}

package/src/assets/styles.ts

@@ -0,0 +1,272 @@
+/**
+ * Internal dependencies
+ */
+import { shortestCommonSupersequence } from './scs';
+
+export type StyleElement = HTMLLinkElement | HTMLStyleElement;
+
+/**
+ * Compares the passed style or link elements to check if they can be
+ * considered equal.
+ *
+ * @param a `<style>` or `<link>` element.
+ * @param b `<style>` or `<link>` element.
+ * @return Whether they are considered equal.
+ */
+const areNodesEqual = ( a: StyleElement, b: StyleElement ): boolean =>
+	a.isEqualNode( b );
+
+/**
+ * Normalizes the passed style or link element, reverting the changes
+ * made by {@link prepareStylePromise|`prepareStylePromise`} to the
+ * `data-original-media` and `media`.
+ *
+ * @example
+ * The following elements should be normalized to the same element:
+ * ```html
+ * <link rel="stylesheet" src="./assets/styles.css">
+ * <link rel="stylesheet" src="./assets/styles.css" media="all">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload">
+ * <link rel="stylesheet" src="./assets/styles.css" media="preload" data-original-media="all">
+ * ```
+ *
+ * @param element `<style>` or `<link>` element.
+ * @return Normalized node.
+ */
+export const normalizeMedia = ( element: StyleElement ): StyleElement => {
+	element = element.cloneNode( true ) as StyleElement;
+	const media = element.media;
+	const { originalMedia } = element.dataset;
+
+	if ( media === 'preload' ) {
+		element.media = originalMedia || 'all';
+		element.removeAttribute( 'data-original-media' );
+	} else if ( ! element.media ) {
+		element.media = 'all';
+	}
+	return element;
+};
+
+/**
+ * Adds the minimum style elements from Y around those in X using a
+ * shortest common supersequence algorithm, returning a list of
+ * promises for all the elements in Y.
+ *
+ * If X is empty, it appends all elements in Y to the passed parent
+ * element or to `document.head` instead.
+ *
+ * The returned promises resolve once the corresponding style element
+ * is loaded and ready. Those elements that are also in X return a
+ * cached promise.
+ *
+ * The algorithm ensures that the final style elements present in the
+ * document (or the passed `parent` element) are in the correct order
+ * and they are included in either X or Y.
+ *
+ * @param X      Base list of style elements.
+ * @param Y      List of style elements.
+ * @param parent Optional parent element to append to the new style elements.
+ * @return List of promises that resolve once the elements in Y are ready.
+ */
+export function updateStylesWithSCS(
+	X: StyleElement[],
+	Y: StyleElement[],
+	parent: Element = window.document.head
+) {
+	if ( X.length === 0 ) {
+		return Y.map( ( element ) => {
+			const promise = prepareStylePromise( element );
+			parent.appendChild( element );
+			return promise;
+		} );
+	}
+
+	// Create normalized arrays for comparison.
+	const xNormalized = X.map( normalizeMedia );
+	const yNormalized = Y.map( normalizeMedia );
+
+	// The `scs` array contains normalized elements.
+	const scs = shortestCommonSupersequence(
+		xNormalized,
+		yNormalized,
+		areNodesEqual
+	);
+	const xLength = X.length;
+	const yLength = Y.length;
+	const promises = [];
+	let last = X[ xLength - 1 ];
+	let xIndex = 0;
+	let yIndex = 0;
+
+	for ( const scsElement of scs ) {
+		// Actual elements that will end up in the DOM.
+		const xElement = X[ xIndex ];
+		const yElement = Y[ yIndex ];
+		// Normalized elements for comparison.
+		const xNormEl = xNormalized[ xIndex ];
+		const yNormEl = yNormalized[ yIndex ];
+		if ( xIndex < xLength && areNodesEqual( xNormEl, scsElement ) ) {
+			if ( yIndex < yLength && areNodesEqual( yNormEl, scsElement ) ) {
+				promises.push( prepareStylePromise( xElement ) );
+				yIndex++;
+			}
+			xIndex++;
+		} else {
+			promises.push( prepareStylePromise( yElement ) );
+			if ( xIndex < xLength ) {
+				xElement.before( yElement );
+			} else {
+				last.after( yElement );
+				last = yElement;
+			}
+			yIndex++;
+		}
+	}
+
+	return promises;
+}
+
+/**
+ * Cache of promises per style elements.
+ *
+ * Each style element has their own associated `Promise` that resolves
+ * once the element has been loaded and is ready.
+ */
+const stylePromiseCache = new WeakMap<
+	StyleElement,
+	Promise< StyleElement >
+>();
+
+/**
+ * Prepares and returns the corresponding `Promise` for the passed style
+ * element.
+ *
+ * It returns the cached promise if it exists. Otherwise, constructs
+ * a `Promise` that resolves once the element has finished loading.
+ *
+ * For those elements that are not in the DOM yet, this function
+ * injects a `media="preload"` attribute to the passed element so the
+ * style is loaded without applying any styles to the document.
+ *
+ * @param element Style element.
+ * @return The associated `Promise` to the passed element.
+ */
+const prepareStylePromise = (
+	element: StyleElement
+): Promise< StyleElement > => {
+	if ( stylePromiseCache.has( element ) ) {
+		return stylePromiseCache.get( element );
+	}
+
+	// When the element exists in the main document and its media attribute
+	// is not "preload", that means the element comes from the initial page.
+	// The `media` attribute doesn't need to be handled in this case.
+	if ( window.document.contains( element ) && element.media !== 'preload' ) {
+		const promise = Promise.resolve( element );
+		stylePromiseCache.set( element, promise );
+		return promise;
+	}
+
+	if ( element.hasAttribute( 'media' ) && element.media !== 'all' ) {
+		element.dataset.originalMedia = element.media;
+	}
+
+	element.media = 'preload';
+
+	if ( element instanceof HTMLStyleElement ) {
+		const promise = Promise.resolve( element );
+		stylePromiseCache.set( element, promise );
+		return promise;
+	}
+
+	const promise = new Promise< HTMLLinkElement >( ( resolve, reject ) => {
+		element.addEventListener( 'load', () => resolve( element ) );
+		element.addEventListener( 'error', ( event ) => {
+			const { href } = event.target as HTMLLinkElement;
+			reject(
+				Error(
+					`The style sheet with the following URL failed to load: ${ href }`
+				)
+			);
+		} );
+	} );
+
+	stylePromiseCache.set( element, promise );
+	return promise;
+};
+
+/**
+ * Cache of style promise lists per URL.
+ *
+ * It contains the list of style elements associated to the page with the
+ * passed URL. The original order is preserved to respect the CSS cascade.
+ *
+ * Each included promise resolves when the associated style element is ready.
+ */
+const styleSheetCache = new Map< string, Promise< StyleElement >[] >();
+
+/**
+ * Prepares all style elements contained in the passed document.
+ *
+ * This function calls {@link updateStylesWithSCS|`updateStylesWithSCS`}
+ * to insert only the minimum amount of style elements into the DOM, so
+ * those present in the passed document end up in the DOM while the order
+ * is respected.
+ *
+ * New appended style elements contain a `media=preload` attribute to
+ * make them effectively disabled until they are applied with the
+ * {@link applyStyles|`applyStyles`} function.
+ *
+ * @param doc Document instance.
+ * @param url URL for the passed document.
+ * @return A list of promises for each style element in the passed document.
+ */
+export const preloadStyles = (
+	doc: Document,
+	url: string
+): Promise< StyleElement >[] => {
+	if ( ! styleSheetCache.has( url ) ) {
+		const currentStyleElements = Array.from(
+			window.document.querySelectorAll< StyleElement >(
+				'style,link[rel=stylesheet]'
+			)
+		);
+		const newStyleElements = Array.from(
+			doc.querySelectorAll< StyleElement >( 'style,link[rel=stylesheet]' )
+		);
+
+		// Set styles in order.
+		const stylePromises = updateStylesWithSCS(
+			currentStyleElements,
+			newStyleElements
+		);
+
+		styleSheetCache.set( url, stylePromises );
+	}
+	return styleSheetCache.get( url );
+};
+
+/**
+ * Traverses all style elements in the DOM, enabling only those included
+ * in the passed list and disabling the others.
+ *
+ * If the style element has the `data-original-media` attribute, the
+ * original `media` value is restored.
+ *
+ * @param styles List of style elements to apply.
+ */
+export const applyStyles = ( styles: StyleElement[] ) => {
+	window.document
+		.querySelectorAll( 'style,link[rel=stylesheet]' )
+		.forEach( ( el: HTMLLinkElement | HTMLStyleElement ) => {
+			if ( el.sheet ) {
+				if ( styles.includes( el ) ) {
+					const { originalMedia = 'all' } = el.dataset;
+					el.sheet.media.mediaText = originalMedia;
+					el.sheet.disabled = false;
+				} else {
+					el.sheet.disabled = true;
+				}
+			}
+		} );
+};