Eliminate all usages of require() in the client (compiler-explorer#7796)

Author: junlarsen

static/client.d.ts

@@ -0,0 +1,33 @@
+// Copyright (c) 2025, Compiler Explorer Authors
+// All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are met:
+//
+//     * Redistributions of source code must retain the above copyright notice,
+//       this list of conditions and the following disclaimer.
+//     * Redistributions in binary form must reproduce the above copyright
+//       notice, this list of conditions and the following disclaimer in the
+//       documentation and/or other materials provided with the distribution.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+// POSSIBILITY OF SUCH DAMAGE.
+
+declare module '*.pug' {
+    const content: any;
+    export default content;
+}
+
+declare module 'lodash.clonedeep' {
+    const cloneDeep: <T>(value: T) => T;
+    export = cloneDeep;
+}

static/main.ts

@@ -70,19 +70,22 @@ import {setupRealDark, takeUsersOutOfRealDark} from './real-dark.js';
 import {formatISODate, updateAndCalcTopBarHeight} from './utils.js';
 
 const logos = require.context('../views/resources/logos', false, /\.(png|svg)$/);
-
 const siteTemplateScreenshots = require.context('../views/resources/template_screenshots', false, /\.png$/);
+import changelogDocument from './generated/changelog.pug';
+import cookiesDocument from './generated/cookies.pug';
+import privacyDocument from './generated/privacy.pug';
 
 if (!window.PRODUCTION && !options.embedded) {
+    // TODO: Replace with top-level await import() when we move to Vite
     require('./tests/_all');
 }
 
 //css
-require('bootstrap/dist/css/bootstrap.min.css');
-require('golden-layout/src/css/goldenlayout-base.css');
-require('tom-select/dist/css/tom-select.bootstrap5.css');
-require('./styles/colours.scss');
-require('./styles/explorer.scss');
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'golden-layout/src/css/goldenlayout-base.css';
+import 'tom-select/dist/css/tom-select.bootstrap5.css';
+import './styles/colours.scss';
+import './styles/explorer.scss';
 
 // Check to see if the current unload is a UI reset.
 // Forgive me the global usage here
@@ -91,8 +94,8 @@ const simpleCooks = new SimpleCook();
 const historyWidget = new HistoryWidget();
 
 const policyDocuments = {
-    cookies: require('./generated/cookies.pug').default,
-    privacy: require('./generated/privacy.pug').default,
+    cookies: cookiesDocument,
+    privacy: privacyDocument,
 };
 
 function setupSettings(hub: Hub): [Themer, SiteSettings] {
@@ -193,7 +196,7 @@ function setupButtons(options: CompilerExplorerOptions, hub: Hub) {
 
     $('#changes').on('click', () => {
         // TODO(jeremy-rifkin): Fix types
-        alertSystem.alert('Changelog', $(require('./generated/changelog.pug').default.text) as any);
+        alertSystem.alert('Changelog', changelogDocument.text);
     });
 
     $.get(window.location.origin + window.httpRoot + 'bits/icons.html')

static/multifile-service.ts

@@ -30,8 +30,10 @@ import {FiledataPair} from '../types/compilation/compilation.interfaces.js';
 import {unwrap} from './assert.js';
 import {Hub} from './hub.js';
 import {LanguageKey} from './languages.interfaces.js';
+import * as options from './options.js';
 import {Alert} from './widgets/alert.js';
-const languages = require('./options').options.languages;
+
+const languages = options.options.languages;
 
 export interface MultifileFile {
     fileId: number;

static/sharing.ts

@@ -36,8 +36,7 @@ import * as url from './url.js';
 import {SentryCapture} from './sentry.js';
 import {Settings, SiteSettings} from './settings.js';
 import ClickEvent = JQuery.ClickEvent;
-
-const cloneDeep = require('lodash.clonedeep');
+import cloneDeep from 'lodash.clonedeep';
 
 enum LinkType {
     Short = 0,

static/url.ts

@@ -23,10 +23,9 @@
 // POSSIBILITY OF SUCH DAMAGE.
 
 import GoldenLayout from 'golden-layout';
+import lzstring from 'lz-string';
 import _ from 'underscore';
-
-const lzstring = require('lz-string');
-const Components = require('./components');
+import * as Components from './components.js';
 
 import * as rison from './rison.js';
 
@@ -47,6 +46,8 @@ export function convertOldState(state: any): any {
     };
     const filters = _.clone(state.filterAsm);
     delete filters.colouriseAsm;
+    // TODO(junlarsen): find the missing language field here
+    // @ts-expect-error: this is missing the language field, which was never noticed because the import was untyped
     content.push(Components.getEditorWith(1, source, options));
     content.push(Components.getCompilerWith(1, filters, sc.options, sc.compiler));
     return {version: 4, content: [{type: 'row', content: content}]};

static/widgets/load-save.ts

@@ -31,11 +31,10 @@ import {SourceApiEntry} from '../../types/source.interfaces.js';
 import {unwrap, unwrapString} from '../assert.js';
 import * as BootstrapUtils from '../bootstrap-utils.js';
 import {HistorySource} from '../history.js';
+import * as history from '../history.js';
 import {localStorage} from '../local.js';
 import {Alert} from './alert.js';
 
-const history = require('../history');
-
 type PopulateItem = {name: string; load: () => void; delete?: () => void; overwrite?: () => void};
 
 export class LoadSave {