urlpattern polyfill
1.0.0
UrlPattern es una nueva API web para las URL coincidentes. Tiene la intención de proporcionar una API conveniente para los desarrolladores web y ser utilizable en otras API web que necesitan coincidir con URL; por ejemplo, trabajadores de servicio. El explicador discute los casos de uso motivadores.
Este es un polyfill para la API de UrlPattern para que la función esté disponible en navegadores que no lo admiten de forma nativa. Este polyfill pasa el mismo conjunto de pruebas de plataforma web.
El polyfill funciona en navegadores (módulo ESM) y en node.js, ya sea a través de importar (módulo ESM) o mediante requerimiento (módulo CJS).
El polyfill solo se cargará si el plato URL ya no existe en el objeto global, y en ese caso lo agregará al objeto global.
// Conditional ESM module loading (Node.js and browser)
// @ts-ignore: Property 'UrlPattern' does not exist
if ( ! globalThis . URLPattern ) {
await import ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the ESM module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
import "urlpattern-polyfill" ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
import { URLPattern } from "urlpattern-polyfill" ;
globalThis . URLPattern = URLPattern Nota:
La línea con
// @ts-ignore: Property 'UrlPattern' does not existen algunos entornos porque antes de cargar el polifill podría no estar disponible, y la verificación de funciones en la instrucción IF da un error de TypeScript. Toda la idea es que se carga cuando no está allí.
// Conditional CJS module loading (Node.js)
if ( ! globalThis . URLPattern ) {
require ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the CommonJs module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
require ( "urlpattern-polyfill" ) ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
const { URLPattern } = require ( "urlpattern-polyfill" ) ; ;
globalThis . URLPattern = URLPattern Nota:
No importa cómo cargue el polyfill, cuando no hay implementación en su entorno, siempre lo agregará al objeto global.
let p = new URLPattern ( { pathname : '/foo/:name' } ) ;
let r = p . exec ( 'https://example.com/foo/bar' ) ;
console . log ( r . pathname . input ) ; // "/foo/bar"
console . log ( r . pathname . groups . name ) ; // "bar"
let r2 = p . exec ( { pathname : '/foo/baz' } ) ;
console . log ( r2 . pathname . groups . name ) ; // "baz" // Match same-origin jpg or png URLs.
// Note: This uses a named group to make it easier to access
// the result later.
const p = new URLPattern ( {
pathname : '/*.:filetype(jpg|png)' ,
baseURL : self . location
} ) ;
for ( let url in url_list ) {
const r = p . exec ( url ) ;
// skip non-matches
if ( ! r ) {
continue ;
}
if ( r . pathname . groups [ 'filetype' ] === 'jpg' ) {
// process jpg
} else if ( r . pathname . groups [ 'filetype' ] === 'png' ) {
// process png
}
}El patrón en este caso se puede simplificar sin la verificación de origen al dejar el BaseUrl.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Estamos planeando también apoyar una "forma corta" para inicializar los objetos de UrlPattern. Esto es compatible con el polyfill pero aún no por la implementación del cromo.
Por ejemplo:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;O:
const p = new URLPattern ( "foo/*" , self . location ) ;La descripción general de la API con anotaciones de tipo TypeScript se encuentra a continuación. El IDL web de navegador asociado se puede encontrar aquí.
type URLPatternInput = URLPatternInit | string ;
class URLPattern {
constructor ( init ?: URLPatternInput , baseURL ?: string ) ;
test ( input ?: URLPatternInput , baseURL ?: string ) : boolean ;
exec ( input ?: URLPatternInput , baseURL ?: string ) : URLPatternResult | null ;
readonly protocol : string ;
readonly username : string ;
readonly password : string ;
readonly hostname : string ;
readonly port : string ;
readonly pathname : string ;
readonly search : string ;
readonly hash : string ;
}
interface URLPatternInit {
baseURL ?: string ;
username ?: string ;
password ?: string ;
protocol ?: string ;
hostname ?: string ;
port ?: string ;
pathname ?: string ;
search ?: string ;
hash ?: string ;
}
interface URLPatternResult {
inputs : [ URLPatternInput ] ;
protocol : URLPatternComponentResult ;
username : URLPatternComponentResult ;
password : URLPatternComponentResult ;
hostname : URLPatternComponentResult ;
port : URLPatternComponentResult ;
pathname : URLPatternComponentResult ;
search : URLPatternComponentResult ;
hash : URLPatternComponentResult ;
}
interface URLPatternComponentResult {
input : string ;
groups : {
[ key : string ] : string | undefined ;
} ;
}La sintaxis del patrón aquí se basa en lo que se usa en la popular biblioteca Rath-to-ReGEXP.
"/" .":" y luego un nombre. Por ejemplo, "/:foo/:bar" tiene dos grupos con nombre."/:foo(.*)" anulará el valor predeterminado de coincidir con el siguiente divisor."?" , "*" o "+" funciona tal como lo hacen en expresiones regulares. Cuando un grupo es opcional o repetido y está precedido por un divisor, entonces el divisor también es opcional o repetido. Por ejemplo, "/foo/:bar?" coincidirá con "/foo" , "/foo/" o "/foo/baz" . Escapar del divisor hará que sea necesario."(.*)" (Llamados grupos sin nombre).Actualmente planeamos tener estas diferencias conocidas con la ruta a la regexp:
Las URL tienen una forma canónica que se basa en ASCII, lo que significa que los nombres de dominio internacionalizados (nombres de host) también tienen una representación basada en ASCII canónica, y que otros componentes como hash , search y pathname están codificados utilizando el porcentaje de codificación.
Actualmente URLPattern no realiza ninguna codificación o normalización de los patrones. Por lo tanto, un desarrollador necesitaría codificar los caracteres Unicode antes de pasar el patrón al constructor. Del mismo modo, el constructor no hace cosas como los nombres de los planeadores como /foo/../bar to /bar. Actualmente, el patrón debe escribirse para la salida de URL canónica objetivo manualmente.
Sin embargo, realiza estas operaciones para la entrada test() y exec() .
Los componentes de codificación se pueden hacer fácilmente manualmente, pero no codifica la sintaxis del patrón:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Si tiene información sobre un problema de seguridad o vulnerabilidad con un proyecto de código abierto mantenido por Intel en https://github.com/intel, envíe un correo electrónico a [email protected]. Cifrar información confidencial utilizando nuestra clave pública PGP. Para cuestiones relacionadas con los productos Intel, visite https://security-center.intel.com.
