feat: support storybook dev remote app in rsbuild(rslib) project (#3131)

Co-authored-by: 2heal1 <[email protected]>

Author: nyqykk

.changeset/config.json

@@ -22,7 +22,8 @@
       "@module-federation/modern-js",
       "@module-federation/retry-plugin",
       "@module-federation/data-prefetch",
-      "@module-federation/rsbuild-plugin"
+      "@module-federation/rsbuild-plugin",
+      "@module-federation/storybook-addon"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/mean-jokes-remember.md

@@ -0,0 +1,4 @@
+---
+'@module-federation/storybook-addon': patch
+---
+feat: support storybook dev remote app in rsbuild(rslib) project [#3131](https://github.com/module-federation/core/pull/3131)

.gitignore

@@ -49,7 +49,6 @@ migrations.json
 packages/**/dist
 apps/**/dist
 
-**/@mf-types
 **/@mf-types/**
 **/cypress/downloads
 
@@ -67,3 +66,6 @@ packages/enhanced/test/js
 **/dist-test/**
 **/cypress/downloads
 /packages/data-prefetch/jest/cache/
+
+# storybook cases
+!apps/rslib-module/@mf-types/**

apps/rslib-module/.storybook/main.ts

@@ -0,0 +1,32 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+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.js',
+      options: {
+        remotes: {
+          'rslib-module':
+            'rslib-module@http://localhost:3000/mf/mf-manifest.json',
+        },
+        shareStrategy: 'loaded-first',
+      },
+    },
+  ],
+};
+
+export default config;

apps/rslib-module/@mf-types/index.d.ts

@@ -0,0 +1,34 @@
+import type {
+  PackageType as PackageType_0,
+  RemoteKeys as RemoteKeys_0,
+} from './rslib-module/apis.d.ts';
+declare module '@module-federation/runtime' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@module-federation/enhanced/runtime' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}
+declare module '@module-federation/runtime-tools' {
+  type RemoteKeys = RemoteKeys_0;
+  type PackageType<T, Y = any> = T extends RemoteKeys_0 ? PackageType_0<T> : Y;
+  export function loadRemote<T extends RemoteKeys, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+  export function loadRemote<T extends string, Y>(
+    packageName: T,
+  ): Promise<PackageType<T, Y>>;
+}

apps/rslib-module/@mf-types/rslib-module/apis.d.ts

@@ -0,0 +1,4 @@
+export type RemoteKeys = 'rslib-module';
+type PackageType<T> = T extends 'rslib-module'
+  ? typeof import('rslib-module')
+  : any;

apps/rslib-module/@mf-types/rslib-module/compiled-types/CounterButton.d.ts

@@ -0,0 +1,7 @@
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+  [key: string]: any;
+}
+export declare const CounterButton: React.FC<CounterButtonProps>;
+export {};

apps/rslib-module/@mf-types/rslib-module/compiled-types/index.d.ts

@@ -0,0 +1 @@
+export declare const Counter: React.FC;

apps/rslib-module/@mf-types/rslib-module/compiled-types/useCounter.d.ts

@@ -0,0 +1,5 @@
+export declare const useCounter: (initialValue?: number) => {
+  count: number;
+  increment: () => void;
+  decrement: () => void;
+};

apps/rslib-module/@mf-types/rslib-module/index.d.ts

@@ -0,0 +1,2 @@
+export * from './compiled-types/index';
+export { default } from './compiled-types/index';