Merge pull request #522 from preactjs/default-loaders

Allow plugins to overwrite built-in loaders

Author: marvinhagemeister

.changeset/spotty-terms-give.md

@@ -0,0 +1,5 @@
+---
+'wmr': patch
+---
+
+Allow plugins to overwrite url and json loading behavior. Default loading semantics will only apply if no other prefix is present on the import specifier

packages/wmr/src/lib/default-loaders.js

@@ -0,0 +1,29 @@
+import { IMPLICIT_URL } from '../plugins/url-plugin.js';
+import { transformImports } from './transform-imports.js';
+
+/**
+ * Add default loaders to import specifiers if none are
+ * present already.
+ * @returns {import("wmr").Plugin}
+ */
+export function defaultLoaders() {
+	return {
+		name: 'default-loaders',
+		async transform(code, id) {
+			return await transformImports(code, id, {
+				resolveId(specifier) {
+					const hasPrefix = /^[-\w]+:/.test(specifier);
+
+					if (!hasPrefix) {
+						if (specifier.endsWith('.json')) {
+							return `json:${specifier}`;
+						} else if (IMPLICIT_URL.test(specifier)) {
+							return `url:${specifier}`;
+						}
+					}
+					return null;
+				}
+			});
+		}
+	};
+}

packages/wmr/src/lib/plugins.js

@@ -20,6 +20,7 @@ import copyAssetsPlugin from '../plugins/copy-assets-plugin.js';
 import nodeBuiltinsPlugin from '../plugins/node-builtins-plugin.js';
 import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
 import visualizer from 'rollup-plugin-visualizer';
+import { defaultLoaders } from './default-loaders.js';
 
 /**
  * @param {import("wmr").Options} options
@@ -74,6 +75,9 @@ export function getPlugins(options) {
 
 		...plugins.slice(split),
 
+		// Apply default loaders to unprefixed paths
+		defaultLoaders(),
+
 		production && optimizeGraphPlugin({ publicPath }),
 		minify && minifyCssPlugin({ sourcemap }),
 		production && copyAssetsPlugin({ cwd }),

packages/wmr/src/plugins/json-plugin.js

@@ -20,12 +20,9 @@ export default function jsonPlugin({ cwd }) {
 	return {
 		name: 'json-plugin',
 		async resolveId(id, importer) {
-			if (id[0] === '\0' || !id.endsWith('.json')) return;
+			if (!id.startsWith(IMPORT_PREFIX)) return;
 
-			// always process prefixed imports
-			if (id.startsWith(IMPORT_PREFIX)) {
-				id = id.slice(IMPORT_PREFIX.length);
-			}
+			id = id.slice(IMPORT_PREFIX.length);
 
 			const resolved = await this.resolve(id, importer, { skipSelf: true });
 			return resolved && INTERNAL_PREFIX + resolved.id;
@@ -34,7 +31,7 @@ export default function jsonPlugin({ cwd }) {
 		// an internal prefix we can get rid of the whole
 		// loading logic here and let rollup handle that part.
 		async load(id) {
-			if (!id.endsWith('.json')) return null;
+			if (!id.startsWith(INTERNAL_PREFIX)) return null;
 
 			if (id.startsWith(INTERNAL_PREFIX)) {
 				id = id.slice(INTERNAL_PREFIX.length);

packages/wmr/src/plugins/url-plugin.js

@@ -1,7 +1,7 @@
 import { relative, basename, sep, posix } from 'path';
 import { promises as fs } from 'fs';
 
-const IMPLICIT_URL = /\.(?:png|jpe?g|gif|webp|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$/i;
+export const IMPLICIT_URL = /\.(?:png|jpe?g|gif|webp|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$/i;
 
 const escapeUrl = url => url.replace(/#/g, '%23').replace(/'/g, "\\'").replace(/"/g, '\\"');
 
@@ -12,23 +12,15 @@ const escapeUrl = url => url.replace(/#/g, '%23').replace(/'/g, "\\'").replace(/
  * @returns {import('rollup').Plugin}
  */
 export default function urlPlugin({ inline, cwd } = {}) {
+	const PREFIX = 'url:';
+	const INTERNAL_PREFIX = '\0url:';
+
 	return {
 		name: 'url-plugin',
 		async resolveId(id, importer) {
-			if (id[0] === '\0' || id[0] === '\b') return;
+			if (!id.startsWith(PREFIX)) return;
 
-			if (id.startsWith('url:')) {
-				// explicit `url:` prefix
-				id = id.slice(4);
-			} else if (!inline) {
-				// In dev mode, we eagerly process un-prefixed non-source files.
-				// This would be an infinite Rollup loop for prod, which instead uses load().
-				return;
-			} else if (!IMPLICIT_URL.test(id)) {
-				// implicitly apply `url:` all files except source code
-				return;
-				// ^ no prefix, not an implicit URL (in dev) - nothing to do.
-			}
+			id = id.slice(PREFIX.length);
 
 			const resolved = await this.resolve(id, importer, { skipSelf: true });
 			if (!resolved) return;
@@ -41,18 +33,13 @@ export default function urlPlugin({ inline, cwd } = {}) {
 					external: true
 				};
 			}
-			resolved.id = `\0url:${resolved.id}`;
+			resolved.id = `${INTERNAL_PREFIX}${resolved.id}`;
 			return resolved;
 		},
 		async load(id) {
-			if (id.startsWith('\0url:')) {
-				// explicit `url:` prefix (generated by our resolveId):
-				id = id.slice(5);
-			} else if (!IMPLICIT_URL.test(id)) {
-				// implicitly apply `url:` images, fonts, etc.
-				return;
-				// ^ no prefix, not an implicit URL - nothing to do
-			}
+			if (!id.startsWith(INTERNAL_PREFIX)) return;
+
+			id = id.slice(INTERNAL_PREFIX.length);
 
 			const fileId = this.emitFile({
 				type: 'asset',

packages/wmr/test/fixtures.test.js

@@ -76,6 +76,23 @@ describe('fixtures', () => {
 		});
 	});
 
+	it('should allow overwriting default json loader', async () => {
+		await loadFixture('overwrite-loader-json', env);
+		instance = await runWmrFast(env.tmp.path);
+		const text = await getOutput(env, instance);
+		expect(text).toMatch(/foobarbaz/);
+	});
+
+	it('should allow overwriting default url loader', async () => {
+		await loadFixture('overwrite-loader-url', env);
+		instance = await runWmrFast(env.tmp.path);
+		const text = await getOutput(env, instance);
+
+		expect(text).toMatch(/my-url: \/foo\.svg\?asset/);
+		expect(text).toMatch(/url: \/foo\.svg\?asset/);
+		expect(text).toMatch(/fallback: \/foo\.svg\?asset/);
+	});
+
 	describe('empty', () => {
 		it('should print warning for missing index.html file in public dir', async () => {
 			await loadFixture('empty', env);

packages/wmr/test/fixtures/overwrite-loader-json/bar.json

@@ -0,0 +1,3 @@
+{
+	"bar": "bar"
+}

packages/wmr/test/fixtures/overwrite-loader-json/baz.json

@@ -0,0 +1,3 @@
+{
+	"baz": "baz"
+}

packages/wmr/test/fixtures/overwrite-loader-json/foo.json

@@ -0,0 +1,3 @@
+{
+	"foo": "foo"
+}

packages/wmr/test/fixtures/overwrite-loader-json/index.html

@@ -0,0 +1,2 @@
+<div id="app"></div>
+<script type="module" src="index.js"></script>