feat: Add libDomPatching that adds more completions for events (for JS projects only). However it adds incorrect completions sometimes, so enable only if you're sure about it!

Author: zardoy

src/configurationType.ts

@@ -253,10 +253,12 @@ export type Configuration = {
      */
     'jsxImproveElementsSuggestions.filterNamespaces': boolean
     /**
-     * Requires TS server restart
+     * Requires TS server restart. Recommended to enable only per project.
+     *
+     * Enables better lib.dom completions (such as input events). For JS projects only (that don't use `tsc`)!
      * @default false
      *  */
-    // 'eventTypePatching.enable': boolean
+    libDomPatching: boolean
     // 'globalTypedQuerySelector.enable': boolean,
     /**
      * For DX in JS projects only!

typescript/src/decorateProxy.ts

@@ -14,6 +14,7 @@ import lodashGet from 'lodash.get'
 import decorateWorkspaceSymbolSearch from './workspaceSymbolSearch'
 import decorateFormatFeatures from './decorateFormatFeatures'
 import namespaceAutoImports from './namespaceAutoImports'
+import libDomPatching from './libDomPatching'
 
 /** @internal */
 export const thisPluginMarker = '__essentialPluginsMarker__'
@@ -164,6 +165,8 @@ export const decorateLanguageService = (
         return languageService.findRenameLocations(fileName, position, findInStrings, findInComments, providePrefixAndSuffixTextForRename)
     }
 
+    libDomPatching(languageServiceHost, c)
+
     if (pluginSpecificSyntaxServerConfigCheck) {
         if (!__WEB__) {
             // dedicated syntax server (which is enabled by default), which fires navtree doesn't seem to receive onConfigurationChanged

typescript/src/libDomPatching.ts

@@ -1,16 +1,21 @@
-import type tslib from 'typescript/lib/tsserverlibrary'
+import { GetConfig } from './types'
+import { patchMethod } from './utils'
 
-// not used for now
-export default (info: ts.server.PluginCreateInfo) => {
-    // info.serverHost.readFile = fileName => {
-    //     let contents = realReadFile(fileName)
-    //     if (fileName.endsWith('/node_modules/typescript/lib/lib.dom.d.ts') && c('eventTypePatching.enable')) {
-    //         contents = contents
-    //             ?.replace('interface EventTarget {', 'interface EventTarget extends HTMLElement {')
-    //             .replace('"change": Event;', '"change": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
-    //             .replace('"change": Event;', '"change": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
-    //             .replace('"input": Event;', '"input": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
-    //     }
-    //     return contents
-    // }
+export default (languageServiceHost: ts.LanguageServiceHost, c: GetConfig) => {
+    if (!c('libDomPatching')) return
+    patchMethod(languageServiceHost, 'getScriptSnapshot', oldMethod => fileName => {
+        const scriptSnapshot = oldMethod(fileName)
+        if (!fileName.endsWith('/node_modules/typescript/lib/lib.dom.d.ts') /*  && c('eventTypePatching.enable') */) {
+            return scriptSnapshot
+        }
+        if (!scriptSnapshot) return
+        let contents = scriptSnapshot.getText(0, scriptSnapshot.getLength())
+        contents = contents
+            // .replace(/(interface EventListener \{\n\s*\(evt: )Event(\): void;\n\})/, '$1CustomEvent$2')
+            .replace('interface EventTarget {', 'interface EventTarget extends HTMLElement {')
+            .replace('"change": Event;', '"change": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
+            .replace('"change": Event;', '"change": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
+            .replace('"input": Event;', '"input": Event & {currentTarget: HTMLInputElement, target: HTMLInputElement};')
+        return ts.ScriptSnapshot.fromString(contents)
+    })
 }