feat(native-federation-typescript): speedup (#2341)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ilteoood

packages/native-federation-tests/src/index.ts

@@ -55,7 +55,7 @@ export const NativeFederationTestsRemote = createUnplugin(
               watchChange: (this as UnpluginOptions).writeBundle,
             };
       },
-      webpack: (compiler) => {
+      webpack(compiler) {
         compiler.options.devServer = mergeDeepRight(
           compiler.options.devServer || {},
           {
@@ -65,7 +65,7 @@ export const NativeFederationTestsRemote = createUnplugin(
           },
         );
       },
-      rspack: (compiler) => {
+      rspack(compiler) {
         compiler.options.devServer = mergeDeepRight(
           compiler.options.devServer || {},
           {

packages/native-federation-typescript/package.json

@@ -56,7 +56,8 @@
     "ansi-colors": "^4.1.3",
     "axios": "^1.6.7",
     "rambda": "^9.1.0",
-    "unplugin": "^1.9.0"
+    "unplugin": "^1.9.0",
+    "piscina": "^4.4.0"
   },
   "peerDependencies": {
     "typescript": "^4.9.0 || ^5.0.0",

packages/native-federation-typescript/src/index.test.ts

@@ -75,6 +75,10 @@ describe('index', () => {
                 children: [
                   { name: 'archiveHandler.d.ts' },
                   { name: 'typeScriptCompiler.d.ts' },
+                  {
+                    name: 'writeBundle',
+                    children: [{ name: 'host.d.ts' }, { name: 'remote.d.ts' }],
+                  },
                 ],
               },
             ],
@@ -237,6 +241,13 @@ describe('index', () => {
                     children: [
                       { name: 'archiveHandler.d.ts' },
                       { name: 'typeScriptCompiler.d.ts' },
+                      {
+                        name: 'writeBundle',
+                        children: [
+                          { name: 'host.d.ts' },
+                          { name: 'remote.d.ts' },
+                        ],
+                      },
                     ],
                   },
                 ],

packages/native-federation-typescript/src/index.ts

@@ -1,5 +1,4 @@
 import ansiColors from 'ansi-colors';
-import { rm } from 'fs/promises';
 import { resolve } from 'path';
 import { mergeDeepRight } from 'rambda';
 import { UnpluginOptions, createUnplugin } from 'unplugin';
@@ -8,31 +7,22 @@ import { retrieveHostConfig } from './configurations/hostPlugin';
 import { retrieveRemoteConfig } from './configurations/remotePlugin';
 import { HostOptions } from './interfaces/HostOptions';
 import { RemoteOptions } from './interfaces/RemoteOptions';
-import { createTypesArchive, downloadTypesArchive } from './lib/archiveHandler';
-import {
-  compileTs,
-  retrieveMfTypesPath,
-  retrieveOriginalOutDir,
-} from './lib/typeScriptCompiler';
+import { retrieveOriginalOutDir } from './lib/typeScriptCompiler';
+// @ts-expect-error function exported through module.exports
+import remoteWriteBundle from './lib/writeBundle/remote';
+// @ts-expect-error function exported through module.exports
+import hostWriteBundle from './lib/writeBundle/host';
 
 export const NativeFederationTypeScriptRemote = createUnplugin(
   (options: RemoteOptions) => {
-    const { remoteOptions, tsConfig, mapComponentsToExpose } =
-      retrieveRemoteConfig(options);
+    const remoteConfig = retrieveRemoteConfig(options);
+    const { remoteOptions, tsConfig } = remoteConfig;
     return {
       name: 'native-federation-typescript/remote',
       async writeBundle() {
         try {
-          compileTs(mapComponentsToExpose, tsConfig, remoteOptions);
+          await remoteWriteBundle(remoteConfig);
 
-          await createTypesArchive(tsConfig, remoteOptions);
-
-          if (remoteOptions.deleteTypesFolder) {
-            await rm(retrieveMfTypesPath(tsConfig, remoteOptions), {
-              recursive: true,
-              force: true,
-            });
-          }
           console.log(ansiColors.green('Federated types created correctly'));
         } catch (error) {
           console.error(
@@ -48,7 +38,7 @@ export const NativeFederationTypeScriptRemote = createUnplugin(
               watchChange: (this as UnpluginOptions).writeBundle,
             };
       },
-      webpack: (compiler) => {
+      webpack(compiler) {
         compiler.options.devServer = mergeDeepRight(
           compiler.options.devServer || {},
           {
@@ -60,7 +50,7 @@ export const NativeFederationTypeScriptRemote = createUnplugin(
           },
         );
       },
-      rspack: (compiler) => {
+      rspack(compiler) {
         compiler.options.devServer = mergeDeepRight(
           compiler.options.devServer || {},
           {
@@ -78,26 +68,12 @@ export const NativeFederationTypeScriptRemote = createUnplugin(
 
 export const NativeFederationTypeScriptHost = createUnplugin(
   (options: HostOptions) => {
-    const { hostOptions, mapRemotesToDownload } = retrieveHostConfig(options);
+    const hostConfig = retrieveHostConfig(options);
     return {
       name: 'native-federation-typescript/host',
       async writeBundle() {
-        if (hostOptions.deleteTypesFolder) {
-          await rm(hostOptions.typesFolder, {
-            recursive: true,
-            force: true,
-          }).catch((error) =>
-            console.error(
-              ansiColors.red(`Unable to remove types folder, ${error}`),
-            ),
-          );
-        }
-
-        const typesDownloader = downloadTypesArchive(hostOptions);
-        const downloadPromises =
-          Object.entries(mapRemotesToDownload).map(typesDownloader);
+        await hostWriteBundle(hostConfig);
 
-        await Promise.allSettled(downloadPromises);
         console.log(ansiColors.green('Federated types extraction completed'));
       },
       get vite() {

packages/native-federation-typescript/src/lib/writeBundle/host.ts

@@ -0,0 +1,40 @@
+import Piscina from 'piscina';
+import { isMainThread } from 'worker_threads';
+import { rm } from 'fs/promises';
+import ansiColors from 'ansi-colors';
+
+import { HostOptions } from '../../interfaces/HostOptions';
+import { downloadTypesArchive } from '../archiveHandler';
+
+interface HostWriteBundle {
+  hostOptions: Required<HostOptions>;
+  mapRemotesToDownload: Record<string, string>;
+}
+
+if (isMainThread) {
+  const piscina = new Piscina({ filename: __filename });
+
+  module.exports = piscina.run.bind(piscina);
+} else {
+  module.exports = async ({
+    hostOptions,
+    mapRemotesToDownload,
+  }: HostWriteBundle) => {
+    if (hostOptions.deleteTypesFolder) {
+      await rm(hostOptions.typesFolder, {
+        recursive: true,
+        force: true,
+      }).catch((error) =>
+        console.error(
+          ansiColors.red(`Unable to remove types folder, ${error}`),
+        ),
+      );
+    }
+
+    const typesDownloader = downloadTypesArchive(hostOptions);
+    const downloadPromises =
+      Object.entries(mapRemotesToDownload).map(typesDownloader);
+
+    await Promise.allSettled(downloadPromises);
+  };
+}

packages/native-federation-typescript/src/lib/writeBundle/remote.ts

@@ -0,0 +1,37 @@
+import Piscina from 'piscina';
+import ts from 'typescript';
+import { rm } from 'fs/promises';
+import { isMainThread } from 'worker_threads';
+
+import { RemoteOptions } from '../../interfaces/RemoteOptions';
+import { compileTs, retrieveMfTypesPath } from '../typeScriptCompiler';
+import { createTypesArchive } from '../archiveHandler';
+
+interface RemoteWriteBundle {
+  remoteOptions: Required<RemoteOptions>;
+  tsConfig: ts.CompilerOptions;
+  mapComponentsToExpose: Record<string, string>;
+}
+
+if (isMainThread) {
+  const piscina = new Piscina({ filename: __filename });
+
+  module.exports = piscina.run.bind(piscina);
+} else {
+  module.exports = async ({
+    remoteOptions,
+    tsConfig,
+    mapComponentsToExpose,
+  }: RemoteWriteBundle) => {
+    compileTs(mapComponentsToExpose, tsConfig, remoteOptions);
+
+    await createTypesArchive(tsConfig, remoteOptions);
+
+    if (remoteOptions.deleteTypesFolder) {
+      await rm(retrieveMfTypesPath(tsConfig, remoteOptions), {
+        recursive: true,
+        force: true,
+      });
+    }
+  };
+}