微前端的未来：从沙箱困境到 ShadowRealm 的原生隔离之路

declare class ShadowRealm {
    constructor();
    importValue(specifier: string, bindingName: string): Promise<PrimitiveValueOrCallable>;
    evaluate(sourceText: string): PrimitiveValueOrCallable;
}

// 主应用
const childAppRealm = new ShadowRealm();
 
// 在 ShadowRealm 中导入子应用的模块
const childAppInit = await childAppRealm.importValue('./child-app.js', 'init');
 
// 子应用的初始化不会影响主应用的全局环境
const app = childAppInit({ 
  apiBase: 'https://api.example.com',
  jQuery: window.jQuery // 可以传递主应用的 jQuery 实例
});
 
app.render();

// child-app.js 运行在独立的 ShadowRealm 中
globalThis.appBase = ''; // 不会影响主应用的 globalThis
globalThis.jQuery = null; // 可以有自己的 jQuery 版本
 
export function init(config) {
  globalThis.appBase = config.apiBase;
  globalThis.jQuery = config.jQuery; // 可以使用主应用的 jQuery 实例
  return { render: () => 'render complete' };
}

const childAppRealm = new ShadowRealm();
 
// 在子应用的 Realm 中安装虚拟 DOM
const installVirtualDOM = await childAppRealm.importValue('./virtual-dom.js', 'install');
installVirtualDOM({
  container: document.querySelector('#child-app-root'),
  restrictions: ['no-popup', 'limited-navigation']
});
 
// 子应用现在可以正常使用 document API，但实际操作被代理到指定容器
const childAppMain = await childAppRealm.importValue('./child-app.js', 'main');
childAppMain();

// virtual-dom.js
export function install(config) {
  const { container, restrictions } = config;
  
  // 在 ShadowRealm 的全局对象上定义虚拟 document
  Object.defineProperty(globalThis, 'document', {
    value: new Proxy({}, {
      get(target, prop) {
        if (prop === 'querySelector') {
          return (selector) => {
            // 将查询限制在指定容器内
            return container.querySelector(selector);
          };
        }
        if (prop === 'createElement') {
          return (tagName) => {
            if (restrictions.includes('no-popup') && tagName === 'dialog') {
              throw new Error('Dialog creation is restricted');
            }
            return document.createElement(tagName);
          };
        }
        // ... 其他 DOM API 的代理实现
      }
    }),
    configurable: false,
    writable: false
  });
}

class MicroFrontendContainer {
  constructor(config) {
    this.realm = new ShadowRealm();
    this.config = config;
    this.setupEnvironment();
  }
 
  async setupEnvironment() {
    // 安装定制化的全局 API
    const setupGlobals = await this.realm.importValue('./mf-runtime.js', 'setupGlobals');
    setupGlobals({
      containerId: this.config.containerId,
      parentAPI: this.createParentAPIProxy(),
      restrictions: this.config.restrictions
    });
  }
 
  async loadApp(appUrl, appName) {
    // 在隔离的 Realm 中加载子应用
    const appBootstrap = await this.realm.importValue(appUrl, 'bootstrap');
    const appMount = await this.realm.importValue(appUrl, 'mount');
    
    // 子应用完全在隔离环境中运行
    await appBootstrap();
    return appMount;
  }
 
  createParentAPIProxy() {
    return {
      navigate: (path) => this.parentRouter.push(path),
      getSharedData: (key) => this.sharedStore.get(key),
      setSharedData: (key, value) => this.sharedStore.set(key, value),
      emit: (event, data) => this.eventBus.emit(event, data)
    };
  }
}

// child-app.js - 标准的应用代码，无任何框架依赖
export async function bootstrap() {
  // 应用初始化逻辑
  console.log('子应用启动中...');
  
  // 可以安全地使用全局变量
  globalThis.myAppState = { initialized: true };
}
 
export async function mount() {
  // 挂载应用到 DOM
  const container = document.querySelector('#app');
  container.innerHTML = '<h1>我是子应用</h1>';
  
  // 与父应用通信（通过预设的 API）
  if (typeof globalThis.parentAPI !== 'undefined') {
    globalThis.parentAPI.setSharedData('child-status', 'mounted');
  }
}
 
export async function unmount() {
  // 清理资源
  const container = document.querySelector('#app');
  if (container) {
    container.innerHTML = '';
  }
}

// 创建带有共享依赖的 Compartment
const sharedCompartment = new Compartment({
  resolveHook: (specifier, referrer) => {
    // React、Vue 等大型库使用共享版本
    if (['react', 'vue', 'lodash'].includes(specifier)) {
      return `shared:${specifier}`;
    }
    // 业务代码保持隔离
    return specifier;
  }
});
 
// 在共享环境中创建隔离的 ShadowRealm
const childRealm = new sharedCompartment.globalThis.ShadowRealm();

// 基于 ShadowRealm 的 Web Component
class IsolatedWidget extends HTMLElement {
  constructor() {
    super();
    this.realm = new ShadowRealm();
  }
 
  async connectedCallback() {
    // 在隔离环境中加载组件逻辑
    const widgetLogic = await this.realm.importValue(
      this.getAttribute('src'), 
      'default'
    );
    
    // 组件逻辑完全隔离，但可以操作 Shadow DOM
    const shadowRoot = this.attachShadow({ mode: 'open' });
    widgetLogic(shadowRoot);
  }
}
 
customElements.define('isolated-widget', IsolatedWidget);