From 3f9677db6d6e9157d39cdc66f159ac026e67a9e9 Mon Sep 17 00:00:00 2001 From: fyodorovandrei <46130932+fyodorovandrei@users.noreply.github.com> Date: Wed, 1 Jan 2025 01:53:21 +0100 Subject: [PATCH] feat(storybook-addon): use new api to get the storybook virtual static modules (#3298) Co-authored-by: ScriptedAlchemy --- .changeset/tame-taxis-mix.md | 5 ++ packages/storybook-addon/README.md | 2 +- packages/storybook-addon/jest.config.ts | 2 + packages/storybook-addon/package.json | 16 ++++--- .../src/lib/storybook-addon.ts | 24 ++++------ pnpm-lock.yaml | 46 +++++++++++++++++-- 6 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 .changeset/tame-taxis-mix.md diff --git a/.changeset/tame-taxis-mix.md b/.changeset/tame-taxis-mix.md new file mode 100644 index 00000000000..61489f95999 --- /dev/null +++ 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 index 675b1c92ff7..f17f18d99ca 100644 --- 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 index 4d3eba9c9bf..d8ecedee479 100644 --- 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 index ec4026db2ba..289c4537529 100644 --- 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 index 7e1cb9bcf62..32ba5cd63c2 100644 --- 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(preset: Preset): Promise; @@ -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 = + 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 index 0a6b48499db..faa01cc23b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2615,12 +2615,15 @@ importers: '@rsbuild/core': specifier: ^1.0.19 version: 1.0.19 - '@storybook/core-common': - specifier: 7.6.20 - version: 7.6.20(encoding@0.1.13) + '@storybook/core': + specifier: ^8.4.6 + version: 8.4.7(prettier@3.3.3) '@storybook/node-logger': specifier: 7.6.20 version: 7.6.20 + jest-fixed-jsdom: + specifier: ^0.0.9 + version: 0.0.9(jest-environment-jsdom@29.7.0) webpack: specifier: 5.93.0 version: 5.93.0(@swc/core@1.7.26)(esbuild@0.18.20) @@ -18060,6 +18063,32 @@ packages: - utf-8-validate dev: true + /@storybook/core@8.4.7(prettier@3.3.3): + resolution: {integrity: sha512-7Z8Z0A+1YnhrrSXoKKwFFI4gnsLbWzr8fnDCU6+6HlDukFYh8GHRcZ9zKfqmy6U3hw2h8H5DrHsxWfyaYUUOoA==} + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true + dependencies: + '@storybook/csf': 0.1.11 + better-opn: 3.0.2 + browser-assert: 1.2.1 + esbuild: 0.18.20 + esbuild-register: 3.6.0(esbuild@0.18.20) + jsdoc-type-pratt-parser: 4.1.0 + prettier: 3.3.3 + process: 0.11.10 + recast: 0.23.9 + semver: 7.6.3 + util: 0.12.5 + ws: 8.18.0 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + dev: true + /@storybook/csf-plugin@7.6.20: resolution: {integrity: sha512-dzBzq0dN+8WLDp6NxYS4G7BCe8+vDeDRBRjHmM0xb0uJ6xgQViL8SDplYVSGnk3bXE/1WmtvyRzQyTffBnaj9Q==} dependencies: @@ -31009,6 +31038,15 @@ packages: jest-util: 29.7.0 dev: true + /jest-fixed-jsdom@0.0.9(jest-environment-jsdom@29.7.0): + resolution: {integrity: sha512-KPfqh2+sn5q2B+7LZktwDcwhCpOpUSue8a1I+BcixWLOQoEVyAjAGfH+IYZGoxZsziNojoHGRTC8xRbB1wDD4g==} + engines: {node: '>=18.0.0'} + peerDependencies: + jest-environment-jsdom: '>=28.0.0' + dependencies: + jest-environment-jsdom: 29.7.0 + dev: true + /jest-get-type@29.6.3: resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -38323,7 +38361,7 @@ packages: esprima: 4.0.1 source-map: 0.6.1 tiny-invariant: 1.3.3 - tslib: 2.6.3 + tslib: 2.8.1 /redent@3.0.0: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}