[Enhancement] Add webDependency alias support

[FredKSchott]

We've seen a few requests come in to improve the "deep import" experience, and I think it makes sense to tackle that now. Especially as we start to bring in more Webpack users with existing apps/dependency trees, it makes sense to have a way to manually configure the package entrypoint and still use the package name as the import.

Today, to use a custom package entrypoint you need to do:

{
  "webDependencies": [
    "preact",
    "undux/dist.esnext/index.js"
  ]
}

import '/web_modules/preact.js';
import '/web_modules/undux/dist.esnext/index.js'; // Everywhere you import undux

Instead, we should be able to do:

{
  "webDependencies": [
    "preact",
-    "undux/dist.esnext/index.js"
+    ["undux", "undux/dist.esnext/index.js"],
  ]
}

import '/web_modules/preact.js';
import '/web_modules/undux.js';

Thoughts on the syntax? I don't have too strong of an opinion on tuple-array vs. object to define an alias, but I think simple is better at this point, so that if we DO decide we want some more complex syntax down the road we can easily map the old syntax to the new one (and deprecate it without removing it entirely).

Would love some help on this one, if anyone is interested! It shouldn't be too tricky, and will most likely involve adding an alias property to InstallTarget and then using that during install() instead of calling getWebDependencyName() to calculate the final location ourself like we normally do.

[ahmadalfy]

I am interested in trying that. Instead of adding an alias can't we just the specifier be either a string or a tuple? I will share my solution once it's done

[FredKSchott]

A tuple is what I used in that code snippet above. Curious what you mean if you want to share an example of the interface you're picturing.

I'd recommend we walk through what you're thinking in this issue before you start coding, just to save time later on down the road.

[ahmadalfy]

Thank you for that, indeed that would be helpful :) My idea was to change the type of specifier to be string | [string, string] then check if it's a string, proceed as usual. If it's a tuple attempt to calculate the final location based on the user's input.

[FredKSchott]

Sounds good! Your goal should be to pass something like getWebDependencyName(tuple[0]) as the key to depObject. Rollup reads depObject as input, and then creates the web_modules/ directory for us based on that object.

[Sammons]

I think this is related, is there a way to deep import a minified prod .js file for prod, and a non-minified dev .js file for dev? I want them to map to the same file in the web_modules folder. An example would be deep importing the .js file from the npm module for React, where it has separate distributions for dev/prod.

[tienpv222]

I think this is related, is there a way to deep import a minified prod .js file for prod, and a non-minified dev .js file for dev? I want them to map to the same file in the web_modules folder. An example would be deep importing the .js file from the npm module for React, where it has separate distributions for dev/prod.

I'm using Vue and it has several builds too, so I think this feature is really necessary. One alternative to your suggestion is to have seperated lib.js and lib.prod.js files, then using snowpack babel plugin to point to the right file based on --optimize flag.

The configuration syntax can be lib | [alias, lib] | [alias, lib, lib.prod] for simplicity and backward compatibility.

[FredKSchott]

The per-env aliasing is an interesting idea, especially since ESM doesn't really have the ability to conditionally serve different package code based on NODE_ENV the same way that CJS does. It may be the responsibility of the package installer.

Lets tackle separately from this PR. @ChristopherBiscardi would still love to get this merged if you're available to get it over the line!

[ChristopherBiscardi]

I put this on my schedule to finish up tomorrow

[FredKSchott]

resolved via #249