seia-soto / snowpack-plugin-import-map

A snowpack plugin that maps your imports to Skypack or other sources.
https://zhoukekestar.github.io/notes/2020/06/08/micro-frontends.html
MIT License
39 stars 3 forks source link

Plugin misses some bare imports #8

Closed ca-d closed 3 years ago

ca-d commented 3 years ago

Some packages are missed by the plugin when building, compiling them into the web_packages directory instead of replacing bare improt specifiers by the corresponding skypack cdn link.

Specifically, even though almost all @material/mwc-* WebComponents we use get translated to skypack links, this is not the case for @material/mwc-button and @material/mwc-list/mwc-list-item . We can get @material/mwc-button to be translated correctly by including it explicitly in our "imports" config in addition to "*": true, but there is no way for us to get mwc-list-item to work, with or without the .js extension on the bare import specifier, even though the deep import is available from skypack, and the same is true for the lit-html directives.

What we do

We use this snowpack configuration section in our package.json file:

{
  "snowpack": {
    "plugins": [
      [
        "snowpack-plugin-import-map",
        {
          "imports": {
            "*": true
          },
          "dev": true,
          "extensions": [
            ".js",
            ".ts"
          ]
        }
      ]
    ]
  }
}

npx snowpack build

What we expect

[snowpack] ! building source…
[snowpack] ✔ build complete [6.19s]
[snowpack] installing dependencies...
[snowpack] ✔ install complete! [0.97s]
[snowpack] ! verifying build...
[snowpack] ✔ verification complete
[snowpack] ! writing build to disk...
[snowpack] ✔ build complete [6.19s]
[snowpack] ▶ Build Complete!

What we get

[snowpack] ! building source…
[snowpack] ✔ build complete [6.19s]
[snowpack] installing dependencies...
[snowpack] ✔ install complete! [0.97s]
[snowpack]
  ⦿ web_modules/                            size       gzip       brotli
    ├─ @material/mwc-button.js              19.82 KB   4.37 KB    3.62 KB
    ├─ @material/mwc-list/mwc-list-item.js  21.99 KB   4.9 KB     4.06 KB
    ├─ lit-html/directives/if-defined.js    1.47 KB    0.66 KB    0.54 KB
    └─ lit-html/directives/until.js         3.5 KB     1.41 KB    1.13 KB
  ⦿ web_modules/common/ (Shared)
    ├─ lit-html-32e4db3b.js                 45.37 KB   11.25 KB   9.52 KB
    └─ ripple-handlers-15edf866.js          128.96 KB  30.44 KB   25.32 KB

[snowpack] ! verifying build...
[snowpack] ✔ verification complete
[snowpack] ! writing build to disk...
[snowpack] ✔ build complete [6.19s]
[snowpack] ▶ Build Complete!

grep web_modules build/src/**/*.js

What we expect

no output

What we get

build/src/editors/SubstationEditor.js:import "../../web_modules/@material/mwc-button.js";
build/src/editors/SubstationEditor.js:import "../../web_modules/@material/mwc-list/mwc-list-item.js";
build/src/Logging.js:import {ifDefined} from "../web_modules/lit-html/directives/if-defined.js";
build/src/Logging.js:import "../web_modules/@material/mwc-button.js";
build/src/Logging.js:import "../web_modules/@material/mwc-list/mwc-list-item.js";
build/src/open-scd.js:import {until as until2} from "../web_modules/lit-html/directives/until.js";
build/src/open-scd.js:import "../web_modules/@material/mwc-button.js";
build/src/open-scd.js:import "../web_modules/@material/mwc-list/mwc-list-item.js";
build/src/Setting.js:import "../web_modules/@material/mwc-list/mwc-list-item.js";
build/src/wizard-dialog.js:import "../web_modules/@material/mwc-button.js";
build/src/wizard-textfield.js:import "../web_modules/@material/mwc-list/mwc-list-item.js";
seia-soto commented 3 years ago

It's seems like too late to check this issue, but I think I just found what's problem.

@zhoukekestar , the regular expression in esmImportRegex.js isn't working properly if there is more than 1 slash.

Also checked that:

image

seia-soto commented 3 years ago

Update: I think it is safe to fix that regex if the CDN provider is Skypack.

Both are working URL(s):

However, in regex, I think providing the information of sub-file of the package to getCdnUrl function would be nice.

seia-soto commented 3 years ago

In, the latest version, 1.1.3, as the regular expression finally updated to accept those cases. I am going to close the issue as regex problem resolved.