-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(content): dispatch MonetizationEvent instead of CustomEvent (#346)
1. Dispatch `MonetizationEvent` instead of `CustomEvent` with detail 2. Keep supporting `event.detail` access for backward compat, but add a warning on accessing for first time. 3. Rename internal event (for communication between content scripts) from `monetization-v2` to `__wm_ext_monetization`, along with `onmonetization-attribute-changed` to `__wm_ext_onmonetization_attr_change`. 4. Rename contentScript to polyfill 5. Turn contentScript code from a string to regular TS file, so we can typecheck it like rest of code (added typescript fixes too). 6. Now, MonetizationEvent interface is available on global.
- Loading branch information
1 parent
bdb0fe2
commit 13d397d
Showing
10 changed files
with
175 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import type { MonetizationEventPayload } from '@/shared/messages' | ||
| ;(function () { | ||
| const handlers = new WeakMap() | ||
| const attributes: PropertyDescriptor & ThisType<EventTarget> = { | ||
| enumerable: true, | ||
| configurable: false, | ||
| get() { | ||
| return handlers.get(this) || null | ||
| }, | ||
| set(val) { | ||
| const listener = handlers.get(this) | ||
| if (listener && listener === val) { | ||
| // nothing to do here ? | ||
| return | ||
| } | ||
| const removeAnyExisting = () => { | ||
| if (listener) { | ||
| this.removeEventListener('monetization', listener) | ||
| } | ||
| } | ||
| if (val == null /* OR undefined*/) { | ||
| handlers.delete(this) | ||
| removeAnyExisting() | ||
| } else if (typeof val === 'function') { | ||
| removeAnyExisting() | ||
| this.addEventListener('monetization', val) | ||
| handlers.set(this, val) | ||
| } else { | ||
| throw new Error('val must be a function, got ' + typeof val) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| const supportsOriginal = DOMTokenList.prototype.supports | ||
| const supportsMonetization = Symbol.for('link-supports-monetization') | ||
| DOMTokenList.prototype.supports = function (token) { | ||
| // @ts-expect-error: polyfilled | ||
| if (this[supportsMonetization] && token === 'monetization') { | ||
| return true | ||
| } else { | ||
| return supportsOriginal.call(this, token) | ||
| } | ||
| } | ||
|
|
||
| const relList = Object.getOwnPropertyDescriptor( | ||
| HTMLLinkElement.prototype, | ||
| 'relList' | ||
| )! | ||
| const relListGetOriginal = relList.get! | ||
|
|
||
| relList.get = function () { | ||
| const val = relListGetOriginal.call(this) | ||
| val[supportsMonetization] = true | ||
| return val | ||
| } | ||
|
|
||
| Object.defineProperty(HTMLLinkElement.prototype, 'relList', relList) | ||
| Object.defineProperty(HTMLElement.prototype, 'onmonetization', attributes) | ||
| Object.defineProperty(Window.prototype, 'onmonetization', attributes) | ||
| Object.defineProperty(Document.prototype, 'onmonetization', attributes) | ||
|
|
||
| let eventDetailDeprecationEmitted = false | ||
| class MonetizationEvent extends Event { | ||
| public readonly amountSent: PaymentCurrencyAmount | ||
| public readonly incomingPayment: string | ||
| public readonly paymentPointer: string | ||
|
|
||
| constructor( | ||
| type: 'monetization', | ||
| eventInitDict: MonetizationEventPayload['detail'] | ||
| ) { | ||
| super(type, { bubbles: true }) | ||
| const { amountSent, incomingPayment, paymentPointer } = eventInitDict | ||
| this.amountSent = amountSent | ||
| this.incomingPayment = incomingPayment | ||
| this.paymentPointer = paymentPointer | ||
| } | ||
|
|
||
| get [Symbol.toStringTag]() { | ||
| return 'MonetizationEvent' | ||
| } | ||
|
|
||
| get detail() { | ||
| if (!eventDetailDeprecationEmitted) { | ||
| const msg = `MonetizationEvent.detail is deprecated. Access attributes directly instead.` | ||
| // eslint-disable-next-line no-console | ||
| console.warn(msg) | ||
| eventDetailDeprecationEmitted = true | ||
| } | ||
| const { amountSent, incomingPayment, paymentPointer } = this | ||
| return { amountSent, incomingPayment, paymentPointer } | ||
| } | ||
| } | ||
|
|
||
| // @ts-expect-error: we're defining this now | ||
| window.MonetizationEvent = MonetizationEvent | ||
|
|
||
| window.addEventListener( | ||
| '__wm_ext_monetization', | ||
| (event: CustomEvent<MonetizationEventPayload['detail']>) => { | ||
| if (!(event.target instanceof HTMLLinkElement)) return | ||
| if (!event.target.isConnected) return | ||
|
|
||
| const monetizationTag = event.target | ||
| monetizationTag.dispatchEvent( | ||
| new MonetizationEvent('monetization', event.detail) | ||
| ) | ||
| }, | ||
| { capture: true } | ||
| ) | ||
|
|
||
| window.addEventListener( | ||
| '__wm_ext_onmonetization_attr_change', | ||
| (event: CustomEvent<{ attribute?: string }>) => { | ||
| if (!event.target) return | ||
|
|
||
| const { attribute } = event.detail | ||
| // @ts-expect-error: we're defining this now | ||
| event.target.onmonetization = attribute | ||
| ? new Function(attribute).bind(event.target) | ||
| : null | ||
| }, | ||
| { capture: true } | ||
| ) | ||
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.