remotes.config.js

function getConfig(pkg_json) {
  switch (pkg_json) {
    case "store":
      return {
        port: 32001,
        shared: {
          react: { singleton: true },
          "react-dom": { singleton: true },
          effector: { singleton: true },
          "effector-react": { singleton: true },
          "styled-components": { singleton: true },
        },
      };
    /**=======================
     * !      SHARED
     *
     *
     *========================**/
    case "react-counter":
      return {
        port: 32002,
        shared: {
          react: { singleton: true },
          "react-dom": { singleton: true },
          effector: { singleton: true },
          "effector-react": { singleton: true },
          "styled-components": { singleton: true },
        },
      };
    case "remote-library":
      return {
        port: 32004,
        shared: {
          react: { singleton: true },
          "react-dom": { singleton: true },
          "styled-components": { singleton: true },
        },
      };
    case "vue-counter":
      return {
        port: 32003,
        shared: {
          vue: { singleton: true },
          effector: { singleton: true },
          "effector-vue": { singleton: true },
          "styled-components": { singleton: true },
        },
      };
    /**=======================
     * !      MODULES
     *
     *
     *========================**/
    case "shell":
      return {
        port: 62621,
        shared: {
          react: { singleton: true },
          "react-dom": { singleton: true },
          vue: { singleton: true },
          effector: { singleton: true },
          "effector-react": { singleton: true },
          "effector-vue": { singleton: true },
          "styled-components": { singleton: true },
        },
      };
    /**=======================
     * !      APP
     *
     *
     *========================**/
    case "styledComponent":
      return { port: 32009 };
    case "federated-css-tailwind-css-global":
      return { port: 32010 };
    /**=======================
     * !      MISC
     *
     *
     *========================**/
    default:
      return null;
  }
}

function veinFinder(name) {
  const port = getConfig(name).port;
  console.log("found port", port);
  return port;
}

function getRemoteEntryUrl(port, name) {
  const { CODESANDBOX_SSE, HOSTNAME = "" } = process.env;

  // Check if the example is running on CodeSandbox
  if (!CODESANDBOX_SSE) {
    return `${name}@//localhost:${port}/remoteEntry.js`;
  }

  const parts = HOSTNAME.split("-");
  const codesandboxId = parts[parts.length - 1];

  return `//${codesandboxId}-${port}.sse.codesandbox.io/remoteEntry.js`;
}

class RemoteConfig {
  constructor(pkg, remotes = []) {
    console.log(
      `$: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------`
    );
    console.log(JSON.stringify({ pkg: pkg.name, remotes }));
    console.log(
      `$: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------`
    );

    const name = pkg.name;
    const shared = getConfig(name).shared || {};

    console.log(remotes);

    let _remotes = {};

    // Assuming `remotes` is an array of keys
    remotes &&
      remotes.map((remoteName) => {
        _remotes = { ..._remotes, [remoteName]: getRemoteEntryUrl(veinFinder(remoteName), remoteName) };
      });

    console.log(
      `$: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------`
    );
    console.log(JSON.stringify({ _remotes }));
    console.log(
      `$: ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------`
    );

    this.filename = "remoteEntry.js";
    this.name = name;
    this.shared = shared;
    this.remotes = _remotes;
  }
}

module.exports = { RemoteConfig, veinFinder };