hub / github.com/ambit-tsai/m-app

github.com/ambit-tsai/m-app @main

Chat with this repo

repository ↗ · DeepWiki ↗ · + Follow

1,205 symbols 4,159 edges 36 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

<m-app>

可能是你见过最简单的微前端解决方案，一行代码即可实现应用的接入 😎

<m-app entry="http://example.com/path/to/entry.html"></m-app>

体验一下，并且可以在线接入你的应用 🎉 1. Gitee Pages 1. GitHub Pages

📃 简介

<m-app> 将微应用的 DOM 树置于 Shadow DOM 中维护，从而实现 DOM 树独立以及 CSS 隔离，而 JavaScript 代码则置于同源 iframe 中运行，由 iframe 提供独立的运行环境。

<img src="https://gitee.com/ambit/m-app/raw/assets/structure.svg" title="感谢王*扬同学的图" width="300px">

出于降低改造成本的考虑，微应用的 Shadow DOM 与正常 DOM 的结构保持一致。

微应用的 Shadow DOM 结构：

           ├─<iframe hidden>  
           │                 ├─<meta>
ShadowRoot─│        ├─<head>─├─<title>
           │        │        ├─...
           ├─<html>─│
                    │        ├─<h1>
                    ├─<body>─├─


                             ├─...

正常 DOM 结构：

                             ├─<meta>
                    ├─<head>─├─<title>
                    │        ├─...
   Document──<html>─│
                    │        ├─<h1>
                    ├─<body>─├─


                             ├─...

✨ 特性

对 DOM、CSS、JS 进行硬隔离，实现真正的技术栈无关
微应用与基座应用的 UI 可以完美融合，无 <iframe> 的窗口隔离问题
运行时集成，微应用可独立开发、部署、升级
支持多应用同时接入
支持 <script> 的 type="module"、defer、async 等特性
HTML Entry，符合一般应用的开发方式，无需改造

⬇️ 安装

npm i -S @ambit_tsai/m-app

🔨 使用

import '@ambit_tsai/m-app';

或者

<script src="https://github.com/ambit-tsai/m-app/raw/main/path/to/m-app.js"></script>

更多信息请查看 Wiki

🎉 招聘

稿定科技招人啦 👇联系我可内推，或是推荐给需要的朋友 1. 地点：厦门、深圳、杭州 1. 职位：前端、后端、SRE工程师、产品、测试、UI设计、运营、市场 ... 1. 福利：双休、弹性上下班、六险一金、餐补、MacBook、人体工学椅、班车、零食供应 ...

（🔓联系我解锁更多信息）

☎️ 联系

微信: cai_fanwei
QQ: 854521460
QQ群: 663286147
邮箱: ambit_tsai@qq.com

Extension points exported contracts — how you extend this code

MicroAppOption (Interface)

(no doc)

index.d.ts

MicroAppRoot (Interface)

(no doc)

index.d.ts

MicroAppElement (Interface)

(no doc)

index.d.ts

HTMLElement (Interface)

Core symbols most depended-on inside this repo

called by 155

docs/vue2/index.js

called by 121

docs/assets/vendor.a11472d6.js

called by 101

docs/assets/vendor.a11472d6.js

called by 97

docs/react/index.js

called by 79

docs/assets/vendor.a11472d6.js

called by 78

docs/assets/vendor.a11472d6.js

called by 73

docs/vue2/index.js

called by 67

docs/assets/vendor.a11472d6.js

Shape

Function 1,145

Method 33

Class 22

Interface 5

Languages

TypeScript100%

Modules by API surface

docs/assets/vendor.a11472d6.js517 symbols

docs/react/index.js322 symbols

docs/vue2/index.js258 symbols

docs/assets/index.825fc4d2.js52 symbols

src/helpers/alternative-methods.ts10 symbols

src/helpers/hijack-node-methods.ts9 symbols

index.d.ts6 symbols

src/helpers/utils.ts5 symbols

test/react/src/App.jsx4 symbols

src/helpers/init-app.ts4 symbols

src/MicroAppElement.ts4 symbols

test/vue3/src/createMicroApp.js3 symbols

For agents

$ claude mcp add m-app \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact