Scalprum

A powerful micro-frontend framework for React applications

Scalprum is a JavaScript micro-frontend framework that enables you to build dynamic, scalable applications by composing components from multiple sources. Built on top of Module Federation, Scalprum provides a developer-friendly abstraction for managing federated modules with advanced features like Remote Hooks and runtime plugin systems.

Key Features

• 🧩 Dynamic Module Loading - Load React components from remote sources at runtime
• 🎣 Remote Hooks - Share React hooks across micro-frontends seamlessly
• ⚡ High Performance - Built on Module Federation for optimal bundle sharing
• 🔧 Build Tool Agnostic - Compatible with Webpack 5, Rspack, and Module Federation Runtime
• 🎯 Type Safe - Full TypeScript support with comprehensive type definitions
• 🔌 Plugin Architecture - Extensible system for building plugin-based applications

Quick Start

npm install @scalprum/core @scalprum/react-core

import { ScalprumProvider, ScalprumComponent } from '@scalprum/react-core';

const config = {
  myModule: {
    name: 'myModule',
    manifestLocation: '/path/to/plugin-manifest.json'
  }
};

function App() {
  return (
    <ScalprumProvider config={config}>
      <ScalprumComponent scope="myModule" module="MyComponent" />
    </ScalprumProvider>
  );
}

Packages

Package	Description
@scalprum/core	Framework-agnostic core for module federation
@scalprum/react-core	React bindings with hooks and components
@scalprum/build-utils	Build tools and NX executors
@scalprum/react-test-utils	Testing utilities for Scalprum apps

Documentation

Documentation is organized within individual package directories, following monorepo best practices. This ensures package READMEs appear on npm automatically and documentation stays aligned with the code it documents.

• 📚 Getting Started Guide - Complete setup tutorial
• 📦 Package Documentation:
  • @scalprum/core - Framework-agnostic core
  • @scalprum/react-core - React bindings and hooks
  • @scalprum/build-utils - Build tools and NX executors
  • @scalprum/react-test-utils - Testing utilities
• 🎣 Remote Hooks - Share hooks across micro-frontends:
  • Overview
  • useRemoteHook Guide
  • useRemoteHookManager Guide
  • RemoteHookProvider Reference
  • Type Definitions

Getting Started

Prerequisites

• Node.js 16+
• Build environment with Webpack 5, Rspack, or Module Federation Runtime support
• React 16.8+ (for hooks support)

Basic Setup

1. Install Scalprum packages:

   npm install @scalprum/core @scalprum/react-core

2. Create a host application:

   import { ScalprumProvider, ScalprumComponent } from '@scalprum/react-core';
   
   const config = {
     myModule: {
       name: 'myModule',
       manifestLocation: 'http://localhost:8003/plugin-manifest.json'
     }
   };
   
   function App() {
     return (
       <ScalprumProvider config={config}>
         <ScalprumComponent scope="myModule" module="MyComponent" />
       </ScalprumProvider>
     );
   }

3. Configure Module Federation in your bundler

For a complete step-by-step tutorial including remote module setup, see our Getting Started Guide.

API Reference

Core Concepts

Host Application: The main application that manages module loading, routing, and data sharing. It loads first and provides the foundation for your micro-frontend architecture.

Remote Modules: Independent applications that can be loaded dynamically at runtime. They expose components that can be consumed by the host application.

Build Tool Compatibility

Scalprum works with multiple build tools and module federation implementations:

• Webpack 5: Native Module Federation support
• Rspack: High-performance Rust-based bundler with Module Federation
• Module Federation Runtime: Framework-agnostic module federation for any bundler

Module Federation Configuration

Required shared dependencies (must be marked as singletons):

const shared = {
  '@scalprum/react-core': { singleton: true },
  'react': { singleton: true },
  'react-dom': { singleton: true }
};

ScalprumProvider

Root component that provides module loading context:

import { ScalprumProvider } from '@scalprum/react-core';

const config = {
  myModule: {
    name: 'myModule',
    manifestLocation: '/path/to/plugin-manifest.json'
  }
};

<ScalprumProvider
  config={config}
  api={{ /* shared context */ }}
>
  <App />
</ScalprumProvider>

ScalprumComponent

Component for rendering remote modules:

import { ScalprumComponent } from '@scalprum/react-core';

<ScalprumComponent
  scope="myModule"
  module="MyComponent"
  fallback={<Loading />}
  ErrorComponent={ErrorFallback}
  // Additional props passed to remote component
  customProp="value"
/>

Contributing

We welcome contributions to Scalprum! Whether it's bug reports, feature requests, or code contributions, your help makes this project better.

How to Contribute

• Report bugs or request features - Open an issue on GitHub
• Join discussions - Ask questions or share ideas
• Submit pull requests - Fix bugs or add new features
• Improve documentation - Help make our docs better
• Share examples - Contribute real-world usage examples

For development setup and guidelines, check the individual package READMEs and explore the examples/ directory for reference implementations.

Links

• GitHub Repository
• Issues
• Discussions