@sima-land/isomorph 11.0.0-alpha.4 → 11.0.0-alpha.40

package/src/utils/webpack/module-federation/__test__/__snapshots__/utils.test.ts.snap

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DEFAULT_SHARED should match reference 1`] = `
+Array [
+  Object {
+    "react": Object {
+      "singleton": true,
+    },
+    "react-dom": Object {
+      "singleton": true,
+    },
+  },
+  "react/jsx-runtime",
+  "react-redux",
+  "@reduxjs/toolkit",
+  "redux-saga",
+  "redux-saga/",
+  "classnames",
+  "classnames/",
+  "axios",
+  "@olime/cq-ch",
+  "@sentry/browser",
+]
+`;
+
+exports[`createExternalConfig should match reference 1`] = `
+"promise new Promise((resolveProxy, rejectProxy) => {
+  let installed = false;
+  let shareScope;
+  
+  if (window[\\"entries_key\\"]) {
+    const proxy = {
+      get(request) {
+        return installed
+          ? window[\\"container_key\\"][\\"example\\"].get(request)
+          : new Promise((resolveRequest, rejectRequest) => {
+              const scriptElement = document.createElement(\\"script\\");
+
+              scriptElement.onload = () => {
+                scriptElement.remove();
+                const container = window[\\"container_key\\"][\\"example\\"];
+                try {
+                  container.init(shareScope);
+                  installed = true;
+                } catch (e) {}
+                resolveRequest(container.get(request));
+              };
+              
+              scriptElement.onerror = () => {
+                scriptElement.remove();
+                rejectRequest(
+                  new Error('Failed loading remoteEntry for \\"example\\".')
+                );
+              };
+              
+              scriptElement.src = window['entries_key']['example'];
+              
+              scriptElement.async = true;
+              document.head.append(scriptElement);
+            });
+      },
+      init(scope) {
+        shareScope = scope;
+      },
+    };
+
+    resolveProxy(proxy);
+  } else {
+    rejectProxy(
+      new ReferenceError('Object \\"entries_key\\" unavailable.')
+    );
+  }
+});"
+`;
+
+exports[`createExternalConfig should match reference 2`] = `
+"promise new Promise((resolveProxy, rejectProxy) => {
+  let installed = false;
+  let shareScope;
+  
+  if (window[\\"entries_key\\"]) {
+    const proxy = {
+      get(request) {
+        return installed
+          ? window[\\"container_key\\"][\\"example\\"].get(request)
+          : new Promise((resolveRequest, rejectRequest) => {
+              const scriptElement = document.createElement(\\"script\\");
+
+              scriptElement.onload = () => {
+                scriptElement.remove();
+                const container = window[\\"container_key\\"][\\"example\\"];
+                try {
+                  container.init(shareScope);
+                  installed = true;
+                } catch (e) {}
+                resolveRequest(container.get(request));
+              };
+              
+              scriptElement.onerror = () => {
+                scriptElement.remove();
+                rejectRequest(
+                  new Error('Failed loading remoteEntry for \\"example\\".')
+                );
+              };
+              
+              scriptElement.src = 'path/to/cdn/example/1.0.0/remoteEntry.hash.js';
+              
+              scriptElement.async = true;
+              document.head.append(scriptElement);
+            });
+      },
+      init(scope) {
+        shareScope = scope;
+      },
+    };
+
+    resolveProxy(proxy);
+  } else {
+    rejectProxy(
+      new ReferenceError('Object \\"entries_key\\" unavailable.')
+    );
+  }
+});"
+`;

package/src/utils/webpack/module-federation/__test__/index.test.ts

@@ -0,0 +1,311 @@
+import { container, Compiler } from 'webpack';
+import { DEFAULT_SHARED, LIBRARY_ERROR_TEXT, ModuleFederationPlugin, REMOTE_ERROR_TEXT } from '..';
+
+jest.mock('../utils', () => ({
+  createExternalConfig: jest.fn(arg => arg),
+}));
+
+jest.mock('webpack', () => {
+  class ModuleFederationPluginMock {
+    static __spy__ = { constructor: jest.fn(), apply: jest.fn() };
+
+    constructor(...args: any[]) {
+      ModuleFederationPluginMock.__spy__.constructor(...args);
+    }
+
+    apply(...args: any[]) {
+      ModuleFederationPluginMock.__spy__.apply(...args);
+    }
+  }
+
+  return {
+    container: {
+      ModuleFederationPlugin: ModuleFederationPluginMock,
+    },
+    WebpackError: class extends Error {},
+  };
+});
+
+function getSpy(value: any): { constructor: jest.Mock; apply: jest.Mock } {
+  return value.__spy__;
+}
+
+beforeEach(() => {
+  getSpy(container.ModuleFederationPlugin).constructor.mockClear();
+  getSpy(container.ModuleFederationPlugin).apply.mockClear();
+});
+
+describe('ModuleFederationPlugin', () => {
+  function createCompilerMock(): Compiler {
+    return {
+      hooks: {
+        environment: {
+          tap: jest.fn((name, cb) => cb()),
+        },
+      },
+    } as any;
+  }
+
+  it('constructor should have specific name', () => {
+    /**
+     * Для того чтобы не подпадать под условие из @sentry/webpack-plugin.
+     * @see {@link https://github.com/getsentry/sentry-webpack-plugin/blob/master/src/index.js#L110}
+     */
+    expect(ModuleFederationPlugin.name).not.toBe('ModuleFederationPlugin');
+  });
+
+  describe('ModuleFederationPlugin instance', () => {
+    it('should apply original plugin', () => {
+      const compiler = createCompilerMock();
+      const instance = new ModuleFederationPlugin({ name: 'test-module' });
+
+      expect(getSpy(container.ModuleFederationPlugin).apply).toBeCalledTimes(0);
+
+      instance.apply(compiler);
+
+      expect(getSpy(container.ModuleFederationPlugin).apply).toBeCalledTimes(1);
+      expect(getSpy(container.ModuleFederationPlugin).apply).toBeCalledWith(compiler);
+    });
+
+    it('should not creat and throw error, if library property pass to plugin', () => {
+      expect(() => {
+        new ModuleFederationPlugin({ library: 'test' } as any);
+      }).toThrowError(LIBRARY_ERROR_TEXT);
+    });
+
+    it('should not creat and throw error, if remotes property incorrect', () => {
+      expect(() => {
+        new ModuleFederationPlugin({ remotes: { remoteOne: {} } } as any);
+      }).toThrowError(REMOTE_ERROR_TEXT);
+    });
+  });
+
+  describe('ModuleFederationPlugin instance should create with correct arguments', () => {
+    it('for remotes', () => {
+      const compiler = createCompilerMock();
+      const instance = new ModuleFederationPlugin({
+        name: 'service-name',
+        remotes: {
+          firstRemote: 'first-remote-service',
+          secondRemote: 'second-remote-service',
+        },
+      });
+
+      instance.apply(compiler);
+
+      expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+        name: 'service-name',
+        library: {
+          type: 'global',
+          name: ['__FederationContainers__', 'service-name'],
+        },
+        remotes: {
+          firstRemote: {
+            external: {
+              serviceName: 'first-remote-service',
+              remoteEntriesGlobalKey: '__RemoteEntriesList__',
+              containersGlobalKey: '__FederationContainers__',
+            },
+          },
+          secondRemote: {
+            external: {
+              serviceName: 'second-remote-service',
+              remoteEntriesGlobalKey: '__RemoteEntriesList__',
+              containersGlobalKey: '__FederationContainers__',
+            },
+          },
+        },
+      });
+    });
+
+    it('for remotes with custom global variables name', () => {
+      const compiler = createCompilerMock();
+      const instance = new ModuleFederationPlugin({
+        name: 'service-name',
+        remotes: {
+          firstRemote: 'first-remote-service',
+          secondRemote: 'second-remote-service',
+        },
+        remoteEntriesGlobalKey: 'remotes-entry-key',
+        containersGlobalKey: 'containers-key',
+      });
+
+      instance.apply(compiler);
+      expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+        name: 'service-name',
+        library: {
+          type: 'global',
+          name: ['containers-key', 'service-name'],
+        },
+        remotes: {
+          firstRemote: {
+            external: {
+              serviceName: 'first-remote-service',
+              remoteEntriesGlobalKey: 'remotes-entry-key',
+              containersGlobalKey: 'containers-key',
+            },
+          },
+          secondRemote: {
+            external: {
+              serviceName: 'second-remote-service',
+              remoteEntriesGlobalKey: 'remotes-entry-key',
+              containersGlobalKey: 'containers-key',
+            },
+          },
+        },
+      });
+    });
+
+    it('for various remote type', () => {
+      const compiler = createCompilerMock();
+
+      const instance = new ModuleFederationPlugin({
+        name: 'service-name',
+        remotes: {
+          firstRemote: 'first-remote-service',
+          secondRemote: {
+            name: 'second-remote-service',
+          },
+          thirdRemote: {
+            name: 'third-remote-service',
+            remoteEntryPath: '//example.com/path/to/RemoteEntry.js',
+          },
+        },
+      });
+
+      instance.apply(compiler);
+      expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+        name: 'service-name',
+        library: {
+          type: 'global',
+          name: ['__FederationContainers__', 'service-name'],
+        },
+        remotes: {
+          firstRemote: {
+            external: {
+              serviceName: 'first-remote-service',
+              remoteEntriesGlobalKey: '__RemoteEntriesList__',
+              containersGlobalKey: '__FederationContainers__',
+            },
+          },
+          secondRemote: {
+            external: {
+              serviceName: 'second-remote-service',
+              remoteEntriesGlobalKey: '__RemoteEntriesList__',
+              containersGlobalKey: '__FederationContainers__',
+            },
+          },
+          thirdRemote: {
+            external: {
+              serviceName: 'third-remote-service',
+              remoteEntriesGlobalKey: '__RemoteEntriesList__',
+              containersGlobalKey: '__FederationContainers__',
+              remoteEntryPath: '//example.com/path/to/RemoteEntry.js',
+            },
+          },
+        },
+      });
+    });
+
+    it('for exposes', () => {
+      const compiler = createCompilerMock();
+
+      const instance = new ModuleFederationPlugin({
+        name: 'service-name',
+        filename: 'path/to/RemoteEntry.js',
+        exposes: {
+          './One': './path/to/one.js',
+          './Two': './path/to/two.js',
+        },
+      });
+
+      instance.apply(compiler);
+      expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+        name: 'service-name',
+        filename: 'path/to/RemoteEntry.js',
+        library: {
+          type: 'global',
+          name: ['__FederationContainers__', 'service-name'],
+        },
+        exposes: {
+          './One': './path/to/one.js',
+          './Two': './path/to/two.js',
+        },
+      });
+    });
+
+    it('for several call "apply" method', () => {
+      const compiler = createCompilerMock();
+
+      const instance = new ModuleFederationPlugin({
+        name: 'service-name',
+      });
+
+      instance.apply(compiler);
+      instance.apply(compiler);
+
+      const calls = getSpy(container.ModuleFederationPlugin).constructor.mock.calls;
+
+      for (const key of Object.keys(calls[0][0])) {
+        expect(calls[1][0][key] === calls[0][0][key]).toBe(true);
+      }
+    });
+
+    describe('for shared', () => {
+      it('should pass default shared modules', () => {
+        const compiler = createCompilerMock();
+
+        const instance = new ModuleFederationPlugin({
+          name: 'service-name',
+        });
+
+        instance.apply(compiler);
+        expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+          name: 'service-name',
+          library: {
+            type: 'global',
+            name: ['__FederationContainers__', 'service-name'],
+          },
+          shared: DEFAULT_SHARED,
+        });
+      });
+
+      it('should pass shared modules from options', () => {
+        const compiler = createCompilerMock();
+
+        const instance = new ModuleFederationPlugin({
+          name: 'service-name',
+          shared: { module: '^x.x.x' },
+        });
+
+        instance.apply(compiler);
+        expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+          name: 'service-name',
+          library: {
+            type: 'global',
+            name: ['__FederationContainers__', 'service-name'],
+          },
+          shared: { module: '^x.x.x' },
+        });
+      });
+
+      it('should disable default shared modules', () => {
+        const compiler = createCompilerMock();
+
+        const instance = new ModuleFederationPlugin({
+          name: 'service-name',
+          shared: false,
+        });
+
+        instance.apply(compiler);
+        expect(getSpy(container.ModuleFederationPlugin).constructor).toBeCalledWith({
+          name: 'service-name',
+          library: {
+            type: 'global',
+            name: ['__FederationContainers__', 'service-name'],
+          },
+        });
+      });
+    });
+  });
+});

package/src/utils/webpack/module-federation/__test__/utils.test.ts

@@ -0,0 +1,28 @@
+import { createExternalConfig, DEFAULT_SHARED } from '../utils';
+
+describe('createExternalConfig', () => {
+  it('should match reference', () => {
+    expect(
+      createExternalConfig({
+        serviceName: 'example',
+        containersGlobalKey: 'container_key',
+        remoteEntriesGlobalKey: 'entries_key',
+      }),
+    ).toMatchSnapshot();
+
+    expect(
+      createExternalConfig({
+        serviceName: 'example',
+        containersGlobalKey: 'container_key',
+        remoteEntriesGlobalKey: 'entries_key',
+        remoteEntryPath: 'path/to/cdn/example/1.0.0/remoteEntry.hash.js',
+      }),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('DEFAULT_SHARED', () => {
+  it('should match reference', () => {
+    expect(DEFAULT_SHARED).toMatchSnapshot();
+  });
+});

package/src/utils/webpack/module-federation/index.ts

@@ -0,0 +1,102 @@
+import type { ModuleFederationPluginOptions, ReadyOptions } from './types';
+import * as webpack from 'webpack';
+import { createExternalConfig, DEFAULT_SHARED } from './utils';
+
+const { container, WebpackError } = webpack;
+
+/** @internal */
+export const LIBRARY_ERROR_TEXT = [
+  'Property "library" set internally as "global" and not overridden.',
+  'For override global variable name use "containersGlobalKey" property.',
+  'For override "library" type use ModuleFederationPlugin.',
+].join(' ');
+
+/** @internal */
+export const REMOTE_ERROR_TEXT = [
+  'The value of the remote element must be a string,',
+  'or an object with field "name" for dynamic resolution of "remoteEntry".',
+  'Set "remoteEntryPath" field to object for a static path to "remoteEntry".',
+].join(' ');
+
+/**
+ * Создает плагин ModuleFederation с опциями, необходимыми для оркестрации удаленных модулей в браузере.
+ */
+class CustomModuleFederationPlugin {
+  /**
+   * Проверенные, готовые опции.
+   */
+  readonly readyOptions: ReadyOptions;
+
+  /**
+   * @param options Опции.
+   * @param options.shared Общие модули. Если не переданы, используются дефолтные модули.
+   * Для отключения общих модулей задать false.
+   */
+  constructor(options: ModuleFederationPluginOptions) {
+    const {
+      name,
+      remotes,
+      remoteEntriesGlobalKey = '__RemoteEntriesList__',
+      containersGlobalKey = '__FederationContainers__',
+    } = options;
+
+    if ('library' in options) {
+      throw new WebpackError(LIBRARY_ERROR_TEXT);
+    }
+
+    if (remotes) {
+      for (const value of Object.values(remotes)) {
+        if (typeof value !== 'string' && !value.name) {
+          throw new WebpackError(REMOTE_ERROR_TEXT);
+        }
+      }
+    }
+
+    this.readyOptions = {
+      ...options,
+      remoteEntriesGlobalKey,
+      containersGlobalKey,
+      library: {
+        type: 'global',
+        name: [containersGlobalKey, name],
+      },
+    };
+  }
+
+  /**
+   * @param compiler Компилятор.
+   */
+  apply(compiler: webpack.Compiler) {
+    const { remotes, remoteEntriesGlobalKey, containersGlobalKey, shared, ...restOptions } =
+      this.readyOptions;
+
+    const configuredShared = shared || DEFAULT_SHARED;
+    const configuredRemotes: Record<string, any> = {};
+
+    if (remotes) {
+      for (const [key, value] of Object.entries(remotes)) {
+        const serviceName = typeof value === 'string' ? value : value.name;
+        const remoteEntryPath = typeof value === 'string' ? undefined : value.remoteEntryPath;
+
+        configuredRemotes[key] = {
+          external: createExternalConfig({
+            serviceName,
+            remoteEntryPath,
+            remoteEntriesGlobalKey,
+            containersGlobalKey,
+          }),
+        };
+      }
+    }
+
+    compiler.hooks.environment.tap('[isomorph]ModuleFederationPlugin', () => {
+      new container.ModuleFederationPlugin({
+        ...(remotes && { remotes: configuredRemotes }),
+        ...(shared !== false && { shared: configuredShared }),
+        ...restOptions,
+      }).apply(compiler);
+    });
+  }
+}
+
+export { CustomModuleFederationPlugin as ModuleFederationPlugin, DEFAULT_SHARED };

package/src/utils/webpack/module-federation/types.ts

@@ -0,0 +1,54 @@
+import type { container } from 'webpack';
+
+/** @internal */
+export interface RemoteProperty {
+  name: string;
+  remoteEntryPath?: string;
+  version?: string;
+}
+
+/** @internal */
+export type OriginalModuleFederationPluginOptions = ConstructorParameters<
+  typeof container.ModuleFederationPlugin
+>[0];
+
+/** @internal */
+export type Shared = OriginalModuleFederationPluginOptions['shared'];
+
+/** @internal */
+export interface ModuleFederationPluginOptions {
+  /** Имя сервиса. */
+  name: string;
+
+  /** Имя удаленной точки входа. */
+  filename?: string;
+
+  /** Удаленные сервисы.  */
+  remotes?: Record<string, string | RemoteProperty>;
+
+  /** Предоставляемые сервисы. */
+  exposes?: OriginalModuleFederationPluginOptions['exposes'];
+
+  /** Общие зависимости.  */
+  shared?: Shared | false;
+
+  /** Ключ свойства в глобальном объекте,в котором хранится карта точек входа в удаленные сервисы. */
+  remoteEntriesGlobalKey?: string;
+
+  /** Ключ свойства в глобальном объекте, в который добавляются контейнеры удаленных сервисов. */
+  containersGlobalKey?: string;
+}
+
+/** @internal */
+export type ReadyOptions = Omit<
+  ModuleFederationPluginOptions,
+  'remoteEntriesGlobalKey' | 'containersGlobalKey'
+> &
+  Required<
+    Pick<ModuleFederationPluginOptions, 'remoteEntriesGlobalKey' | 'containersGlobalKey'>
+  > & {
+    library: Required<OriginalModuleFederationPluginOptions>['library'];
+  };
+
+/** @internal */
+export type SharedArray = Extract<Shared, Array<unknown>>;