@module-federation/storybook-addon 0.0.0-docs-remove-invalid-lark-link-20251205062649

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+# Storybook addon for Module Federation
+
+This addon enables to consume remote Module Federated apps/components
+
+## Install
+
+```shell
+# with NPM
+npm install @module-federation/storybook-addon
+
+# with Yarn
+yarn add @module-federation/storybook-addon
+```
+
+## Configuration
+
+In file `./storybook/main.js`:
+
+```js
+const moduleFederationConfig = {
+  // Module Federation config
+};
+
+const storybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // other addons,
+    {
+      name: '@module-federation/storybook-addon',
+      options: {
+        moduleFederationConfig,
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
+  },
+};
+
+module.exports = storybookConfig;
+```
+
+---
+
+### Rsbuild App or Rslib Module
+
+```js
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  framework: {
+    name: getAbsolutePath('storybook-react-rsbuild'),
+    options: {},
+  },
+  addons: [
+    {
+      name: '@module-federation/storybook-addon/preset',
+      options: {
+        // add remote here and then you can load remote in your story
+        remotes: {
+          'rslib-module':
+            'rslib-module@http://localhost:3000/mf/mf-manifest.json',
+        },
+      },
+    },
+  ],
+};
+
+export default config;
+
+```
+
+### For the [NX](https://nx.dev/getting-started/intro) projects:
+
+Replace NX utils `withModuleFederation` in `webpack.config.js` with our utils `withModuleFederation`.
+Example:
+
+```javascript
+const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
+const { withModuleFederation } = require('@module-federation/storybook-addon');
+
+const baseConfig = require('./module-federation.config');
+
+const config = {
+  ...baseConfig,
+};
+
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));
+```
+
+In file `./storybook/main.js`:
+
+```js
+const nxModuleFederationConfig = {
+  // Module Federation config
+};
+
+const storybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // other addons,
+    {
+      name: '@module-federation/storybook-addon',
+      options: {
+        nxModuleFederationConfig,
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
+  },
+};
+
+module.exports = storybookConfig;
+```
+
+## Usage
+
+```jsx
+import React, { Suspense } from 'react';
+
+const LazyButton = React.lazy(() => import('remote/Button'));
+
+const Button = (props) => (
+  <Suspense fallback={<p>Please wait...</p>}>
+    <LazyButton {...props} />
+  </Suspense>
+);
+
+export default {
+  title: 'ModuleFederation/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+  },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({ variant: 'primary' });
+Primary.args = {
+  variant: 'primary',
+  children: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: 'secondary',
+  children: 'Button',
+};
+```

package/dist/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@module-federation/storybook-addon",
+  "version": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+  "description": "Storybook addon to consume remote module federated apps/components",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/module-federation/core.git",
+    "directory": "packages/storybook-addon"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "module-federation",
+    "typescript",
+    "storybook",
+    "rsbuild",
+    "storybook-rsbuild",
+    "addon"
+  ],
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "author": "Fiodorov Andrei <hello@fyodorovandrei.com> (https://github.com/fyodorovandrei)",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ],
+      "preset": [
+        "./dist/preset.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "workspace:*",
+    "@module-federation/sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "jest-fixed-jsdom": "^0.0.9",
+    "@module-federation/utilities": "workspace:*",
+    "@rsbuild/core": "^1.3.21",
+    "@storybook/node-logger": "7.6.20",
+    "@storybook/core": "^8.4.6",
+    "webpack": "5.94.0",
+    "webpack-virtual-modules": "0.6.2"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1.0.1",
+    "@module-federation/sdk": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+    "@nx/react": ">= 16.0.0",
+    "@nx/webpack": ">= 16.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.6.2"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    },
+    "@module-federation/sdk": {
+      "optional": true
+    },
+    "@nx/react": {
+      "optional": true
+    },
+    "@nx/webpack": {
+      "optional": true
+    },
+    "@storybook/core": {
+      "optional": true
+    },
+    "@storybook/node-logger": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    },
+    "webpack-virtual-modules": {
+      "optional": true
+    }
+  },
+  "module": "./src/index.js"
+}

package/dist/preset.d.ts

@@ -0,0 +1,7 @@
+import type { RsbuildConfig } from '@rsbuild/core';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+declare const _default: {
+    rsbuildFinal: (config: RsbuildConfig, options: moduleFederationPlugin.ModuleFederationPluginOptions) => RsbuildConfig;
+};
+export default _default;
+export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild.js';

package/dist/preset.js

@@ -0,0 +1,14 @@
+import { withModuleFederation } from './src/utils/with-module-federation-enhanced-rsbuild.js';
+export default {
+    rsbuildFinal: (config, options) => {
+        const { remotes, shared, name, shareStrategy } = options;
+        return withModuleFederation(config, {
+            name,
+            remotes,
+            shared,
+            shareStrategy,
+        });
+    },
+};
+export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild.js';
+//# sourceMappingURL=preset.js.map

package/dist/preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preset.js","sourceRoot":"","sources":["../preset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wDAAwD,CAAC;AAK9F,eAAe;IACb,YAAY,EAAE,CACZ,MAAqB,EACrB,OAA6D,EAC7D,EAAE;QACF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC;QAEzD,OAAO,oBAAoB,CAAC,MAAM,EAAE;YAClC,IAAI;YACJ,OAAO;YACP,MAAM;YACN,aAAa;SACd,CAAC,CAAC;IACL,CAAC;CACF,CAAC;AACF,OAAO,EAAE,WAAW,EAAE,MAAM,wDAAwD,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/storybook-addon.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/storybook-addon.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/src/lib/storybook-addon.d.ts

@@ -0,0 +1,17 @@
+import { type Configuration } from 'webpack';
+import withModuleFederation from '../utils/with-module-federation.js';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+import type { ModuleFederationConfig } from '@nx/webpack';
+export type Preset = string | {
+    name: string;
+};
+type Options = {
+    moduleFederationConfig?: moduleFederationPlugin.ModuleFederationPluginOptions;
+    nxModuleFederationConfig?: ModuleFederationConfig;
+    presets: {
+        apply<T>(preset: Preset): Promise<T>;
+    };
+    configDir: string;
+};
+export { withModuleFederation };
+export declare const webpack: (webpackConfig: Configuration, options: Options) => Promise<Configuration>;

package/dist/src/lib/storybook-addon.js

@@ -0,0 +1,128 @@
+import fs from 'fs';
+import { dirname, join } from 'path';
+import * as process from 'process';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+import { container, } from 'webpack';
+import { normalizeStories } from '@storybook/core/common';
+import withModuleFederation from '../utils/with-module-federation.js';
+import { correctImportPath } from '../utils/correctImportPath.js';
+// TODO: Only reserve `storybook/internal/node-logger` in next major release.
+// Dynamic import for logger to support multiple Storybook versions
+async function getLogger() {
+    try {
+        // Try high version first (since Storybook 9)
+        const mod = await import('storybook/internal/node-logger');
+        return mod.logger;
+    }
+    catch {
+        // Fallback to low version
+        const mod = await import('@storybook/node-logger');
+        return mod.logger;
+    }
+}
+const { ModuleFederationPlugin } = container;
+export { withModuleFederation };
+export const webpack = async (webpackConfig, options) => {
+    const { plugins = [], context: webpackContext } = webpackConfig;
+    const { moduleFederationConfig, presets, nxModuleFederationConfig } = options;
+    const context = webpackContext || process.cwd();
+    // Get logger instance (supports multiple Storybook versions)
+    const logger = await getLogger();
+    // Detect webpack version. More about storybook webpack config https://storybook.js.org/docs/react/addons/writing-presets#webpack
+    const webpackVersion = await presets.apply('webpackVersion');
+    logger.info(`=> [MF] Webpack ${webpackVersion} version detected`);
+    if (webpackVersion !== '5') {
+        throw new Error('Webpack 5 required: Configure Storybook to use the webpack5 builder');
+    }
+    if (nxModuleFederationConfig) {
+        logger.info(`=> [MF] Detect NX configuration`);
+        const wmf = await withModuleFederation(nxModuleFederationConfig);
+        webpackConfig = {
+            ...webpackConfig,
+            ...wmf(webpackConfig),
+        };
+    }
+    if (moduleFederationConfig) {
+        logger.info(`=> [MF] Push Module Federation plugin`);
+        // @ts-ignore enhanced add new remoteType 'module-import'
+        plugins.push(new ModuleFederationPlugin(moduleFederationConfig));
+    }
+    const entries = await presets.apply('entries');
+    const bootstrap = entries.map((entryFile) => `import '${correctImportPath(context, entryFile)}';`);
+    const index = plugins.findIndex((plugin) => plugin?.constructor.name === 'VirtualModulesPlugin');
+    if (index !== -1) {
+        logger.info(`=> [MF] Detected plugin VirtualModulesPlugin`);
+        const plugin = plugins[index];
+        const virtualEntries = plugin.getModuleList('static');
+        const virtualEntriesPaths = Object.keys(virtualEntries);
+        logger.info(`=> [MF] Write files from VirtualModulesPlugin`);
+        for (const virtualEntryPath of virtualEntriesPaths) {
+            const nodeModulesPath = '/node_modules/';
+            const filePathFromProjectRootDir = virtualEntryPath.replace(context, '');
+            let sourceCode = virtualEntries[virtualEntryPath];
+            let finalPath = virtualEntryPath;
+            let finalDir = dirname(virtualEntryPath);
+            // If virtual file is not in directory node_modules, move file in directory node_modules/.cache/storybook
+            if (!filePathFromProjectRootDir.startsWith(nodeModulesPath)) {
+                finalPath = join(context, nodeModulesPath, '.cache', 'storybook', filePathFromProjectRootDir);
+                finalDir = dirname(finalPath);
+                // Fix storybook stories' path in virtual module
+                if (
+                // For storybook version before 7
+                filePathFromProjectRootDir === '/generated-stories-entry.cjs' ||
+                    // For storybook version 7
+                    filePathFromProjectRootDir === '/storybook-stories.js') {
+                    const isStorybookVersion7 = filePathFromProjectRootDir === '/storybook-stories.js';
+                    const nonNormalizedStories = await presets.apply('stories');
+                    const stories = normalizeStories(nonNormalizedStories, {
+                        configDir: options.configDir,
+                        workingDir: context,
+                    });
+                    // For each story fix the import path
+                    stories.forEach((story) => {
+                        // Go up 3 times because the file was moved in /node_modules/.cache/storybook
+                        const newDirectory = join('..', '..', '..', story.directory);
+                        // Adding trailing slash for story directory in storybook v7
+                        const oldSrc = isStorybookVersion7
+                            ? `'${story.directory}/'`
+                            : `'${story.directory}'`;
+                        const newSrc = isStorybookVersion7
+                            ? `'${newDirectory}/'`
+                            : `'${newDirectory}'`;
+                        // Fix story directory
+                        sourceCode = sourceCode.replace(oldSrc, newSrc);
+                    });
+                }
+            }
+            if (!fs.existsSync(finalDir)) {
+                fs.mkdirSync(finalDir, { recursive: true });
+            }
+            fs.writeFileSync(finalPath, sourceCode);
+            bootstrap.push(`import '${correctImportPath(context, finalPath)}';`);
+        }
+    }
+    /**
+     * Create a new VirtualModulesPlugin plugin to fix error "Shared module is not available for eager consumption"
+     * Entry file content is moved in bootstrap file. More details in the webpack documentation:
+     * https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption
+     * */
+    const virtualModulePlugin = new VirtualModulesPlugin({
+        './__entry.js': `import('./__bootstrap.js');`,
+        './__bootstrap.js': bootstrap.join('\n'),
+    });
+    let action = 'Push';
+    if (index === -1) {
+        plugins.push(virtualModulePlugin);
+    }
+    else {
+        plugins[index] = virtualModulePlugin;
+        action = 'Replace';
+    }
+    logger.info(`=> [MF] ${action} plugin VirtualModulesPlugin to bootstrap entry point`);
+    return {
+        ...webpackConfig,
+        entry: ['./__entry.js'],
+        plugins,
+    };
+};
+//# sourceMappingURL=storybook-addon.js.map

package/dist/src/lib/storybook-addon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storybook-addon.js","sourceRoot":"","sources":["../../../src/lib/storybook-addon.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/correctImportPath.d.ts

@@ -0,0 +1 @@
+export declare const correctImportPath: (context: string, entryFile: string) => any;

package/dist/src/utils/correctImportPath.js

@@ -0,0 +1,20 @@
+export const correctImportPath = (context, entryFile) => {
+    if (typeof process !== 'undefined') {
+        if (process?.platform !== 'win32') {
+            return entryFile;
+        }
+        if (entryFile.match(/^\.?\.\\/) || !entryFile.match(/^[A-Z]:\\\\/i)) {
+            return entryFile.replace(/\\/g, '/');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const path = require('path');
+        const joint = path.win32.relative(context, entryFile);
+        const relative = joint.replace(/\\/g, '/');
+        if (relative.includes('node_modules/')) {
+            return relative.split('node_modules/')[1];
+        }
+        return `./${relative}`;
+    }
+    return null;
+};
+//# sourceMappingURL=correctImportPath.js.map

package/dist/src/utils/correctImportPath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"correctImportPath.js","sourceRoot":"","sources":["../../../src/utils/correctImportPath.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,SAAiB,EAAE,EAAE;IACtE,IAAI,OAAO,OAAO,KAAK,WAAW,EAAE,CAAC;QACnC,IAAI,OAAO,EAAE,QAAQ,KAAK,OAAO,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC;YACpE,OAAO,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QACvC,CAAC;QAED,8DAA8D;QAC9D,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE3C,IAAI,QAAQ,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;YACvC,OAAO,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,KAAK,QAAQ,EAAE,CAAC;IACzB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/dist/src/utils/with-module-federation-enhanced-rsbuild.d.ts

@@ -0,0 +1,5 @@
+import type { RsbuildConfig } from '@rsbuild/core';
+import type { moduleFederationPlugin } from '@module-federation/sdk';
+export declare const PLUGIN_NAME = "module-federation-storybook-addon";
+export declare const withModuleFederation: (rsbuildConfig: RsbuildConfig, options: moduleFederationPlugin.ModuleFederationPluginOptions) => RsbuildConfig;
+export default withModuleFederation;

package/dist/src/utils/with-module-federation-enhanced-rsbuild.js

@@ -0,0 +1,72 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { TEMP_DIR } from '@module-federation/sdk';
+import { correctImportPath } from './correctImportPath.js';
+const tempDirPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}`);
+export const PLUGIN_NAME = 'module-federation-storybook-addon';
+// add bootstrap for host project
+const bootstrapPath = path.resolve(process.cwd(), `node_modules/${TEMP_DIR}/storybook-bootstrap.js`);
+const generateBootstrap = (context, entryPath) => {
+    return `import('${correctImportPath(context, entryPath)}');`;
+};
+const writeBootstrap = (context, entryPath) => {
+    if (!fs.existsSync(tempDirPath)) {
+        fs.mkdirSync(tempDirPath);
+    }
+    if (fs.existsSync(bootstrapPath)) {
+        fs.unlinkSync(bootstrapPath);
+    }
+    fs.writeFileSync(bootstrapPath, generateBootstrap(context, entryPath));
+};
+export const withModuleFederation = (rsbuildConfig, options) => {
+    rsbuildConfig.plugins ??= [];
+    rsbuildConfig.source ??= {};
+    rsbuildConfig.source.entry ??= {};
+    const entry = rsbuildConfig.source.entry;
+    const context = rsbuildConfig.root || process.cwd();
+    for (const entryName in entry) {
+        if (Array.isArray(entry[entryName])) {
+            writeBootstrap(context, entry[entryName][0]);
+            entry[entryName] = [bootstrapPath];
+        }
+    }
+    const rsbuildPlugin = {
+        name: 'module-federation-storybook-plugin',
+        setup: function (api) {
+            api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
+                const mfConfig = {
+                    dev: {
+                        // remoteEntry already includes one hmr runtime, and an additional one is not necessary.
+                        hmr: false,
+                    },
+                };
+                return mergeRsbuildConfig(config, mfConfig);
+            });
+            api.modifyBundlerChain(async (chain) => {
+                chain.plugin(PLUGIN_NAME).use(ModuleFederationPlugin, [
+                    {
+                        name: options.name || PLUGIN_NAME,
+                        shared: {
+                            react: {
+                                singleton: true,
+                            },
+                            'react-dom': {
+                                singleton: true,
+                            },
+                            ...options.shared,
+                        },
+                        remotes: {
+                            ...options.remotes,
+                        },
+                        shareStrategy: options.shareStrategy,
+                    },
+                ]);
+            });
+        },
+    };
+    rsbuildConfig.plugins.push(rsbuildPlugin);
+    return rsbuildConfig;
+};
+export default withModuleFederation;
+//# sourceMappingURL=with-module-federation-enhanced-rsbuild.js.map

package/dist/src/utils/with-module-federation-enhanced-rsbuild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-module-federation-enhanced-rsbuild.js","sourceRoot":"","sources":["../../../src/utils/with-module-federation-enhanced-rsbuild.ts"],"names":[],"mappings":"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"}

package/dist/src/utils/with-module-federation.d.ts

@@ -0,0 +1,4 @@
+import { Configuration } from 'webpack';
+import { ModuleFederationConfig } from '@nx/webpack';
+declare const withModuleFederation: (options: ModuleFederationConfig) => Promise<(config: Configuration) => Configuration>;
+export default withModuleFederation;

package/dist/src/utils/with-module-federation.js

@@ -0,0 +1,33 @@
+import { getModuleFederationConfig } from '@nx/module-federation/src/with-module-federation/webpack/utils';
+import { container } from 'webpack';
+const { ModuleFederationPlugin } = container;
+const updateMappedRemotes = (remotes) => {
+    const newRemotes = {};
+    Object.keys(remotes).forEach((key) => {
+        newRemotes[key] = `${key}@${remotes[key]}`;
+    });
+    return newRemotes;
+};
+const withModuleFederation = async (options) => {
+    const { mappedRemotes, sharedDependencies } = await getModuleFederationConfig(options);
+    return (config) => {
+        config.experiments = { outputModule: false };
+        config.optimization = {
+            runtimeChunk: false,
+        };
+        config.output = {
+            publicPath: 'auto',
+        };
+        config.plugins = config.plugins || [];
+        config.plugins.push(new ModuleFederationPlugin({
+            name: options.name,
+            filename: 'remoteEntry.js',
+            shared: sharedDependencies,
+            exposes: options.exposes,
+            remotes: updateMappedRemotes(mappedRemotes),
+        }));
+        return config;
+    };
+};
+export default withModuleFederation;
+//# sourceMappingURL=with-module-federation.js.map

package/dist/src/utils/with-module-federation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-module-federation.js","sourceRoot":"","sources":["../../../src/utils/with-module-federation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gEAAgE,CAAC;AAC3G,OAAO,EAAE,SAAS,EAAiB,MAAM,SAAS,CAAC;AAInD,MAAM,EAAE,sBAAsB,EAAE,GAAG,SAAS,CAAC;AAE7C,MAAM,mBAAmB,GAAG,CAAC,OAA+B,EAAE,EAAE;IAC9D,MAAM,UAAU,GAA2B,EAAE,CAAC;IAE9C,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACnC,UAAU,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,KAAK,EAAE,OAA+B,EAAE,EAAE;IACrE,MAAM,EAAE,aAAa,EAAE,kBAAkB,EAAE,GACzC,MAAM,yBAAyB,CAAC,OAAO,CAAC,CAAC;IAE3C,OAAO,CAAC,MAAqB,EAAE,EAAE;QAC/B,MAAM,CAAC,WAAW,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;QAE7C,MAAM,CAAC,YAAY,GAAG;YACpB,YAAY,EAAE,KAAK;SACpB,CAAC;QAEF,MAAM,CAAC,MAAM,GAAG;YACd,UAAU,EAAE,MAAM;SACnB,CAAC;QAEF,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,IAAI,CACjB,IAAI,sBAAsB,CAAC;YACzB,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,QAAQ,EAAE,gBAAgB;YAC1B,MAAM,EAAE,kBAAkB;YAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,OAAO,EAAE,mBAAmB,CAAC,aAAa,CAAC;SAC5C,CAAC,CACH,CAAC;QAEF,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@module-federation/storybook-addon",
+  "version": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+  "description": "Storybook addon to consume remote module federated apps/components",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/module-federation/core.git",
+    "directory": "packages/storybook-addon"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "module-federation",
+    "typescript",
+    "storybook",
+    "rsbuild",
+    "storybook-rsbuild",
+    "addon"
+  ],
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "author": "Fiodorov Andrei <hello@fyodorovandrei.com> (https://github.com/fyodorovandrei)",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "default": "./dist/preset.js"
+    },
+    "./*": "./*"
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ],
+      "preset": [
+        "./dist/preset.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+    "@module-federation/sdk": "0.0.0-docs-remove-invalid-lark-link-20251205062649"
+  },
+  "devDependencies": {
+    "jest-fixed-jsdom": "^0.0.9",
+    "@rsbuild/core": "^1.3.21",
+    "@storybook/node-logger": "7.6.20",
+    "@storybook/core": "^8.4.6",
+    "webpack": "5.94.0",
+    "webpack-virtual-modules": "0.6.2",
+    "@module-federation/utilities": "0.0.0-docs-remove-invalid-lark-link-20251205062649"
+  },
+  "peerDependencies": {
+    "@rsbuild/core": "^1.0.1",
+    "@module-federation/sdk": "0.0.0-docs-remove-invalid-lark-link-20251205062649",
+    "@nx/react": ">= 16.0.0",
+    "@nx/webpack": ">= 16.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.6.2"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    },
+    "@module-federation/sdk": {
+      "optional": true
+    },
+    "@nx/react": {
+      "optional": true
+    },
+    "@nx/webpack": {
+      "optional": true
+    },
+    "@storybook/core": {
+      "optional": true
+    },
+    "@storybook/node-logger": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    },
+    "webpack-virtual-modules": {
+      "optional": true
+    }
+  }
+}