RFC 7 - Expanded Client Side Asset Build Mapping

[digitalsadhu]

Expanded Client Side Asset Build Mapping

This PR proposes that we look into the possibility of doing mapping outside of import statements. The use case for this is primarily for link tags in custom elements. For example:

// Lit Element definition
render() {
  return html`
    <link
          rel="stylesheet"
          href="https://assets.finn.no/pkg/@fabric-ds/css/v1/fabric.min.css"
          type="text/css"
      />
  `
}

Currently, using the Eik plugins in build tooling such as Rollup and Esbuild only maps bare import identifiers in import statements.

Being able to map anywhere in a source file would give us the ability to write this:

// Lit Element definition
render() {
  return html`
    <link
          rel="stylesheet"
          href="@fabric-ds/css"
          type="text/css"
      />
  `
}

And have it mapped to this:

// Lit Element definition
render() {
  return html`
    <link
          rel="stylesheet"
          href="https://assets.finn.no/pkg/@fabric-ds/css/v1/fabric.min.css"
          type="text/css"
      />
  `
}

during build.

Thoughts @trygve-lie ?

[trygve-lie]

I actually do not think this belong in the process of applying import maps.

We should keep in mind that we at one point will hopefully be using import maps directly in the browser and not ahead of time in a build process. If we do, the spec do highlight that applying import maps will not be applied to stuff like source references (as you describe above): https://github.com/WICG/import-maps#remapping-doesnt-work-for-script

Beside that I do think that providing a URL to a source is more the responsibility of configuration than a transpiler. It is kinda down the same route as one provide different URLs with properties to stuff based on what environment a server is running in.

In other words; I would rather that this is kinda coded into the components in a way.

// Lit Element definition
render() {
  let src;
  if (process.env.NODE_ENV === 'development') {
    src = 'http://localhost:8080/static/fabric.min.css';
  }
  if (process.env.NODE_ENV === 'production') {
    src = 'https://assets.finn.no/pkg/@fabric-ds/css/v1/fabric.min.css';
  }
  return html`
    <link
          rel="stylesheet"
          href="${src}"
          type="text/css"
      />
  `
}

The above is a kinda common pattern (not saying its the best) but build tools have features to exclude code for environments one is not building for and keeping the code for the environment one is building for.

The build script, or some other setup, could then get the correct URLs by the Node Client (maybe with the new method I describe in https://github.com/eik-lib/issues/issues/15) and provide it as a value when building.

[digitalsadhu]

Agree https://github.com/eik-lib/issues/issues/15 solves my use case but threw this one against the wall to see if it would stick. I’ll close this to focus on https://github.com/eik-lib/issues/issues/15