Add types for js globals (#31586)

Adds types for `window.config` and jQuery/htmx globals, eliminating 48
`tsc` errors.

diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 59eff85dc32d0bbb84d256823c48698af27f072a..47f4eaa2d2f40d4f063acda704846802f5c91940 100644 (file)
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -47,7 +47,6 @@ overrides:
   - files: ["web_src/**/*"]
     globals:
       __webpack_public_path__: true
-      htmx: true
       process: false # https://github.com/webpack/webpack/issues/15833
   - files: ["web_src/**/*", "docs/**/*"]
     env:
@@ -58,7 +57,15 @@ overrides:
       worker: true
     rules:
       no-restricted-globals: [2, addEventListener, blur, close, closed, confirm, defaultStatus, defaultstatus, error, event, external, find, focus, frameElement, frames, history, innerHeight, innerWidth, isFinite, isNaN, length, locationbar, menubar, moveBy, moveTo, name, onblur, onerror, onfocus, onload, onresize, onunload, open, opener, opera, outerHeight, outerWidth, pageXOffset, pageYOffset, parent, print, removeEventListener, resizeBy, resizeTo, screen, screenLeft, screenTop, screenX, screenY, scroll, scrollbars, scrollBy, scrollTo, scrollX, scrollY, status, statusbar, stop, toolbar, top]
-  - files: ["*.config.*", "**/*.d.ts"]
+  - files: ["*.config.*"]
+    rules:
+      i/no-unused-modules: [0]
+  - files: ["**/*.d.ts"]
+    rules:
+      i/no-unused-modules: [0]
+      "@typescript-eslint/consistent-type-definitions": [0]
+      "@typescript-eslint/consistent-type-imports": [0]
+  - files: ["web_src/js/types.ts"]
     rules:
       i/no-unused-modules: [0]
   - files: ["**/*.test.*", "web_src/js/test/setup.ts"]

diff --git a/types.d.ts b/types.d.ts
index 9348424371fbfb6442044950595b405e9434b4af..ddfe90407fc329f3afd9b49056a40cc73b03fc98 100644 (file)
--- a/types.d.ts
+++ b/types.d.ts
@@ -2,3 +2,17 @@ declare module '*.svg' {
   const value: string;
   export default value;
 }
+
+declare let __webpack_public_path__: string;
+
+interface Window {
+  config: import('./web_src/js/types.ts').Config;
+  $: typeof import('@types/jquery'),
+  jQuery: typeof import('@types/jquery'),
+  htmx: typeof import('htmx.org'),
+}
+
+declare module 'htmx.org/dist/htmx.esm.js' {
+  const value = await import('htmx.org');
+  export default value;
+}

diff --git a/web_src/js/htmx.ts b/web_src/js/htmx.ts
index ac7e540fe4dbef8d23a9e5f19cb5e79e85508c89..bfc21477360735ec271c351e9f7bc831418753d5 100644 (file)
--- a/web_src/js/htmx.ts
+++ b/web_src/js/htmx.ts
@@ -4,8 +4,8 @@ import {showErrorToast} from './modules/toast.ts';
 import 'idiomorph/dist/idiomorph-ext.js';
 
 // https://htmx.org/reference/#config
-htmx.config.requestClass = 'is-loading';
-htmx.config.scrollIntoViewOnBoost = false;
+window.htmx.config.requestClass = 'is-loading';
+window.htmx.config.scrollIntoViewOnBoost = false;
 
 // https://htmx.org/events/#htmx:sendError
 document.body.addEventListener('htmx:sendError', (event) => {

diff --git a/web_src/js/types.ts b/web_src/js/types.ts
new file mode 100644 (file)
index 0000000..f69aa92
--- /dev/null
+++ b/web_src/js/types.ts
@@ -0,0 +1,23 @@
+export type MentionValue = {
+  key: string,
+  value: string,
+  name: string,
+  fullname: string,
+  avatar: string,
+}
+
+export type Config = {
+  appUrl: string,
+  appSubUrl: string,
+  assetVersionEncoded: string,
+  assetUrlPrefix: string,
+  runModeIsProd: boolean,
+  customEmojis: Record<string, string>,
+  csrfToken: string,
+  pageData: Record<string, any>,
+  notificationSettings: Record<string, any>,
+  enableTimeTracking: boolean,
+  mentionValues?: MentionValue[],
+  mermaidMaxSourceCharacters: number,
+  i18n: Record<string, string>,
+}