Improve TypeScript types

[blixt]

Updating the TypeScript types to include recent additions. Also attempts to accurately represent the types in the registry map, though that could use some extra scrutiny.

[blixt]

I guess this property could be removed completely because I don't see it being used (there is another t property being returned by the fetch functionality, but that object does not appear to ever overlap with the one set in registry).

[guybedford]

The resolver / importShim types look great. For the registry unfortunately that's a private API (so won't be providing semver-level backwards-compat), so I'd be weary to type it unless TypeScript has some explicit way of indicating something is a private / non semver API.

[blixt]

We can exclude the _r property and leave that up to the intrepid developer that needs to use it to type in their private repo (which is what we're doing today at Framer). It would be nice to get some level of long-term support for a reverse lookup of blob URL to import specifier though. The following code is how I'm using the _r property today, maybe it could be exposed in a follow-up PR?

/**
 * Make blob URLs (modules shimmed locally to work with our dynamic import map)
 * human readable again, very useful for debugging purposes.
 */
function replaceBlobURLs(value: string): string {
    const reverseMap = new Map<string, string>()

    // Replace blob URLs with import map entries.
    const importMap = importShim.getImportMap()
    for (const [specifier, url] of Object.entries(importMap.imports)) {
        if (!url.startsWith("blob:")) continue
        reverseMap.set(url, specifier)
    }

    // Replace blob URLs with URL imports.
    for (const [specifier, entry] of Object.entries(importShim._r)) {
        if (!entry.b) continue
        if (reverseMap.has(entry.b)) {
            // Don't override import map entries which should be more accurate.
            continue
        }
        // Sometimes blob URLs point to other blob URLs, so attempt to resolve.
        // TODO: This should probably also follow multi-step chains of blob URLs.
        reverseMap.set(entry.b, reverseMap.get(specifier) ?? specifier)
    }

    return value.replace(/blob:https?:\/\/[^/]+\/[a-z0-9-]+/g, blobURL => reverseMap.get(blobURL) ?? blobURL)
}

[blixt]

Prettier did this but I figured I'd leave it in since it's less likely to cause more diffs in the future (assuming most devs have Prettier running).

[guybedford]

Thanks, yes what you are checking in your code will be stable at least here and likely won't change.

Out of interest, are you not using the native import maps path in Chrome? Surely you get the proper native debugging experience there? Or are you using shim mode entirely?

[blixt]

Out of interest, are you not using the native import maps path in Chrome? Surely you get the proper native debugging experience there? Or are you using shim mode entirely?

Because Framer is essentially a code editor itself (though we tend to mostly generate code from visually edited elements), supporting NPM dependencies that can be dynamically added within an active session, and much more, we must use the shim mode entirely indeed.

We update the import maps dynamically hundreds of times in a single edit session, but we still want to output helpful messages to the end-user's console when things do end up going wrong. Since we wrap all code evaluation (which happens within a sandboxed iframe) in our own error handling, we can catch the error message and update it before anything is printed in the developer console.

[guybedford]

Ah makes sense. There may be places with rethrown errors where es-module-shims itself might want to do a reverse lookup. If that becomes the case, we could expose the function internally as well then.