feat(storybook-addon): use new api to get the storybook virtual static modules (#3298)

fyodorovandrei · ScriptedAlchemy · web-flow · commit 3f9677db6d6e · 2024-12-31T16:53:21.000-08:00
Co-authored-by: ScriptedAlchemy &lt;zackary.l.jackson@gmail.com&gt;
diff --git a/.changeset/tame-taxis-mix.md b/.changeset/tame-taxis-mix.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/storybook-addon': major
+---
+
+Use new api to get the virtual static modules
diff --git a/packages/storybook-addon/README.md b/packages/storybook-addon/README.md
@@ -45,7 +45,7 @@ module.exports = storybookConfig;
 
 ### Rsbuild App or Rslib Module
 
-```
+```js
 import { dirname, join } from 'node:path';
 import type { StorybookConfig } from 'storybook-react-rsbuild';
 
diff --git a/packages/storybook-addon/jest.config.ts b/packages/storybook-addon/jest.config.ts
@@ -12,4 +12,6 @@ export default {
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/storybook-addon',
+  // https://mswjs.io/docs/migrations/1.x-to-2.x#requestresponsetextencoder-is-not-defined-jest
+  testEnvironment: 'jest-fixed-jsdom',
 };
diff --git a/packages/storybook-addon/package.json b/packages/storybook-addon/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/storybook-addon",
-  "version": "3.0.18",
+  "version": "3.1.0",
   "description": "Storybook addon to consume remote module federated apps/components",
   "type": "commonjs",
   "license": "MIT",
@@ -53,28 +53,30 @@
     "@module-federation/sdk": "workspace:*"
   },
   "devDependencies": {
+    "jest-fixed-jsdom": "^0.0.9",
     "@module-federation/utilities": "workspace:*",
     "@rsbuild/core": "^1.0.19",
-    "@storybook/core-common": "7.6.20",
     "@storybook/node-logger": "7.6.20",
+    "@storybook/core": "^8.4.6",
     "webpack": "5.93.0",
     "webpack-virtual-modules": "0.6.2"
   },
   "peerDependencies": {
     "@rsbuild/core": "^1.0.1",
     "@module-federation/utilities": "^3.1.38",
+    "@module-federation/sdk": "^0.8.0",
     "@nx/react": ">= 16.0.0",
     "@nx/webpack": ">= 16.0.0",
-    "@storybook/core-common": "^6.5.16 || ^7.0.0 || ^ 8.0.0",
-    "@storybook/node-logger": "^6.5.16 || ^7.0.0 || ^ 8.0.0",
+    "@storybook/core": ">= 8.2.0",
+    "@storybook/node-logger": "^6.5.16 || ^7.0.0 || ^8.0.0",
     "webpack": "^5.75.0",
-    "webpack-virtual-modules": "^0.5.0 || ^0.6.0"
+    "webpack-virtual-modules": "0.6.2"
   },
   "peerDependenciesMeta": {
     "@rsbuild/core": {
       "optional": true
     },
-    "@module-federation/utilities": {
+    "@module-federation/sdk": {
       "optional": true
     },
     "@nx/react": {
@@ -83,7 +85,7 @@
     "@nx/webpack": {
       "optional": true
     },
-    "@storybook/core-common": {
+    "@storybook/core": {
       "optional": true
     },
     "@storybook/node-logger": {
diff --git a/packages/storybook-addon/src/lib/storybook-addon.ts b/packages/storybook-addon/src/lib/storybook-addon.ts
@@ -2,24 +2,21 @@ import fs from 'fs';
 import { dirname, join } from 'path';
 import * as process from 'process';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
-import { container, Configuration } from 'webpack';
+import { container, type Configuration } from 'webpack';
 import { logger } from '@storybook/node-logger';
-// NOTE: @storybook/core-common is deprecated while still available, considering importing
-// from 'storybook/internal/common' or '@storybook/core'. Considering requires Storybook 8
-// at least and change this in the next breaking change version.
-import { normalizeStories } from '@storybook/core-common';
-import { ModuleFederationPluginOptions } from '@module-federation/utilities';
-
-import { ModuleFederationConfig } from '@nx/webpack';
+import { normalizeStories } from '@storybook/core/common';
 import withModuleFederation from '../utils/with-module-federation';
 import { correctImportPath } from '../utils/correctImportPath';
 
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+import type { ModuleFederationConfig } from '@nx/webpack';
+
 const { ModuleFederationPlugin } = container;
 
 export type Preset = string | { name: string };
 
 type Options = {
-  moduleFederationConfig?: ModuleFederationPluginOptions;
+  moduleFederationConfig?: moduleFederationPlugin.ModuleFederationPluginOptions;
   nxModuleFederationConfig?: ModuleFederationConfig;
   presets: {
     apply<T>(preset: Preset): Promise<T>;
@@ -70,17 +67,16 @@ export const webpack = async (
   );
 
   const index = plugins.findIndex(
-    //@ts-ignore
-    (plugin) => plugin.constructor.name === 'VirtualModulesPlugin',
+    (plugin) => plugin?.constructor.name === 'VirtualModulesPlugin',
   );
 
   if (index !== -1) {
     logger.info(`=> [MF] Detected plugin VirtualModulesPlugin`);
 
-    /* eslint-disable  @typescript-eslint/no-explicit-any */
-    const plugin = plugins[index] as any;
+    const plugin = plugins[index] as VirtualModulesPlugin;
 
-    const virtualEntries = plugin._staticModules; // TODO: Exist another way to get virtual modules? Or maybe it's good idea to open a PR adding a method to get modules?
+    const virtualEntries: Record<string, string> =
+      plugin.getModuleList('static');
     const virtualEntriesPaths: string[] = Object.keys(virtualEntries);
 
     logger.info(`=> [MF] Write files from VirtualModulesPlugin`);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@module-federation/storybook-addon': major
 +---
++
 +Use new api to get the virtual static modules