Add types for js globals

.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"]

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;
+}

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) => {

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>,
+}