CLI to create new Kernel Module Federation plugins
npm install @kdsp/create-pluginbash
Install globally
npm install -g @kdsp/create-plugin
Or use npx (recommended)
npx @kdsp/create-plugin
`
Usage
$3
`bash
npx @kdsp/create-plugin
`
This will prompt you for:
- Plugin name (must start with kdsp-)
- Dev server port
- Description
- Author
- Whether to include example component
$3
`bash
Create plugin with defaults
npx @kdsp/create-plugin kdsp-my-feature --yes
Specify port
npx @kdsp/create-plugin kdsp-my-feature --port 9010
Skip npm install
npx @kdsp/create-plugin kdsp-my-feature --no-install
Create in specific directory
npx @kdsp/create-plugin kdsp-my-feature --directory ./plugins
`
What Gets Created
`
kdsp-my-feature/
├── package.json
├── tsconfig.json
├── rspack.config.ts
├── module-federation.config.ts
├── postcss.config.js
├── index.html
├── README.md
└── src/
├── index.ts
├── index.css
├── App.tsx
├── version.ts
├── global.d.ts
└── components/
├── index.ts
└── kdspMyFeatureMain.tsx
`
Features Included
✅ Version Tracking
- Version from package.json in filenames
- Console logging on load
- window.__MF_PLUGIN_VERSIONS__ registry
✅ Source Maps
- Full source map support for Chrome DevTools
- Debug original TypeScript files
✅ Single File Bundle
- Each exposed module as single file
- No chunk splitting
✅ Module Federation
- Ready-to-use MF configuration
- Versioned remote entry file
✅ Material UI
- Pre-configured with MUI
- Example component included
After Creation
`bash
cd kdsp-my-feature
npm start
`
Plugin available at: http://localhost:{port}
Remote entry: http://localhost:{port}/kdsp-my-feature.v0.0.1.js
Adding to Host App
1. Add to host's Module Federation config:
`typescript
remotes: {
kdsp_my_feature: "kdsp_my_feature@http://localhost:{port}/mf-manifest.json",
}
`
2. Import in host app:
`tsx
const MyFeatureMain = lazy(() => import("kdsp_my_feature/kdspMyFeatureMain"));
``