Prerequisites
- Strong understanding of ES6 modules and module systems 📝
- Experience with TypeScript compilation and bundling ⚡
- Knowledge of dynamic imports and code splitting 💻
What you'll learn
- Master SystemJS for dynamic module loading and dependency management 🎯
- Build flexible architectures with runtime module resolution 🏗️
- Implement advanced patterns like module federation and micro-frontends 🐛
- Create production-ready SystemJS applications with TypeScript ✨
🎯 Introduction
Welcome to the dynamic universe of SystemJS! ⚡ If traditional module systems are like pre-planned train routes, then SystemJS is your personal teleportation device - it can load any module from anywhere, at any time, with infinite flexibility and power!
SystemJS is a universal dynamic module loader that can load ES6 modules, CommonJS, AMD, and global scripts on the fly. It’s particularly powerful for creating micro-frontends, plugin architectures, and applications that need to load modules conditionally at runtime. With TypeScript, SystemJS becomes even more powerful, providing type safety while maintaining incredible flexibility.
By the end of this tutorial, you’ll be a master of dynamic module loading with SystemJS and TypeScript, capable of building sophisticated applications that adapt and evolve at runtime. Let’s dive into the world of dynamic loading! 🌟
📚 Understanding SystemJS
🤔 What Is SystemJS?
SystemJS is a universal module loader that brings ES6 module loading to browsers and can load virtually any module format. It provides a polyfill for the ES Module Loader spec and supports features like dynamic imports, conditional loading, and runtime dependency resolution.
// 🌟 Basic SystemJS concepts and usage
// SystemJS can load modules dynamically at runtime
// 🎯 Basic dynamic import with SystemJS
async function loadMathModule() {
try {
console.log('📦 Loading math module dynamically...');
// 🔄 Dynamic import using SystemJS
const mathModule = await System.import('./modules/math-utils.js');
console.log('✅ Math module loaded successfully!');
console.log('Available functions:', Object.keys(mathModule));
// 🧮 Use the dynamically loaded module
const result = mathModule.add(10, 5);
console.log(`➕ 10 + 5 = ${result}`);
return mathModule;
} catch (error) {
console.error('❌ Failed to load math module:', error);
throw error;
}
}
// 🎯 Conditional module loading based on environment
async function loadEnvironmentSpecificModule() {
const isProduction = process.env.NODE_ENV === 'production';
const isDevelopment = process.env.NODE_ENV === 'development';
console.log(`🔍 Environment: ${process.env.NODE_ENV}`);
if (isProduction) {
console.log('🚀 Loading production modules...');
const [analytics, monitoring] = await Promise.all([
System.import('./modules/analytics.js'),
System.import('./modules/monitoring.js')
]);
return { analytics, monitoring };
} else if (isDevelopment) {
console.log('🛠️ Loading development modules...');
const [devTools, debugger] = await Promise.all([
System.import('./modules/dev-tools.js'),
System.import('./modules/debugger.js')
]);
return { devTools, debugger };
} else {
console.log('🔧 Loading default modules...');
const baseModule = await System.import('./modules/base.js');
return { base: baseModule };
}
}
// 🎮 Feature-based dynamic loading
async function loadFeatureModules(features: string[]) {
console.log(`🎯 Loading feature modules: ${features.join(', ')}`);
const modulePromises = features.map(async (feature) => {
try {
const module = await System.import(`./features/${feature}.js`);
console.log(`✅ Feature "${feature}" loaded successfully`);
return { feature, module, loaded: true };
} catch (error) {
console.error(`❌ Failed to load feature "${feature}":`, error);
return { feature, module: null, loaded: false, error };
}
});
const results = await Promise.allSettled(modulePromises);
return results.map((result, index) => {
if (result.status === 'fulfilled') {
return result.value;
} else {
return {
feature: features[index],
module: null,
loaded: false,
error: result.reason
};
}
});
}
// 🔄 Module hot-reloading with SystemJS
class ModuleHotReloader {
private loadedModules = new Map<string, any>();
private moduleVersions = new Map<string, number>();
private reloadCallbacks = new Map<string, Set<(module: any) => void>>();
async loadModule(specifier: string, version?: number): Promise<any> {
const currentVersion = this.moduleVersions.get(specifier) || 0;
const targetVersion = version || currentVersion;
console.log(`🔄 Loading module: ${specifier} (version ${targetVersion})`);
try {
// 🧹 Clear module from SystemJS cache if reloading
if (this.loadedModules.has(specifier) && targetVersion > currentVersion) {
console.log(`🗑️ Clearing cached version of: ${specifier}`);
System.delete(specifier);
}
// 📦 Load the module
const module = await System.import(`${specifier}?v=${targetVersion}`);
// 💾 Cache the module and version
this.loadedModules.set(specifier, module);
this.moduleVersions.set(specifier, targetVersion);
// 🔔 Notify reload callbacks
const callbacks = this.reloadCallbacks.get(specifier);
if (callbacks) {
callbacks.forEach(callback => {
try {
callback(module);
console.log(`🔔 Reload callback executed for: ${specifier}`);
} catch (error) {
console.error(`❌ Reload callback failed for ${specifier}:`, error);
}
});
}
console.log(`✅ Module loaded successfully: ${specifier}`);
return module;
} catch (error) {
console.error(`❌ Failed to load module ${specifier}:`, error);
throw error;
}
}
onModuleReload(specifier: string, callback: (module: any) => void): void {
if (!this.reloadCallbacks.has(specifier)) {
this.reloadCallbacks.set(specifier, new Set());
}
this.reloadCallbacks.get(specifier)!.add(callback);
console.log(`🎧 Reload callback registered for: ${specifier}`);
}
async reloadModule(specifier: string): Promise<any> {
const currentVersion = this.moduleVersions.get(specifier) || 0;
const newVersion = currentVersion + 1;
console.log(`🔄 Hot reloading module: ${specifier}`);
return this.loadModule(specifier, newVersion);
}
getLoadedModules(): string[] {
return Array.from(this.loadedModules.keys());
}
isModuleLoaded(specifier: string): boolean {
return this.loadedModules.has(specifier);
}
getModuleVersion(specifier: string): number {
return this.moduleVersions.get(specifier) || 0;
}
}
// 🎮 Usage examples
async function systemJSExamples() {
// 🧮 Load math module
const mathModule = await loadMathModule();
// 🌍 Load environment-specific modules
const envModules = await loadEnvironmentSpecificModule();
// 🎯 Load feature modules
const featureResults = await loadFeatureModules(['user-management', 'analytics', 'notifications']);
// 🔄 Set up hot reloading
const hotReloader = new ModuleHotReloader();
// Load a module with hot reloading
const userModule = await hotReloader.loadModule('./modules/user-service.js');
// Register reload callback
hotReloader.onModuleReload('./modules/user-service.js', (newModule) => {
console.log('🔄 User service module has been reloaded!');
// Update application state with new module
});
console.log('🎉 SystemJS examples completed!');
}💡 SystemJS Key Features
- ⚡ Dynamic Loading: Load modules at runtime based on conditions
- 🔄 Hot Reloading: Replace modules without page refresh
- 🌍 Universal Format Support: ES6, CommonJS, AMD, and globals
- 📦 Code Splitting: Automatic chunk loading and optimization
- 🎯 Conditional Loading: Load different modules based on environment
- 🔧 Plugin System: Extensible with custom loaders and transforms
🛠️ Setting Up SystemJS with TypeScript
📦 Installation and Configuration
Let’s set up a complete SystemJS development environment:
// 🌟 Package.json for SystemJS development
{
"name": "typescript-systemjs-app",
"version": "1.0.0",
"description": "Advanced TypeScript application with SystemJS",
"main": "dist/index.js",
"scripts": {
"build": "npm run clean && npm run compile && npm run bundle",
"compile": "tsc",
"bundle": "systemjs-builder src/index.ts dist/bundle.js --minify",
"dev": "npm run compile && concurrently \"npm run serve\" \"npm run watch\"",
"watch": "tsc --watch",
"serve": "http-server . -p 8080 -o",
"clean": "rimraf dist",
"lint": "eslint src/**/*.ts",
"test": "jest",
"build:production": "NODE_ENV=production npm run build"
},
"dependencies": {
"systemjs": "^6.14.2"
},
"devDependencies": {
"typescript": "^5.3.0",
"systemjs-builder": "^0.21.0",
"http-server": "^14.1.1",
"concurrently": "^8.2.2",
"rimraf": "^5.0.5",
"@types/systemjs": "^6.13.0",
"eslint": "^8.54.0",
"@typescript-eslint/eslint-plugin": "^6.12.0",
"@typescript-eslint/parser": "^6.12.0",
"jest": "^29.7.0",
"@types/jest": "^29.5.8",
"ts-jest": "^29.1.1"
}
}
// 🔧 TypeScript configuration for SystemJS
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020", // Modern JavaScript for better performance
"module": "System", // 🎯 SystemJS module format
"lib": ["ES2020", "DOM"], // Include necessary libraries
"outDir": "./dist", // Output directory
"rootDir": "./src", // Source directory
"strict": true, // Enable strict type checking
"esModuleInterop": true, // Enable ES module interop
"allowSyntheticDefaultImports": true, // Allow synthetic imports
"skipLibCheck": true, // Skip library type checking
"forceConsistentCasingInFileNames": true, // Enforce consistent casing
"moduleResolution": "node", // Node-style module resolution
"declaration": true, // Generate .d.ts files
"declarationDir": "./dist/types", // Type declarations directory
"sourceMap": true, // Generate source maps
"removeComments": false, // Keep comments for debugging
"experimentalDecorators": true, // Enable decorators
"emitDecoratorMetadata": true, // Emit decorator metadata
"resolveJsonModule": true, // Enable JSON imports
"isolatedModules": true, // Ensure isolated modules
"noEmitOnError": true, // Don't emit on errors
"strictNullChecks": true, // Strict null checking
"noImplicitAny": true, // No implicit any types
"noImplicitReturns": true, // No implicit returns
"noUnusedLocals": true, // Flag unused locals
"noUnusedParameters": true, // Flag unused parameters
"exactOptionalPropertyTypes": true, // Exact optional properties
// 🎯 SystemJS-specific options
"baseUrl": "./src", // Base URL for module resolution
"paths": { // Path mapping
"@/*": ["*"],
"@components/*": ["components/*"],
"@services/*": ["services/*"],
"@utils/*": ["utils/*"],
"@types/*": ["types/*"],
"@features/*": ["features/*"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist",
"**/*.spec.ts",
"**/*.test.ts"
]
}
// 🌍 SystemJS configuration file
// systemjs.config.js
System.config({
// 📍 Base URL for module loading
baseURL: '/dist',
// 🗺️ Default extension for module imports
defaultJSExtensions: true,
// 🎯 Transpiler configuration
transpiler: 'typescript',
// 📦 Package configurations
packages: {
'/dist': {
defaultExtension: 'js'
},
'/src': {
defaultExtension: 'ts'
}
},
// 🗺️ Path mappings
map: {
// 🔧 TypeScript transpiler
'typescript': 'https://unpkg.com/[email protected]/lib/typescript.js',
// 📦 External libraries
'rxjs': 'https://unpkg.com/[email protected]/dist/bundles/rxjs.umd.min.js',
'lodash': 'https://unpkg.com/[email protected]/lodash.min.js',
'moment': 'https://unpkg.com/[email protected]/min/moment.min.js',
// 🎯 Application modules
'@components': '/dist/components',
'@services': '/dist/services',
'@utils': '/dist/utils',
'@types': '/dist/types',
'@features': '/dist/features'
},
// 🔧 Meta configuration for specific modules
meta: {
'typescript': {
exports: 'ts'
},
'*.ts': {
loader: 'typescript'
},
'*.json': {
loader: 'json'
}
},
// 📦 Bundle configuration for production
bundles: {
'core-bundle.js': ['@components/*', '@services/*', '@utils/*'],
'features-bundle.js': ['@features/*'],
'vendor-bundle.js': ['rxjs', 'lodash', 'moment']
},
// 🔧 Build configuration
buildConfig: {
minify: true,
mangle: true,
sourceMaps: true
}
});
// 🚀 Bootstrap the application
System.import('./main.js').catch(console.error);🏗️ Project Structure for SystemJS
// 📁 Comprehensive project structure for SystemJS applications
src/
├── index.html // Main HTML file with SystemJS
├── main.ts // Application entry point
├── systemjs.config.js // SystemJS configuration
├── core/ // Core application modules
│ ├── app.ts // Main application class
│ ├── router.ts // Dynamic routing system
│ ├── module-loader.ts // Advanced module loading utilities
│ └── plugin-system.ts // Plugin architecture
├── components/ // Dynamically loadable UI components
│ ├── button/
│ │ ├── button.ts
│ │ ├── button.css
│ │ └── index.ts
│ ├── modal/
│ │ ├── modal.ts
│ │ ├── modal.css
│ │ └── index.ts
│ └── form/
│ ├── form.ts
│ ├── form.css
│ └── index.ts
├── services/ // Business logic services
│ ├── api-service.ts
│ ├── auth-service.ts
│ ├── state-manager.ts
│ └── notification-service.ts
├── features/ // Feature modules (micro-frontends)
│ ├── user-management/
│ │ ├── index.ts
│ │ ├── user-list.ts
│ │ ├── user-form.ts
│ │ └── user-service.ts
│ ├── analytics/
│ │ ├── index.ts
│ │ ├── dashboard.ts
│ │ ├── charts.ts
│ │ └── analytics-service.ts
│ └── notifications/
│ ├── index.ts
│ ├── notification-center.ts
│ ├── notification-item.ts
│ └── notification-service.ts
├── plugins/ // Dynamic plugins
│ ├── plugin-interface.ts
│ ├── theme-plugin.ts
│ ├── i18n-plugin.ts
│ └── analytics-plugin.ts
├── utils/ // Utility modules
│ ├── dom-utils.ts
│ ├── validation.ts
│ ├── formatters.ts
│ └── async-utils.ts
├── types/ // Type definitions
│ ├── api-types.ts
│ ├── app-types.ts
│ ├── component-types.ts
│ └── plugin-types.ts
└── assets/ // Static assets
├── styles/
├── images/
└── fonts/
// 🎯 dist/ (generated after compilation)
dist/
├── main.js
├── systemjs.config.js
├── core/
├── components/
├── services/
├── features/
├── plugins/
├── utils/
├── types/
├── bundles/ // Production bundles
│ ├── core-bundle.js
│ ├── features-bundle.js
│ └── vendor-bundle.js
└── assets/🏗️ Advanced SystemJS Patterns
🎯 Dynamic Module Registry and Plugin System
Let’s create a sophisticated plugin system using SystemJS:
// 🌟 Advanced plugin system with dynamic loading
// src/core/plugin-system.ts
export interface PluginManifest {
name: string;
version: string;
description: string;
author: string;
entry: string;
dependencies?: string[];
permissions?: string[];
config?: Record<string, any>;
}
export interface Plugin {
manifest: PluginManifest;
activate(context: PluginContext): Promise<void> | void;
deactivate?(): Promise<void> | void;
onUpdate?(oldVersion: string, newVersion: string): Promise<void> | void;
}
export interface PluginContext {
app: any;
services: Record<string, any>;
registerCommand(id: string, handler: Function): void;
registerComponent(name: string, component: any): void;
registerService(name: string, service: any): void;
getConfig(key: string): any;
setConfig(key: string, value: any): void;
emit(event: string, data?: any): void;
on(event: string, handler: Function): void;
}
// 🎯 Advanced plugin manager
export class PluginManager {
private plugins = new Map<string, Plugin>();
private manifests = new Map<string, PluginManifest>();
private loadedModules = new Map<string, any>();
private dependencyGraph = new Map<string, Set<string>>();
private eventEmitter = new EventTarget();
private config = new Map<string, any>();
constructor(private app: any, private services: Record<string, any>) {
console.log('🔌 Plugin Manager initialized');
}
// 🔍 Discover available plugins
async discoverPlugins(pluginDirectory: string = './plugins'): Promise<PluginManifest[]> {
console.log(`🔍 Discovering plugins in: ${pluginDirectory}`);
try {
// Load plugin registry
const registry = await System.import(`${pluginDirectory}/registry.json`);
const plugins: PluginManifest[] = registry.plugins || [];
console.log(`📦 Found ${plugins.length} plugins`);
// Validate and store manifests
for (const manifest of plugins) {
if (this.validateManifest(manifest)) {
this.manifests.set(manifest.name, manifest);
console.log(`✅ Plugin manifest validated: ${manifest.name}`);
} else {
console.warn(`⚠️ Invalid plugin manifest: ${manifest.name}`);
}
}
return Array.from(this.manifests.values());
} catch (error) {
console.error('❌ Failed to discover plugins:', error);
return [];
}
}
// 🔄 Load plugin with dependency resolution
async loadPlugin(pluginName: string): Promise<boolean> {
console.log(`🔄 Loading plugin: ${pluginName}`);
const manifest = this.manifests.get(pluginName);
if (!manifest) {
console.error(`❌ Plugin manifest not found: ${pluginName}`);
return false;
}
// 🔗 Check and load dependencies first
if (manifest.dependencies) {
console.log(`🔗 Loading dependencies for ${pluginName}:`, manifest.dependencies);
for (const dependency of manifest.dependencies) {
if (!this.plugins.has(dependency)) {
const dependencyLoaded = await this.loadPlugin(dependency);
if (!dependencyLoaded) {
console.error(`❌ Failed to load dependency: ${dependency}`);
return false;
}
}
}
}
try {
// 📦 Load the plugin module
console.log(`📦 Loading plugin module: ${manifest.entry}`);
const pluginModule = await System.import(manifest.entry);
// 🎯 Create plugin instance
const plugin: Plugin = new pluginModule.default(manifest);
// 🔧 Create plugin context
const context = this.createPluginContext(pluginName);
// 🚀 Activate the plugin
await plugin.activate(context);
// 💾 Store plugin
this.plugins.set(pluginName, plugin);
this.loadedModules.set(pluginName, pluginModule);
// 🔗 Update dependency graph
if (manifest.dependencies) {
this.dependencyGraph.set(pluginName, new Set(manifest.dependencies));
}
// 🔔 Emit plugin loaded event
this.emitEvent('plugin:loaded', { pluginName, manifest });
console.log(`✅ Plugin loaded successfully: ${pluginName}`);
return true;
} catch (error) {
console.error(`❌ Failed to load plugin ${pluginName}:`, error);
return false;
}
}
// 🗑️ Unload plugin with dependent cleanup
async unloadPlugin(pluginName: string): Promise<boolean> {
console.log(`🗑️ Unloading plugin: ${pluginName}`);
const plugin = this.plugins.get(pluginName);
if (!plugin) {
console.warn(`⚠️ Plugin not loaded: ${pluginName}`);
return false;
}
try {
// 🔗 Check for dependent plugins
const dependents = this.getDependentPlugins(pluginName);
if (dependents.length > 0) {
console.log(`🔗 Unloading dependent plugins: ${dependents.join(', ')}`);
for (const dependent of dependents) {
await this.unloadPlugin(dependent);
}
}
// 🛑 Deactivate the plugin
if (plugin.deactivate) {
await plugin.deactivate();
}
// 🧹 Clean up
this.plugins.delete(pluginName);
this.loadedModules.delete(pluginName);
this.dependencyGraph.delete(pluginName);
// 🗑️ Remove from SystemJS cache
const manifest = this.manifests.get(pluginName);
if (manifest) {
System.delete(manifest.entry);
}
// 🔔 Emit plugin unloaded event
this.emitEvent('plugin:unloaded', { pluginName });
console.log(`✅ Plugin unloaded successfully: ${pluginName}`);
return true;
} catch (error) {
console.error(`❌ Failed to unload plugin ${pluginName}:`, error);
return false;
}
}
// 🔄 Reload plugin (hot reload)
async reloadPlugin(pluginName: string): Promise<boolean> {
console.log(`🔄 Reloading plugin: ${pluginName}`);
const manifest = this.manifests.get(pluginName);
if (!manifest) {
console.error(`❌ Plugin manifest not found: ${pluginName}`);
return false;
}
// Store current version for update callback
const oldVersion = manifest.version;
// 🗑️ Unload current version
await this.unloadPlugin(pluginName);
// 🔄 Clear from SystemJS cache with version parameter
const versionedEntry = `${manifest.entry}?v=${Date.now()}`;
System.delete(manifest.entry);
try {
// 📦 Load new version
console.log(`📦 Loading new version: ${versionedEntry}`);
const pluginModule = await System.import(versionedEntry);
// 🎯 Create new plugin instance
const plugin: Plugin = new pluginModule.default(manifest);
// 🔧 Create plugin context
const context = this.createPluginContext(pluginName);
// 🚀 Activate the plugin
await plugin.activate(context);
// 🔄 Call update callback if available
if (plugin.onUpdate) {
await plugin.onUpdate(oldVersion, manifest.version);
}
// 💾 Store plugin
this.plugins.set(pluginName, plugin);
this.loadedModules.set(pluginName, pluginModule);
// 🔔 Emit plugin reloaded event
this.emitEvent('plugin:reloaded', { pluginName, oldVersion, newVersion: manifest.version });
console.log(`🔄 Plugin reloaded successfully: ${pluginName}`);
return true;
} catch (error) {
console.error(`❌ Failed to reload plugin ${pluginName}:`, error);
return false;
}
}
// 🔧 Create plugin context
private createPluginContext(pluginName: string): PluginContext {
return {
app: this.app,
services: this.services,
registerCommand: (id: string, handler: Function) => {
console.log(`📝 Command registered: ${id} by ${pluginName}`);
this.app.commandRegistry.register(id, handler, pluginName);
},
registerComponent: (name: string, component: any) => {
console.log(`🎨 Component registered: ${name} by ${pluginName}`);
this.app.componentRegistry.register(name, component, pluginName);
},
registerService: (name: string, service: any) => {
console.log(`🔧 Service registered: ${name} by ${pluginName}`);
this.services[name] = service;
},
getConfig: (key: string) => {
const pluginConfig = this.config.get(`${pluginName}.${key}`);
return pluginConfig !== undefined ? pluginConfig : this.config.get(key);
},
setConfig: (key: string, value: any) => {
this.config.set(`${pluginName}.${key}`, value);
console.log(`⚙️ Config set: ${key} = ${value} by ${pluginName}`);
},
emit: (event: string, data?: any) => {
this.emitEvent(`plugin:${pluginName}:${event}`, data);
},
on: (event: string, handler: Function) => {
this.addEventListener(`plugin:${pluginName}:${event}`, handler);
}
};
}
// 🔍 Get dependent plugins
private getDependentPlugins(pluginName: string): string[] {
const dependents: string[] = [];
for (const [name, dependencies] of this.dependencyGraph) {
if (dependencies.has(pluginName)) {
dependents.push(name);
}
}
return dependents;
}
// ✅ Validate plugin manifest
private validateManifest(manifest: PluginManifest): boolean {
const required = ['name', 'version', 'entry'];
for (const field of required) {
if (!(field in manifest)) {
console.error(`❌ Missing required field in manifest: ${field}`);
return false;
}
}
// Validate version format
const versionRegex = /^\d+\.\d+\.\d+$/;
if (!versionRegex.test(manifest.version)) {
console.error(`❌ Invalid version format: ${manifest.version}`);
return false;
}
return true;
}
// 🔔 Event management
private emitEvent(event: string, data?: any): void {
this.eventEmitter.dispatchEvent(new CustomEvent(event, { detail: data }));
}
private addEventListener(event: string, handler: Function): void {
this.eventEmitter.addEventListener(event, handler as EventListener);
}
// 📊 Plugin management utilities
getLoadedPlugins(): string[] {
return Array.from(this.plugins.keys());
}
getAvailablePlugins(): string[] {
return Array.from(this.manifests.keys());
}
isPluginLoaded(pluginName: string): boolean {
return this.plugins.has(pluginName);
}
getPluginManifest(pluginName: string): PluginManifest | undefined {
return this.manifests.get(pluginName);
}
getPluginInfo(): Array<{
name: string;
version: string;
loaded: boolean;
dependencies?: string[];
}> {
return Array.from(this.manifests.values()).map(manifest => ({
name: manifest.name,
version: manifest.version,
loaded: this.plugins.has(manifest.name),
dependencies: manifest.dependencies,
}));
}
// 🔄 Bulk operations
async loadAllPlugins(): Promise<boolean[]> {
console.log('🚀 Loading all available plugins...');
const results: boolean[] = [];
const sortedPlugins = this.topologicalSort();
for (const pluginName of sortedPlugins) {
const result = await this.loadPlugin(pluginName);
results.push(result);
}
return results;
}
async unloadAllPlugins(): Promise<boolean[]> {
console.log('🛑 Unloading all plugins...');
const results: boolean[] = [];
const pluginNames = Array.from(this.plugins.keys()).reverse(); // Reverse order
for (const pluginName of pluginNames) {
const result = await this.unloadPlugin(pluginName);
results.push(result);
}
return results;
}
// 🔗 Topological sort for dependency resolution
private topologicalSort(): string[] {
const sorted: string[] = [];
const visited = new Set<string>();
const visiting = new Set<string>();
const visit = (pluginName: string) => {
if (visiting.has(pluginName)) {
throw new Error(`Circular dependency detected: ${pluginName}`);
}
if (visited.has(pluginName)) {
return;
}
visiting.add(pluginName);
const manifest = this.manifests.get(pluginName);
if (manifest?.dependencies) {
for (const dependency of manifest.dependencies) {
visit(dependency);
}
}
visiting.delete(pluginName);
visited.add(pluginName);
sorted.push(pluginName);
};
for (const pluginName of this.manifests.keys()) {
if (!visited.has(pluginName)) {
visit(pluginName);
}
}
return sorted;
}
}
// 🎮 Example plugin implementation
// src/plugins/theme-plugin.ts
export default class ThemePlugin implements Plugin {
manifest: PluginManifest;
private themes = new Map<string, any>();
private currentTheme = 'default';
constructor(manifest: PluginManifest) {
this.manifest = manifest;
}
async activate(context: PluginContext): Promise<void> {
console.log('🎨 Activating Theme Plugin...');
// 📦 Load available themes
await this.loadThemes();
// 📝 Register commands
context.registerCommand('theme:switch', (themeName: string) => {
this.switchTheme(themeName);
});
context.registerCommand('theme:list', () => {
return Array.from(this.themes.keys());
});
// 🔧 Register service
context.registerService('themeService', {
switchTheme: (name: string) => this.switchTheme(name),
getCurrentTheme: () => this.currentTheme,
getAvailableThemes: () => Array.from(this.themes.keys()),
});
// ⚙️ Load saved theme preference
const savedTheme = context.getConfig('currentTheme');
if (savedTheme && this.themes.has(savedTheme)) {
this.switchTheme(savedTheme);
}
console.log('✅ Theme Plugin activated');
}
async deactivate(): Promise<void> {
console.log('🛑 Deactivating Theme Plugin...');
// Cleanup logic here
}
private async loadThemes(): Promise<void> {
try {
const themeModules = await Promise.all([
System.import('./themes/light-theme.js'),
System.import('./themes/dark-theme.js'),
System.import('./themes/blue-theme.js'),
]);
themeModules.forEach((module, index) => {
const themeNames = ['light', 'dark', 'blue'];
this.themes.set(themeNames[index], module.default);
});
console.log(`🎨 Loaded ${this.themes.size} themes`);
} catch (error) {
console.error('❌ Failed to load themes:', error);
}
}
private switchTheme(themeName: string): boolean {
if (!this.themes.has(themeName)) {
console.warn(`⚠️ Theme not found: ${themeName}`);
return false;
}
const theme = this.themes.get(themeName);
// Apply theme to document
document.documentElement.className = `theme-${themeName}`;
// Apply CSS variables
if (theme.cssVariables) {
Object.entries(theme.cssVariables).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value as string);
});
}
this.currentTheme = themeName;
console.log(`🎨 Switched to theme: ${themeName}`);
return true;
}
}🌐 Micro-Frontend Architecture
Let’s implement a micro-frontend system using SystemJS:
// 🌟 Micro-frontend architecture with SystemJS
// src/core/micro-frontend-manager.ts
export interface MicroFrontendConfig {
name: string;
entry: string;
route: string;
version?: string;
dependencies?: string[];
metadata?: Record<string, any>;
}
export interface MicroFrontend {
name: string;
mount(container: HTMLElement, props?: any): Promise<void> | void;
unmount?(container: HTMLElement): Promise<void> | void;
update?(props: any): Promise<void> | void;
getInfo?(): any;
}
// 🎯 Micro-frontend manager
export class MicroFrontendManager {
private frontends = new Map<string, MicroFrontend>();
private configs = new Map<string, MicroFrontendConfig>();
private mountedFrontends = new Map<string, HTMLElement>();
private routeMap = new Map<string, string>(); // route -> frontend name
constructor() {
console.log('🌐 Micro-Frontend Manager initialized');
this.setupRouting();
}
// 📝 Register micro-frontend
registerMicroFrontend(config: MicroFrontendConfig): void {
console.log(`📝 Registering micro-frontend: ${config.name}`);
this.configs.set(config.name, config);
this.routeMap.set(config.route, config.name);
console.log(`✅ Micro-frontend registered: ${config.name} -> ${config.route}`);
}
// 🔄 Load micro-frontend
async loadMicroFrontend(name: string): Promise<boolean> {
console.log(`🔄 Loading micro-frontend: ${name}`);
const config = this.configs.get(name);
if (!config) {
console.error(`❌ Micro-frontend config not found: ${name}`);
return false;
}
try {
// 🔗 Load dependencies first
if (config.dependencies) {
console.log(`🔗 Loading dependencies for ${name}:`, config.dependencies);
await Promise.all(
config.dependencies.map(dep => System.import(dep))
);
}
// 📦 Load the micro-frontend module
const entryUrl = config.version
? `${config.entry}?v=${config.version}`
: config.entry;
console.log(`📦 Loading micro-frontend module: ${entryUrl}`);
const module = await System.import(entryUrl);
// 🎯 Create micro-frontend instance
const microFrontend: MicroFrontend = module.default || module;
// ✅ Validate micro-frontend interface
if (typeof microFrontend.mount !== 'function') {
throw new Error(`Micro-frontend ${name} must implement mount() method`);
}
this.frontends.set(name, microFrontend);
console.log(`✅ Micro-frontend loaded successfully: ${name}`);
return true;
} catch (error) {
console.error(`❌ Failed to load micro-frontend ${name}:`, error);
return false;
}
}
// 🏗️ Mount micro-frontend
async mountMicroFrontend(
name: string,
container: HTMLElement,
props?: any
): Promise<boolean> {
console.log(`🏗️ Mounting micro-frontend: ${name}`);
let microFrontend = this.frontends.get(name);
// 🔄 Load if not already loaded
if (!microFrontend) {
const loaded = await this.loadMicroFrontend(name);
if (!loaded) {
return false;
}
microFrontend = this.frontends.get(name)!;
}
try {
// 🏗️ Mount the micro-frontend
await microFrontend.mount(container, props);
// 💾 Track mounted frontend
this.mountedFrontends.set(name, container);
console.log(`✅ Micro-frontend mounted successfully: ${name}`);
return true;
} catch (error) {
console.error(`❌ Failed to mount micro-frontend ${name}:`, error);
return false;
}
}
// 🗑️ Unmount micro-frontend
async unmountMicroFrontend(name: string): Promise<boolean> {
console.log(`🗑️ Unmounting micro-frontend: ${name}`);
const microFrontend = this.frontends.get(name);
const container = this.mountedFrontends.get(name);
if (!microFrontend || !container) {
console.warn(`⚠️ Micro-frontend not mounted: ${name}`);
return false;
}
try {
// 🗑️ Unmount the micro-frontend
if (microFrontend.unmount) {
await microFrontend.unmount(container);
} else {
// Default unmount: clear container
container.innerHTML = '';
}
// 🧹 Clean up tracking
this.mountedFrontends.delete(name);
console.log(`✅ Micro-frontend unmounted successfully: ${name}`);
return true;
} catch (error) {
console.error(`❌ Failed to unmount micro-frontend ${name}:`, error);
return false;
}
}
// 🔄 Update micro-frontend props
async updateMicroFrontend(name: string, props: any): Promise<boolean> {
console.log(`🔄 Updating micro-frontend: ${name}`);
const microFrontend = this.frontends.get(name);
if (!microFrontend) {
console.warn(`⚠️ Micro-frontend not loaded: ${name}`);
return false;
}
if (!this.mountedFrontends.has(name)) {
console.warn(`⚠️ Micro-frontend not mounted: ${name}`);
return false;
}
try {
if (microFrontend.update) {
await microFrontend.update(props);
console.log(`✅ Micro-frontend updated successfully: ${name}`);
} else {
console.log(`ℹ️ Micro-frontend ${name} does not support updates`);
}
return true;
} catch (error) {
console.error(`❌ Failed to update micro-frontend ${name}:`, error);
return false;
}
}
// 🗺️ Setup routing system
private setupRouting(): void {
// Listen for route changes
window.addEventListener('popstate', () => {
this.handleRouteChange();
});
// Handle initial route
this.handleRouteChange();
}
// 🗺️ Handle route changes
private async handleRouteChange(): Promise<void> {
const currentPath = window.location.pathname;
console.log(`🗺️ Route changed: ${currentPath}`);
// Find matching micro-frontend
let matchedFrontend: string | null = null;
let matchedRoute: string | null = null;
for (const [route, frontendName] of this.routeMap) {
if (this.matchRoute(currentPath, route)) {
matchedFrontend = frontendName;
matchedRoute = route;
break;
}
}
if (matchedFrontend) {
console.log(`🎯 Matched micro-frontend: ${matchedFrontend} for route: ${matchedRoute}`);
await this.activateMicroFrontend(matchedFrontend, currentPath);
} else {
console.log(`❓ No micro-frontend found for route: ${currentPath}`);
this.showNotFound();
}
}
// 🔍 Match route patterns
private matchRoute(path: string, pattern: string): boolean {
// Simple pattern matching (could be enhanced with regex or path-to-regexp)
if (pattern === path) return true;
// Wildcard matching
if (pattern.endsWith('/*')) {
const basePath = pattern.slice(0, -2);
return path.startsWith(basePath);
}
return false;
}
// 🚀 Activate micro-frontend for current route
private async activateMicroFrontend(name: string, route: string): Promise<void> {
// 🗑️ Unmount all currently mounted frontends
const currentlyMounted = Array.from(this.mountedFrontends.keys());
for (const mountedName of currentlyMounted) {
if (mountedName !== name) {
await this.unmountMicroFrontend(mountedName);
}
}
// 🏗️ Mount the new micro-frontend
const container = document.getElementById('micro-frontend-container');
if (container) {
const routeParams = this.extractRouteParams(route);
await this.mountMicroFrontend(name, container, { route, params: routeParams });
}
}
// 📊 Extract route parameters
private extractRouteParams(route: string): Record<string, string> {
// Simple parameter extraction (could be enhanced)
const params: Record<string, string> = {};
const urlParams = new URLSearchParams(window.location.search);
urlParams.forEach((value, key) => {
params[key] = value;
});
return params;
}
// ❓ Show not found page
private showNotFound(): void {
const container = document.getElementById('micro-frontend-container');
if (container) {
container.innerHTML = `
<div class="not-found">
<h1>404 - Page Not Found</h1>
<p>The requested page could not be found.</p>
</div>
`;
}
}
// 📊 Management utilities
getLoadedMicroFrontends(): string[] {
return Array.from(this.frontends.keys());
}
getMountedMicroFrontends(): string[] {
return Array.from(this.mountedFrontends.keys());
}
getRegisteredMicroFrontends(): string[] {
return Array.from(this.configs.keys());
}
getMicroFrontendInfo(): Array<{
name: string;
route: string;
loaded: boolean;
mounted: boolean;
}> {
return Array.from(this.configs.values()).map(config => ({
name: config.name,
route: config.route,
loaded: this.frontends.has(config.name),
mounted: this.mountedFrontends.has(config.name),
}));
}
}
// 🎮 Example micro-frontend implementation
// src/features/user-management/index.ts
export default class UserManagementMicroFrontend implements MicroFrontend {
name = 'user-management';
private container: HTMLElement | null = null;
private userService: any;
async mount(container: HTMLElement, props?: any): Promise<void> {
console.log('🏗️ Mounting User Management micro-frontend');
this.container = container;
// 🔄 Load required services
const serviceModule = await System.import('./user-service.js');
this.userService = new serviceModule.UserService();
// 🎨 Render the interface
await this.render(props);
// 🎧 Setup event listeners
this.setupEventListeners();
console.log('✅ User Management micro-frontend mounted');
}
async unmount(container: HTMLElement): Promise<void> {
console.log('🗑️ Unmounting User Management micro-frontend');
// 🧹 Cleanup event listeners
this.cleanupEventListeners();
// 🗑️ Clear container
container.innerHTML = '';
this.container = null;
console.log('✅ User Management micro-frontend unmounted');
}
async update(props: any): Promise<void> {
console.log('🔄 Updating User Management micro-frontend', props);
if (this.container) {
await this.render(props);
}
}
getInfo(): any {
return {
name: this.name,
version: '1.0.0',
status: this.container ? 'mounted' : 'unmounted',
userCount: this.userService?.getUserCount() || 0,
};
}
private async render(props?: any): Promise<void> {
if (!this.container) return;
// 👥 Load user data
const users = await this.userService.getUsers();
// 🎨 Create UI
this.container.innerHTML = `
<div class="user-management">
<h2>👥 User Management</h2>
<div class="user-stats">
<p>Total Users: ${users.length}</p>
</div>
<div class="user-actions">
<button id="add-user-btn" class="btn btn-primary">➕ Add User</button>
<button id="refresh-btn" class="btn btn-secondary">🔄 Refresh</button>
</div>
<div class="user-list">
${this.renderUserList(users)}
</div>
</div>
`;
}
private renderUserList(users: any[]): string {
return users.map(user => `
<div class="user-item" data-user-id="${user.id}">
<div class="user-info">
<h4>${user.name}</h4>
<p>${user.email}</p>
</div>
<div class="user-actions">
<button class="edit-btn" data-user-id="${user.id}">✏️ Edit</button>
<button class="delete-btn" data-user-id="${user.id}">🗑️ Delete</button>
</div>
</div>
`).join('');
}
private setupEventListeners(): void {
if (!this.container) return;
// ➕ Add user button
const addUserBtn = this.container.querySelector('#add-user-btn');
addUserBtn?.addEventListener('click', () => this.handleAddUser());
// 🔄 Refresh button
const refreshBtn = this.container.querySelector('#refresh-btn');
refreshBtn?.addEventListener('click', () => this.handleRefresh());
// ✏️ Edit buttons
this.container.addEventListener('click', (e) => {
const target = e.target as HTMLElement;
if (target.classList.contains('edit-btn')) {
const userId = target.getAttribute('data-user-id');
if (userId) this.handleEditUser(userId);
}
if (target.classList.contains('delete-btn')) {
const userId = target.getAttribute('data-user-id');
if (userId) this.handleDeleteUser(userId);
}
});
}
private cleanupEventListeners(): void {
// Event listeners are automatically cleaned up when container is cleared
}
private async handleAddUser(): Promise<void> {
console.log('➕ Adding new user...');
// Implementation for adding user
}
private async handleEditUser(userId: string): Promise<void> {
console.log(`✏️ Editing user: ${userId}`);
// Implementation for editing user
}
private async handleDeleteUser(userId: string): Promise<void> {
console.log(`🗑️ Deleting user: ${userId}`);
// Implementation for deleting user
}
private async handleRefresh(): Promise<void> {
console.log('🔄 Refreshing user list...');
await this.render();
}
}🎉 Conclusion
Congratulations! You’ve mastered the dynamic art of SystemJS with TypeScript! ⚡
🎯 What You’ve Learned
- ⚡ Dynamic Module Loading: Runtime module loading and dependency resolution
- 🔌 Plugin Architecture: Building extensible applications with dynamic plugins
- 🌐 Micro-Frontends: Creating scalable frontend architectures with SystemJS
- 🔄 Hot Reloading: Dynamic module replacement without page refresh
- 🎯 Advanced Patterns: Sophisticated module management and orchestration
- 🚀 Production Deployment: Building and optimizing SystemJS applications
🚀 Key Benefits
- ⚡ Ultimate Flexibility: Load any module format from anywhere
- 🎯 Runtime Adaptability: Applications that evolve based on conditions
- 🔌 Extensibility: Easy plugin and micro-frontend integration
- 🔄 Development Speed: Hot reloading and dynamic updates
- 🌍 Universal Compatibility: Works with all module systems
🔥 Best Practices Recap
- 🎯 Strategic Loading: Load modules only when needed for better performance
- 🔗 Dependency Management: Proper dependency resolution and circular dependency detection
- 🔄 Hot Reload Support: Implement proper cleanup for seamless module replacement
- 📊 Error Handling: Robust error handling for dynamic loading failures
- 🚀 Production Optimization: Bundle strategies and performance considerations
You’re now equipped to build incredibly flexible and dynamic TypeScript applications that can adapt, extend, and evolve at runtime! 🌟
Happy coding, and may your modules be dynamically delicious! ⚡✨