use PropertyKey in hook type (#3938)

* change type definiton for unspecified keys in Hook

* also use PropertyKey in HookInterface

---------

Co-authored-by: Erik Johansson <[email protected]>

Author: SteffenDE

assets/js/phoenix_live_view/live_socket.js

@@ -82,6 +82,9 @@ export default class LiveSocket {
     this.uploaders = opts.uploaders || {};
     this.loaderTimeout = opts.loaderTimeout || LOADER_TIMEOUT;
     this.disconnectedTimeout = opts.disconnectedTimeout || DISCONNECTED_TIMEOUT;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.reloadWithJitterTimer = null;
     this.maxReloads = opts.maxReloads || MAX_RELOADS;
     this.reloadJitterMin = opts.reloadJitterMin || RELOAD_JITTER_MIN;

assets/js/phoenix_live_view/view.js

@@ -109,7 +109,13 @@ export default class View {
     this.ref = 0;
     this.lastAckRef = null;
     this.childJoins = 0;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.loaderTimer = null;
+    /**
+     * @type {ReturnType<typeof setTimeout> | null}
+     */
     this.disconnectedTimer = null;
     this.pendingDiffs = [];
     this.pendingForms = new Set();

assets/js/phoenix_live_view/view_hook.ts

@@ -154,7 +154,7 @@ export interface HookInterface {
   uploadTo(selectorOrTarget: PhxTarget, name: any, files: any): any;
 
   // allow unknown methods, as people can define them in their hooks
-  [key: string]: any;
+  [key: PropertyKey]: any;
 }
 
 // based on https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fac1aa75acdddbf4f1a95e98ee2297b54ce4b4c9/types/phoenix_live_view/hooks.d.ts#L26
@@ -204,7 +204,7 @@ export interface Hook<T = object> {
   reconnected?: (this: T & HookInterface) => void;
 
   // Allow custom methods with any signature and custom properties
-  [key: string]: ((this: T & HookInterface, ...args: any[]) => any) | any;
+  [key: PropertyKey]: any;
 }
 
 /**

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2016",
+    "target": "es2021",
     "module": "esnext",
     "moduleResolution": "node",
     "allowJs": true,
@@ -12,10 +12,7 @@
     "baseUrl": "./assets/js",
     "stripInternal": true,
     "paths": {
-      "*": [
-        "*",
-        "phoenix_live_view/*"
-      ]
+      "*": ["*", "phoenix_live_view/*"]
     },
     "declaration": true,
     "emitDeclarationOnly": true,
@@ -24,9 +21,5 @@
   "include": [
     "./assets/js/phoenix_live_view/*.js",
     "./assets/js/phoenix_live_view/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "assets/test/**/*"
   ]
-}
+}