urlpattern polyfill
1.0.0
URLPattern est une nouvelle API Web pour les URL correspondantes. Il est destiné à fournir à la fois une API pratique pour les développeurs Web et à être utilisable dans d'autres API Web qui doivent faire correspondre les URL; Par exemple, les travailleurs du service. L'explicateur discute des cas d'utilisation motivants.
Il s'agit d'un polyfill pour l'API URLPattern afin que la fonctionnalité soit disponible dans les navigateurs qui ne le prennent pas en charge en nativement. Ce polyfill passe la même suite de tests de plate-forme Web.
Le polyfill fonctionne dans les navigateurs (module ESM) et dans Node.js via Import (module ESM) ou via require (module CJS).
Le polyfill ne sera chargé que si l'URLPattern n'existe pas déjà sur l'objet global, et dans ce cas, il l'ajoutera à l'objet 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 Note:
La ligne avec
// @ts-ignore: Property 'UrlPattern' does not existest nécessaire dans certains environnements, car avant de charger le polyfill, il peut ne pas être disponible, et la vérification des fonctionnalités dans l'instruction IF donne une erreur de type dactylographiée. L'idée est qu'elle se charge quand ce n'est pas là.
// 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 Note:
Peu importe comment vous chargez le polyfill, lorsqu'il n'y a pas d'implémentation dans votre environnement, il l'ajoutera toujours à l'objet 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
}
}Le motif dans ce cas peut être rendu plus simple sans la vérification d'origine en laissant de la fondation.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Nous prévoyons également de prendre en charge un «formulaire court» pour initialiser les objets URLPattern. Ceci est soutenu par le polyfill mais pas encore par la mise en œuvre du chrome.
Par exemple:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;Ou:
const p = new URLPattern ( "foo/*" , self . location ) ;Présentation de l'API avec des annotations de type dactylographié ci-dessous. IDL Web du navigateur associé peut être trouvé ici.
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 syntaxe de modèle ici est basée sur ce qui est utilisé dans la bibliothèque populaire Path-to-regexp.
"/" .":" puis un nom. Par exemple, "/:foo/:bar" a deux groupes nommés."/:foo(.*)" va remplacer la valeur par défaut de la correspondance au prochain diviseur."?" , "*" ou "+" fonctionne comme ils le font dans les expressions régulières. Lorsqu'un groupe est facultatif ou répété et qu'il est précédé d'un diviseur, le diviseur est également facultatif ou répété. Par exemple, "/foo/:bar?" correspondra à "/foo" , "/foo/" , ou "/foo/baz" . L'échappement du séparateur le fera à la place."(.*)" (Des groupes dits sans nom).Actuellement, nous prévoyons d'avoir ces différences connues avec le chemin à regexp:
Les URL ont une forme canonique basée sur ASCII, ce qui signifie que les noms de domaine internationalisés (noms d'hôtes) ont également une représentation canonique basée sur ASCII, et que d'autres composants tels que hash , search et pathname sont codés en pourcentage de codage.
Actuellement, URLPattern n'effectue aucun codage ou normalisation des modèles. Un développeur devrait donc encoder URL des caractères Unicode avant de passer le motif dans le constructeur. De même, le constructeur ne fait pas de choses comme aplatir les noms de chemin tels que /foo/../bar to / bar. Actuellement, le modèle doit être écrit pour cibler manuellement la sortie URL canonique.
Il effectue cependant ces opérations pour test() et exec() .
Les composants de codage peuvent facilement être effectués manuellement, mais ne codiez pas la syntaxe du motif:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Si vous avez des informations sur un problème de sécurité ou une vulnérabilité avec un projet open source Intel-Mainthed sur https://github.com/intel, veuillez envoyer un e-mail à sécuris. Cryptez des informations sensibles à l'aide de notre clé publique PGP. Pour les problèmes liés aux produits Intel, veuillez visiter https://security-center.intel.com.
