fix: script error when documemt is not ready

DimensionDev · Nov 11, 2019 · b5b8a9b · b5b8a9b
1 parent 5a8c7a9
commit b5b8a9b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 52 deletions.
diff --git a/src/social-network-provider/facebook.com/UI/injectKnownIdentity.tsx b/src/social-network-provider/facebook.com/UI/injectKnownIdentity.tsx
@@ -49,7 +49,6 @@ export function injectKnownIdentityAtFacebook(this: SocialNetworkUI) {
     const self = othersBioLiveSelectorMobile.clone().concat(othersBioLiveSelectorPC)
 
     const watcher = new MutationObserverWatcher(self)
-        .setComparer(undefined, () => false)
         .setDOMProxyOption({
             afterShadowRootInit: { mode: 'closed' },
         })

diff --git a/src/social-network/ui.ts b/src/social-network/ui.ts
@@ -10,6 +10,7 @@ import { defaultSocialNetworkUI } from './defaults/ui'
 import { nopWithUnmount } from '../utils/utils'
 import { Theme } from '@material-ui/core'
 import { MaskbookLightTheme, MaskbookDarkTheme } from '../utils/theme'
+import { untilDomLoaded } from '../utils/dom'
 
 //#region SocialNetworkUI
 export interface SocialNetworkUIDefinition
@@ -260,48 +261,49 @@ export function activateSocialNetworkUI() {
         if (ui.shouldActivate()) {
             console.log('Activating UI provider', ui.networkIdentifier, ui)
             activatedSocialNetworkUI = ui
-            hookUIPostMap(ui)
-            ui.init(env, {})
-            ui.resolveLastRecognizedIdentity()
-            ui.injectPostBox()
-            ui.collectPeople()
-            ui.collectPosts()
-            ui.myIdentitiesRef.addListener(val => {
-                if (val.length === 1) ui.currentIdentity.value = val[0]
-            })
-            {
-                const mountSettingsLink = ui.injectOptionsPageLink
-                if (typeof mountSettingsLink === 'function') mountSettingsLink()
-            }
-            {
-                const mountKnownIdentity = ui.injectKnownIdentity
-                if (typeof mountKnownIdentity === 'function') mountKnownIdentity()
-            }
-            {
-                const mountBanner = ui.injectWelcomeBanner
-                if (typeof mountBanner === 'function') {
-                    ui.shouldDisplayWelcome().then(shouldDisplay => {
-                        if (shouldDisplay) {
-                            const unmount = mountBanner()
-                            ui.myIdentitiesRef.addListener(next => {
-                                ui.shouldDisplayWelcome().then(should => {
-                                    !should && next.length && unmount()
+            return untilDomLoaded().then(() => {
+                hookUIPostMap(ui)
+                ui.init(env, {})
+                ui.resolveLastRecognizedIdentity()
+                ui.injectPostBox()
+                ui.collectPeople()
+                ui.collectPosts()
+                ui.myIdentitiesRef.addListener(val => {
+                    if (val.length === 1) ui.currentIdentity.value = val[0]
+                })
+                {
+                    const mountSettingsLink = ui.injectOptionsPageLink
+                    if (typeof mountSettingsLink === 'function') mountSettingsLink()
+                }
+                {
+                    const mountKnownIdentity = ui.injectKnownIdentity
+                    if (typeof mountKnownIdentity === 'function') mountKnownIdentity()
+                }
+                {
+                    const mountBanner = ui.injectWelcomeBanner
+                    if (typeof mountBanner === 'function') {
+                        ui.shouldDisplayWelcome().then(shouldDisplay => {
+                            if (shouldDisplay) {
+                                const unmount = mountBanner()
+                                ui.myIdentitiesRef.addListener(next => {
+                                    ui.shouldDisplayWelcome().then(should => {
+                                        !should && next.length && unmount()
+                                    })
                                 })
-                            })
-                        }
-                    })
+                            }
+                        })
+                    }
                 }
-            }
-            ui.lastRecognizedIdentity.addListener(id => {
-                if (id.identifier.isUnknown) return
+                ui.lastRecognizedIdentity.addListener(id => {
+                    if (id.identifier.isUnknown) return
 
-                if (isNull(ui.currentIdentity.value)) {
-                    ui.currentIdentity.value =
-                        ui.myIdentitiesRef.value.find(x => id.identifier.equals(x.identifier)) || null
-                }
-                Services.People.resolveIdentity(id.identifier).then()
+                    if (isNull(ui.currentIdentity.value)) {
+                        ui.currentIdentity.value =
+                            ui.myIdentitiesRef.value.find(x => id.identifier.equals(x.identifier)) || null
+                    }
+                    Services.People.resolveIdentity(id.identifier).then()
+                })
             })
-            return
         }
 }
 function hookUIPostMap(ui: SocialNetworkUI) {

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
@@ -18,10 +18,29 @@ export const untilElementAvailable = async (ls: LiveSelector<HTMLElement, boolea
     })
 }
 
-export const untilDocumentReady = () => {
+export function untilDomLoaded() {
+    if (document.readyState !== 'loading') return Promise.resolve()
+    return new Promise(resolve => {
+        const callback = () => {
+            if (document.readyState !== 'loading') {
+                resolve()
+                document.removeEventListener('readystatechange', callback)
+            }
+        }
+        document.addEventListener('readystatechange', callback, { passive: true })
+    })
+}
+
+export function untilDocumentReady() {
     if (document.readyState === 'complete') return Promise.resolve()
     return new Promise(resolve => {
-        document.addEventListener('readystatechange', resolve, { once: true, passive: true })
+        const callback = () => {
+            if (document.readyState === 'complete') {
+                resolve()
+                document.removeEventListener('readystatechange', callback)
+            }
+        }
+        document.addEventListener('readystatechange', callback, { passive: true })
     })
 }
 

diff --git a/src/utils/jss/ShadowRootPortal.tsx b/src/utils/jss/ShadowRootPortal.tsx
@@ -1,6 +1,6 @@
 import { livingShadowRoots, applyAdoptedStyleSheets } from './ConstructableStyleSheetsRenderer'
 import { GetContext } from '@holoflows/kit/es'
-import { untilDocumentReady } from '../utils'
+import { untilDocumentReady } from '../dom'
 
 const div = document.createElement('div')
 const shadow = div.attachShadow({ mode: 'closed' })

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -40,16 +40,6 @@ export function selectElementContents(el: Node) {
     sel.addRange(range)
 }
 
-// noinspection JSUnusedLocalSymbols
-export function untilDocumentReady() {
-    if (document.readyState === 'complete') return Promise.resolve()
-    return new Promise(resolve => {
-        document.addEventListener('readystatechange', () => document.readyState === 'complete' && resolve(), {
-            passive: true,
-        })
-    })
-}
-
 export const nop = (...args: unknown[]) => {}
 // noinspection JSUnusedLocalSymbols
 export const nopWithUnmount = (...args: unknown[]) => nop