Build ES modules for public CDN

[patrickarlt]

I would love to be able to write examples in pure ES modules without a compiler and publish them on the CDN.

<script type="module">
import { request } from "https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/esm/request.es.min.js"

request({
  // ...
});
</script>

Or via import maps https://github.com/WICG/import-maps

<script type="importmap">
{
  "imports": {
    "@esri/arcgis-rest-request": "https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/esm/request.es.min.js",
  }
}
</script>

<script type="module">
import { request } from "@esri/arcgis-rest-request"

request({
  // ...
});
</script>

It would probally take a bit of R & D to figure out how to make Typescript do this.

[jgravois]

greetings friends! 👋

i don't know what kind of 🤸 it would take to get the TypeScript compiler to generate flat ES Module output, but it doesn't take much to convince rollup to do it.

jgravois@3f51b77

prior art: https://github.com/terraformer-js/terraformer/tree/master/packages/arcgis#es-module-in-the-browser

[patrickarlt]

@jgravois Thanks for the tip. I was going down this path but I hate that we end up with duplicating arcgis-rest-request in every package. Similarly it doesn't look like import maps are ready for prime time yet https://caniuse.com/?search=importmap so we cant solve this without a size and performance caveat like the JS API.

However I did find https://www.skypack.dev/ which basically looks like Unpkg for ES Modules. The best part it that it already works with our existing release AND doesn't seem to duplicate arcgis-rest-request https://codepen.io/patrickarlt/pen/QWgdwWM

<script type="module">
import {request} from "  https://cdn.skypack.dev/@esri/arcgis-rest-request@3.3.0?min"
import {createGroup} from "  https://cdn.skypack.dev/@esri/arcgis-rest-portal@3.3.0?min"

console.log({request, createGroup});
</script>

I think going forward we can just continue as we are with my 4.0 build refactor and point people to Skypack for ES modules and Unpkg for everything else without any extra builds or configuration.

[patrickarlt]

Looks like Skypack will also "pin" production ready URLs for us when we do a lookup https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized so we can/should call Skypack when we do a ready and we can generate the pinned URLS and include them in the doc.