Generate multiple output files from single source

[jahudka]

I'd like to write a PostHTML plugin which would handle translations in HTML files - essentially something like replacing all {message} strings in all text nodes in the HTML with matching translations from a translation file. The idea is that I'd have a single HTML file for multiple language mutations. I'm trying to come up with a way to make a single src/index.html file result in multiple output files along the lines of dist/en/index.html, dist/de/index.html etc. I know this is probably a multi-faceted issue in that I'll somehow have to handle dependency path changes down the road, but for starters I'd like to figure out how to generate multiple output files from a single input file. I've attempted to do this using a transformer plugin like this:

const languages = ['en', 'de'];

export default new Transformer({
  async transform({ asset }) {
    const content = await asset.getCode();

    return languages.map((lang) => ({
      id: `${asset.id}-${lang}`,
      type: 'html',
      filePath: asset.filePath.replace(/\/([^\/]+)$/, `/${lang}/$1`),
      content,
    }));
  }
});

This doesn't work though - it still results in a single dist/index.html file. I'm not too familiar with Parcel internals, but the way I understand it, the issue is that the bundler automatically groups the HTML files in the same bundle group, which in turn only has a single entry point, and so only a single file is emitted.

Is there any way this could be achieved?

[jahudka]

For anyone stumbling upon this, one way I figured out to do it is to add the language into the asset meta and then using a custom namer to fix the output path for the translated asset. An important thing is to set the asset as a dependency of the original asset and set its priority to lazy and the bundle separation to isolated, so something like this:

export default new Transformer({
  async transform({ asset }) {
    const assets = [asset];
    const content = await asset.getCode();

    for (const lang of languages) {
      const uniqueKey = asset.id + '@' + lang;

      asset.addDependency({
        specifierType: 'esm',
        specifier: uniqueKey,
        priority: 'lazy',
        bundleBehavior: 'isolated',
        needsStableName: true,
      });

      assets.push({
        uniqueKey,
        type: 'html',
        content,
        bundleBehavior: 'isolated',
        meta: { lang },
      });
    }

    return assets;
  }
});