$ show Tencent/wujie
Tencent/wujie is a production-grade micro-frontend framework that achieves native-level isolation by combining iframe sandboxing for JavaScript execution with Web Components (Shadow DOM) for CSS scoping. Unlike other micro-frontend solutions that rely on JavaScript sandbox polyfills (e.g., 'with' statements), Wujie leverages the browser's built-in iframe security model, making it robust against prototype pollution and global variable conflicts. The framework is implemented as a monorepo containing a core library (wujie-core), framework-specific integrations for Vue 2/3 and React, comprehensive examples, and an extensive test suite. The core provides lifecycle APIs (startApp, preloadApp, destroyApp) and supports multiple running modes: alive (keep-alive), singleton (lifecycle-based), and rebuild (full destroy each time). It includes a plugin system for custom asset loaders (HTML, CSS, JS), routing synchronization between main and sub-apps, and a decentralized EventBus for cross-application communication. The architecture handles degradation gracefully: if Proxy or WebComponent is unavailable, it falls back to a pure iframe with Object.defineProperty-based sandbox. The repository exhibits high craftsmanship in several areas: a dedicated EventCleanupTracker for preventing memory leaks, a custom proxy generator that patches cross-realm instanceof checks, and deferred style loading to support libraries like TinyMCE. Integration and unit tests cover lifecycle, plugins, routing sync, and memory leak scenarios. The accompanying documentation site provides detailed guides and API references. However, the codebase shows signs of maintenance burden: the example sub-apps use outdated frameworks (Angular 12, React 16/17), the integration test setup is complex and slow, and the dense patching of native DOM APIs introduces fragility across browser updates. Overall, it is a well-architected and actively maintained solution for micro-frontend orchestration.
The LLM identified 2 files worth highlighting for reuse:
Implements EventCleanupTracker, a class that safely tracks addEventListener calls and onXXX assignments, providing a reverse-unbind mechanism to prevent memory leaks in long-lived applications. The pattern is self-contained: it stores listener references and cleans them on destroy. It can be extracted into any project that needs robust event listener lifecycle management.
Provides a global EventBus with namespaced channels, supporting $on, $off, $emit, $onAll, and $destroy. The bus is decoupled from the framework's sandbox and can be used as a standalone pub-sub utility with memory-safe cleanup. The implementation is minimal and demonstrates careful handling of listener registration and removal.