refactor: Port renderer/web-view to TypeScript (#17250)

lib/renderer/web-view/web-view-element.ts

@@ -0,0 +1,117 @@
+// When using context isolation, the WebViewElement and the custom element
+// methods have to be defined in the main world to be able to be registered.
+//
+// Note: The hidden values can only be read/set inside the same context, all
+// methods that access the "internal" hidden value must be put in this file.
+//
+// Note: This file could be loaded in the main world of contextIsolation page,
+// which runs in browserify environment instead of Node environment, all native
+// modules must be passed from outside, all included files must be plain JS.
+
+import { WEB_VIEW_CONSTANTS } from '@electron/internal/renderer/web-view/web-view-constants'
+import { WebViewImpl, webViewImplModule } from '@electron/internal/renderer/web-view/web-view-impl'
+
+// Return a WebViewElement class that is defined in this context.
+const defineWebViewElement = (v8Util: NodeJS.V8UtilBinding, webViewImpl: typeof webViewImplModule) => {
+  const { guestViewInternal, WebViewImpl } = webViewImpl
+  return class WebViewElement extends HTMLElement {
+    public internalInstanceId?: number;
+
+    static get observedAttributes () {
+      return [
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_PARTITION,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_HTTPREFERRER,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_USERAGENT,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_NODEINTEGRATION,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_PLUGINS,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_DISABLEWEBSECURITY,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_ALLOWPOPUPS,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_ENABLEREMOTEMODULE,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_PRELOAD,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_BLINKFEATURES,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_DISABLEBLINKFEATURES,
+        WEB_VIEW_CONSTANTS.ATTRIBUTE_WEBPREFERENCES
+      ]
+    }
+
+    constructor () {
+      super()
+      v8Util.setHiddenValue(this, 'internal', new WebViewImpl(this))
+    }
+
+    connectedCallback () {
+      const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
+      if (!internal) {
+        return
+      }
+      if (!internal.elementAttached) {
+        guestViewInternal.registerEvents(internal, internal.viewInstanceId)
+        internal.elementAttached = true
+        internal.attributes[WEB_VIEW_CONSTANTS.ATTRIBUTE_SRC].parse()
+      }
+    }
+
+    attributeChangedCallback (name: string, oldValue: any, newValue: any) {
+      const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
+      if (internal) {
+        internal.handleWebviewAttributeMutation(name, oldValue, newValue)
+      }
+    }
+
+    disconnectedCallback () {
+      const internal = v8Util.getHiddenValue<WebViewImpl>(this, 'internal')
+      if (!internal) {
+        return
+      }
+      guestViewInternal.deregisterEvents(internal.viewInstanceId)
+      internal.elementAttached = false
+      this.internalInstanceId = 0
+      internal.reset()
+    }
+  }
+}
+
+// Register <webview> custom element.
+const registerWebViewElement = (v8Util: NodeJS.V8UtilBinding, webViewImpl: typeof webViewImplModule) => {
+  // I wish eslint wasn't so stupid, but it is
+  // eslint-disable-next-line
+  const WebViewElement = defineWebViewElement(v8Util, webViewImpl) as unknown as typeof ElectronInternal.WebViewElement
+
+  webViewImpl.setupMethods(WebViewElement)
+
+  // The customElements.define has to be called in a special scope.
+  const webFrame = webViewImpl.webFrame as ElectronInternal.WebFrameInternal
+  webFrame.allowGuestViewElementDefinition(window, () => {
+    window.customElements.define('webview', WebViewElement);
+    (window as any).WebView = WebViewElement
+
+    // Delete the callbacks so developers cannot call them and produce unexpected
+    // behavior.
+    delete WebViewElement.prototype.connectedCallback
+    delete WebViewElement.prototype.disconnectedCallback
+    delete WebViewElement.prototype.attributeChangedCallback
+
+    // Now that |observedAttributes| has been retrieved, we can hide it from
+    // user code as well.
+    // TypeScript is concerned that we're deleting a read-only attribute
+    delete (WebViewElement as any).observedAttributes
+  })
+}
+
+// Prepare to register the <webview> element.
+export const setupWebView = (v8Util: NodeJS.V8UtilBinding, webViewImpl: typeof webViewImplModule) => {
+  const useCapture = true
+  const listener = (event: Event) => {
+    if (document.readyState === 'loading') {
+      return
+    }
+
+    webViewImpl.setupAttributes()
+    registerWebViewElement(v8Util, webViewImpl)
+
+    window.removeEventListener(event.type, listener, useCapture)
+  }
+
+  window.addEventListener('readystatechange', listener, useCapture)
+}