Passing options to page component loader

[emanueleperuffo]

I'd like to create pages with the new i18n beta feature of netlify-cms, in single_file mode.

My page components are yaml files and a custom webpack loader transforms them to mdx.

// gatsby-node.js
const path = require('path');

/** @type {import('gatsby').GatsbyNode['onCreateWebpackConfig']} */
exports.onCreateWebpackConfig = (args) => {
  const {
    getConfig, actions, plugins, cache, loaders, getNodesByType,
    pathPrefix, reporter,
    createContentDigest,
    store,
  } = args;

  const config = getConfig();

  const yamlLoader = config.module.rules
    .find((rule) => rule.test.toString() === /\.ya?ml$/.toString());

  yamlLoader.exclude = (input) => /^page.[a-zA-Z_]+.yml$/.test(path.basename(input));

  config.module.rules.push({
    test: /\.ya?ml$/,
    include: (input) => /^page.yml$/.test(path.basename(input)),
    use: [
      // 'cache-loader',
      loaders.js(),
      {loader: require.resolve('../webpack/cms-page-loader'), options: {
        getNodesByType,
        pathPrefix,
        reporter,
        store,
        cache,
        createContentDigest,
      }},
    ],
  });

  actions.replaceWebpackConfig(config);
};

In single_file mode, each one of my page component files would translate to multiple pages, one for each supported locale.

// page.yml component
en:
  title: 'Title in English'
  body: 'Body in English'
it:
  title: 'Title in Italian'
  body: Body in Italian'

Webpack allows passing options to loaders with the syntax require('module.js?key=value'). How hard would it be to allow passing options to components this way? Now this is not possible because Gatsby checks if /path/to/page.yml?locale=en exists in the filesystem.

actions.createPage({
  path: '/en',
  component: '/path/to/page.yml?locale=en',
  context: {},
});

This would allow my webpack loader to do this:

// cms-page-loader.js
module.exports = function (content) {
  const {locale} = this.query;

  // load yaml from content and transform yaml[locale] to mdx
};