urlpattern-polyfill

// First, ensure the polyfill is loaded if native URLPattern is absent. // @ts-ignore: Property 'URLPattern' does not exist on type 'typeof globalThis'. if (!globalThis.URLPattern) { // Using dynamic import for conditional loading, works in ESM contexts. await import("urlpattern-polyfill"); } // Basic example: Matching a simple path with a named group. // Ensure URLPattern is available after the conditional import. let p1 = new URLPattern({ pathname: '/foo/:name' }); let r1 = p1.exec('https://example.com/foo/bar'); console.log('--- Basic Example ---'); console.log(`Input: ${r1?.pathname?.input}`); // Expected: "/foo/bar" console.log(`Named group 'name': ${r1?.pathname?.groups?.name}`); // Expected: "bar" console.log('\n'); // More advanced example: Matching specific file types with a base URL. const p2 = new URLPattern({ pathname: '/*.:filetype(jpg|png)', baseURL: 'https://example.com' // Explicit baseURL for clarity, mimicking self.location }); const urlsToTest = [ 'https://example.com/images/photo.jpg', 'https://example.com/docs/report.pdf', 'https://example.com/assets/icon.png', 'https://anothersite.com/image.jpg' // This will not match due to baseURL ]; console.log('--- Filetype Matching Example ---'); urlsToTest.forEach(url => { const r2 = p2.exec(url); if (r2) { console.log(`Match for ${url}:`); console.log(` Filetype: ${r2.pathname.groups['filetype']}`); if (r2.pathname.groups['filetype'] === 'jpg') { console.log(' -> Process as JPG'); } else if (r2.pathname.groups['filetype'] === 'png') { console.log(' -> Process as PNG'); } else { console.log(' -> Unknown image type'); } } else { console.log(`No match for ${url}`); } });