Fixathon: Web app dependency updates part 1 (#29036)

* Ensure all packages remove a node_modules in their folder when cleaning

* Upgrade typescript to 5.6.3 and move to root package.json

Note that this currently fails to build the types package due to
@types/node which I'm going to try to remove

* Update @types/node to 20.11 to match .nvmrc

* Upgrade zen-observable to 0.10.0

It looks like localforage-observable uses its own version
of zen-observable because it hasn't been updated in years.
This seems like something we probably should remove.

* Update yargs to 17.7.2

* Update webpack-dev-server to 5.1.0

* Remove webpack-bundle-analyzer since we haven't used it in years

* Update webpack to 5.95.0

* Update web-vitals to 4.2.4

* Update turndown to 7.2.0

* Update tinycolor2 to 1.6.0

* Update timezones.json to 1.7.0

* Update stylelint to 16.10.0, stylelint-config-recommended-scss to 14.1.0, and stylelint-scss to 6.8.1

* Update webpack-cli to 5.1.4

* Update style-loader to 4.0.0

* Change all Webpack scripts to be ES modules

* Update strip-ansi to 7.1.0

This is a build script dependency

* Update chalk to 5.3.0

This is a build script dependency

* Update concurrently to 9.0.1

This is a build script dependency

* Update smooth-scroll-into-view-if-needed to 2.0.2

* MM-48205 Update serialize-error to 11.0.3

We didn't update this before because it's an ES module which caused Jest to complain. We can fix that by making Jest transform the it

* Update semver to 7.6.3

* Update types for semver, tinycolor2, turndown, and webpack

* Fix type issues: change Props to a type

* Fix type issues: invalid HTML attributes

* Remove unneeded option from Webpack config

webapp/scripts/build.mjs

@@ -3,10 +3,10 @@
 
 /* eslint-disable no-console */
 
-const chalk = require('chalk');
-const concurrently = require('concurrently');
+import chalk from 'chalk';
+import concurrently from 'concurrently';
 
-const {getExitCode, getPlatformCommands} = require('./utils.js');
+import {getExitCode, getPlatformCommands} from './utils.mjs';
 
 async function buildAll() {
     console.log(chalk.inverse.bold('Building subpackages...') + '\n');

webapp/scripts/dev-server.mjs

@@ -3,10 +3,10 @@
 
 /* eslint-disable no-console */
 
-const chalk = require('chalk');
-const concurrently = require('concurrently');
+import chalk from 'chalk';
+import concurrently from 'concurrently';
 
-const {getPlatformCommands} = require('./utils.js');
+import {getPlatformCommands} from './utils.mjs';
 
 async function watchAllWithDevServer() {
     console.log(chalk.inverse.bold('Watching web app and all subpackages...'));

webapp/scripts/run.mjs

@@ -3,11 +3,11 @@
 
 /* eslint-disable no-console, no-process-env */
 
-const chalk = require('chalk');
-const concurrently = require('concurrently');
+import chalk from 'chalk';
+import concurrently from 'concurrently';
 
-const {makeRunner} = require('./runner.js');
-const {getExitCode, getPlatformCommands} = require('./utils.js');
+import {makeRunner} from './runner.mjs';
+import {getExitCode, getPlatformCommands} from './utils.mjs';
 
 async function watchAll(useRunner) {
     if (!useRunner) {

webapp/scripts/runner.mjs

@@ -1,10 +1,10 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-const {Writable} = require('stream');
+import {Writable} from 'node:stream';
 
-const blessed = require('blessed');
-const stripAnsi = require('strip-ansi');
+import blessed from 'blessed';
+import stripAnsi from 'strip-ansi';
 
 class Runner {
     commands;
@@ -228,11 +228,10 @@ class Runner {
     }
 }
 
-function makeRunner(commands) {
+export function makeRunner(commands) {
     const runner = new Runner(commands);
 
     runner.renderUi();
 
     return runner;
 }
-exports.makeRunner = makeRunner;

webapp/scripts/utils.mjs

@@ -1,13 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-const path = require('path');
+import fs from 'node:fs';
+import path from 'node:path';
 
-const chalk = require('chalk');
-
-const packageJson = require('../package.json');
+import chalk from 'chalk';
 
 function getWorkspaces() {
+    const packageFile = fs.readFileSync('package.json');
+    const packageJson = JSON.parse(packageFile, 'utf8');
+
     return packageJson.workspaces;
 }
 
@@ -17,8 +19,8 @@ function getPlatformPackagesContainingCommand(scriptName) {
             return false;
         }
 
-        // eslint-disable-next-line global-require
-        const workspacePackageJson = require(path.join(__dirname, '..', workspace, 'package.json'));
+        const workspacePackageFile = fs.readFileSync(path.join(workspace, 'package.json'));
+        const workspacePackageJson = JSON.parse(workspacePackageFile, 'utf8');
 
         return workspacePackageJson?.scripts?.[scriptName];
     });
@@ -27,7 +29,7 @@ function getPlatformPackagesContainingCommand(scriptName) {
 /**
  * Returns an array of concurrently commands to run a given script on every platform workspace that contains it.
  */
-function getPlatformCommands(scriptName) {
+export function getPlatformCommands(scriptName) {
     return getPlatformPackagesContainingCommand(scriptName).map((workspace) => ({
         command: `npm:${scriptName} --workspace=${workspace}`,
         name: workspace.substring(workspace.lastIndexOf('/') + 1),
@@ -46,7 +48,7 @@ function getColorForWorkspace(workspace) {
  * @param {import("concurrently").CloseEvent[]} closeEvents - An array of CloseEvents thrown by concurrently when waiting on a result
  * @param {number} codeOnSignal - Which error code to return when the process is interrupted
  */
-function getExitCode(closeEvents, codeOnSignal = 1) {
+export function getExitCode(closeEvents, codeOnSignal = 1) {
     const exitCode = closeEvents.find((event) => !event.killed && event.exitCode > 0)?.exitCode;
 
     if (typeof exitCode === 'string') {
@@ -55,8 +57,3 @@ function getExitCode(closeEvents, codeOnSignal = 1) {
         return exitCode;
     }
 }
-
-module.exports = {
-    getExitCode,
-    getPlatformCommands,
-};