From b5b8a9b317e79dff30259e61abd4cd17575b7daf Mon Sep 17 00:00:00 2001 From: SunriseFox Date: Wed, 6 Nov 2019 13:22:18 +0800 Subject: [PATCH] fix: script error when documemt is not ready --- .../facebook.com/UI/injectKnownIdentity.tsx | 1 - src/social-network/ui.ts | 78 ++++++++++--------- src/utils/dom.ts | 23 +++++- src/utils/jss/ShadowRootPortal.tsx | 2 +- src/utils/utils.ts | 10 --- 5 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/social-network-provider/facebook.com/UI/injectKnownIdentity.tsx b/src/social-network-provider/facebook.com/UI/injectKnownIdentity.tsx index 18124394b6d..f7d8ebff320 100644 --- 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 index 21b99cd966e..67e2dd00750 100644 --- 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 index 46ab9c74e57..5ee58becf70 100644 --- a/src/utils/dom.ts +++ b/src/utils/dom.ts @@ -18,10 +18,29 @@ export const untilElementAvailable = async (ls: LiveSelector { +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 index 418767809cb..a187c3eeae5 100644 --- 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 index f0c1bb448a1..9db8e9857fb 100644 --- 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