don't autoresolve imports if they are absolute paths/urls (#1330)

snowpack/src/build/import-resolver.ts

@@ -2,12 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import url from 'url';
 import {ImportMap, SnowpackConfig} from '../types/snowpack';
-import {
-  findMatchingAliasEntry,
-  getExt,
-  relativeURL,
-  replaceExt,
-} from '../util';
+import {findMatchingAliasEntry, getExt, relativeURL, replaceExt} from '../util';
 import {defaultFileExtensionMapping} from './file-urls';
 
 const cwd = process.cwd();
@@ -31,17 +26,21 @@ export function getImportStats(dirLoc: string, spec: string): fs.Stats | false {
 
 /** Resolve an import based on the state of the file/folder found on disk. */
 function resolveSourceSpecifier(spec: string, stats: fs.Stats | false, config: SnowpackConfig) {
+  // Handle directory imports (ex: "./components" -> "./components/index.js")
   if (stats && stats.isDirectory()) {
     const trailingSlash = spec.endsWith('/') ? '' : '/';
     spec = spec + trailingSlash + 'index.js';
-  } else if (!stats && !spec.endsWith('.js') && !spec.endsWith('.css')) {
-    spec = spec + '.js';
   }
+  // Transform the file extension (from input to output)
   const {baseExt} = getExt(spec);
   const extToReplace = config._extensionMap[baseExt] || defaultFileExtensionMapping[baseExt];
   if (extToReplace) {
     spec = replaceExt(spec, baseExt, extToReplace);
   }
+  // Lazy check to handle imports that are missing file extensions
+  if (!stats && !spec.endsWith('.js') && !spec.endsWith('.css')) {
+    spec = spec + '.js';
+  }
   return spec;
 }
 
@@ -66,10 +65,13 @@ export function createImportResolver({
       return spec;
     }
 
-    if (spec.startsWith('/') || spec.startsWith('./') || spec.startsWith('../')) {
+    if (spec.startsWith('/')) {
+      const importStats = getImportStats(cwd, spec.substr(1));
+      return resolveSourceSpecifier(spec, importStats, config);
+    }
+    if (spec.startsWith('./') || spec.startsWith('../')) {
       const importStats = getImportStats(path.dirname(fileLoc), spec);
-      spec = resolveSourceSpecifier(spec, importStats, config);
-      return spec;
+      return resolveSourceSpecifier(spec, importStats, config);
     }
     const aliasEntry = findMatchingAliasEntry(config, spec);
     if (aliasEntry && aliasEntry.type === 'path') {

test/build/resolve-imports/__snapshots__

@@ -63,9 +63,16 @@ exports[`snowpack build resolve-imports: build/_dist_/index.html 1`] = `
       console.log(flatten, aliasedDep);
       // Importing a file
       import sort from './sort.js'; // relative import
-      import sort_ from './sort.js'; // bare import using alias
-      import sort__ from './sort.js'; // bare import using alias + extension
-      console.log(sort, sort_, sort__);
+      import sort_ from './sort.js'; // absolute import
+      import sort__ from './sort.js'; // bare import using alias
+      import sort___ from './sort.js'; // bare import using alias + extension
+      console.log(sort, sort_, sort__, sort___);
+      // Note: file does not need to exist for these checks:
+      import svelteFile from './foo.js'; // plugin-provided file extension
+      import svelteFile_ from './foo.js'; // plugin-provided, missing file extension
+      import svelteFile__ from '../foo.js'; // absolute URL, plugin-provided file extension
+      import svelteFile___ from '../foo.js'; // absolute URL, missing file extension
+      console.log(svelteFile, svelteFile_, svelteFile__, svelteFile___);
       // Importing a directory index.js file
       import components from './components/index.js'; // relative import
       import components_ from './components/index.js'; // relative import with index appended
@@ -104,10 +111,17 @@ import * as aliasedDep from '../TEST_WMU/array-flatten.js';
 console.log(flatten, aliasedDep);
 // Importing a file
 import sort from './sort.js'; // relative import
-import sort_ from './sort.js'; // bare import using alias
-import sort__ from './sort.js'; // bare import using alias + extension
-import sort___ from './sort.js'; // bare import using alias with trailing slash
-console.log(sort, sort_, sort__, sort___);
+import sort_ from './sort.js'; // absolute import
+import sort__ from './sort.js'; // bare import using alias
+import sort___ from './sort.js'; // bare import using alias + extension
+import sort____ from './sort.js'; // bare import using alias with trailing slash
+console.log(sort, sort_, sort__, sort___, sort___, sort____);
+// Note: file does not need to exist for these checks:
+import svelteFile from './foo.js'; // plugin-provided file extension
+import svelteFile_ from './foo.js'; // plugin-provided, missing file extension
+import svelteFile__ from '../foo.js'; // absolute URL, plugin-provided file extension
+import svelteFile___ from '../foo.js'; // absolute URL, missing file extension
+console.log(svelteFile, svelteFile_, svelteFile__, svelteFile___);
 // Importing a directory index.js file
 import components from './components/index.js'; // relative import
 import components______ from './components/index.js'; // relative import with trailing slash

test/build/resolve-imports/package.json

@@ -6,25 +6,6 @@
     "start": "snowpack dev",
     "testbuild": "snowpack build"
   },
-  "snowpack": {
-    "alias": {
-      "aliased-dep": "array-flatten",
-      "@app": "./src",
-      "@/": "./src/",
-      "%": "."
-    },
-    "mount": {
-      "./src": "/_dist_"
-    },
-    "devOptions": {
-      "fallback": "_dist_/index.html"
-    },
-    "buildOptions": {
-      "baseUrl": "https://example.com/foo",
-      "webModulesUrl": "/TEST_WMU/",
-      "minify": false
-    }
-  },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.14.0",
     "array-flatten": "^3.0.0",

test/build/resolve-imports/simple-file-extension-change-plugin.js

@@ -0,0 +1,14 @@
+const {load} = require('signal-exit');
+
+module.exports = function () {
+  return {
+    resolve: {
+      input: ['.svelte'],
+      output: ['.js', '.css'],
+    },
+    load() {
+      // Not tested in this test.
+      return null;
+    },
+  };
+};

test/build/resolve-imports/snowpack.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  alias: {
+    'aliased-dep': 'array-flatten',
+    '@app': './src',
+    '@/': './src/',
+    '%': '.',
+  },
+  mount: {
+    './src': '/_dist_',
+  },
+  devOptions: {
+    fallback: '_dist_/index.html',
+  },
+  buildOptions: {
+    baseUrl: 'https://example.com/foo',
+    webModulesUrl: '/TEST_WMU/',
+    minify: false,
+  },
+  plugins: ['./simple-file-extension-change-plugin.js']
+};

test/build/resolve-imports/src/index.html

@@ -16,9 +16,17 @@
 
       // Importing a file
       import sort from './sort'; // relative import
-      import sort_ from '@app/sort'; // bare import using alias
-      import sort__ from '@app/sort.js'; // bare import using alias + extension
-      console.log(sort, sort_, sort__);
+      import sort_ from '/_dist_/sort.js'; // absolute import
+      import sort__ from '@app/sort'; // bare import using alias
+      import sort___ from '@app/sort.js'; // bare import using alias + extension
+      console.log(sort, sort_, sort__, sort___);
+
+      // Note: file does not need to exist for these checks:
+      import svelteFile from './foo.svelte'; // plugin-provided file extension
+      import svelteFile_ from './foo'; // plugin-provided, missing file extension
+      import svelteFile__ from '/foo.svelte'; // absolute URL, plugin-provided file extension
+      import svelteFile___ from '/foo'; // absolute URL, missing file extension
+      console.log(svelteFile, svelteFile_, svelteFile__, svelteFile___);
 
       // Importing a directory index.js file
       import components from './components'; // relative import

test/build/resolve-imports/src/index.js

@@ -5,10 +5,18 @@ console.log(flatten, aliasedDep);
 
 // Importing a file
 import sort from './sort'; // relative import
-import sort_ from '@app/sort'; // bare import using alias
-import sort__ from '@app/sort.js'; // bare import using alias + extension
-import sort___ from '@/sort'; // bare import using alias with trailing slash
-console.log(sort, sort_, sort__, sort___);
+import sort_ from '/_dist_/sort.js'; // absolute import
+import sort__ from '@app/sort'; // bare import using alias
+import sort___ from '@app/sort.js'; // bare import using alias + extension
+import sort____ from '@/sort'; // bare import using alias with trailing slash
+console.log(sort, sort_, sort__, sort___, sort___, sort____);
+
+// Note: file does not need to exist for these checks:
+import svelteFile from './foo.svelte'; // plugin-provided file extension
+import svelteFile_ from './foo'; // plugin-provided, missing file extension
+import svelteFile__ from '/foo.svelte'; // absolute URL, plugin-provided file extension
+import svelteFile___ from '/foo'; // absolute URL, missing file extension
+console.log(svelteFile, svelteFile_, svelteFile__, svelteFile___);
 
 // Importing a directory index.js file
 import components from './components'; // relative import