Overview: Porting preactjs.com to WMR

[marvinhagemeister]

Today I've attempted to port https://preactjs.com over from preact-cli to wmr. These are the issues I ran into:

• Missing support for .less stylesheets Add support for compiling .less stylesheets #806
• Reliance on implicit resolution of .json files - I think we should just rename the few imports in preact-www Use explicit .json and .module.less extension in import specifiers preact-www#791
• .less files need to be renamed to .module.less - We should just rename them in preact-www Use explicit .json and .module.less extension in import specifiers preact-www#791
• Less files use ~ for aliasing, but WMR expects ~/ - Not sure how much work would be needed to support that in WMR, we could just use standard path imports instead
• Replace async! webpack loaders with preact-iso - There is only one place where it's used explicitely, need to add back code-splitting of pages later though
• json: prefixes don't work with aliased paths - I'd love to drop the prefixes all together and replace them with ?module Fix unable to load .json files outside of public directory #810
• Fix npm plugin intercepting relative .less imports during production builds npm registry lookup failed for "mixins.less"
• Print which file triggered this warning: Warning: ICSS ("composes:") is only supported in CSS Modules, otherwise it's a guessing game
• Running into wrong AST transforms - Fix wrong offset with comments in dynamic imports #823
• Replace workerize-loader! webpack loaders with something else
  • Add support for this.emitFile({ id: "src/foo.js", type: "chunk" }), required for https://github.com/surma/rollup-plugin-off-main-thread - WMR now has built-in support for web workers
• Make https://github.com/developit/unistore ESM compatible or use something else? - Dropped it, because it mostly held routing state and with the switch to preact-iso that isn't needed anymore
• Integrate netlify functions with our dev server middleware

[developit]

IIRC, ~ is a prefix in Less that indicates "use the host to resolve this import". My guess is that, in WMR, we could just strip that prefix unconditionally when processing less?

[developit]

I threw together a quick implementation of the async! prefix as a WMR plugin here:
https://github.com/developit/babel-preset-modernize/blob/website/website/plugins/async-prefix.js

(though I think just changing the code is likely the more logical approach)

[developit]

Not sure which AST transforms you're running into, but if it's when processing things like babel-standalone or Codemirror, that was breaking in Webpack and Rollup too - IIRC preact-www is using Webpack's module.noParse feature to bypass this (also because it took forever to bundle). If that's what it is, I have a noParse plugin here:
https://github.com/developit/babel-preset-modernize/blob/website/website/plugins/noparse.js

[developit]

For the Worker stuff, Comlink feels like it'd be a better option here. Bundling can be done by adding this config:

import OMT from '@surma/rollup-plugin-off-main-thread';

export default function({ mode, plugins }) {
  if (mode === 'build') {
    let omt = OMT({ silenceESMWorkerWarning: true });
    omt.outputOptions({ format: 'esm' });  // this plugin method does validation that breaks in Rollup 2+
    delete omt.outputOptions;  // ... so we spoof it and delete the method (since it was just for validation)
    omt.enforce = 'pre';
    plugins.push(omt);
  }
};

... the using new Worker(new URL('./path.js', import.meta.url), { type: 'module' }):

import { wrap } from 'comlink';

function createWorker() {
  let worker = wrap(new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }));
  return worker;
}
// ...
let transformed = await worker.process(code);

[marvinhagemeister]

Not sure which AST transforms you're running into, but if it's when processing things like babel-standalone or Codemirror, that was breaking in Webpack and Rollup too - IIRC preact-www is using Webpack's module.noParse feature to bypass this (also because it took forever to bundle). If that's what it is, I have a noParse plugin here:
https://github.com/developit/babel-preset-modernize/blob/website/website/plugins/noparse.js

It looks like the double transform issue we've been observing for a while. It happens with the markdown parser:

function applyEmoji(content) {
    // ... snip

	if (!pendingEmojiProcessor) {
	    // BAD replacement
		pendingEmojiProcessor = import(
/@alias/~/lib/gh-emoji/index.js'./gh-emoji'
		).then(({ replace }) => (processEmojis = replace || String));
	}
	return pendingEmojiProcessor.then(processEmojis => processEmojis(content));
}

[marvinhagemeister]

Turns out the wrong AST was caused by an offset issue in our import specifier logic. See #823

[marvinhagemeister]

With WMR 3.7.0 all those issues are no fixed 🎉