Skip to content
/ esmx Public

Next-generation micro-frontend framework based on ESM, sandbox-free with zero runtime overhead, supporting multi-framework hybrid development

License

Notifications You must be signed in to change notification settings

esmnext/esmx

Repository files navigation

Esmx Logo

Esmx

npm version Build Coverage Report node version size

Next-generation micro-frontend framework based on ESM with zero runtime overhead, supporting sandbox-free multi-framework hybrid development

โšก๏ธ Ultimate Performance ยท ๐Ÿ› ๏ธ Developer Friendly ยท ๐Ÿ”ง Standard Syntax

English | ็ฎ€ไฝ“ไธญๆ–‡

๐Ÿš€ Core Features

  • Zero Runtime Overhead - Based on native ESM + ImportMap, no sandbox or proxy
  • High-Performance Build - Powered by Rspack, significantly faster builds
  • Complete SSR Support - High-performance server-side rendering, SEO-friendly
  • Standard ESM Syntax - No framework-specific APIs, minimal learning curve
  • Multi-Framework Support - Vue, React, Preact, Solid, and more

๐Ÿ“Š vs Traditional Micro-frontends

Feature Traditional Solutions Esmx
Architecture Manual sandbox + proxy Native ESM
Runtime Has overhead Zero overhead
Learning Curve Framework APIs Standard syntax
Module Isolation Sandbox simulation Browser native

โšก Quick Start

// Remote App - Export modules
export default {
  modules: { exports: ['npm:vue', 'root:src/Button.vue'] }
}

// Host App - Import modules
export default {
  modules: {
    links: { 'remote': './node_modules/remote' },
    imports: { 'vue': 'remote/vue' }
  }
}

// Using standard ESM syntax
import { createApp } from 'vue';
import Button from 'remote/src/Button.vue';

๐Ÿš€ Getting Started

๐Ÿ“– Documentation

๐Ÿ“ฆ Core Packages

Package Version Status Description
@esmx/core npm version ๐Ÿ”ต Preview Micro-frontend framework with ESM linking
@esmx/router npm version ๐Ÿ”ต Preview Framework-agnostic router
@esmx/router-vue npm version ๐Ÿ”ต Preview Vue integration (2.7+ & 3)
@esmx/rspack npm version ๐Ÿ”ต Preview Framework-agnostic Rspack tool
@esmx/rspack-vue npm version ๐Ÿ”ต Preview Rspack tool for Vue

๐ŸŽฏ Demo Projects

Project Name Tech Stack Live Preview
ssr-html Native HTML + TypeScript Preview
ssr-vue2-host Vue 2.7 + SSR Preview
ssr-vue2-remote Vue 2.7 Preview
ssr-preact-htm Preact + HTM Preview

๐Ÿ’ก Development: First run ./build.mjs to build all packages and examples, then cd to specific project directory to start development

๐Ÿ“ˆ Star History

Star History Chart