@wordpress/interactivity-router 2.24.0 → 2.26.0

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

@@ -0,0 +1,366 @@
+/**
+ * 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
+ */
+
+/**
+ * External dependencies
+ */
+import * as lexer from 'es-module-lexer';
+
+/**
+ * Internal dependencies
+ */
+import { fetchModule } from './fetch';
+import { resolve } from './resolver';
+
+export interface ModuleLoad {
+	url?: string; // original URL
+	responseUrl?: string; // response url
+	fetchPromise?: Promise< ModuleLoad >; // fetch promise
+	source?: string; // source code
+	linkPromise?: Promise< void >; // link-promise (dependency fetch)
+	analysis?: ReturnType< typeof lexer.parse >; // analysis ([ imports, exports, ... ])
+	deps?: ModuleLoad[]; // deps
+	blobUrl?: string; // blobUrl
+	shellUrl?: string; // shellUrl for circular references
+}
+
+export const initPromise = lexer.init;
+
+/**
+ * Script element containing the initial page's import map.
+ */
+const initialImportMapElement =
+	window.document.querySelector< HTMLScriptElement >(
+		'script#wp-importmap[type=importmap]'
+	);
+
+/**
+ * Data from the initial page's import map.
+ *
+ * Pages containing any of the imports present on the original page
+ * in their import maps should ignore them, as those imports would
+ * be handled natively.
+ */
+export const initialImportMap = initialImportMapElement
+	? JSON.parse( initialImportMapElement.text )
+	: { imports: {}, scopes: {} };
+
+const skip = ( id ) => Object.keys( initialImportMap.imports ).includes( id );
+
+const fetchCache: Record< string, Promise< ModuleLoad > > = {};
+export const registry = {};
+
+// Init registry with importamp content.
+Object.keys( initialImportMap.imports ).forEach( ( id ) => {
+	registry[ id ] = {
+		blobUrl: id,
+	};
+} );
+
+async function loadAll( load: ModuleLoad, seen: Record< string, any > ) {
+	if ( load.blobUrl || seen[ load.url ] ) {
+		return;
+	}
+	seen[ load.url ] = 1;
+	await load.linkPromise;
+	await Promise.all( load.deps.map( ( dep ) => loadAll( dep, seen ) ) );
+}
+
+function urlJsString( url: string ) {
+	return `'${ url.replace( /'/g, "\\'" ) }'`;
+}
+
+const createBlob = ( source: string, type = 'text/javascript' ) =>
+	URL.createObjectURL( new Blob( [ source ], { type } ) );
+
+function resolveDeps( load: ModuleLoad, seen: Record< string, any > ) {
+	if ( load.blobUrl || ! seen[ load.url ] ) {
+		return;
+	}
+	seen[ load.url ] = 0;
+
+	for ( const dep of load.deps ) {
+		resolveDeps( dep, seen );
+	}
+
+	const [ imports, exports ] = load.analysis;
+	const source = load.source;
+
+	let resolvedSource = '';
+
+	if ( ! imports.length ) {
+		resolvedSource += source;
+	} else {
+		let lastIndex = 0;
+		let depIndex = 0;
+		const dynamicImportEndStack = [];
+
+		function pushStringTo( originalIndex: number ) {
+			while (
+				dynamicImportEndStack.length &&
+				dynamicImportEndStack[ dynamicImportEndStack.length - 1 ] <
+					originalIndex
+			) {
+				const dynamicImportEnd = dynamicImportEndStack.pop();
+				resolvedSource += `${ source.slice(
+					lastIndex,
+					dynamicImportEnd
+				) }, ${ urlJsString( load.responseUrl ) }`;
+				lastIndex = dynamicImportEnd;
+			}
+			resolvedSource += source.slice( lastIndex, originalIndex );
+			lastIndex = originalIndex;
+		}
+
+		for ( const {
+			s: start,
+			ss: statementStart,
+			se: statementEnd,
+			d: dynamicImportIndex,
+		} of imports ) {
+			// static import
+			if ( dynamicImportIndex === -1 ) {
+				const depLoad = load.deps[ depIndex++ ];
+				let blobUrl = depLoad.blobUrl;
+				const cycleShell = ! blobUrl;
+				if ( cycleShell ) {
+					// Circular shell creation
+					if ( ! ( blobUrl = depLoad.shellUrl ) ) {
+						blobUrl = depLoad.shellUrl = createBlob(
+							`export function u$_(m){${ depLoad.analysis[ 1 ]
+								.map( ( { s, e }, i ) => {
+									const q =
+										depLoad.source[ s ] === '"' ||
+										depLoad.source[ s ] === "'";
+									return `e$_${ i }=m${
+										q ? `[` : '.'
+									}${ depLoad.source.slice( s, e ) }${
+										q ? `]` : ''
+									}`;
+								} )
+								.join( ',' ) }}${
+								depLoad.analysis[ 1 ].length
+									? `let ${ depLoad.analysis[ 1 ]
+											.map( ( _, i ) => `e$_${ i }` )
+											.join( ',' ) };`
+									: ''
+							}export {${ depLoad.analysis[ 1 ]
+								.map(
+									( { s, e }, i ) =>
+										`e$_${ i } as ${ depLoad.source.slice(
+											s,
+											e
+										) }`
+								)
+								.join( ',' ) }}\n//# sourceURL=${
+								depLoad.responseUrl
+							}?cycle`
+						);
+					}
+				}
+
+				pushStringTo( start - 1 );
+				resolvedSource += `/*${ source.slice(
+					start - 1,
+					statementEnd
+				) }*/${ urlJsString( blobUrl ) }`;
+
+				// circular shell execution
+				if ( ! cycleShell && depLoad.shellUrl ) {
+					resolvedSource += `;import*as m$_${ depIndex } from'${ depLoad.blobUrl }';import{u$_ as u$_${ depIndex }}from'${ depLoad.shellUrl }';u$_${ depIndex }(m$_${ depIndex })`;
+					depLoad.shellUrl = undefined;
+				}
+				lastIndex = statementEnd;
+			}
+			// import.meta
+			else if ( dynamicImportIndex === -2 ) {
+				throw Error( 'The import.meta property is not supported.' );
+			}
+			// dynamic import
+			else {
+				pushStringTo( statementStart );
+				resolvedSource += `wpInteractivityRouterImport(`;
+				dynamicImportEndStack.push( statementEnd - 1 );
+				lastIndex = start;
+			}
+		}
+
+		// progressive cycle binding updates
+		if ( load.shellUrl ) {
+			resolvedSource += `\n;import{u$_}from'${
+				load.shellUrl
+			}';try{u$_({${ exports
+				.filter( ( e ) => e.ln )
+				.map( ( { s, e, ln } ) => `${ source.slice( s, e ) }:${ ln }` )
+				.join( ',' ) }})}catch(_){};\n`;
+		}
+
+		pushStringTo( source.length );
+	}
+
+	// ensure we have a proper sourceURL
+	let hasSourceURL = false;
+	resolvedSource = resolvedSource.replace(
+		sourceMapURLRegEx,
+		( match, isMapping, url ) => {
+			hasSourceURL = ! isMapping;
+			return match.replace( url, () =>
+				new URL( url, load.responseUrl ).toString()
+			);
+		}
+	);
+	if ( ! hasSourceURL ) {
+		resolvedSource += '\n//# sourceURL=' + load.responseUrl;
+	}
+
+	load.blobUrl = createBlob( resolvedSource );
+	load.source = undefined; // free memory
+}
+
+const sourceMapURLRegEx =
+	/\n\/\/# source(Mapping)?URL=([^\n]+)\s*((;|\/\/[^#][^\n]*)\s*)*$/;
+
+function getOrCreateLoad(
+	url: string,
+	fetchOpts: RequestInit,
+	parent: string
+): ModuleLoad {
+	let load: ModuleLoad = registry[ url ];
+	if ( load ) {
+		return load;
+	}
+
+	load = { url };
+
+	if ( registry[ url ] ) {
+		// If there's a naming conflict, keep incrementing until unique
+		let i = 0;
+		while ( registry[ load.url + ++i ] ) {
+			/* no-op */
+		}
+		load.url += i;
+	}
+	registry[ load.url ] = load;
+
+	load.fetchPromise = ( async () => {
+		let source;
+		( { responseUrl: load.responseUrl, source: source } =
+			await ( fetchCache[ url ] ||
+				fetchModule( url, fetchOpts, parent ) ) );
+		try {
+			load.analysis = lexer.parse( source, load.url );
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			load.analysis = [ [], [], false, false ];
+		}
+		load.source = source;
+		return load;
+	} )();
+
+	load.linkPromise = load.fetchPromise.then( async () => {
+		let childFetchOpts = fetchOpts;
+		load.deps = (
+			await Promise.all(
+				load.analysis[ 0 ].map( async ( { n, d } ) => {
+					if ( d !== -1 || ! n ) {
+						return undefined;
+					}
+					const responseUrl = resolve(
+						n,
+						load.responseUrl || load.url
+					);
+					if ( skip && skip( responseUrl ) ) {
+						return { blobUrl: responseUrl } as ModuleLoad;
+					}
+					// remove integrity for child fetches
+					if ( childFetchOpts.integrity ) {
+						childFetchOpts = {
+							...childFetchOpts,
+							integrity: undefined,
+						};
+					}
+					return getOrCreateLoad(
+						responseUrl,
+						childFetchOpts,
+						load.responseUrl
+					).fetchPromise;
+				} )
+			)
+		).filter( ( l ) => l );
+	} );
+
+	return load;
+}
+
+const dynamicImport = ( u: string ) => import( /* webpackIgnore: true */ u );
+
+/**
+ * Resolves the passed module URL and fetches the corresponding module
+ * and their dependencies, returning a `ModuleLoad` object once all
+ * of them have been fetched.
+ *
+ * @param url       Module URL.
+ * @param fetchOpts Fetch options.
+ * @return A promise with a `ModuleLoad` instance.
+ */
+export async function preloadModule(
+	url: string,
+	fetchOpts?: RequestInit
+): Promise< ModuleLoad > {
+	await initPromise;
+	const load = getOrCreateLoad( url, fetchOpts, null );
+	const seen = {};
+	await loadAll( load, seen );
+	resolveDeps( load, seen );
+	// microtask scheduling – can help ensure Blob is fully ready
+	await Promise.resolve();
+	return load;
+}
+
+/**
+ * Imports the module represented by the passed `ModuleLoad` instance.
+ *
+ * @param load The `ModuleLoad` instance representing the module.
+ * @return A promise with the imported module.
+ */
+export async function importPreloadedModule< Module = unknown >(
+	load: ModuleLoad
+): Promise< Module > {
+	const module = await dynamicImport( load.blobUrl );
+	// if the preloaded module ended up with a shell (circular refs), finalize it
+	if ( load.shellUrl ) {
+		( await dynamicImport( load.shellUrl ) ).u$_( module );
+	}
+	return module;
+}
+
+/**
+ * Imports the module represented by the passed module URL.
+ *
+ * The module URL and all its dependencies are resolved using the
+ * current status of the internal dynamic import map.
+ *
+ * @param url       Module URL.
+ * @param fetchOpts Fetch options.
+ * @return A promise with the imported module.
+ */
+export async function topLevelLoad< Module = unknown >(
+	url: string,
+	fetchOpts?: RequestInit
+): Promise< Module > {
+	const load = await preloadModule( url, fetchOpts );
+	return importPreloadedModule< Module >( load );
+}

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;
+}