Add foundation for a new npm plugin

packages/wmr/src/lib/plugins.js

@@ -3,7 +3,6 @@ import sucrasePlugin from '../plugins/sucrase-plugin.js';
 import wmrPlugin from '../plugins/wmr/plugin.js';
 import wmrStylesPlugin from '../plugins/wmr/styles/styles-plugin.js';
 import sassPlugin from '../plugins/sass-plugin.js';
-import npmPlugin from '../plugins/npm-plugin/index.js';
 import publicPathPlugin from '../plugins/public-path-plugin.js';
 import minifyCssPlugin from '../plugins/minify-css-plugin.js';
 import htmlEntriesPlugin from '../plugins/html-entries-plugin.js';
@@ -27,6 +26,7 @@ import { prefreshPlugin } from '../plugins/preact/prefresh.js';
 import { absolutePathPlugin } from '../plugins/absolute-path-plugin.js';
 import { lessPlugin } from '../plugins/less-plugin.js';
 import { workerPlugin } from '../plugins/worker-plugin.js';
+import { npmPlugin2 } from '../plugins/npm-plugin-2/index.js';
 import tsConfigPathsPlugin from '../plugins/tsconfig-paths-plugin.js';
 
 /**
@@ -99,7 +99,7 @@ export function getPlugins(options) {
 			// Only transpile CommonJS in node_modules and explicit .cjs files:
 			include: /(^npm\/|[/\\]node_modules[/\\]|\.cjs$)/
 		}),
-		(production || isIIFEWorker) && npmPlugin({ external: false }),
+		npmPlugin2({ root }),
 		resolveExtensionsPlugin({
 			extensions: ['.ts', '.tsx', '.js', '.cjs'],
 			index: true

packages/wmr/src/plugins/npm-plugin-2/browser-field.js

@@ -0,0 +1,40 @@
+import path from 'path';
+
+/**
+ * @param {object} options
+ * @param {string} options.modDir
+ * @param {Record<string, string>} options.browser
+ * @returns {import('rollup').Plugin}
+ */
+export function browserFieldPlugin({ browser, modDir }) {
+	/** @type {Map<string, string>} */
+	const browserField = new Map();
+	if (typeof browser === 'object') {
+		for (const [spec, replacement] of Object.entries(browser)) {
+			browserField.set(path.normalize(spec), path.join(modDir, replacement));
+		}
+	}
+
+	return {
+		name: 'browser-field',
+		async resolveId(id, importer) {
+			const resolved = await this.resolve(id, importer, { skipSelf: true });
+
+			let spec = resolved ? resolved.id : id;
+
+			if (/^\.?\.\//.test(spec)) {
+				if (importer) {
+					spec = path.relative(modDir, path.join(path.dirname(importer), spec));
+				}
+			} else if (path.isAbsolute(spec)) {
+				spec = path.relative(modDir, spec);
+			}
+
+			const replacement = browserField.get(spec);
+			if (replacement) {
+				const resolved = await this.resolve(replacement, importer, { skipSelf: true });
+				return resolved ? resolved.id : replacement;
+			}
+		}
+	};
+}

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

@@ -0,0 +1,104 @@
+import { builtinModules } from 'module';
+import path from 'path';
+import * as kl from 'kolorist';
+import { isDirectory } from '../../lib/fs-utils.js';
+import { debug } from '../../lib/output-utils.js';
+import { npmBundle } from './npm-bundle.js';
+
+const log = debug('npm-plugin-2');
+
+/**
+ * @param {object} options
+ * @param {string} options.root
+ * @returns {import('rollup').Plugin}
+ */
+export function npmPlugin2({ root }) {
+	const builtins = new Set(builtinModules);
+
+	const PREFIX = '\0npm:';
+
+	return {
+		name: 'npm-plugin-2',
+		async resolveId(id, importer) {
+			// Validate package name
+			if (
+				// Must not start with `._`
+				/^[._/]/.test(id) ||
+				// Must not match deny list
+				/node_modules|favicon\.ico/.test(id) ||
+				// Must not be a built-in node module
+				builtins.has(id) ||
+				// Must be lowercase
+				id.toLowerCase() !== id ||
+				// Must not contain special characters
+				/[~'!()*;,?:@&=+$]/.test(id) ||
+				// Must contain a second path segment if scoped
+				(id[0] === '@' && id.indexOf('/') === -1)
+			) {
+				return;
+			}
+
+			return PREFIX + id;
+		},
+		async load(id) {
+			if (!id.startsWith(PREFIX)) return;
+			id = id.slice(PREFIX.length);
+
+			// TODO: Caching
+
+			// Extract package name from id:
+			//   foo -> foo
+			//   foo/bar.css -> foo
+			//   @foo/bar.css -> @foo/bar.css
+			//   @foo/bar/bob.css -> @foo/bar
+			let pkgName = id;
+			const first = id.indexOf('/');
+			if (id[0] === '@') {
+				const second = id.indexOf('/', first);
+				pkgName = second > -1 ? id.slice(0, second) : id;
+			} else {
+				pkgName = first > 0 ? id.slice(0, first) : id;
+			}
+
+			let modDir = '';
+			// There may be multiple `node_modules` directories at play
+			// with monorepo setups.
+			try {
+				let dir = root;
+
+				let lastDir = root;
+				// eslint-disable-next-line no-constant-condition
+				while (true) {
+					const maybe = path.join(dir, 'node_modules', pkgName);
+					log(kl.dim(`trying ${maybe}`));
+					if (await isDirectory(maybe)) {
+						modDir = maybe;
+						break;
+					}
+
+					lastDir = dir;
+					dir = path.dirname(dir);
+					if (lastDir === dir) {
+						return;
+					}
+				}
+			} catch (err) {
+				log(err);
+				return;
+			}
+
+			// We didn't found a module directory
+			if (modDir === '') return;
+
+			const result = await npmBundle(modDir, pkgName, id);
+
+			if (!result.output.length) {
+				throw new Error('fail');
+			}
+
+			return {
+				code: result.output[0].code
+			};
+		}
+	};
+}

packages/wmr/src/plugins/npm-plugin-2/npm-bundle.js

@@ -0,0 +1,56 @@
+import * as rollup from 'rollup';
+import path from 'path';
+import { promises as fs } from 'fs';
+import { browserFieldPlugin } from './browser-field.js';
+
+/**
+ * @param {string} modDir
+ * @param {string} pkgName
+ * @param {string} id
+ */
+export async function npmBundle(modDir, pkgName, id) {
+	// Now we can attempt to resolve the package entry point.
+	// Load `package.json` to resolve package entry points
+	const pkg = JSON.parse(await fs.readFile(path.join(modDir, 'package.json'), 'utf-8'));
+
+	const isMainEntry = pkgName === id;
+	let entries = [];
+	if (pkg.exports) {
+		// FIXME
+		throw new Error('TODO');
+	} else if (isMainEntry) {
+		entries.push(path.join(modDir, pkg.module ? pkg.module : pkg.main));
+	} else {
+		// Legacy deep import
+		entries.push(path.join(modDir, id.slice(id.indexOf('/'))));
+	}
+
+	const bundle = await rollup.rollup({
+		input: 'virtual-entry',
+
+		plugins: [
+			browserFieldPlugin({ modDir, browser: pkg.browser || {} }),
+			{
+				name: 'virtual-entry',
+				resolveId(id) {
+					if (id === 'virtual-entry') return id;
+				},
+				async load(id) {
+					if (id !== 'virtual-entry') return;
+
+					// TODO: Is picking a name a good idea?
+					// or should we use dynamic imports everywhere instead?
+					const code = entries.map(entry => `export * from "${entry}";`).join('\n');
+
+					return code;
+				}
+			}
+		]
+	});
+
+	const result = await bundle.generate({
+		format: 'esm'
+	});
+
+	return result;
+}

packages/wmr/src/server.js

@@ -5,7 +5,6 @@ import { createHttp2Server } from './lib/http2.js';
 import polka from 'polka';
 import sirv from 'sirv';
 import compression from './lib/polkompress.js';
-import npmMiddleware from './lib/npm-middleware.js';
 import WebSocketServer from './lib/websocket-server.js';
 import * as kl from 'kolorist';
 import * as errorstacks from 'errorstacks';
@@ -109,8 +108,6 @@ export default async function server({ cwd, root, overlayDir, middleware, http2,
 		app.use(...middleware);
 	}
 
-	app.use('/@npm', npmMiddleware({ alias, optimize, cwd }));
-
 	// Chrome devtools often adds `?%20[sm]` to the url
 	// to differentiate between sourcemaps
 	app.use((req, res, next) => {

packages/wmr/src/wmr-middleware.js

@@ -4,7 +4,6 @@ import * as kl from 'kolorist';
 import { getWmrClient } from './plugins/wmr/plugin.js';
 import { createPluginContainer } from './lib/rollup-plugin-container.js';
 import { transformImports } from './lib/transform-imports.js';
-import { normalizeSpecifier } from './plugins/npm-plugin/index.js';
 import { getMimeType } from './lib/mimetypes.js';
 import { debug, formatPath } from './lib/output-utils.js';
 import { getPlugins } from './lib/plugins.js';
@@ -243,10 +242,6 @@ export default function wmrMiddleware(options) {
 
 		const queryParams = new URL(req.url, 'file://').searchParams;
 
-		if (path.startsWith('/@npm/')) {
-			return next();
-		}
-
 		let prefix = '';
 
 		// Workaround for transform forcing extensionless ids to be
@@ -619,29 +614,7 @@ export const TRANSFORMS = {
 						if (aliased) spec = aliased;
 
 						if (!spec.startsWith('/@alias/')) {
-							// Check if this is a virtual module path from a plugin. If
-							// no plugin loads the id, then we know that the bare specifier
-							// must refer to an npm plugin.
-							// TODO: Cache the result to avoid having to load an id twice.
-							const res = await NonRollup.load(spec);
-
-							if (res === null) {
-								// Bare specifiers are npm packages:
-								const meta = normalizeSpecifier(spec);
-
-								// // Option 1: resolve all package verions (note: adds non-trivial delay to imports)
-								// await resolvePackageVersion(meta);
-								// // Option 2: omit package versions that resolve to the root
-								// // if ((await resolvePackageVersion({ module: meta.module, version: '' })).version === meta.version) {
-								// // 	meta.version = '';
-								// // }
-								// spec = `/@npm/${meta.module}${meta.version ? '@' + meta.version : ''}${meta.path ? '/' + meta.path : ''}`;
-
-								// Option 3: omit root package versions
-								spec = `/@npm/${meta.module}${meta.path ? '/' + meta.path : ''}`;
-							} else {
-								spec = `/@id/${spec}`;
-							}
+							spec = `/@id/${spec}`;
 						}
 					}
 

packages/wmr/test/fixtures/npm-browser-bare-bare/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-browser-bare-bare/index.js

@@ -0,0 +1,3 @@
+import { value } from 'foo';
+
+document.querySelector('h1').textContent = value;

packages/wmr/test/fixtures/npm-browser-bare-relative/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-browser-bare-relative/index.js

@@ -0,0 +1,3 @@
+import { value } from 'foo';
+
+document.querySelector('h1').textContent = value;

packages/wmr/test/fixtures/npm-browser-deep-bare/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-browser-deep-bare/index.js

@@ -0,0 +1,3 @@
+import { value } from 'pkg/foo/bar';
+
+document.querySelector('h1').textContent = value;

packages/wmr/test/fixtures/npm-browser-deep-relative/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-browser-deep-relative/index.js

@@ -0,0 +1,3 @@
+import { value } from 'pkg/foo/bar';
+
+document.querySelector('h1').textContent = value;

packages/wmr/test/fixtures/npm-browser-relative-bare/index.html

@@ -0,0 +1,2 @@
+<h1>it doesn't work</h1>
+<script src="./index.js" type="module"></script>

packages/wmr/test/fixtures/npm-browser-relative-bare/index.js

@@ -0,0 +1,3 @@
+import { value } from 'foo';
+
+document.querySelector('h1').textContent = value;