Migrate to import.meta.env and clean up types and eslint (#36362)

`import.meta.env` is supported in both vitest and webpack [as of
recent](https://github.com/webpack/webpack/pull/19996), so replace all
previous use of `process.env` with it. Current usage is limited to test
files, I've also verified it works in actual frontend code.

`webpack/module` is added to typescript types which includes the
definition for `import.meta.env`. I've also made the eslint globals more
precise. Finally, `__webpack_public_path__` is removed from our type
definitions because `webpack/module` also provides it.

eslint.config.ts

@@ -32,10 +32,6 @@ export default defineConfig([
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
       parser: typescriptParser,
       parserOptions: {
         sourceType: 'module',
@@ -363,7 +359,7 @@ export default defineConfig([
       'import-x/no-self-import': [2],
       'import-x/no-unassigned-import': [0],
       'import-x/no-unresolved': [2, {commonjs: true, ignore: ['\\?.+$']}],
-      // 'import-x/no-unused-modules': [2, {unusedExports: true}], // not compatible with eslint 9
+      'import-x/no-unused-modules': [0], // incompatible with eslint 9
       'import-x/no-useless-path-segments': [2, {commonjs: true}],
       'import-x/no-webpack-loader-syntax': [2],
       'import-x/order': [0],
@@ -990,38 +986,19 @@ export default defineConfig([
       'vitest/valid-title': [2],
     },
   },
-  {
-    files: ['web_src/js/types.ts'],
-    rules: {
-      'import-x/no-unused-modules': [0],
-    },
-  },
   {
     files: ['**/*.d.ts'],
     rules: {
-      'import-x/no-unused-modules': [0],
       '@typescript-eslint/consistent-type-definitions': [0],
       '@typescript-eslint/consistent-type-imports': [0],
     },
   },
   {
-    files: ['*.config.*'],
-    rules: {
-      'import-x/no-unused-modules': [0],
-    },
+    files: ['*', 'tools/**/*'],
+    languageOptions: {globals: globals.node},
   },
   {
     files: ['web_src/**/*', 'docs/**/*'],
     languageOptions: {globals: globals.browser},
   },
-  {
-    files: ['web_src/**/*'],
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        __webpack_public_path__: true,
-        process: false, // https://github.com/webpack/webpack/issues/15833
-      },
-    },
-  },
 ]);

tsconfig.json

@@ -44,6 +44,7 @@
     "stripInternal": true,
     "verbatimModuleSyntax": true,
     "types": [
+      "webpack/module",
       "vitest/globals",
       "./web_src/js/globals.d.ts",
       "./types.d.ts",

web_src/js/bootstrap.ts

@@ -6,7 +6,7 @@ import {html} from './utils/html.ts';
 
 // This sets up the URL prefix used in webpack's chunk loading.
 // This file must be imported before any lazy-loading is being attempted.
-__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`;
+window.__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`;
 
 function shouldIgnoreError(err: Error) {
   const ignorePatterns = [
@@ -41,7 +41,7 @@ export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') {
 
 function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}: ErrorEvent & PromiseRejectionEvent) {
   const err = error ?? reason;
-  const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
+  const assetBaseUrl = String(new URL(window.__webpack_public_path__, window.location.origin));
   const {runModeIsProd} = window.config ?? {};
 
   // `error` and `reason` are not guaranteed to be errors. If the value is falsy, it is likely a

web_src/js/features/notification.ts

@@ -33,7 +33,7 @@ export function initNotificationCount() {
 
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${window.__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/features/stopwatch.ts

@@ -47,7 +47,7 @@ export function initStopwatch() {
   // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    const worker = new SharedWorker(`${window.__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/globals.d.ts

@@ -18,8 +18,6 @@ declare module '*.vue' {
   export function initRepositoryActionView(): void;
 }
 
-declare let __webpack_public_path__: string;
-
 declare module 'htmx.org/dist/htmx.esm.js' {
   const value = await import('htmx.org');
   export default value;
@@ -51,7 +49,6 @@ interface Element {
 }
 
 interface Window {
-  __webpack_public_path__: string;
   config: import('./web_src/js/types.ts').Config;
   $: typeof import('@types/jquery'),
   jQuery: typeof import('@types/jquery'),

web_src/js/utils/testhelper.ts

@@ -2,5 +2,5 @@
 // even if backend is in testing mode, frontend could be complied in production mode
 // so this function only checks if the frontend is in unit testing mode (usually from *.test.ts files)
 export function isInFrontendUnitTest() {
-  return process.env.TEST === 'true';
+  return import.meta.env.TEST === 'true';
 }

web_src/js/webcomponents/absolute-date.test.ts

@@ -18,9 +18,9 @@ test('toAbsoluteLocaleDate', () => {
   expect(toAbsoluteLocaleDate('10000-01-01', '', {})).toEqual('Invalid Date');
 
   // test different timezone
-  const oldTZ = process.env.TZ;
-  process.env.TZ = 'America/New_York';
+  const oldTZ = import.meta.env.TZ;
+  import.meta.env.TZ = 'America/New_York';
   expect(new Date('2024-03-15').toLocaleString('en-US')).toEqual('3/14/2024, 8:00:00 PM');
   expect(toAbsoluteLocaleDate('2024-03-15', 'en-US')).toEqual('3/15/2024, 12:00:00 AM');
-  process.env.TZ = oldTZ;
+  import.meta.env.TZ = oldTZ;
 });