Skip to content

Hide more of the internals of runtime checking #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 8, 2023
Merged

Hide more of the internals of runtime checking #302

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 19 additions & 12 deletions src/features/runtime-checks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,27 @@ class DDGRuntimeChecks extends HTMLElement {
this.#connected = false
}

/**
* This method is called once and externally so has to remain public.
**/
setTagName (tagName) {
this.#tagName = tagName
// Clear the method so it can't be called again
delete this.setTagName
}

connectedCallback () {
// Solves re-entrancy issues from React
if (this.#connected) return
this.#connected = true
if (!this.transplantElement) {
if (!this.#transplantElement) {
// Restore the 'this' object with the DDGRuntimeChecks prototype as sometimes pages will overwrite it.
Object.setPrototypeOf(this, DDGRuntimeChecks.prototype)
}
this.transplantElement()
this.#transplantElement()
}

monitorProperties (el) {
#monitorProperties (el) {
// Mutation oberver and observedAttributes don't work on property accessors
// So instead we need to monitor all properties on the prototypes and forward them to the real element
let propertyNames = []
Expand Down Expand Up @@ -85,7 +90,7 @@ class DDGRuntimeChecks extends HTMLElement {
* The element has been moved to the DOM, so we can now reflect all changes to a real element.
* This is to allow us to interrogate the real element before it is moved to the DOM.
*/
transplantElement () {
#transplantElement () {
// Creeate the real element
const el = initialCreateElement.call(document, this.#tagName)

Expand Down Expand Up @@ -134,7 +139,7 @@ class DDGRuntimeChecks extends HTMLElement {
this.insertAdjacentElement('afterend', el)
} catch (e) { console.warn(e) }

this.monitorProperties(el)
this.#monitorProperties(el)
// TODO pollyfill WeakRef
this.#el = new WeakRef(el)

Expand All @@ -144,13 +149,15 @@ class DDGRuntimeChecks extends HTMLElement {
}, elementRemovalTimeout)
}

getElement () {
#getElement () {
return this.#el?.deref()
}

/* Native DOM element methods we're capturing to supplant values into the constructed node or store data for. */

setAttribute (name, value) {
if (shouldFilterKey(this.#tagName, 'attribute', name)) return
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.setAttribute(name, value)
}
Expand All @@ -159,7 +166,7 @@ class DDGRuntimeChecks extends HTMLElement {

removeAttribute (name) {
if (shouldFilterKey(this.#tagName, 'attribute', name)) return
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.removeAttribute(name)
}
Expand All @@ -168,7 +175,7 @@ class DDGRuntimeChecks extends HTMLElement {

addEventListener (...args) {
if (shouldFilterKey(this.#tagName, 'listener', args[0])) return
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.addEventListener(...args)
}
Expand All @@ -177,7 +184,7 @@ class DDGRuntimeChecks extends HTMLElement {

removeEventListener (...args) {
if (shouldFilterKey(this.#tagName, 'listener', args[0])) return
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.removeEventListener(...args)
}
Expand All @@ -200,15 +207,15 @@ class DDGRuntimeChecks extends HTMLElement {
}

remove () {
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.remove()
}
return super.remove()
}

removeChild (child) {
const el = this.getElement()
const el = this.#getElement()
if (el) {
return el.removeChild(child)
}
Expand Down