support custom web modules dir (#483)

* adds support for mount:web_modules script

* adds tests for custom web_modules mount scripts

* adds comment to explain mount:web_modules args

src/commands/build.ts

@@ -228,6 +228,10 @@ export async function command(commandOptions: CommandOptions) {
   }
 
   const allBuiltFromFiles = new Set<string>();
+
+  const webModulesScript = config.scripts.find(script => script.id === 'mount:web_modules');
+  const webModulesLoc = webModulesScript ? webModulesScript.args.toUrl as string : '/web_modules';
+
   for (const workerConfig of relevantWorkers) {
     const {id, match, type} = workerConfig;
     if (type !== 'build' || match.length === 0) {
@@ -317,7 +321,7 @@ export async function command(commandOptions: CommandOptions) {
             if (dependencyImportMap.imports[spec]) {
               let resolvedImport = path.posix.join(
                 config.buildOptions.baseUrl,
-                `/web_modules`,
+                webModulesLoc,
                 dependencyImportMap.imports[spec],
               );
               const extName = path.extname(resolvedImport);
@@ -337,7 +341,7 @@ export async function command(commandOptions: CommandOptions) {
                 pkgName: missingPackageName,
               },
             });
-            return path.posix.join(config.buildOptions.baseUrl, `/web_modules`, `${spec}.js`);
+            return path.posix.join(config.buildOptions.baseUrl, webModulesLoc, `${spec}.js`);
           });
           code = wrapImportMeta({code, env: true, hmr: false, config});
         }

src/commands/dev.ts

@@ -286,6 +286,9 @@ export async function command(commandOptions: CommandOptions) {
         filesBeingBuilt.delete(fileLoc);
       }
     }
+    const webModulesScript = config.scripts.find(script => script.id === 'mount:web_modules');
+    const webModulesLoc = webModulesScript ? webModulesScript.args.toUrl : '/web_modules';
+
     const ext = path.extname(fileLoc).substr(1);
     if (ext === 'js' || srcFileExtensionMapping[ext] === 'js') {
       let missingWebModule: {spec: string; pkgName: string} | null = null;
@@ -318,7 +321,7 @@ export async function command(commandOptions: CommandOptions) {
         }
         if (dependencyImportMap.imports[spec]) {
           let resolvedImport = path.posix.resolve(
-            `/web_modules`,
+            webModulesLoc,
             dependencyImportMap.imports[spec],
           );
           const extName = path.extname(resolvedImport);
@@ -342,7 +345,7 @@ export async function command(commandOptions: CommandOptions) {
         if (extName && extName !== '.js') {
           spec = spec + '.proxy';
         }
-        return `/web_modules/${spec}.js`;
+        return path.posix.join(webModulesLoc, `${spec}.js`);
       });
 
       messageBus.emit('MISSING_WEB_MODULE', {

src/config.ts

@@ -316,6 +316,7 @@ function handleLegacyProxyScripts(config: any) {
 
 type RawScripts = Record<string, string>;
 function normalizeScripts(cwd: string, scripts: RawScripts): BuildScript[] {
+  const dependenciesLoc = process.env.NODE_ENV === 'production' ? BUILD_DEPENDENCIES_DIR : DEV_DEPENDENCIES_DIR;
   const processedScripts: BuildScript[] = [];
   if (Object.keys(scripts).filter((k) => k.startsWith('bundle:')).length > 1) {
     handleConfigError(`scripts can only contain 1 script of type "bundle:".`);
@@ -354,8 +355,15 @@ function normalizeScripts(cwd: string, scripts: RawScripts): BuildScript[] {
           `scripts[${scriptId}]: "--to ${to}" must be a URL path, and start with a "/"`,
         );
       }
-      const dirDisk = cmdArr[0];
+      let dirDisk = cmdArr[0];
       const dirUrl = to || `/${cmdArr[0]}`;
+
+      // mount:web_modules is a special case script where the fromDisk
+      // arg is harcoded to match the internal dependency dir
+      if (scriptId === 'mount:web_modules') {
+        dirDisk = dependenciesLoc;
+      }
+
       newScriptConfig.args = {
         fromDisk: path.posix.normalize(dirDisk + '/'),
         toUrl: path.posix.normalize(dirUrl + '/'),
@@ -379,15 +387,13 @@ function normalizeScripts(cwd: string, scripts: RawScripts): BuildScript[] {
   }
 
   if (!scripts['mount:web_modules']) {
-    const fromDisk =
-      process.env.NODE_ENV === 'production' ? BUILD_DEPENDENCIES_DIR : DEV_DEPENDENCIES_DIR;
     processedScripts.push({
       id: 'mount:web_modules',
       type: 'mount',
       match: ['web_modules'],
       cmd: `mount $WEB_MODULES --to /web_modules`,
       args: {
-        fromDisk,
+        fromDisk: dependenciesLoc,
         toUrl: '/web_modules',
       },
     });

test/build/custom-modules-dir/.gitignore

@@ -0,0 +1 @@
+build

test/build/custom-modules-dir/index.test.js

@@ -0,0 +1,19 @@
+const fs = require('fs');
+const path = require('path');
+const execa = require('execa');
+
+it('custom web_modules folder', () => {
+  execa.sync('npm', ['run', 'TEST'], {
+    cwd: __dirname,
+    // override NODE_ENV=test from jest, otherwise snowpack will assume
+    // development mode and try to copy from DEV_DEPENDENCIES_DIR
+    env: { NODE_ENV: 'production' }
+  });
+
+  // should write modules to the custom folder on disk
+  expect(fs.existsSync(path.join(__dirname, 'build', 'my_modules', 'array-flatten.js'))).toBe(true);
+
+  // should rewrite path for web_modules imports
+  const outputJS = fs.readFileSync(path.resolve(__dirname, 'build', '_dist_', 'index.js'), 'utf8');
+  expect(outputJS).toContain('/my_modules/array-flatten.js');
+});