fix: tree shaking package when imports include file extensions (#972)

FredKSchott · Aug 31, 2020 · d484739 · d484739
1 parent 10060d9
commit d484739
Show file tree

Hide file tree

Showing 5 changed files with 1,858 additions and 1,555 deletions.
diff --git a/snowpack/src/commands/install.ts b/snowpack/src/commands/install.ts
@@ -41,6 +41,7 @@ import {
   writeLockfile,
   isPackageAliasEntry,
   findMatchingAliasEntry,
+  getWebDependencyName,
 } from '../util.js';
 
 type InstallResultCode = 'SUCCESS' | 'ASSET' | 'FAIL';
@@ -77,16 +78,6 @@ function isImportOfPackage(importUrl: string, packageName: string) {
   return packageName === importUrl || importUrl.startsWith(packageName + '/');
 }
 
-/**
- * Formats the snowpack dependency name from a "webDependencies" input value:
- * 2. Remove any ".js"/".mjs" extension (will be added automatically by Rollup)
- */
-function getWebDependencyName(dep: string): string {
-  return validatePackageName(dep).validForNewPackages
-    ? dep.replace(/\.js$/i, 'js') // if this is a top-level package ending in .js, replace with js (e.g. tippy.js -> tippyjs)
-    : dep.replace(/\.m?js$/i, ''); // otherwise simply strip the extension (Rollup will resolve it)
-}
-
 /**
  * Resolve a "webDependencies" input value to the correct absolute file location.
  * Supports both npm package names, and file paths relative to the node_modules directory.
@@ -392,6 +383,11 @@ ${colors.dim(
     format: 'esm',
     sourcemap: sourceMap,
     exports: 'named',
+    entryFileNames: (chunk) => {
+      const targetName = getWebDependencyName(chunk.name);
+      const proxiedName = sanitizePackageName(targetName);
+      return `${proxiedName}.js`;
+    },
     chunkFileNames: 'common/[name]-[hash].js',
   };
   if (Object.keys(installEntrypoints).length > 0) {

diff --git a/snowpack/src/rollup-plugins/rollup-plugin-wrap-install-targets.ts b/snowpack/src/rollup-plugins/rollup-plugin-wrap-install-targets.ts
@@ -3,6 +3,7 @@ import path from 'path';
 import {Plugin} from 'rollup';
 import {logger} from '../logger';
 import {InstallTarget} from '../types/snowpack';
+import {getWebDependencyName} from '../util.js';
 
 function autoDetectExports(fileLoc: string): string[] | undefined {
   try {
@@ -44,7 +45,7 @@ export function rollupPluginWrapInstallTargets(
       const input = inputOptions.input as {[entryAlias: string]: string};
       for (const [key, val] of Object.entries(input)) {
         const allInstallTargets = installTargets.filter(
-          (imp) => imp.specifier.replace(/\.js$/, 'js') === key,
+          (imp) => getWebDependencyName(imp.specifier) === key,
         );
         const installTargetSummary = allInstallTargets.reduce((summary, imp) => {
           summary.all = summary.all || imp.all;

diff --git a/snowpack/src/util.ts b/snowpack/src/util.ts
@@ -10,6 +10,7 @@ import mkdirp from 'mkdirp';
 import open from 'open';
 import path from 'path';
 import rimraf from 'rimraf';
+import validatePackageName from 'validate-npm-package-name';
 import {ImportMap, SnowpackConfig} from './types/snowpack';
 import {removeTrailingSlash, addTrailingSlash} from './config';
 
@@ -338,3 +339,13 @@ export function cssSourceMappingURL(code: string, sourceMappingURL: string) {
 export function jsSourceMappingURL(code: string, sourceMappingURL: string) {
   return code.replace(/\n*$/, '') + `\n//# sourceMappingURL=${sourceMappingURL}\n`; // strip ending lines & append source map (with linebreaks for safety)
 }
+
+/**
+ * Formats the snowpack dependency name from a "webDependencies" input value:
+ * 2. Remove any ".js"/".mjs" extension (will be added automatically by Rollup)
+ */
+export function getWebDependencyName(dep: string): string {
+  return validatePackageName(dep).validForNewPackages
+    ? dep.replace(/\.js$/i, 'js') // if this is a top-level package ending in .js, replace with js (e.g. tippy.js -> tippyjs)
+    : dep.replace(/\.m?js$/i, ''); // otherwise simply strip the extension (Rollup will resolve it)
+}