The core framework for Re-Shell microfrontend applications. This package provides the essential functionality for loading, managing, and orchestrating microfrontends in a shell application.
- Multi-framework support: React, Vue, Svelte, Angular, and Vanilla JS
- Lifecycle management: Complete mount/unmount lifecycle with hooks
- Loading strategies: Eager, lazy, and preload options
- Performance monitoring: Built-in metrics collection and analysis
- Error boundaries: Robust error handling and recovery
- Type-safe events: Enhanced event bus with TypeScript support
- Event namespacing: Organize events by namespace
- Event history: Debug and replay events
- Subscription management: Easy subscribe/unsubscribe with IDs
- Route-based loading: Load microfrontends based on routes
- Route guards: Authentication and permission checks
- Dynamic parameters: Support for route parameters and query strings
- Navigation events: Listen to route changes
- Monorepo support: Manage multiple workspaces
- Dependency analysis: Analyze workspace dependencies
- Build orchestration: Coordinate builds across workspaces
- Package manager integration: Support for npm, yarn, and pnpm
- Debug panel: Visual debugging interface
- Hot module replacement: Live reloading support
- Performance insights: Real-time performance monitoring
- Event logging: Comprehensive event debugging
npm install @re-shell/core
# or
yarn add @re-shell/core
# or
pnpm add @re-shell/coreimport { loadMicrofrontend, eventBus } from '@re-shell/core';
// Load a microfrontend
await loadMicrofrontend({
id: 'my-microfrontend',
name: 'My Microfrontend',
url: '/microfrontends/my-mf.js',
containerId: 'mf-container',
framework: 'react'
});
// Listen for events
eventBus.on('user:selected', (data) => {
console.log('User selected:', data.payload);
});
// Emit events
eventBus.emit('app:ready', { timestamp: Date.now() });import React from 'react';
import { ShellProvider, MicrofrontendContainer } from '@re-shell/core';
const App = () => {
const microfrontendConfig = {
id: 'dashboard',
name: 'Dashboard',
url: '/microfrontends/dashboard.js',
containerId: 'dashboard-container',
framework: 'react'
};
return (
<ShellProvider>
<div className="app">
<header>My Shell App</header>
<main>
<MicrofrontendContainer
config={microfrontendConfig}
options={{ enablePerformanceMonitoring: true }}
/>
</main>
</div>
</ShellProvider>
);
};import {
loadMicrofrontend,
performanceMonitor,
devTools,
router
} from '@re-shell/core';
// Configure performance monitoring
performanceMonitor.updateConfig({
enabled: true,
logToConsole: true,
thresholds: {
loadTime: 2000, // 2 seconds
mountTime: 500, // 500ms
bundleSize: 1024 * 1024 // 1MB
}
});
// Configure development tools
devTools.updateConfig({
enabled: process.env.NODE_ENV === 'development',
logEvents: true,
monitorPerformance: true,
enableHMR: true
});
// Set up routing
router.addRoutes([
{
path: '/dashboard',
microfrontendId: 'dashboard',
exact: true
},
{
path: '/users/:id',
microfrontendId: 'user-detail',
guards: [authGuard]
}
]);
// Load with lifecycle hooks
await loadMicrofrontend(
{
id: 'dashboard',
name: 'Dashboard',
url: '/microfrontends/dashboard.js',
containerId: 'dashboard-container',
framework: 'react'
},
{
enablePerformanceMonitoring: true,
loadingStrategy: 'lazy'
},
{
beforeMount: async (config) => {
console.log('About to mount:', config.name);
},
afterMount: async (config) => {
console.log('Mounted:', config.name);
},
onError: (error, config) => {
console.error('Error loading:', config.name, error);
}
}
);Load a single microfrontend with enhanced lifecycle management.
Load multiple microfrontends concurrently.
Unmount a specific microfrontend.
Reload a microfrontend (unmount then load).
Subscribe to events with type safety.
Emit events with enhanced data structure.
Subscribe to an event once.
Unsubscribe using subscription ID.
Update performance monitoring configuration.
Get performance metrics for a specific microfrontend.
Get overall performance summary.
Add a single route configuration.
Navigate to a specific path.
Get the current active route.
Register a workspace configuration.
Analyze workspace dependencies and relationships.
Get optimal build order for workspaces.
- Full TypeScript support
- Hook-based integration
- Error boundaries
- Hot module replacement
- Composition API support
- TypeScript integration
- Single File Components
- Reactive state management
- SvelteKit compatibility
- TypeScript preprocessing
- Reactive statements
- Scoped styling
- Standalone components
- Dependency injection
- TypeScript support
- Zone.js integration
- No framework dependencies
- Custom element support
- ES modules
- Legacy compatibility
Access development tools via window.__RE_SHELL_DEV__ in development mode:
// Show debug panel
window.__RE_SHELL_DEV__.showDebugPanel();
// Get performance metrics
window.__RE_SHELL_DEV__.getPerformanceMetrics();
// Enable event logging
window.__RE_SHELL_DEV__.enableEventLogging();
// Get event history
window.__RE_SHELL_DEV__.getEventHistory();- Eager: Load immediately (default)
- Lazy: Load when container becomes visible
- Preload: Preload script but defer execution
- Code splitting support
- Tree shaking compatibility
- Asset optimization
- Compression support
- Automatic cleanup on unmount
- Memory leak detection
- Garbage collection optimization
- Resource pooling
-
Event Bus Changes:
// Old eventBus.emit('event', { data: 'value' }); // New eventBus.emit('event', { data: 'value' }, { source: 'my-app' });
-
Loading Function Signature:
// Old loadMicrofrontend(config, options); // New loadMicrofrontend(config, options, hooks);
-
Performance Monitoring:
// Enable in options loadMicrofrontend(config, { enablePerformanceMonitoring: true });
See the main Contributing Guide for details on how to contribute to this project.
MIT License - see LICENSE for details.