web: Set "type": "module" and convert various CJS files to ESM.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.cjs

@@ -17,11 +17,9 @@ module.exports = {
         "plugin:unicorn/recommended",
         "prettier",
     ],
-    parser: "@babel/eslint-parser",
     parserOptions: {
         requireConfigFile: false,
         warnOnUnsupportedTypeScriptVersion: false,
-        sourceType: "unambiguous",
     },
     plugins: ["formatjs", "no-jquery"],
     settings: {

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee",
+  "type": "module",
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/preset-env": "^7.5.5",

prettier.config.js

@@ -1,6 +1,4 @@
-"use strict";
+export default {
-
-module.exports = {
     bracketSpacing: false,
     trailingComma: "all",
     overrides: [

stylelint.config.js

@@ -1,6 +1,4 @@
-"use strict";
+export default {
-
-module.exports = {
     extends: ["stylelint-config-standard"],
     plugins: ["stylelint-high-performance-animation"],
     rules: {

templates/zerver/emails/stylelint.config.js

@@ -1,6 +1,4 @@
-"use strict";
+export default {
-
-module.exports = {
     extends: ["../../../stylelint.config"],
     rules: {
         // Add some exceptions for recommended rules

tools/check-openapi

@@ -1,15 +1,13 @@
 #!/usr/bin/env node
 
-"use strict";
+import * as fs from "node:fs";
+import {parseArgs} from "node:util";
 
-const fs = require("node:fs");
+import * as Diff from "diff";
-const {parseArgs} = require("node:util");
+import ExampleValidator from "openapi-examples-validator";
-
+import {format as prettierFormat} from "prettier";
-const Diff = require("diff");
+import SwaggerParser from "swagger-parser";
-const ExampleValidator = require("openapi-examples-validator");
+import {CST, Composer, LineCounter, Parser, Scalar, YAMLMap, YAMLSeq, visit} from "yaml";
-const Prettier = require("prettier");
-const SwaggerParser = require("swagger-parser");
-const {Composer, CST, LineCounter, Parser, Scalar, YAMLMap, YAMLSeq, visit} = require("yaml");
 
 const usage = "Usage: check-openapi [--fix] <file>...";
 const {
@@ -79,7 +77,7 @@ async function checkFile(file) {
             ) {
                 promises.push(
                     (async () => {
-                        let formatted = await Prettier.format(node.value.value, {
+                        let formatted = await prettierFormat(node.value.value, {
                             parser: "markdown",
                         });
                         if (

tools/node_lib/dump_fixtures.js

@@ -1,5 +1,3 @@
-"use strict";
+import * as events from "../../web/tests/lib/events.cjs";
-
-const events = require("../../web/tests/lib/events.cjs");
 
 console.info(JSON.stringify(events.fixtures, null, 4));

tools/screenshots/message-screenshot.js

@@ -1,13 +1,11 @@
-"use strict";
-
 /* global $, CSS */
 
-const fs = require("node:fs");
+import * as fs from "node:fs";
-const path = require("node:path");
+import path from "node:path";
-const {parseArgs} = require("node:util");
+import {parseArgs} from "node:util";
 
-require("css.escape");
+import "css.escape";
-const puppeteer = require("puppeteer");
+import puppeteer from "puppeteer";
 
 const usage = "Usage: message-screenshot.js <message_id> <image_path> <realm_url>";
 const {

tools/screenshots/thread-screenshot.js

@@ -1,13 +1,11 @@
-"use strict";
-
 /* global $, CSS */
 
-const fs = require("node:fs");
+import * as fs from "node:fs";
-const path = require("node:path");
+import path from "node:path";
-const {parseArgs} = require("node:util");
+import {parseArgs} from "node:util";
 
-require("css.escape");
+import "css.escape";
-const puppeteer = require("puppeteer");
+import puppeteer from "puppeteer";
 
 const usage =
     "Usage: thread-screenshot.js <narrow_uri> <narrow> <message_id> <image_path> <realm_url>";

tools/setup/generate-test-credentials

@@ -10,6 +10,5 @@ mkdir -p var/puppeteer
 password=$(./manage.py print_initial_password "$email" | grep -F "$email" | awk '{ print $2 }')
 cat >var/puppeteer/test_credentials.js <<EOF
 // Generated by tools/setup/generate-test-credentials
-var test_credentials = {default_user: {username: '$email', password: '$password'}};
+export const test_credentials = {default_user: {username: '$email', password: '$password'}};
-try { exports.test_credentials = test_credentials; } catch (e) {}
 EOF

tools/test-js-with-node

@@ -386,7 +386,13 @@ def run_tests_via_node_js() -> int:
     # reports.  Running under nyc is slower and creates funny
     # tracebacks, so you generally want to get coverage reports only
     # after making sure tests will pass.
-    node_tests_cmd = ["node", "--stack-trace-limit=100", INDEX_JS]
+    node_tests_cmd = [
+        "node",
+        "--stack-trace-limit=100",
+        "--experimental-require-module",
+        "--no-warnings=ExperimentalWarning",
+        INDEX_JS,
+    ]
     if individual_files:
         # If we passed a specific set of tests, run in serial mode.
         global parallel

tsconfig.json

@@ -12,7 +12,8 @@
 
         /* Modules */
         "allowImportingTsExtensions": true,
-        "moduleResolution": "node",
+        "module": "preserve",
+        "moduleResolution": "bundler",
         "paths": {
             "*": ["./web/src/types/*"],
         },

web/babel.config.js

@@ -1,6 +1,4 @@
-"use strict";
+export default {
-
-module.exports = {
     plugins: [
         [
             "formatjs",
@@ -21,5 +19,4 @@ module.exports = {
         ],
         "@babel/typescript",
     ],
-    sourceType: "unambiguous",
 };

web/postcss.config.js

@@ -1,8 +1,12 @@
-"use strict";
+import path from "node:path";
 
-const path = require("node:path");
+import postcssExtendRule from "postcss-extend-rule";
+import postcssImport from "postcss-import";
+import postcssPrefixWrap from "postcss-prefixwrap";
+import postcssPresetEnv from "postcss-preset-env";
+import postcssSimpleVars from "postcss-simple-vars";
 
-const {media_breakpoints} = require("./src/css_variables.js");
+import {media_breakpoints} from "./src/css_variables.js";
 
 const config = ({file}) => ({
     plugins: [
@@ -10,16 +14,16 @@ const config = ({file}) => ({
             // Add postcss-import plugin with postcss-prefixwrap to handle
             // the flatpickr dark theme. We do this because flatpickr themes
             // are not scoped. See https://github.com/flatpickr/flatpickr/issues/2168.
-            require("postcss-import")({
+            postcssImport({
-                plugins: [require("postcss-prefixwrap")("%dark-theme")],
+                plugins: [postcssPrefixWrap("%dark-theme")],
             }),
-        require("postcss-extend-rule"),
+        postcssExtendRule,
-        require("postcss-simple-vars")({variables: media_breakpoints}),
+        postcssSimpleVars({variables: media_breakpoints}),
-        require("postcss-preset-env")({
+        postcssPresetEnv({
             features: {
                 "nesting-rules": true,
             },
         }),
     ],
 });
-module.exports = config;
+export default config;

web/src/css_variables.js

@@ -1,7 +1,3 @@
-/* eslint-env commonjs */
-
-"use strict";
-
 // Media query breakpoints according to Bootstrap 4.5
 const xs = 0;
 const sm = 576;
@@ -25,34 +21,32 @@ const cb3 = 860;
 const cb4 = 750;
 const cb5 = 504;
 
-module.exports = {
+export const media_breakpoints = {
-    media_breakpoints: {
+    xs_min: xs + "px",
-        xs_min: xs + "px",
+    sm_min: sm + "px",
-        sm_min: sm + "px",
+    md_min: md + "px",
-        md_min: md + "px",
+    mc_min: mc + "px",
-        mc_min: mc + "px",
+    lg_min: lg + "px",
-        lg_min: lg + "px",
+    xl_min: xl + "px",
-        xl_min: xl + "px",
+    ml_min: ml + "px",
-        ml_min: ml + "px",
+    mm_min: mm + "px",
-        mm_min: mm + "px",
+    ms_min: ms + "px",
-        ms_min: ms + "px",
+    cb1_min: cb1 + "px",
-        cb1_min: cb1 + "px",
+    cb2_min: cb2 + "px",
-        cb2_min: cb2 + "px",
+    cb3_min: cb3 + "px",
-        cb3_min: cb3 + "px",
+    cb4_min: cb4 + "px",
-        cb4_min: cb4 + "px",
+    cb5_min: cb5 + "px",
-        cb5_min: cb5 + "px",
+    short_navbar_cutoff_height: "600px",
-        short_navbar_cutoff_height: "600px",
+};
-    },
+
-
+export const media_breakpoints_num = {
-    media_breakpoints_num: {
+    xs,
-        xs,
+    sm,
-        sm,
+    md,
-        md,
+    mc,
-        mc,
+    lg,
-        lg,
+    xl,
-        xl,
+    ml,
-        ml,
+    mm,
-        mm,
+    ms,
-        ms,
-    },
 };

zerver/openapi/javascript_examples.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /*
   Zulip's OpenAPI-based API documentation system is documented at
   https://zulip.readthedocs.io/en/latest/documentation/api.html
@@ -9,6 +7,8 @@
   that the documented examples are all correct, runnable code.
 */
 
+import zulipInit from "zulip-js";
+
 const examples_handler = function () {
     const config = {
         username: process.env.ZULIP_USERNAME,
@@ -41,7 +41,6 @@ const examples_handler = function () {
     };
 
     const main = async () => {
-        const zulipInit = require("zulip-js");
         const client = await zulipInit(config);
 
         await generate_validation_data(client, examples.send_message);