next-with-federated-prerender.js

const fs = require("fs");
const path = require("path");

const { Template } = require("webpack");
const VirtualModulesPlugin = require("webpack-virtual-modules");

function generateVirtualModule(name, exposes, devStatsFile, stats) {
  return Template.asString([
    "// THIS FILE IS AUTOGENERATED, DO NOT TOUCH",
    `import path from "path";`,
    `import { createElement } from "react";`,
    `import { renderToStaticMarkup } from "react-dom/server";`,
    "",
    // Generate the request map
    "const requestMap = {",
    Template.indent(
      Object.entries(exposes).map(
        ([key, mod]) =>
          `[${JSON.stringify(key)}]: () => import(${JSON.stringify(mod)}),`
      )
    ),
    "};",
    "",
    // Get the exposes from the stats file
    devStatsFile
      ? `const exposes = __non_webpack_require__(path.resolve(__dirname, ${JSON.stringify(
          devStatsFile
        )})).federatedModules.find(f => f.remote === ${JSON.stringify(
          name
        )}).exposes;`
      : `const exposes = ${stats}.federatedModules.find(f => f.remote === ${JSON.stringify(
          name
        )}).exposes`,
    "",
    // Get the chunks for an exposed module
    `function getChunksForExposed(exposed) {
      return exposes[exposed].reduce((p, c) => {
        p.push(...c.chunks);
        return p;
      }, []);
    }`,
    "",
    // Generate the route handler
    "export default async function nextFederatedPrerender(req, res) {",
    Template.indent([
      // Bail if not a post method
      `if (req.method !== "POST") {`,
      Template.indent(["res.status(405);", "res.send();", "return;"]),
      "}",
      "",
      "const mod = req.body.module;",
      // Bail if not in the request map
      `if (!requestMap[mod]) {`,
      Template.indent(["res.status(404);", "res.send();", "return;"]),
      "}",
      "try {",
      Template.indent([
        // Get the component from the module
        "const chunks = getChunksForExposed(mod);",
        "let Component = await requestMap[mod]();",
        "Component = (Component && Component.default) || Component;",
        // Render it to HTML with the props and a placeholder marker for the children.
        "const html = renderToStaticMarkup(createElement(Component, req.body.props, `\u200Cchildren\u200C`));",
        "res.status(200);",
        "res.json({ chunks, html });",
      ]),
      "} catch (err) {",
      Template.indent([
        "console.error(err);",
        "res.status(500);",
        "res.send();",
        "return;",
      ]),
      "}",
    ]),
    "}",
  ]);
}

class FederatedPrerenderPlugin {
  /**
   *
   * @param {{
   *   dir?: string;
   *   exposes: import("webpack").container.ModuleFederationPluginOptions["exposes"];
   *   statsFile: string;
   *   name: string;
   * }} options
   */
  constructor(options) {
    this.options = options;
  }

  /**
   *
   * @param {import("webpack").Compiler} compiler
   */
  apply(compiler) {
    const dir = this.options.dir || process.cwd();
    const exposes = this.options.exposes || {};
    const embedStatsFile = this.options.embedStatsFile;
    const devStatsFile = this.options.devStatsFile;
    const name = this.options.name;

    // Get the location of the module. This is so the relative imports defined in exposes work.
    const virtualMod = path.join(dir, "__federated-prerender.js");
    const stats = embedStatsFile
      ? fs.readFileSync(embedStatsFile, "utf-8")
      : null;

    // Assign it to an alias for easier import in the server.
    compiler.options.resolve.alias = compiler.options.resolve.alias || {};
    compiler.options.resolve.alias["federated-prerender"] = virtualMod;

    // Generate the code for the prerender module.
    const code = generateVirtualModule(name, exposes, devStatsFile, stats);
    fs.writeFileSync(virtualMod, code);
    // Use the virutal modules plugin to add it to the build.
    new VirtualModulesPlugin({ [virtualMod]: code }).apply(compiler);

    // compiler.hooks.afterDone.tap(
    //   'RerenderPlugin',
    //   () => {
    //     fs.unlinkSync(virtualMod)
    //   }
    // );
  }
}

function nextWithFederatedPrerender(options) {
  return (nextConfig = {}) => ({
    ...nextConfig,
    webpack(webpackConfig, webpackOptions) {
      if (webpackOptions.isServer) {
        webpackConfig.plugins.unshift(
          new FederatedPrerenderPlugin({
            ...options,
            dir: options.dir || webpackOptions.dir,
          })
        );
      }

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(webpackConfig, webpackOptions);
      }

      return webpackConfig;
    },
  });
}

module.exports = nextWithFederatedPrerender;