Improve import resolution logic

src/commands/build-util.ts

@@ -1,9 +1,7 @@
 import type CSSModuleLoader from 'css-modules-loader-core';
 import type {EventEmitter} from 'events';
 import execa from 'execa';
-import {statSync} from 'fs';
 import npmRunPath from 'npm-run-path';
-import path from 'path';
 import {
   BuildScript,
   SnowpackConfig,
@@ -16,17 +14,6 @@ export function checkIsPreact(filePath: string, contents: string) {
   return filePath.endsWith('.jsx') && IS_PREACT.test(contents);
 }
 
-export function isDirectoryImport(fileLoc: string, spec: string): boolean {
-  const importedFileOnDisk = path.resolve(path.dirname(fileLoc), spec);
-  try {
-    const stat = statSync(importedFileOnDisk);
-    return stat.isDirectory();
-  } catch (err) {
-    // file doesn't exist, that's fine
-  }
-  return false;
-}
-
 export function wrapImportMeta({
   code,
   hmr,

src/commands/build.ts

@@ -291,8 +291,11 @@ export async function command(commandOptions: CommandOptions) {
               // We treat ".proxy.js" files special: we need to make sure that they exist on disk
               // in the final build, so we mark them to be written to disk at the next step.
               if (resolvedImportUrl.endsWith('.proxy.js')) {
-                const resolvedUrl = path.resolve(path.dirname(outPath), spec);
-                allProxiedFiles.add(resolvedUrl);
+                allProxiedFiles.add(
+                  resolvedImportUrl.startsWith('/')
+                    ? path.resolve(cwd, spec)
+                    : path.resolve(path.dirname(outPath), spec),
+                );
               }
               return resolvedImportUrl;
             }

src/commands/import-resolver.ts

@@ -1,9 +1,9 @@
+import {Stats, statSync} from 'fs';
 import path from 'path';
 import {SnowpackConfig} from '../config';
 import {findMatchingMountScript} from '../util';
-import {isDirectoryImport} from './build-util';
 import srcFileExtensionMapping from './src-file-extension-mapping';
-
+const cwd = process.cwd();
 const URL_HAS_PROTOCOL_REGEX = /^\w:\/\./;
 
 interface ImportResolverOptions {
@@ -14,6 +14,36 @@ interface ImportResolverOptions {
   config: SnowpackConfig;
 }
 
+/** Perform a file disk lookup for the requested import specifier. */
+export function getImportStats(dirLoc: string, spec: string): Stats | false {
+  const importedFileOnDisk = path.resolve(dirLoc, spec);
+  try {
+    return statSync(importedFileOnDisk);
+  } catch (err) {
+    // file doesn't exist, that's fine
+  }
+  return false;
+}
+
+/** Resolve an import based on the state of the file/folder found on disk. */
+function resolveSourceSpecifier(spec: string, stats: Stats | false, isBundled: boolean) {
+  if (stats && stats.isDirectory()) {
+    spec = spec + '/index.js';
+  } else if (!stats && !spec.endsWith('.js')) {
+    spec = spec + '.js';
+  }
+  const ext = path.extname(spec).substr(1);
+  const extToReplace = srcFileExtensionMapping[ext];
+  if (extToReplace) {
+    spec = spec.replace(new RegExp(`${ext}$`), extToReplace);
+  }
+  if (!isBundled && (extToReplace || ext) !== 'js') {
+    spec = spec + '.proxy.js';
+  }
+
+  return spec;
+}
+
 /**
  * Create a import resolver function, which converts any import relative to the given file at "fileLoc"
  * to a proper URL. Returns false if no matching import was found, which usually indicates a package
@@ -36,24 +66,14 @@ export function createImportResolver({
     let mountScript = findMatchingMountScript(config.scripts, spec);
     if (mountScript) {
       let {fromDisk, toUrl} = mountScript.args;
+      const importStats = getImportStats(cwd, spec);
+      spec = resolveSourceSpecifier(spec, importStats, isBundled);
       spec = spec.replace(fromDisk, toUrl);
+      return spec;
     }
     if (spec.startsWith('/') || spec.startsWith('./') || spec.startsWith('../')) {
-      const ext = path.extname(spec).substr(1);
-      if (!ext) {
-        if (isDirectoryImport(fileLoc, spec)) {
-          return spec + '/index.js';
-        } else {
-          return spec + '.js';
-        }
-      }
-      const extToReplace = srcFileExtensionMapping[ext];
-      if (extToReplace) {
-        spec = spec.replace(new RegExp(`${ext}$`), extToReplace);
-      }
-      if (!isBundled && (extToReplace || ext) !== 'js') {
-        spec = spec + '.proxy.js';
-      }
+      const importStats = getImportStats(path.dirname(fileLoc), spec);
+      spec = resolveSourceSpecifier(spec, importStats, isBundled);
       return spec;
     }
     if (dependencyImportMap.imports[spec]) {

test/build/resolve-imports/expected-build/__snowpack__/env.js

@@ -0,0 +1 @@
+export default {"MODE":"production","NODE_ENV":"production"};

test/build/resolve-imports/expected-build/_dist_/components/index.js

@@ -0,0 +1 @@
+export default "Button";

test/build/resolve-imports/expected-build/_dist_/components/style.css

@@ -0,0 +1 @@
+body { color: red }

test/build/resolve-imports/expected-build/_dist_/components/style.css.proxy.js

@@ -0,0 +1,9 @@
+
+const code = "body { color: red }";
+
+const styleEl = document.createElement("style");
+const codeEl = document.createTextNode(code);
+styleEl.type = 'text/css';
+
+styleEl.appendChild(codeEl);
+document.head.appendChild(styleEl);

test/build/resolve-imports/expected-build/_dist_/index.js

@@ -0,0 +1,16 @@
+import {flatten} from "/web_modules/array-flatten.js";
+console.log(flatten);
+import sort2 from "./sort.js";
+import sort_ from "/_dist_/sort.js";
+import sort__ from "/_dist_/sort.js";
+console.log(sort2, sort_, sort__);
+import components2 from "./components/index.js";
+import components_ from "./components/index.js";
+import components__ from "./components/index.js";
+import components___ from "/_dist_/components/index.js";
+import components____ from "/_dist_/components/index.js";
+import components_____ from "/_dist_/components/index.js";
+console.log(components2, components_, components__, components___, components____, components_____);
+import styles from "./components/style.css.proxy.js";
+import styles_ from "/_dist_/components/style.css.proxy.js";
+console.log(styles, styles_);

test/build/resolve-imports/expected-build/_dist_/sort.js

@@ -0,0 +1 @@
+export default (arr) => arr.sort();

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

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Web site created using create-snowpack-app" />
+    <title>Snowpack App</title>
+  </head>
+  <body>
+    <script type="module" src="/_dist_/index.js"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

test/build/resolve-imports/expected-build/web_modules/array-flatten.js

@@ -0,0 +1,24 @@
+/**
+ * Flatten an array indefinitely.
+ */
+function flatten(array) {
+    var result = [];
+    $flatten(array, result);
+    return result;
+}
+/**
+ * Internal flatten function recursively passes `result`.
+ */
+function $flatten(array, result) {
+    for (var i = 0; i < array.length; i++) {
+        var value = array[i];
+        if (Array.isArray(value)) {
+            $flatten(value, result);
+        }
+        else {
+            result.push(value);
+        }
+    }
+}
+
+export { flatten };

test/build/resolve-imports/expected-build/web_modules/import-map.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "array-flatten": "./array-flatten.js"
+  }
+}