{"id":20652769,"url":"https://github.com/kenchris/urlpattern-polyfill","last_synced_at":"2025-05-15T03:07:25.169Z","repository":{"id":39756719,"uuid":"302145820","full_name":"kenchris/urlpattern-polyfill","owner":"kenchris","description":"URLPattern polyfill","archived":false,"fork":false,"pushed_at":"2025-05-07T06:37:47.000Z","size":173,"stargazers_count":278,"open_issues_count":10,"forks_count":33,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-08T18:06:22.172Z","etag":null,"topics":["javascript","nodejs","polyfill","w3c","web"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/urlpattern-polyfill","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenchris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-07T19:55:36.000Z","updated_at":"2025-05-07T06:37:51.000Z","dependencies_parsed_at":"2023-11-28T16:02:33.388Z","dependency_job_id":"387d38f6-7bb6-46f7-855e-e065a9975c11","html_url":"https://github.com/kenchris/urlpattern-polyfill","commit_stats":{"total_commits":174,"total_committers":19,"mean_commits":9.157894736842104,"dds":0.6666666666666667,"last_synced_commit":"039357b28b68e3d68f59d7c6af0138cd25a91914"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenchris%2Furlpattern-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenchris%2Furlpattern-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenchris%2Furlpattern-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenchris%2Furlpattern-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenchris","download_url":"https://codeload.github.com/kenchris/urlpattern-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253141535,"owners_count":21860541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nodejs","polyfill","w3c","web"],"created_at":"2024-11-16T17:38:08.981Z","updated_at":"2025-05-15T03:07:25.100Z","avatar_url":"https://github.com/kenchris.png","language":"TypeScript","readme":"[![run-tests](https://github.com/kenchris/urlpattern-polyfill/actions/workflows/workflow.yml/badge.svg)](https://github.com/kenchris/urlpattern-polyfill/actions/workflows/workflow.yml)\n[![npm (tag)](https://img.shields.io/npm/v/urlpattern-polyfill/latest?style=flat-square)](https://www.npmjs.com/package/urlpattern-polyfill)\n![GitHub](https://img.shields.io/github/license/kenchris/urlpattern-polyfill?style=flat-square)\n\nURLPattern polyfills\n===\n\nURLPattern is a new web API for matching URLs. Its intended to both provide a convenient API for web developers and to be usable in other web APIs that need to match URLs; e.g. service workers. The [explainer](https://github.com/wanderview/service-worker-scope-pattern-matching/blob/master/explainer.md) discusses the motivating use cases.\n\nThis is a polyfill for the [URLPattern API](https://wicg.github.io/urlpattern/) so that  the feature is available in browsers that don't support it natively. This polyfill passes\nthe same web platform test suite.\n\nHow to load the polyfill\n---\nThe polyfill works in browsers (ESM module) and in Node.js either via import (ESM module) or via require (CJS module).\n\nThe polyfill will only be loaded if the URLPattern doesn't already exist on the global object, and in that case it will add it to the global object.\n\n## loading as ESM module\n\n```javascript\n// Conditional ESM module loading (Node.js and browser)\n// @ts-ignore: Property 'UrlPattern' does not exist \nif (!globalThis.URLPattern) { \n  await import(\"urlpattern-polyfill\");\n}\n/** \n * The above is the recommended way to load the ESM module, as it only\n * loads it on demand, thus when not natively supported by the runtime or\n * already polyfilled.\n */\nimport \"urlpattern-polyfill\";\n\n/** \n * In case you want to replace an existing implementation with the polyfill:\n */\nimport {URLPattern} from \"urlpattern-polyfill\";\nglobalThis.URLPattern = URLPattern\n```\n\n\u003e ## Note:\n\u003e The line with `// @ts-ignore: Property 'UrlPattern' does not exist ` is needed in some environments because before you load the polyfill it might not be available, and the feature-check in the if statement gives an TypeScript error. The whole idea is that it loads when its not there. \n\n## loading as CommonJs module\n\n```javascript\n// Conditional CJS module loading (Node.js)\nif (!globalThis.URLPattern) {\n   require(\"urlpattern-polyfill\");\n}\n/** \n * The above is the recommended way to load the CommonJs module, as it only\n * loads it on demand, thus when not natively supported by the runtime or\n * already polyfilled.\n */\nrequire(\"urlpattern-polyfill\");\n\n/** \n * In case you want to replace an existing implementation with the polyfill:\n */\nconst {URLPattern} = require(\"urlpattern-polyfill\");;\nglobalThis.URLPattern = URLPattern\n```\n\n\u003e ## Note:\n\u003e No matter how you load the polyfill, when there is no implementation in your environment, it will _always_ add it to the global object.\n\nBasic example\n---\n\n```javascript\nlet p = new URLPattern({ pathname: '/foo/:name' });\n\nlet r = p.exec('https://example.com/foo/bar');\nconsole.log(r.pathname.input); // \"/foo/bar\"\nconsole.log(r.pathname.groups.name); // \"bar\"\n\nlet r2 = p.exec({ pathname: '/foo/baz' });\nconsole.log(r2.pathname.groups.name); // \"baz\"\n```\n\nExample of matching same-origin JPG or PNG requests\n---\n\n```javascript\n// Match same-origin jpg or png URLs.\n// Note: This uses a named group to make it easier to access\n//       the result later.\nconst p = new URLPattern({\n  pathname: '/*.:filetype(jpg|png)',\n  baseURL: self.location\n});\n\nfor (let url in url_list) {\n  const r = p.exec(url);\n\n  // skip non-matches\n  if (!r) {\n    continue;\n  }\n\n  if (r.pathname.groups['filetype'] === 'jpg') {\n    // process jpg\n  } else if (r.pathname.groups['filetype'] === 'png') {\n    // process png\n  }\n}\n```\n\nThe pattern in this case can be made simpler without the origin check by leaving off the baseURL.\n\n```javascript\n// Match any URL ending with 'jpg' or 'png'.\nconst p = new URLPattern({ pathname: '/*.:filetype(jpg|png)' });\n```\n\nExample of Short Form Support\n---\nWe are planning to also support a \"short form\" for initializing URLPattern objects.\nThis is supported by the polyfill but not yet by the Chromium implementation.\n\nFor example:\n\n```javascript\nconst p = new URLPattern(\"https://*.example.com/foo/*\");\n```\n\nOr:\n\n```javascript\nconst p = new URLPattern(\"foo/*\", self.location);\n```\n\nAPI reference\n===\n\nAPI overview with typeScript type annotations is found below. Associated browser Web IDL can be found [here](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/modules/url_pattern/).\n\n```ts\ntype URLPatternInput = URLPatternInit | string;\n\nclass URLPattern {\n  constructor(init?: URLPatternInput, baseURL?: string);\n\n  test(input?: URLPatternInput, baseURL?: string): boolean;\n\n  exec(input?: URLPatternInput, baseURL?: string): URLPatternResult | null;\n\n  readonly protocol: string;\n  readonly username: string;\n  readonly password: string;\n  readonly hostname: string;\n  readonly port: string;\n  readonly pathname: string;\n  readonly search: string;\n  readonly hash: string;\n}\n\ninterface URLPatternInit {\n  baseURL?: string;\n  username?: string;\n  password?: string;\n  protocol?: string;\n  hostname?: string;\n  port?: string;\n  pathname?: string;\n  search?: string;\n  hash?: string;\n}\n\ninterface URLPatternResult {\n  inputs: [URLPatternInput];\n  protocol: URLPatternComponentResult;\n  username: URLPatternComponentResult;\n  password: URLPatternComponentResult;\n  hostname: URLPatternComponentResult;\n  port: URLPatternComponentResult;\n  pathname: URLPatternComponentResult;\n  search: URLPatternComponentResult;\n  hash: URLPatternComponentResult;\n}\n\ninterface URLPatternComponentResult {\n  input: string;\n  groups: {\n      [key: string]: string | undefined;\n  };\n}\n\n```\n\nPattern syntax\n===\nThe pattern syntax here is based on what is used in the popular path-to-regexp library.\n\n* An understanding of a \"divider\" that separates segments of the string.  For the pathname this is typically the `\"/\"` character.\n* A regex group defined by an enclosed set of parentheses.  Inside of the parentheses a general regex may be defined.\n* A named group that matches characters until the next divider.  The named group begins with a `\":\"` character and then a name.  For example, `\"/:foo/:bar\"` has two named groups.\n* A custom regex for a named group.  In this case a set of parentheses with a regex immediately follows the named group; e.g. `\"/:foo(.*)\"` will override the default of matching to the next divider.\n* A modifier may optionally follow a regex or named group.  A modifier is a `\"?\"`, `\"*\"`, or `\"+\"` functions just as they do in regular expressions.  When a group is optional or repeated and it's preceded by a divider then the divider is also optional or repeated.  For example, `\"/foo/:bar?\"` will match `\"/foo\"`, `\"/foo/\"`, or `\"/foo/baz\"`.  Escaping the divider will make it required instead.\n* A way to greedily match characters, even across dividers, by using `\"(.*)\"` (so-called unnamed groups).\n\n\nCurrently we plan to have these known differences with path-to-regexp:\n\n* No support for custom prefixes and suffixes.\n\n\nCanonicalization\n===\n\nURLs have a canonical form that is based on ASCII, meaning that [internationalized domain names](https://en.wikipedia.org/wiki/Internationalized_domain_name) (hostnames) also have a canonical ASCII based representation, and that other components such as `hash`, `search` and `pathname` are encoded using [percent encoding](https://en.wikipedia.org/wiki/Percent-encoding).\n\nCurrently `URLPattern` does not perform any encoding or normalization of the patterns. So a developer would need to URL encode unicode characters before passing the pattern into the constructor. Similarly, the constructor does not do things like flattening pathnames such as /foo/../bar to /bar. Currently the pattern must be written to target canonical URL output manually.\n\nIt does, however, perform these operations for `test()` and `exec()` input.\n\nEncoding components can easily be done manually, but do not encoding the pattern syntax:\n\n```javascript\nencodeURIComponent(\"?q=æøå\")\n// \"%3Fq%3D%C3%A6%C3%B8%C3%A5\"\n```\n\n```javascript\nnew URL(\"https://ølerlækkernårdetermit.dk\").hostname\n// \"xn--lerlkkernrdetermit-dubo78a.dk\"\n```\n\nBreaking changes\n===\n- V9.0.0 drops support for NodeJS 14 and lower. NodeJS 15 or higher is required. This is due to using private class fields, so we can have better optimalizations. There is _No_ change in functionality, but we were able to reduce the size of the polyfill by ~2.5KB (~13%), thanks to a pr #118 from @jimmywarting.\n\nLearn more\n===\n\n- [Explainer](https://github.com/wanderview/service-worker-scope-pattern-matching/blob/master/explainer.md)\n- [Design Document](https://docs.google.com/document/d/17L6b3zlTHtyxQvOAvbK55gQOi5rrJLERwjt_sKXpzqc/edit#)\n\nReporting a security issue\n===\nIf you have information about a security issue or vulnerability with an Intel-maintained open source project on https://github.com/intel, please send an e-mail to secure@intel.com. Encrypt sensitive information using our PGP public key. For issues related to Intel products, please visit https://security-center.intel.com.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenchris%2Furlpattern-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenchris%2Furlpattern-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenchris%2Furlpattern-polyfill/lists"}