docs: polish Rslib (#170)

packages/addon-rslib/src/preset.ts

@@ -4,9 +4,7 @@ import type {
   RsbuildFinal,
   StorybookConfigRsbuild,
 } from 'storybook-builder-rsbuild'
-
-import { startMFDevServer } from './init'
-
+import { startMFDevServer } from './mf'
 import type { AddonOptions } from './types'
 
 type BaseOptions = Parameters<RsbuildFinal>[1]
@@ -21,6 +19,7 @@ export const rsbuildFinal: StorybookConfigRsbuild['rsbuildFinal'] = async (
     cwd: cwd,
     path: configPath,
   })
+
   await startMFDevServer(rslibConfig)
 
   const libConfig = libIndex === false ? {} : rslibConfig.lib[libIndex]

sandboxes/react-16/README.md

@@ -1,4 +1,4 @@
-# React v18 (Rsbuild | TypeScript)</h1>
+# React v18 (Rsbuild | TypeScript)
 
 Run Storybook
 

sandboxes/react-18/README.md

@@ -1,4 +1,4 @@
-# React v18 (Rsbuild | TypeScript)</h1>
+# React v18 (Rsbuild | TypeScript)
 
 Run Storybook
 

sandboxes/react-testing/README.md

@@ -1,4 +1,4 @@
-# React v18 (Rsbuild | TypeScript)</h1>
+# React v18 (Rsbuild | TypeScript)
 
 Run Storybook and Coverage
 

sandboxes/rslib-react-component/.storybook/main.ts

@@ -28,15 +28,6 @@ const config: StorybookConfig = {
         },
       },
     },
-    {
-      name: '@module-federation/storybook-addon/preset',
-      options: {
-        remotes: {
-          'rslib-module':
-            'rslib-module@http://localhost:3001/mf/mf-manifest.json',
-        },
-      },
-    },
   ],
   framework: {
     name: getAbsolutePath('storybook-react-rsbuild'),

sandboxes/rslib-react-component/README.md

@@ -1,4 +1,4 @@
-# React v18 + Rslib (Rsbuild | Rslib | TypeScript)</h1>
+# React v18 + Rslib
 
 Run Storybook
 

sandboxes/rslib-react-component/package.json

@@ -17,8 +17,6 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@module-federation/rsbuild-plugin": "^0.6.14",
-    "@module-federation/storybook-addon": "0.0.0-next-20241106024856",
     "@rsbuild/core": "1.0.19",
     "@chromatic-com/storybook": "^3.2.2",
     "@rsbuild/plugin-react": "1.0.5",

sandboxes/rslib-react-component/rslib.config.ts

@@ -1,4 +1,3 @@
-import { pluginModuleFederation } from '@module-federation/rsbuild-plugin'
 import { pluginReact } from '@rsbuild/plugin-react'
 import { pluginSass } from '@rsbuild/plugin-sass'
 import { type LibConfig, defineConfig } from '@rslib/core'
@@ -40,38 +39,6 @@ export default defineConfig({
         },
       },
     },
-    {
-      format: 'mf',
-      output: {
-        distPath: {
-          root: './dist/mf',
-        },
-        assetPrefix: 'http://localhost:3001/mf',
-      },
-      dev: {
-        assetPrefix: 'http://localhost:3001/mf',
-      },
-      // just for dev
-      server: {
-        port: 3001,
-      },
-      plugins: [
-        pluginModuleFederation({
-          name: 'rslib_provider',
-          exposes: {
-            '.': './src/index.tsx',
-          },
-          shared: {
-            react: {
-              singleton: true,
-            },
-            'react-dom': {
-              singleton: true,
-            },
-          },
-        }),
-      ],
-    },
   ],
   plugins: [
     pluginReact({

sandboxes/rslib-react-component/stories/CounterButton.stories.ts

@@ -31,22 +31,22 @@ export const Primary: Story = {
   },
 }
 
-// export const Secondary: Story = {
-//   args: {
-//     label: 'CounterButton',
-//   },
-// }
+export const Secondary: Story = {
+  args: {
+    label: 'CounterButton',
+  },
+}
 
-// export const Large: Story = {
-//   args: {
-//     size: 'large',
-//     label: 'CounterButton',
-//   },
-// }
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'CounterButton',
+  },
+}
 
-// export const Small: Story = {
-//   args: {
-//     size: 'small',
-//     label: 'CounterButton',
-//   },
-// }
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'CounterButton',
+  },
+}

sandboxes/rslib-react-component/stories/mfCounter.stories.tsx

@@ -1,8 +1,7 @@
-// @ts-ignore skip type check in ci because we set @mf-types into .gitignore
-import { Counter } from 'rslib-module'
+import { Counter } from '../src/components/Counter'
 
 export default {
-  title: 'Example/MFCounter',
+  title: 'Example/Counter',
   component: Counter,
 }
 

sandboxes/rslib-react-component/tsconfig.json

@@ -4,10 +4,7 @@
     "strict": true,
     "resolveJsonModule": true,
     "jsx": "react",
-    "outDir": "dist",
-    "paths": {
-      "*": ["./@mf-types/*"]
-    }
+    "outDir": "dist"
   },
   "include": ["src/**/*", ".storybook/**/*", "stories/**/*"]
 }

sandboxes/rslib-react-mf/.storybook/main.ts

@@ -0,0 +1,54 @@
+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: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+      options: {
+        rslib: {
+          include: ['**/stories/**'],
+        },
+      },
+    },
+    {
+      name: '@module-federation/storybook-addon/preset',
+      options: {
+        remotes: {
+          'rslib-module':
+            'rslib-module@http://localhost:3001/mf/mf-manifest.json',
+        },
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-react-rsbuild'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    check: true,
+  },
+}
+
+export default config

sandboxes/rslib-react-mf/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

sandboxes/rslib-react-mf/README.md

@@ -0,0 +1,15 @@
+# React v18 + Rslib + Module Federation
+
+Run Storybook
+
+pnpm storybook
+
+```bash
+
+```
+
+Build Storybook
+
+```bash
+pnpm build-storybook
+```