From 01540b45b0edfacacbcbd3fb3a32e221052a4e0d Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Tue, 12 Nov 2024 15:59:12 -0800 Subject: [PATCH] web: Set "type": "module" and convert various CJS files to ESM. Signed-off-by: Anders Kaseorg --- .eslintrc.cjs | 2 - package.json | 1 + prettier.config.js | 4 +- stylelint.config.js | 4 +- templates/zerver/emails/stylelint.config.js | 4 +- tools/check-openapi | 18 +++--- tools/node_lib/dump_fixtures.js | 4 +- tools/screenshots/message-screenshot.js | 12 ++-- tools/screenshots/thread-screenshot.js | 12 ++-- tools/setup/generate-test-credentials | 3 +- tools/test-js-with-node | 8 ++- tsconfig.json | 3 +- web/babel.config.js | 5 +- web/postcss.config.js | 22 +++++--- web/src/css_variables.js | 62 ++++++++++----------- zerver/openapi/javascript_examples.js | 5 +- 16 files changed, 77 insertions(+), 92 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 72b8338761..f1667efdac 100644 --- a/.eslintrc.cjs +++ b/.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: { diff --git a/package.json b/package.json index ac7842fd67..8bcda024cc 100644 --- a/package.json +++ b/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", diff --git a/prettier.config.js b/prettier.config.js index 0631ff5889..0cef0d8890 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,6 +1,4 @@ -"use strict"; - -module.exports = { +export default { bracketSpacing: false, trailingComma: "all", overrides: [ diff --git a/stylelint.config.js b/stylelint.config.js index 2a677539f0..9c0899a1dd 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -1,6 +1,4 @@ -"use strict"; - -module.exports = { +export default { extends: ["stylelint-config-standard"], plugins: ["stylelint-high-performance-animation"], rules: { diff --git a/templates/zerver/emails/stylelint.config.js b/templates/zerver/emails/stylelint.config.js index 8b2c4154bc..d3a6962039 100644 --- a/templates/zerver/emails/stylelint.config.js +++ b/templates/zerver/emails/stylelint.config.js @@ -1,6 +1,4 @@ -"use strict"; - -module.exports = { +export default { extends: ["../../../stylelint.config"], rules: { // Add some exceptions for recommended rules diff --git a/tools/check-openapi b/tools/check-openapi index 0810a273e3..62239e9c84 100755 --- a/tools/check-openapi +++ b/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"); -const {parseArgs} = require("node:util"); - -const Diff = require("diff"); -const ExampleValidator = require("openapi-examples-validator"); -const Prettier = require("prettier"); -const SwaggerParser = require("swagger-parser"); -const {Composer, CST, LineCounter, Parser, Scalar, YAMLMap, YAMLSeq, visit} = require("yaml"); +import * as Diff from "diff"; +import ExampleValidator from "openapi-examples-validator"; +import {format as prettierFormat} from "prettier"; +import SwaggerParser from "swagger-parser"; +import {CST, Composer, LineCounter, Parser, Scalar, YAMLMap, YAMLSeq, visit} from "yaml"; const usage = "Usage: check-openapi [--fix] ..."; 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 ( diff --git a/tools/node_lib/dump_fixtures.js b/tools/node_lib/dump_fixtures.js index 8df0004121..a8fddb3244 100644 --- a/tools/node_lib/dump_fixtures.js +++ b/tools/node_lib/dump_fixtures.js @@ -1,5 +1,3 @@ -"use strict"; - -const events = require("../../web/tests/lib/events.cjs"); +import * as events from "../../web/tests/lib/events.cjs"; console.info(JSON.stringify(events.fixtures, null, 4)); diff --git a/tools/screenshots/message-screenshot.js b/tools/screenshots/message-screenshot.js index 0d176fd813..1593aec2ca 100644 --- a/tools/screenshots/message-screenshot.js +++ b/tools/screenshots/message-screenshot.js @@ -1,13 +1,11 @@ -"use strict"; - /* global $, CSS */ -const fs = require("node:fs"); -const path = require("node:path"); -const {parseArgs} = require("node:util"); +import * as fs from "node:fs"; +import path from "node:path"; +import {parseArgs} from "node:util"; -require("css.escape"); -const puppeteer = require("puppeteer"); +import "css.escape"; +import puppeteer from "puppeteer"; const usage = "Usage: message-screenshot.js "; const { diff --git a/tools/screenshots/thread-screenshot.js b/tools/screenshots/thread-screenshot.js index 611e54209b..080455a4e9 100644 --- a/tools/screenshots/thread-screenshot.js +++ b/tools/screenshots/thread-screenshot.js @@ -1,13 +1,11 @@ -"use strict"; - /* global $, CSS */ -const fs = require("node:fs"); -const path = require("node:path"); -const {parseArgs} = require("node:util"); +import * as fs from "node:fs"; +import path from "node:path"; +import {parseArgs} from "node:util"; -require("css.escape"); -const puppeteer = require("puppeteer"); +import "css.escape"; +import puppeteer from "puppeteer"; const usage = "Usage: thread-screenshot.js "; diff --git a/tools/setup/generate-test-credentials b/tools/setup/generate-test-credentials index 1d6d642bf7..6a004d1155 100755 --- a/tools/setup/generate-test-credentials +++ b/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 < 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 diff --git a/tsconfig.json b/tsconfig.json index 83a43995ce..2c20770091 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ /* Modules */ "allowImportingTsExtensions": true, - "moduleResolution": "node", + "module": "preserve", + "moduleResolution": "bundler", "paths": { "*": ["./web/src/types/*"], }, diff --git a/web/babel.config.js b/web/babel.config.js index cb8d5d340a..4a4a449014 100644 --- a/web/babel.config.js +++ b/web/babel.config.js @@ -1,6 +1,4 @@ -"use strict"; - -module.exports = { +export default { plugins: [ [ "formatjs", @@ -21,5 +19,4 @@ module.exports = { ], "@babel/typescript", ], - sourceType: "unambiguous", }; diff --git a/web/postcss.config.js b/web/postcss.config.js index 5d3b02ed20..6d302b95ce 100644 --- a/web/postcss.config.js +++ b/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")({ - plugins: [require("postcss-prefixwrap")("%dark-theme")], + postcssImport({ + plugins: [postcssPrefixWrap("%dark-theme")], }), - require("postcss-extend-rule"), - require("postcss-simple-vars")({variables: media_breakpoints}), - require("postcss-preset-env")({ + postcssExtendRule, + postcssSimpleVars({variables: media_breakpoints}), + postcssPresetEnv({ features: { "nesting-rules": true, }, }), ], }); -module.exports = config; +export default config; diff --git a/web/src/css_variables.js b/web/src/css_variables.js index e5e3ac7c77..39f36c388f 100644 --- a/web/src/css_variables.js +++ b/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 = { - media_breakpoints: { - xs_min: xs + "px", - sm_min: sm + "px", - md_min: md + "px", - mc_min: mc + "px", - lg_min: lg + "px", - xl_min: xl + "px", - ml_min: ml + "px", - mm_min: mm + "px", - ms_min: ms + "px", - cb1_min: cb1 + "px", - cb2_min: cb2 + "px", - cb3_min: cb3 + "px", - cb4_min: cb4 + "px", - cb5_min: cb5 + "px", - short_navbar_cutoff_height: "600px", - }, - - media_breakpoints_num: { - xs, - sm, - md, - mc, - lg, - xl, - ml, - mm, - ms, - }, +export const media_breakpoints = { + xs_min: xs + "px", + sm_min: sm + "px", + md_min: md + "px", + mc_min: mc + "px", + lg_min: lg + "px", + xl_min: xl + "px", + ml_min: ml + "px", + mm_min: mm + "px", + ms_min: ms + "px", + cb1_min: cb1 + "px", + cb2_min: cb2 + "px", + cb3_min: cb3 + "px", + cb4_min: cb4 + "px", + cb5_min: cb5 + "px", + short_navbar_cutoff_height: "600px", +}; + +export const media_breakpoints_num = { + xs, + sm, + md, + mc, + lg, + xl, + ml, + mm, + ms, }; diff --git a/zerver/openapi/javascript_examples.js b/zerver/openapi/javascript_examples.js index d0502ccc64..ffde3eba90 100644 --- a/zerver/openapi/javascript_examples.js +++ b/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);