Add HMR support for linked & local npm packages (#470)

.gitignore

@@ -3,6 +3,7 @@ www/index.md
 www/dist
 /node_modules
 /web_modules
+test/build/*/build
 test/integration/*/web_modules
 test/integration/*/node_modules/.cache
 .DS_Store

src/commands/dev.ts

@@ -97,6 +97,15 @@ function getEncodingType(ext: string): 'utf-8' | 'binary' {
   }
 }
 
+/** Find disk location from specifier string */
+function getPackageNameFromSpecifier(specifier: string): string {
+  let [packageName, ...deepPackagePathParts] = specifier.split('/');
+  if (packageName.startsWith('@')) {
+    packageName += '/' + deepPackagePathParts.shift();
+  }
+  return packageName;
+}
+
 const sendFile = (
   req: http.IncomingMessage,
   res: http.ServerResponse,
@@ -214,6 +223,28 @@ export async function command(commandOptions: CommandOptions) {
     // no import-map found, safe to ignore
   }
 
+  /** Rerun `snowpack install` while dev server is running */
+  async function reinstallDependencies() {
+    if (!currentlyRunningCommand) {
+      isLiveReloadPaused = true;
+      messageBus.emit('INSTALLING');
+      currentlyRunningCommand = installCommand(commandOptions);
+      await currentlyRunningCommand.then(async () => {
+        dependencyImportMap = JSON.parse(
+          await fs
+            .readFile(dependencyImportMapLoc, {encoding: 'utf-8'})
+            .catch(() => `{"imports": {}}`),
+        );
+        await updateLockfileHash(DEV_DEPENDENCIES_DIR);
+        await cacache.rm.all(BUILD_CACHE);
+        inMemoryBuildCache.clear();
+        messageBus.emit('INSTALL_COMPLETE');
+        isLiveReloadPaused = false;
+        currentlyRunningCommand = null;
+      });
+    }
+  }
+
   async function buildFile(
     fileContents: string,
     fileLoc: string,
@@ -297,33 +328,15 @@ export async function command(commandOptions: CommandOptions) {
           }
           return resolvedImport;
         }
-        let [missingPackageName, ...deepPackagePathParts] = spec.split('/');
-        if (missingPackageName.startsWith('@')) {
-          missingPackageName += '/' + deepPackagePathParts.shift();
-        }
-        const [depManifestLoc] = resolveDependencyManifest(missingPackageName, cwd);
+        const packageName = getPackageNameFromSpecifier(spec);
+        const [depManifestLoc] = resolveDependencyManifest(packageName, cwd);
         const doesPackageExist = !!depManifestLoc;
-        if (doesPackageExist && !currentlyRunningCommand) {
-          isLiveReloadPaused = true;
-          messageBus.emit('INSTALLING');
-          currentlyRunningCommand = installCommand(commandOptions);
-          currentlyRunningCommand.then(async () => {
-            dependencyImportMap = JSON.parse(
-              await fs
-                .readFile(dependencyImportMapLoc, {encoding: 'utf-8'})
-                .catch(() => `{"imports": {}}`),
-            );
-            await updateLockfileHash(DEV_DEPENDENCIES_DIR);
-            await cacache.rm.all(BUILD_CACHE);
-            inMemoryBuildCache.clear();
-            messageBus.emit('INSTALL_COMPLETE');
-            isLiveReloadPaused = false;
-            currentlyRunningCommand = null;
-          });
-        } else if (!doesPackageExist) {
+        if (doesPackageExist) {
+          reinstallDependencies();
+        } else {
           missingWebModule = {
             spec: spec,
-            pkgName: missingPackageName,
+            pkgName: packageName,
           };
         }
         const extName = path.extname(spec);
@@ -860,6 +873,8 @@ export async function command(commandOptions: CommandOptions) {
       updateOrBubble(updateUrl, new Set());
     }
   }
+
+  // Watch src files
   async function onWatchEvent(fileLoc) {
     handleHmrUpdate(fileLoc);
     inMemoryBuildCache.delete(fileLoc);
@@ -880,6 +895,29 @@ export async function command(commandOptions: CommandOptions) {
   watcher.on('change', (fileLoc) => onWatchEvent(fileLoc));
   watcher.on('unlink', (fileLoc) => onWatchEvent(fileLoc));
 
+  // Watch node_modules & rerun snowpack install if symlinked dep updates
+  const symlinkedFileLocs = new Set(
+    Object.keys(dependencyImportMap.imports)
+      .map((specifier) => {
+        const packageName = getPackageNameFromSpecifier(specifier);
+        return resolveDependencyManifest(packageName, cwd);
+      }) // resolve symlink src location
+      .filter(([_, packageManifest]) => packageManifest && !packageManifest['_id']) // only watch symlinked deps for now
+      .map(([fileLoc]) => `${path.dirname(fileLoc!)}/**`),
+  );
+  function onDepWatchEvent() {
+    reinstallDependencies().then(() => hmrEngine.broadcastMessage({type: 'reload'}));
+  }
+  const depWatcher = chokidar.watch([...symlinkedFileLocs], {
+    cwd: '/', // we’re using absolute paths, so watch from root
+    persistent: true,
+    ignoreInitial: true,
+    disableGlobbing: false,
+  });
+  depWatcher.on('add', onDepWatchEvent);
+  depWatcher.on('change', onDepWatchEvent);
+  depWatcher.on('unlink', onDepWatchEvent);
+
   onProcessExit(() => {
     hmrEngine.disconnectAllClients();
   });

src/commands/install.ts

@@ -162,7 +162,7 @@ function resolveWebDependency(dep: string, isExplicit: boolean): DependencyLoc {
   if (!depManifest) {
     throw new ErrorWithHint(
       `Package "${dep}" not found. Have you installed it?`,
-      depManifestLoc && chalk.italic(depManifestLoc),
+      depManifestLoc ? chalk.italic(depManifestLoc) : '',
     );
   }
   if (
@@ -198,7 +198,7 @@ function resolveWebDependency(dep: string, isExplicit: boolean): DependencyLoc {
   }
   return {
     type: 'JS',
-    loc: path.join(depManifestLoc, '..', foundEntrypoint),
+    loc: path.join(depManifestLoc || '', '..', foundEntrypoint),
   };
 }
 

src/util.ts

@@ -86,7 +86,7 @@ export function isTruthy<T>(item: T | false | null | undefined): item is T {
  * NOTE: You used to be able to require() a package.json file directly,
  * but now with export map support in Node v13 that's no longer possible.
  */
-export function resolveDependencyManifest(dep: string, cwd: string) {
+export function resolveDependencyManifest(dep: string, cwd: string): [string | null, any | null] {
   // Attempt #1: Resolve the dependency manifest normally. This works for most
   // packages, but fails when the package defines an export map that doesn't
   // include a package.json. If we detect that to be the reason for failure,

test/build/linked-pkg/.gitignore

@@ -0,0 +1 @@
+node_modules

test/build/linked-pkg/index.test.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+const execa = require('execa');
+
+it('linked package install', () => {
+  // setup
+  const cwd = __dirname;
+  execa.sync('npm', ['link'], {cwd: path.resolve(__dirname, 'packages', 'test-link')});
+  execa.sync('npm', ['link', '@snowpack/test-link'], {cwd});
+  execa.sync('npm', ['install'], {cwd});
+
+  // test output (the assumption is if anything went wrong, these files wouldn’t be built)
+  execa.sync('npm', ['run', 'TEST'], {cwd});
+  expect(fs.existsSync(path.resolve(__dirname, 'build', '_dist_', 'index.js'))).toBe(true);
+});

test/build/linked-pkg/package.json

@@ -0,0 +1,16 @@
+{
+  "scripts": {
+    "start": "node ../../../pkg/dist-node/index.bin.js dev",
+    "TEST": "node ../../../pkg/dist-node/index.bin.js build"
+  },
+  "snowpack": {
+    "scripts": {
+      "mount:public": "mount public --to /",
+      "mount:src": "mount src --to /_dist_"
+    }
+  },
+  "dependencies": {
+    "@snowpack/test-link": "*",
+    "@snowpack/test-local": "file:./packages/test-local"
+  }
+}

test/build/linked-pkg/packages/test-link/deep/index.js

@@ -0,0 +1,3 @@
+export default function test() {
+  console.log('deeplink-change');
+}

test/build/linked-pkg/packages/test-link/index.js

@@ -0,0 +1,3 @@
+export default function test() {
+  console.log('link');
+}

test/build/linked-pkg/packages/test-link/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@snowpack/test-link",
+  "main": "index.js",
+  "module": "index.js",
+  "version": "0.0.1-alpha.0"
+}

test/build/linked-pkg/packages/test-local/index.js

@@ -0,0 +1,3 @@
+export default function test() {
+  console.log('local');
+}

test/build/linked-pkg/packages/test-local/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@snowpack/test-local",
+  "main": "index.js",
+  "module": "index.js",
+  "version": "0.0.1-alpha.0"
+}

test/build/linked-pkg/public/index.html

@@ -0,0 +1,23 @@
+<!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>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <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/linked-pkg/src/index.js

@@ -0,0 +1,7 @@
+import link from '@snowpack/test-link';
+import deeplink from '@snowpack/test-link/deep';
+import local from '@snowpack/test-local';
+
+link();
+deeplink();
+local();

test/build/metadata-dir/index.test.js → test/build/meta-dir/index.test.js

@@ -3,7 +3,7 @@ const path = require('path');
 const execa = require('execa');
 
 it('buildOptions.metaDir', () => {
-  execa('node', ['npm', 'run', 'TEST']);
+  execa.commandSync('npm run TEST', {cwd: __dirname});
   // expect dir in package.json to exist
   expect(fs.existsSync(path.resolve(__dirname, 'build', 'static', 'snowpack')));
 });

test/build/metadata-dir/package.json → test/build/meta-dir/package.json

@@ -1,12 +1,12 @@
 {
+  "scripts": {
+    "TEST": "node ../../../pkg/dist-node/index.bin.js build"
+  },
   "snowpack": {
     "buildOptions": {
       "metaDir": "/static/snowpack"
     }
   },
-  "scripts": {
-    "TEST": "../../../pkg/dist-node/index.bin.js build"
-  },
   "dependencies": {
     "shallow-equal": "^1.2.1"
   }