ptech-preset

Auto-generate Module Federation (MF v2) config for Rsbuild:

• Scan components with /** @expose Name */ or exposeComponent(comp, 'Name').
• Gather remotes from ENV REMOTE_* and/or a manifest (file or URL).
• Inject MF v2 via @module-federation/rsbuild-plugin.

Install

npm i -D ptech-preset @module-federation/rsbuild-plugin @rsbuild/core

Usage

rsbuild.config.ts

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import pluginCore from 'ptech-preset';

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginCore({
      baseDir: 'src',
      globs: ['src/components/**/*.{ts,tsx}'],
      exposesMode: 'both',
      envPrefix: 'REMOTE_',
      manifestPathOrUrl: process.env.MF_MANIFEST,
      mf: {
        name: 'ptechlibrary',
        filename: 'static/js/remoteEntry.js',
      },
    })
  ]
});

Annotate component

/** @expose AnimatedButton */
export default function AnimatedButton(){ ... }

// or:
exposeComponent(AnimatedButton, 'AnimatedButton');

Remotes via ENV

REMOTE_admin=https://cdn.example.com/admin/remoteEntry.js
REMOTE_ui=https://cdn.example.com/ui/remoteEntry.js

Or manifest (local or http)

{
  "admin": "https://cdn.example.com/admin/remoteEntry.js",
  "ui": "https://cdn.example.com/ui/remoteEntry.js"
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | baseDir | string | 'src' | Base directory for relative paths | | globs | string[] | ['src/components/**/*.{ts,tsx}'] | File patterns to scan | | exposesMode | 'jsdoc' \| 'wrapper' \| 'both' | 'both' | How to detect exposed components | | envPrefix | string | 'REMOTE_' | Environment variable prefix for remotes | | manifestPathOrUrl | string | - | Local file path or HTTP URL to manifest | | mf | Record<string, unknown> | required | Module Federation options passed to pluginModuleFederation | | manualExposes | Record<string, string> | - | Explicit exposes map that skips auto-scan | | autoExposeEnabled | boolean | true | Enable auto-scan when mf.exposes is empty | | sharedEager | boolean | dev=true, build=false | Apply eager: true to shared react and react-dom | | cssInjection | 'none' \| 'wrapper' \| 'styles-expose' | 'none' | CSS handling strategy for generated exposes | | typesFolder | string | '@mf-types' | Output folder for generated remote type hints |

Notes

• Requires: @module-federation/rsbuild-plugin (MF v2).
• Prevents multi-React by default via shared with singleton: true.
• Supports both JSDoc comments and wrapper function patterns for exposes.
• Can load remote configurations from environment variables or manifest files.

Publishing

# 1) Login to npm
npm login

# 2) Build & publish
npm version patch   # or minor/major
npm publish --access public

Consumer Usage

npm i -D ptech-preset @module-federation/rsbuild-plugin @rsbuild/core

Example ENV configuration:

REMOTE_ptechui=https://oneportal.blob.core.windows.net/external/ptechui/remoteEntry.js
REMOTE_admin=https://oneportal.blob.core.windows.net/external/admin/remoteEntry.js