Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Package unusable

See original GitHub issue

There are several issues with versions past v1:

index.cts does not export URLPattern
index.cts does not match the types (which say it exports URLPattern), so TS passes but it fails at runtime
url-patterns.cts is not importable in recent Node versions because it’s not specified in the exports map
url-patterns.cts is not importable in TypeScript because there’s no url-patterns.d.ts
using import {URLPattern} from "urlpattern-polyfill" also polyfills the global, which is not what one expects
using import "urlpattern-polyfill" as a polyfill is not usable in TypeScript because the URLPattern is not defined globally

Issue Analytics

State:
Created a year ago
Comments:16 (12 by maintainers)

Top GitHub Comments

1reaction

SanderEliascommented, Apr 7, 2022

@fregante It doesn’t import a CJS file. It is a proper ESM module that is fully self-contained. The following HTML works for me without an issue:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test document for browser testing</title>
</head>
<body>
  <script type="module">
    import {URLPattern} from 'https://cdn.jsdelivr.net/npm/urlpattern-polyfill@4.0.1/dist/index.js';
    const header = document.createElement('h1');
    header.textContent = 'Failed testing document for URL pattern testing';
    if (typeof URLPattern === 'function') {
      header.textContent = 'Succeeded testing document for URL pattern testing';      
    }
    document.body.appendChild(header);
  </script>  
</body>
</html>

1reaction

kenchriscommented, Apr 7, 2022

You are right about the declare global, and the below works. We need to add tests for that

export {};

declare global {
 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;
    };
  }
}