Bring back etag caching for npm packages

packages/wmr/src/lib/npm-middleware.js

@@ -1,184 +1,36 @@
-import * as rollup from 'rollup';
-import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
-// import unpkgPlugin from '../plugins/unpkg-plugin.js';
-import npmPlugin, { normalizeSpecifier } from '../plugins/npm-plugin/index.js';
-import { resolvePackageVersion, loadPackageFile } from '../plugins/npm-plugin/registry.js';
-import { getCachedBundle, setCachedBundle, sendCachedBundle, enqueueCompress } from './npm-middleware-cache.js';
-import processGlobalPlugin from '../plugins/process-global-plugin.js';
-import aliasPlugin from '../plugins/aliases-plugin.js';
-import { getMimeType } from './mimetypes.js';
-import nodeBuiltinsPlugin from '../plugins/node-builtins-plugin.js';
-import * as kl from 'kolorist';
-import { hasDebugFlag, onWarn } from './output-utils.js';
+import path from 'path';
+import { getPackageInfo, isValidPackageName } from '../plugins/npm-plugin/utils.js';
 
-/**
- * Serve a "proxy module" that uses the WMR runtime to load CSS.
- * @param {ReturnType<typeof normalizeSpecifier>} meta
- * @param {import('http').ServerResponse} res
- * @param {boolean} [isModule]
- */
-async function handleAsset(meta, res, isModule) {
-	let code = '';
-	let type = null;
-
-	if (isModule) {
-		type = 'application/javascript;charset=utf-8';
-		const specifier = JSON.stringify('/@npm/' + meta.specifier + '?asset');
-		code = `import{style}from '/_wmr.js';\nstyle(${specifier});`;
-	} else {
-		type = getMimeType(meta.path);
-		code = await loadPackageFile(meta);
-	}
-	res.writeHead(200, {
-		'content-type': type || 'text/plain',
-		'content-length': Buffer.byteLength(code)
-	});
-	res.end(code);
-}
-
-/**
- * @param {object} [options]
- * @param {'npm'|'unpkg'} [options.source = 'npm'] How to fetch package files
- * @param {Record<string,string>} [options.alias]
- * @param {boolean} [options.optimize = true] Progressively minify and compress dependency bundles?
- * @param {string} [options.cwd] Virtual cwd
- * @returns {import('polka').Middleware}
- */
-export default function npmMiddleware({ source = 'npm', alias, optimize, cwd } = {}) {
+export function npmEtagCache() {
 	return async (req, res, next) => {
 		const url = new URL(req.url, 'https://localhost');
-		// @ts-ignore
-		const mod = url.pathname.replace(/^\//, '');
+		let id = path.posix.normalize(url.pathname);
 
-		const meta = normalizeSpecifier(mod);
+		if (!id.startsWith('/@npm/@id/')) {
+			return next();
+		}
 
-		try {
-			await resolvePackageVersion(meta);
-		} catch (e) {
-			return next(e);
+		id = id.slice('/@npm/@id/'.length);
+		if (!isValidPackageName(id)) {
+			return next();
 		}
 
+		const { name, version, pathname } = getPackageInfo(id);
+
 		try {
-			// The package name + path + version is a strong ETag since versions are immutable
-			const etag = Buffer.from(`${meta.specifier}${meta.version}`).toString('base64');
+			// The package name + version + pathname is a strong ETag since versions are immutablew
+			const etag = Buffer.from(`${name}${version}${pathname}`).toString('base64');
 			const ifNoneMatch = String(req.headers['if-none-match']).replace(/-(gz|br)$/g, '');
+
 			if (ifNoneMatch === etag) {
 				return res.writeHead(304).end();
 			}
-			res.setHeader('etag', etag);
-
-			// CSS files and proxy modules don't use Rollup.
-			if (/\.((css|s[ac]ss|less)|wasm|txt|json)$/.test(meta.path)) {
-				return handleAsset(meta, res, url.searchParams.has('module'));
-			}
-
-			res.setHeader('content-type', 'application/javascript;charset=utf-8');
-			if (hasDebugFlag()) {
-				// eslint-disable-next-line no-console
-				console.log(`  ${kl.dim('middleware:') + kl.bold(kl.magenta('npm'))}  ${JSON.stringify(meta.specifier)}`);
-			}
-			// serve from memory and disk caches:
-			const cached = await getCachedBundle(etag, meta, cwd);
-			if (cached) return sendCachedBundle(req, res, cached);
-
-			// const start = Date.now();
-			const code = await bundleNpmModule(mod, { source, alias, cwd });
-			// console.log(`Bundle dep: ${mod}: ${Date.now() - start}ms`);
-
-			// send it!
-			res.writeHead(200, { 'content-length': Buffer.byteLength(code) }).end(code);
 
-			// store the bundle in memory and disk caches
-			setCachedBundle(etag, code, meta, cwd);
-
-			// this is a new bundle, we'll compress it with terser and brotli shortly
-			if (optimize !== false) {
-				enqueueCompress(etag);
-			}
-		} catch (e) {
-			console.error(`Error bundling ${mod}: `, e);
-			next(e);
+			res.setHeader('etag', etag);
+		} catch (err) {
+			next(err);
 		}
-	};
-}
-
-let npmCache;
-
-/**
- * Bundle am npm module entry path into a single file
- * @param {string} mod The module to bundle, including subpackage/path
- * @param {object} options
- * @param {'npm'|'unpkg'} [options.source]
- * @param {Record<string,string>} [options.alias]
- * @param {string} [options.cwd]
- */
-async function bundleNpmModule(mod, { source, alias, cwd }) {
-	let npmProviderPlugin;
 
-	if (source === 'unpkg') {
-		throw Error('unpkg plugin is disabled');
-		// npmProviderPlugin = unpkgPlugin({
-		// 	publicPath: '/@npm',
-		// 	perPackage: true
-		// });
-	} else {
-		npmProviderPlugin = npmPlugin({
-			publicPath: '/@npm'
-		});
-	}
-
-	const bundle = await rollup.rollup({
-		input: mod,
-		onwarn: onWarn,
-		// input: '\0entry',
-		cache: npmCache,
-		shimMissingExports: true,
-		treeshake: false,
-		// inlineDynamicImports: true,
-		// shimMissingExports: true,
-		preserveEntrySignatures: 'allow-extension',
-		plugins: [
-			nodeBuiltinsPlugin({}),
-			aliasPlugin({ alias, cwd }),
-			npmProviderPlugin,
-			processGlobalPlugin({
-				sourcemap: false,
-				NODE_ENV: 'development'
-			}),
-			commonjs({
-				extensions: ['.js', '.cjs', ''],
-				sourceMap: false,
-				transformMixedEsModules: true
-			}),
-			json(),
-			{
-				name: 'no-builtins',
-				load(s) {
-					if (s === 'fs' || s === 'path') {
-						return 'export default {};';
-					}
-				}
-			},
-			{
-				name: 'never-disk',
-				load(s) {
-					throw Error('local access not allowed');
-				}
-			}
-		]
-	});
-
-	npmCache = bundle.cache;
-
-	const { output } = await bundle.generate({
-		format: 'es',
-		indent: false,
-		// entryFileNames: '[name].js',
-		// chunkFileNames: '[name].js',
-		// Don't transform paths at all:
-		paths: String
-	});
-
-	return output[0].code;
+		next();
+	};
 }

packages/wmr/src/plugins/npm-plugin/index.js

@@ -24,6 +24,7 @@ export function npmPlugin({ cwd, autoInstall, production }) {
 	/** @type {Map<string, { code: string, map: any }>} */
 	const chunkCache = new Map();
 
+	/** @type {Map<string, string>} */
 	const entryToChunk = new Map();
 
 	/** @type {Map<string, import('./utils').Deferred>} */

packages/wmr/src/server.js

@@ -9,6 +9,7 @@ import WebSocketServer from './lib/websocket-server.js';
 import * as kl from 'kolorist';
 import * as errorstacks from 'errorstacks';
 import { hasDebugFlag } from './lib/output-utils.js';
+import { npmEtagCache } from './lib/npm-middleware.js';
 
 /**
  * @typedef CustomServer
@@ -17,8 +18,8 @@ import { hasDebugFlag } from './lib/output-utils.js';
 
 /**
  * @param {object} options
- * @param {string} [options.cwd = ''] Directory to serve
- * @param {string} [options.root] Virtual process.cwd
+ * @param {string} options.cwd Directory to serve
+ * @param {string} options.root Virtual process.cwd
  * @param {string} [options.publicDir] A directory containing public files, relative to cwd
  * @param {string} [options.overlayDir] A directory of generated files to serve if present, relative to cwd
  * @param {polka.Middleware[]} [options.middleware] Additional Polka middlewares to inject
@@ -97,6 +98,8 @@ export default async function server({ cwd, root, overlayDir, middleware, http2,
 
 	app.ws = new WebSocketServer(app.server, '/_hmr');
 
+	app.use(npmEtagCache());
+
 	if (compress) {
 		// @TODO: reconsider now that npm deps are compressed AOT
 		const threshold = compress === true ? 1024 : compress;