feat: add support for exports field to REPL (#445)

* better external package path resolving, including respecting the modern `exports` field

* Update packages/repl/src/lib/workers/bundler/index.js

Co-authored-by: Ben McCann <[email protected]>

* Update index.js

* Update packages/repl/src/lib/workers/bundler/index.js

Co-authored-by: Ben McCann <[email protected]>

* Update index.js

* fix typo

* update pnpm-lock.yaml

* put `importee_package_name` inside the `if (match)`

* give another chance to load from `./index.{mjs|js}`

* throw errors on package import resolving

* simplify error messages

* add a comment, because i was confused about what this was for

* move resolution logic into separate function, match rollup semantics (pkg.svelte first)

---------

Co-authored-by: Ben McCann <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

packages/repl/package.json

@@ -30,6 +30,7 @@
 		"acorn": "^8.8.2",
 		"codemirror": "5.65.1",
 		"estree-walker": "^3.0.3",
+		"resolve.exports": "^2.0.0",
 		"svelte-json-tree": "^1.0.0",
 		"yootils": "^0.3.1"
 	},

packages/repl/src/lib/workers/bundler/index.js

@@ -1,4 +1,5 @@
 import { rollup } from '@rollup/browser';
+import * as resolve from 'resolve.exports';
 import { sleep } from 'yootils';
 import commonjs from './plugins/commonjs.js';
 import glsl from './plugins/glsl.js';
@@ -106,9 +107,63 @@ function has_loopGuardTimeout_feature() {
 	return compare_to_version(3, 14, 0) >= 0;
 }
 
+async function resolve_from_pkg(pkg, subpath) {
+	// match legacy Rollup logic — pkg.svelte takes priority over pkg.exports
+	if (typeof pkg.svelte === 'string' && subpath === '.') {
+		return pkg.svelte;
+	}
+
+	// modern
+	if (pkg.exports) {
+		try {
+			const [resolved] = resolve.exports(pkg, subpath, {
+				browser: true,
+				conditions: ['svelte', 'production']
+			});
+
+			return resolved;
+		} catch {
+			throw `no matched export path was found in "${pkg_name}/package.json"`;
+		}
+	}
+
+	// legacy
+	if (subpath === '.') {
+		const resolved_id = resolve.legacy(pkg, {
+			fields: ['browser', 'module', 'main']
+		});
+
+		if (!resolved_id) {
+			// last ditch — try to match index.js/index.mjs
+			for (const index_file of ['index.mjs', 'index.js']) {
+				try {
+					const indexUrl = new URL(index_file, `${pkg_url_base}/`).href;
+					return await follow_redirects(indexUrl, uid);
+				} catch {
+					// maybe the next option will be successful
+				}
+			}
+
+			throw `could not find entry point in "${pkg_name}/package.json"`;
+		}
+
+		return resolved_id;
+	}
+
+	if (typeof pkg.browser === 'object') {
+		// this will either return `pkg.browser[subpath]` or `subpath`
+		return resolve.legacy(pkg, {
+			browser: subpath
+		});
+	}
+
+	return subpath;
+}
+
 async function get_bundle(uid, mode, cache, lookup) {
 	let bundle;
 
+	/** A set of package names (without subpaths) to include in pkg.devDependencies when downloading an app */
 	const imports = new Set();
 	const warnings = [];
 	const all_warnings = [];
@@ -155,25 +210,44 @@ async function get_bundle(uid, mode, cache, lookup) {
 				// fetch from unpkg
 				self.postMessage({ type: 'status', uid, message: `resolving ${importee}` });
 
+				const match = /^((?:@[^/]+\/)?[^/]+)(\/.+)?$/.exec(importee);
+				if (!match) {
+					throw new Error(`Invalid import "${importee}"`);
+				}
+
+				const pkg_name = match[1];
+				const subpath = `.${match[2] ?? ''}`;
+
+				// if this was imported by one of our files, add it to the `imports` set
 				if (importer in lookup) {
-					const match = /^(@[^/]+\/)?[^/]+/.exec(importee);
-					if (match) imports.add(match[0]);
+					imports.add(pkg_name);
 				}
 
-				try {
-					const pkg_url = await follow_redirects(`${packagesUrl}/${importee}/package.json`, uid);
-					const pkg_json = (await fetch_if_uncached(pkg_url, uid)).body;
-					const pkg = JSON.parse(pkg_json);
+				const fetch_package_info = async () => {
+					try {
+						const pkg_url = await follow_redirects(`${packagesUrl}/${pkg_name}/package.json`, uid);
+						const pkg_json = (await fetch_if_uncached(pkg_url, uid)).body;
+						const pkg = JSON.parse(pkg_json);
 
-					if (pkg.svelte || pkg.module || pkg.main) {
-						const url = pkg_url.replace(/\/package\.json$/, '');
-						return new URL(pkg.svelte || pkg.module || pkg.main, `${url}/`).href;
+						const pkg_url_base = pkg_url.replace(/\/package\.json$/, '');
+
+						return {
+							pkg,
+							pkg_url_base
+						};
+					} catch (_e) {
+						throw new Error(`Error fetching "${pkg_name}" from unpkg. Does the package exist?`);
 					}
-				} catch (err) {
-					// ignore
-				}
+				};
+
+				const { pkg, pkg_url_base } = await fetch_package_info();
 
-				return await follow_redirects(`${packagesUrl}/${importee}`, uid);
+				try {
+					const resolved_id = await resolve_from_pkg(pkg, subpath);
+					return new URL(resolved_id, `${pkg_url_base}/`).href;
+				} catch (reason) {
+					throw new Error(`Cannot import "${importee}": ${reason}.`);
+				}
 			}
 		},
 		async load(resolved) {