handle node-fetch, whatwg-fetch Node polyfills

src/commands/install.ts

@@ -15,12 +15,13 @@ import {InputOptions, OutputOptions, rollup, RollupError} from 'rollup';
 import validatePackageName from 'validate-npm-package-name';
 import {EnvVarReplacements, SnowpackConfig, SnowpackSourceFile} from '../config.js';
 import {resolveTargetsFromRemoteCDN} from '../resolve-remote.js';
-import {rollupPluginCatchUnresolved} from '../rollup-plugin-catch-unresolved.js';
-import {rollupPluginCss} from '../rollup-plugin-css';
-import {rollupPluginEntrypointAlias} from '../rollup-plugin-entrypoint-alias.js';
-import {rollupPluginDependencyCache} from '../rollup-plugin-remote-cdn.js';
-import {DependencyStatsOutput, rollupPluginDependencyStats} from '../rollup-plugin-stats.js';
-import {rollupPluginWrapInstallTargets} from '../rollup-plugin-wrap-install-targets';
+import {rollupPluginCatchUnresolved} from '../rollup-plugins/rollup-plugin-catch-unresolved.js';
+import {rollupPluginCatchFetch} from '../rollup-plugins/rollup-plugin-catch-fetch';
+import {rollupPluginCss} from '../rollup-plugins/rollup-plugin-css';
+import {rollupPluginEntrypointAlias} from '../rollup-plugins/rollup-plugin-entrypoint-alias.js';
+import {rollupPluginDependencyCache} from '../rollup-plugins/rollup-plugin-remote-cdn.js';
+import {DependencyStatsOutput, rollupPluginDependencyStats} from '../rollup-plugins/rollup-plugin-stats.js';
+import {rollupPluginWrapInstallTargets} from '../rollup-plugins/rollup-plugin-wrap-install-targets';
 import {InstallTarget, scanDepList, scanImports, scanImportsFromFiles} from '../scan-imports.js';
 import {printStats} from '../stats-formatter.js';
 import {
@@ -385,6 +386,7 @@ export async function install(
           replacement: mod,
         })),
       }),
+      rollupPluginCatchFetch(),
       rollupPluginNodeResolve({
         mainFields: ['browser:module', 'module', 'browser', 'main'].filter(isTruthy),
         extensions: ['.mjs', '.cjs', '.js', '.json'], // Default: [ '.mjs', '.js', '.json', '.node' ]

src/rollup-plugins/rollup-plugin-catch-fetch.ts

@@ -0,0 +1,45 @@
+import {Plugin} from 'rollup';
+
+const FETCH_POLYFILL = `
+// native patch for: node-fetch, whatwg-fetch
+// ref: https://github.com/tc39/proposal-global
+var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+}
+var global = getGlobal();
+export default global.fetch.bind(global);
+export const Headers = global.Headers;
+export const Request = global.Request;
+export const Response = global.Response;
+`;
+
+/**
+ * rollup-plugin-catch-fetch
+ *
+ * How it works: NPM packages will sometimes contain Node.js-specific polyfills
+ * for the native browser Fetch API. Since this makes no sense in an ESM web
+ * project, we can replace these expensive polyfills with native references to
+ * the fetch API.
+ *
+ * This still allows you to polyfill fetch in older browsers, if you desire.
+ */
+export function rollupPluginCatchFetch(): Plugin {
+  return {
+    name: 'snowpack:fetch-handler',
+    resolveId(id) {
+      if (id !== 'node-fetch' && id !== 'whatwg-fetch') {
+        return null;
+      }
+      return id;
+    },
+    load(id) {
+      if (id !== 'node-fetch' && id !== 'whatwg-fetch') {
+        return null;
+      }
+      return FETCH_POLYFILL;
+    },
+  };
+}

test/integration/dep-node-fetch/expected-install/import-map.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "mock-test-package-a": "./mock-test-package-a.js"
+  }
+}

test/integration/dep-node-fetch/expected-install/mock-test-package-a.js

@@ -0,0 +1,16 @@
+// native patch for: node-fetch, whatwg-fetch
+// ref: https://github.com/tc39/proposal-global
+var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error('unable to locate global object');
+};
+var global = getGlobal();
+var entrypoint = global.fetch.bind(global);
+const Headers = global.Headers;
+const Request = global.Request;
+const Response = global.Response;
+
+export default entrypoint;
+export { Headers, Request, Response };

test/integration/dep-node-fetch/expected-output.txt

@@ -0,0 +1,3 @@
+✔ snowpack install complete.
+  ⦿ web_modules/               size       gzip       brotli
+    └─ mock-test-package-a.js    XXXX KB    XXXX KB    XXXX KB

test/integration/dep-node-fetch/package.json

@@ -0,0 +1,12 @@
+{
+  "description": "Handle specific node.js fetch polyfill packages",
+  "scripts": {
+    "TEST": "node ../../../pkg/dist-node/index.bin.js"
+  },
+  "snowpack": {
+    "install": ["mock-test-package-a"]
+  },
+  "dependencies": {
+    "mock-test-package-a": "^1.0.0"
+  }
+}