"flavors" for simultaneous builds of server/client/i18n/esnext

[wmertens]

Trying to figure out if this is a good idea:

the concept

When we're building, the bundle is meant for a certain "flavor" of environment. Nodejs, edge worker, old browsers, french browsers...

Would it be possible to build all these flavors at the same time, so that many processing steps and maybe resulting files can be shared?

For example, to do i18n you might want to replace all calls of $localize('foo') with the translation of "foo". Running the full build for each locale would take a long time.
Instead, do it in two steps: first rename the call with a unique global name during transform so it doesn't get minified, and then replace the unique call with each locale's translation after bundling.

Likewise, you might replace isServer with true during transform so that some things only happen on client or server, but for React code, a lot of code will be the same on client and server.

For older browsers, you might include polyfills and transform differently, but again, a lot of processing might be shared.

the implementation

There would be a flavor plugin. You configure for each entry point with which type Flavors = { server?: boolean, noModule?: boolean, i18n?: string }} you want to build, for example app.tsx: [{server: true}, {i18n: 'fr'}, {noModule: true, i18n: 'fr'}].

First all entry points are replaced with flavor imports \0${[server && 'server', noModule && 'noModule', i18n].filter(Boolean).join('-')}-${id}, with meta.flavor set to a flavor and meta.plainId containing the id of the original entry point.

When loading a flavor import, the flavor plugin loads the plain id, and then the flavor plugin performs flavor-specific transforms (e.g. replace isServer and $localize) and replaces the imports with flavor imports for the current flavor.

When minifying, the flavor plugin should be able to specify different settings per flavor.

optimizations

If two flavors beget the same result, that result should be a shared file. This merging should start at the leaves of the import tree.

Flavor transforms should check other transform results and reuse transform results when possible.

result

The result should be a set of bundles where the entry point has the flavors in the filename, and then a bunch of files that may be used by one or more flavors.

If, in the browser, you select a different locale, then you'll be loading a different bundle, but there might be shared files that were already cached.

Thoughts?

[wmertens]

would love some feedback here, even if it's just an emoji reaction :)