Merge branch 'dev'

Author: timhub66

README.md

@@ -149,7 +149,7 @@ For more commands, see [DEVELOP](https://github.com/jd-opensource/micro-app/blob
 
 # Contributors
 <a href="https://github.com/jd-opensource/micro-app/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=micro-zoe/micro-app" />
+  <img src="https://contrib.rocks/image?repo=jd-opensource/micro-app" />
 </a>
 
 # License

README.zh-cn.md

@@ -148,7 +148,7 @@ yarn start # 访问 http://localhost:3000
 
 # 贡献者们
 <a href="https://github.com/jd-opensource/micro-app/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=micro-zoe/micro-app" />
+  <img src="https://contrib.rocks/image?repo=jd-opensource/micro-app" />
 </a>
 
 

docs/zh-cn/changelog.md

@@ -7,6 +7,13 @@
 - 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
 
 ---
+### 1.0.0-rc.19
+
+`2025-01-15`
+- **Bug Fix**
+  - 🐞 修复 子应用渲染之后，使用Html2Canvas截图，页面崩溃，无限循环加载当前页面静态资源 [issue 1483](https://github.com/jd-opensource/micro-app/issues/1483)。
+  - 🐞 修复 vite热更样式隔离丢失问题
+
 ### 1.0.0-rc.18
 
 `2024-12-16`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micro-zoe/micro-app",
-  "version": "1.0.0-rc.18",
+  "version": "1.0.0-rc.19",
   "description": "A lightweight, efficient and powerful micro front-end framework",
   "private": false,
   "main": "lib/index.min.js",

src/create_app.ts

@@ -52,6 +52,7 @@ export interface CreateAppParam {
   ssrUrl?: string
   isPrefetch?: boolean
   prefetchLevel?: number
+  attrs?: Record<string, string>,
   routerMode?: string
 }
 
@@ -79,6 +80,7 @@ export default class CreateApp implements AppInterface {
   public prefetchLevel?: number
   public fiber = false
   public routerMode: string
+  public attrs?: Record<string, string>
 
   constructor ({
     name,
@@ -92,13 +94,15 @@ export default class CreateApp implements AppInterface {
     isPrefetch,
     prefetchLevel,
     routerMode,
+    attrs,
   }: CreateAppParam) {
     appInstanceMap.set(name, this)
     // init actions
     this.name = name
     this.url = url
     this.useSandbox = useSandbox
     this.scopecss = this.useSandbox && scopecss
+    this.attrs = attrs
     // exec before getInlineModeState
     this.iframe = iframe ?? false
     this.inline = this.getInlineModeState(inline)
@@ -758,7 +762,7 @@ export default class CreateApp implements AppInterface {
    */
   private createSandbox (): void {
     if (this.useSandbox && !this.sandBox) {
-      this.sandBox = this.iframe ? new IframeSandbox(this.name, this.url) : new WithSandBox(this.name, this.url)
+      this.sandBox = this.iframe ? new IframeSandbox(this.name, this.url, { attrs: this.attrs }) : new WithSandBox(this.name, this.url)
     }
   }
 

src/micro_app_element.ts

@@ -353,6 +353,13 @@ export function defineElement (tagName: string): void {
 
     // create app instance
     private handleCreateApp (): void {
+      const attrs: Record<string, string> = {}
+      Array.prototype.slice.call(this.attributes).forEach(({ name, value }: Attr) => {
+        if (name.startsWith('data-')) {
+          attrs[name] = value
+        }
+      })
+
       const createAppInstance = () => new CreateApp({
         name: this.appName,
         url: this.appUrl,
@@ -363,6 +370,7 @@ export function defineElement (tagName: string): void {
         iframe: this.getDisposeResult('iframe'),
         ssrUrl: this.ssrUrl,
         routerMode: this.getMemoryRouterMode(),
+        attrs
       })
 
       /**

src/sandbox/iframe/index.ts

@@ -81,16 +81,18 @@ export default class IframeSandbox {
   // TODO: 放到 super中定义，super(appName, url)，with沙箱也需要简化
   public appName: string
   public url: string
+  public options?: Record<string, any>
   // reset mount, unmount when stop in default mode
   public clearHijackUmdHooks!: () => void
 
-  constructor (appName: string, url: string) {
+  constructor (appName: string, url: string, options: Record<string, any>) {
     this.appName = appName
     this.url = url
+    this.options = options
     const rawLocation = globalEnv.rawWindow.location
     const browserHost = rawLocation.protocol + '//' + rawLocation.host
 
-    this.deleteIframeElement = this.createIframeElement(appName, browserHost + rawLocation.pathname)
+    this.deleteIframeElement = this.createIframeElement(appName, browserHost + rawLocation.pathname, options)
     this.microAppWindow = this.iframe!.contentWindow
 
     this.patchIframe(this.microAppWindow, (resolve: CallableFunction) => {
@@ -126,10 +128,12 @@ export default class IframeSandbox {
   createIframeElement (
     appName: string,
     browserPath: string,
+    options?: Record<string, any>
   ): () => void {
     this.iframe = pureCreateElement('iframe')
 
     const iframeAttrs: Record<string, string> = {
+      ...options?.attrs,
       id: appName,
       src: microApp.options.iframeSrc || browserPath,
       style: 'display: none',

src/sandbox/scoped_css.ts

@@ -518,6 +518,15 @@ export default function scopedCSS (
         app.url,
         linkPath,
       )
+      const observer = new MutationObserver(() => {
+        const isPrefixed = styleElement.textContent && new RegExp(prefix).test(styleElement.textContent)
+        observer.disconnect()
+        if (!isPrefixed) {
+          styleElement.__MICRO_APP_HAS_SCOPED__ = false
+        }
+        scopedCSS(styleElement, app, linkPath)
+      })
+      observer.observe(styleElement, { childList: true, characterData: true })
     } else {
       const observer = new MutationObserver(function () {
         observer.disconnect()