Files
open-wc/packages/import-maps-resolve
CircleCI 326ca1b909 chore: release new versions
- @open-wc/building-rollup@1.0.0
 - @open-wc/building-utils@2.16.3
 - @open-wc/building-webpack@2.13.12
 - @open-wc/create@0.28.3
 - @open-wc/dedupe-mixin@1.2.16
 - @open-wc/demoing-storybook@2.0.0
 - es-dev-server@1.46.2
 - @import-maps/generate@0.2.6
 - @import-maps/resolve@0.2.6
 - @open-wc/karma-esm@2.13.23
 - @open-wc/lit-helpers@0.3.8
 - @mdjs/core@0.1.9
 - polyfills-loader@1.5.4
 - @open-wc/rollup-plugin-html@1.0.0
 - rollup-plugin-index-html@1.10.6
 - @open-wc/rollup-plugin-polyfills-loader@1.0.0
 - @open-wc/scoped-elements@1.0.8
 - @open-wc/semantic-dom-diff@0.17.7
 - storybook-addon-markdown-docs@0.2.4
 - storybook-addon-web-components-knobs@0.3.6
 - @open-wc/testing-helpers@1.7.1
 - @open-wc/testing-karma-bs@1.3.56
 - @open-wc/testing-karma@3.3.12
 - @open-wc/testing@2.5.11
 - @open-wc/webpack-import-meta-loader@0.4.5
 - @open-wc/webpack-index-html-plugin@1.7.6
2020-04-12 21:17:07 +00:00
..
2020-04-12 21:17:07 +00:00
2020-04-12 21:17:07 +00:00

Resolve import-maps

This will allow you to parse and resolve urls by a given import-map.

Usage

yarn add @import-maps/resolve

You may then override a resolve method in your build process.

import { parseFromString, resolve } from '@import-maps/resolve';

// you probably want to cache the map processing and not redo it for every resolve
// a simple example
const importMapCache = null;

function myResolve(specifier) {
  const rootDir = process.cwd();
  const basePath = importer ? importer.replace(rootDir, `${rootDir}::`) : `${rootDir}::`;
  if (!importMapCache) {
    const mapString = fs.readFileSync(path.join(rootDir, 'import-map.json'), 'utf-8');
    mapCache = parseFromString(mapString, basePath);
  }

  const relativeSource = source.replace(rootDir, '');
  const resolvedPath = resolve(relativeSource, importMapCache, basePath);

  if (resolvedPath) {
    return resolvedPath;
  }
}

Additional info

The 3rd parameter of resolve is the "baseUrl/basePath" and it's format is /path/to/root::/subdir/foo. You can compare it with an url http://example.com/subdir/foo.

  • Everything before the :: is sort of the domain e.g. http://example.com/
  • Everything after is the path/directory to your appliaction

Such a path is needed as import maps support relative pathes as values.

Acknowledgments

This implementation is heavily based on the import-maps reference implementation. Thanks to @domenic and @guybedford for sharing that prototype.

Some adjustments have been made

  • Allow to process/resolve node pathes besides urls
  • Use mocha/chai for testing (already available in our setup)
<script> export default { mounted() { const editLink = document.querySelector('.edit-link a'); if (editLink) { const url = editLink.href; editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/import-maps-process/README.md'; } } } </script>