Upgrade to support pure ESM packages like imagemin

My reading of the recent imagemin release notes suggests we'd need to refactor along these lines to support future versions.

As far as I can tell, this is not an immediate need, but probably something we should considering at some point down the road. I suspect @rdmurphy is miles ahead of me on the thinking here.

If for nothing else, I'm filing this ticket to record what I've learned looking at some dependabot errors and release notes this morning.

Hello! 👋 That's a great guide and it's pretty on the money. The most comprehensive (but time consuming) option here would be to modify all files to use ESM-style imports and just convert in one big swoop.

But if there's no rush to navigate away from CommonJS there is a stopgap option that'll work. Like the imagemin set of packages, I re-wrote quaff to be ESM only earlier this year. Baker uses the most recent version of quaff but it dynamically imports it, which allows ESM to be imported in CommonJS.

baker/lib/index.js

Lines 230 to 244 in 4f0dd68

    
           async getData() { 
        
             const { load } = await import('quaff'); 
        
             try { 
        
               return await load(this.data); 
        
             } catch (err) { 
        
               // the directory didn't exist and that's okay 
        
               if (err.code === 'ENOENT') { 
        
                 return {}; 
        
               } 
        
               // otherwise we want the real error 
        
               throw err; 
        
             } 
        
           }

This same approach could be used to pull in the latest versions of imagemin (and the plugins) into Baker. The only tricky thing is you cannot do async stuff within the constructor() of AssetsEngine, but you can within render(), so you could add a new async function to that class that can be await called here to dynamically import imagemin and the plugins and pass it along to be used. Could even get fancy and add the list of plugins to the instance itself so the import only has to happen on the first call.

// within some "loadImagemin" function or whatever
if (!this.imageminPlugins) {
  this.imageminPlugins = [(await import('imagemin-jpegtran'))(), // etc];
}

One coincidental positive side effect here is that imagemin would only get loaded for production builds, which is nice.

	async getData() {
	const { load } = await import('quaff');

	try {
	return await load(this.data);
	} catch (err) {
	// the directory didn't exist and that's okay
	if (err.code === 'ENOENT') {
	return {};
	}

	// otherwise we want the real error
	throw err;
	}
	}