fix: 修复了在不支持ShadowRoot的浏览器中的报错问题

docs/zh-cn/changelog.md

@@ -8,6 +8,15 @@
 
 ---
 
+### 0.4.3
+
+`2021-11-05`
+
+- **Bug Fix**
+
+  - 🐞 修复了在不支持`ShadowRoot`的浏览器中的报错问题
+
+
 ### 0.4.2
 
 `2021-10-29`
@@ -16,7 +25,7 @@
 
   - 🆕 新增了数据通信中`getGlobalData`方法，用于主动获取全局数据
   - 🆕 新增了对`mount`, `unmount`方法promise类型的支持
-  - 🆕 新增了`destroy`配置项，用于替换`destory`，但依然保持对低版本的兼容
+  - 🆕 新增了`destroy`配置项，用于替换`destory`，但依然保持对低版本的兼容，fix [#132](https://github.com/micro-zoe/micro-app/issues/132)
 
 - **Bug Fix**
 

src/create_app.ts

@@ -16,6 +16,7 @@ import {
   isBoolean,
   isPromise,
   logError,
+  isShadowRoot,
 } from './libs/utils'
 import dispatchLifecyclesEvent, { dispatchUnmountToMicroApp } from './interact/lifecycles_event'
 import globalEnv from './libs/global_env'
@@ -311,7 +312,7 @@ export default class CreateApp implements AppInterface {
     // after execScripts, the app maybe unmounted
     if (appStatus.UNMOUNT !== this.status) {
       const global = (this.sandBox?.proxyWindow ?? globalEnv.rawWindow) as any
-      this.libraryName = (this.container instanceof ShadowRoot ? this.container.host : this.container)!.getAttribute('library') || `micro-app-${this.name}`
+      this.libraryName = (isShadowRoot(this.container) ? (this.container as ShadowRoot).host : this.container as Element).getAttribute('library') || `micro-app-${this.name}`
       // do not use isObject
       return typeof global[this.libraryName] === 'object' ? global[this.libraryName] : {}
     }

src/interact/index.ts

@@ -1,7 +1,7 @@
 import { CallableFunctionForInteract } from '@micro-app/types'
 import EventCenter from './event_center'
 import { appInstanceMap } from '../create_app'
-import { removeDomScope, isString, isFunction, isPlainObject } from '../libs/utils'
+import { removeDomScope, isString, isFunction, isPlainObject, isShadowRoot } from '../libs/utils'
 
 const eventCenter = new EventCenter()
 
@@ -189,8 +189,8 @@ export class EventCenterForMicroApp extends EventCenterForGlobal {
       })
 
       let element = app.container
-      if (element instanceof ShadowRoot) {
-        element = element.host as HTMLElement
+      if (isShadowRoot(element)) {
+        element = (element as ShadowRoot).host as HTMLElement
       }
       element.dispatchEvent(event)
     }

src/interact/lifecycles_event.ts

@@ -1,5 +1,5 @@
 import microApp from '../micro_app'
-import { logError, isFunction, removeDomScope } from '../libs/utils'
+import { logError, isFunction, removeDomScope, isShadowRoot } from '../libs/utils'
 
 function eventHandler (event: CustomEvent, element: HTMLElement): void {
   Object.defineProperties(event, {
@@ -25,15 +25,15 @@ function eventHandler (event: CustomEvent, element: HTMLElement): void {
  * @param error param from error hook
  */
 export default function dispatchLifecyclesEvent (
-  element: HTMLElement,
+  element: HTMLElement | ShadowRoot,
   appName: string,
   lifecycleName: string,
   error?: Error,
 ): void {
   if (!element) {
     return logError(`element does not exist in lifecycle ${lifecycleName}`, appName)
-  } else if (element instanceof ShadowRoot) {
-    element = element.host as HTMLElement
+  } else if (isShadowRoot(element)) {
+    element = (element as ShadowRoot).host as HTMLElement
   }
 
   // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
@@ -50,7 +50,7 @@ export default function dispatchLifecyclesEvent (
     detail,
   })
 
-  eventHandler(event, element)
+  eventHandler(event, element as HTMLElement)
   // global hooks
   // @ts-ignore
   if (isFunction(microApp.lifeCycles?.[lifecycleName])) {

src/libs/additional.ts

@@ -1,15 +1,16 @@
 import { appInstanceMap } from '../create_app'
 import { elementInstanceMap } from '../micro_app_element'
 import { releasePatches } from '../source/patch'
+import { isShadowRoot } from '../libs/utils'
 
 function unmountNestedApp (): void {
   replaseUnmountOfNestedApp()
 
   appInstanceMap.forEach(app => {
     let element = app.container
     if (element) {
-      if (element instanceof ShadowRoot) {
-        element = element.host as HTMLElement
+      if (isShadowRoot(element)) {
+        element = (element as ShadowRoot).host as HTMLElement
       }
       // @ts-ignore
       element.disconnectedCallback()

src/libs/utils.ts

@@ -60,6 +60,11 @@ export function isBoundFunction (target: any): boolean {
   return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype')
 }
 
+// is ShadowRoot
+export function isShadowRoot (target: unknown): boolean {
+  return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot
+}
+
 /**
  * format error log
  * @param msg message

src/micro_app_element.ts

@@ -1,5 +1,5 @@
 import type { AttrType, MicroAppElementType, AppInterface } from '@micro-app/types'
-import { defer, formatURL, version, logError, isString } from './libs/utils'
+import { defer, formatURL, version, logError, isString, isFunction } from './libs/utils'
 import { ObservedAttrName, appStatus, lifeCycles } from './constants'
 import CreateApp, { appInstanceMap } from './create_app'
 import {
@@ -126,7 +126,7 @@ export function defineElement (tagName: string): void {
     private initialMount (): void {
       if (!this.appName || !this.appUrl) return
 
-      if (this.getDisposeResult('shadowDOM') && !this.shadowRoot) {
+      if (this.getDisposeResult('shadowDOM') && !this.shadowRoot && isFunction(this.attachShadow)) {
         this.attachShadow({ mode: 'open' })
       }