Bug: Non-standard version parsing for recursive dependencies.

[ryan-roemer]

Summary

runpkg appears to have some issues with a non-standard version like x.x.x-beta.x.

Reproduction

• Navigate to: https://runpkg.com/?fast-deep-equal@3.0.0-beta.1/es6/index.js
• View right pane for dependencies information.
  • Expected: Get some dependencies info.
  • Actual: Get a spinny wheel that's stuck.

The spinny wheel is stuck because of errors like:

GET https://unpkg.com/fast-deep-equal@3.0.0/package.json 404
  | fetchPkg | @ | recursiveDependencyFetch.js:59
  | recursiveDependantsFetch | @ | recursiveDependencyFetch.js:96
  | async function (async) |   |  
  | recursiveDependantsFetch | @ | recursiveDependencyFetch.js:95
  | default | @ | recursiveDependencyFetch.js:146
  | (anonymous) | @ | Aside.js:51
  | Qb | @ | react-dom.js:3260
  | si | @ | react-dom.js:3814
  | Q | @ | react.js:86
  | ta | @ | react.js:144
  | e.port1.onmessage | @ | react.js:508

So the issue appears to be that https://unpkg.com/fast-deep-equal@3.0.0/package.json is fetched under the hood instead of the non-404-ing https://unpkg.com/fast-deep-equal@3.0.0-beta.1/package.json

[lukejacksonn]

This will almost certainly be something to do with the regular expressions used to deconstruct the urls.. I wonder if there is a library out there which could do this more reliably for unpkg urls (has tests etc).

Does anyone know of anything?

[ryan-roemer]

We might also just be able to do better with the existing regex at https://github.com/FormidableLabs/runpkg/blob/master/utils/recursiveDependencyFetch.js#L36-L41

[ryan-roemer]

Here's another option -- don't regex. Instead use / as the delimiter to split against since semver + package names cannot contain a slash.

Maybe something like:

const parseVersion = (url) => {
  const parts = url
    .toLowerCase()
    .trim()
    .replace("https://unpkg.com", "")
    .split("/")
    .map((part) => part.trim())
    .filter(Boolean);

  if (parts.length >= 2 && parts[0][0] === "@") {
    // Scoped package.
    return `${parts[0]}/${parts[1]}`;
  } else if (parts.length >= 1) {
    // Normal package.
    return parts[0];
  }

  return null;
};

const urls = `
https://unpkg.com
https://unpkg.com/pkg@1.0.0-beta.1
https://unpkg.com/pkg@1.0.0-beta.1/extra.js
https://unpkg.com/pkg-dash@1.0.0-beta.1/extra.js
https://unpkg.com/@scope/pkg@1.0.0-beta.1
https://unpkg.com/@scope/pkg@1.0.0-beta.1/extra.js
https://unpkg.com/@scope/pkg-dash@1.0.0-beta.1/extra.js
`.split("\n").filter(Boolean).map((s) => s.trim());

urls.forEach((url) => {
  console.log(url, "->", parseVersion(url) || "NO MATCH");
});

[lukejacksonn]

This sounds very sensible.. this could serve as a good starting block for a more generic url parsing function that we could use al over the app. Ideally something like:

const { name, version, path, file } = parseUrl('https://unpkg.com/@scope/pkg-dash@1.0.0-beta.1/extra.js')

[kiraarghy]

I can pick this up!