Replace webpack with esbuild (#5488)

* Replace webpack with esbuild

* Fix some lint issues

* Work around some flow type issues

* Update github pipeline

* Remove code remenant from webpack

* Update build scripts, set project type to 'module'

* fix ava test

This removes ava's broken dependency transpiling using babel. Instead it strips the flow type definitions, and runs the ava tests on native code.

Running the code natively also requires explitic extensions on imports, so '.js' is added where necessary.

* upgrade deps

* tweak some module imports

* output as iife as to avoid polluting 'window'

* fix issue related to flow type striping

* update deps

* update deps

.babelrc

@@ -1,9 +1,7 @@
 {
 	"plugins": [
-		'@babel/plugin-proposal-export-namespace-from',
-		["@babel/plugin-proposal-class-properties", { "loose": true }],
-		"@babel/plugin-transform-modules-commonjs",
-		"@babel/plugin-transform-flow-strip-types"
+		"@babel/plugin-transform-flow-strip-types",
+		"@babel/plugin-syntax-import-attributes"
 	],
 	"sourceMaps": "inline"
 }

.eslintrc.json

@@ -14,8 +14,7 @@
 		"import/ignore": [
 			"node_modules",
 			"\\.(json|png|gif|html|scss)$"
-		],
-		"import/resolver": "webpack"
+		]
 	},
 	"env": {
 		"browser": true,
@@ -67,7 +66,7 @@
 		"import/default": 2,
 		"import/dynamic-import-chunkname": 2,
 		"import/exports-last": 0,
-		"import/extensions": [2, { "js": "never", "json": "always" }],
+		"import/extensions": [0, { "js": "always", "json": "always" }], // FIXME Extensions must be added
 		"import/first": 2,
 		"import/group-exports": 0,
 		"import/imports-first": 2,
@@ -92,7 +91,7 @@
 		"import/no-nodejs-modules": 2,
 		"import/no-self-import": 2,
 		"import/no-unassigned-import": 0,
-		"import/no-unresolved": 2,
+		"import/no-unresolved": [2, { "ignore": ["ava"] }],
 		"import/no-useless-path-segments": 0,
 		"import/no-webpack-loader-syntax": 0,
 		"import/order": 2,
@@ -153,7 +152,7 @@
 		"no-undef": [2, { "typeof": true }],
 		"no-undefined": 0,
 		"no-underscore-dangle": 0,
-		"no-unused-expressions": 0, // see flowtype/no-unused-expressions
+		"no-unused-expressions": 2,
 		"no-unused-vars": [2, { "ignoreRestSiblings": true }],
 		"no-use-before-define": [0, "nofunc"],
 		"no-useless-escape": 0,
@@ -188,6 +187,7 @@
 		"line-comment-position": 0,
 		"lines-around-comment": [0, { "allowBlockStart": true }],
 		"lines-between-class-members": [2, "always", { "exceptAfterSingleLine": true }],
+		"logical-assignment-operators": 0, // not support in used flowtype
 		"max-classes-per-file": 0,
 		"max-depth": 0,
 		"max-len": 0,

.flowconfig

@@ -4,6 +4,13 @@
 <PROJECT_ROOT>/examples/.*
 <PROJECT_ROOT>/node_modules/.*/test/.*
 <PROJECT_ROOT>/node_modules/.*/__tests__/.*
+<PROJECT_ROOT>/node_modules/esbuild-plugin-flow/.*
+<PROJECT_ROOT>/node_modules/hermes-estree/dist/generated/.*
+<PROJECT_ROOT>/node_modules/hermes-estree/dist/.*
+<PROJECT_ROOT>/node_modules/hermes-parser/dist/.*
+<PROJECT_ROOT>/lib/utils/__tests__/.*
+<PROJECT_ROOT>/lib/environment/utils/__tests__/.*
+<PROJECT_ROOT>/lib/modules/backupAndRestore/__tests__/.*
 
 [include]
 
@@ -13,9 +20,6 @@
 [options]
 module.use_strict=true
 
-module.name_mapper='^sibling-loader\(\?.+\)?!.+$'->'<PROJECT_ROOT>/flow/stub/sibling-loader.js'
-module.name_mapper='^exec-loader\(\?cache\)?!\(.+\)$'->'\2'
-
 esproposal.export_star_as=enable
 esproposal.optional_chaining=enable
 

.github/workflows/pipeline.yml

@@ -15,7 +15,7 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '21'
     - run: yarn install --frozen-lockfile
 
     - run: yarn flow check --show-all-errors
@@ -29,10 +29,10 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '21'
     - run: yarn install --frozen-lockfile
 
-    - run: yarn build --env browsers=all
+    - run: yarn build --browsers=all
 
     - uses: softprops/action-gh-release@v1
       if: startsWith(github.ref, 'refs/tags/')
@@ -53,8 +53,8 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/setup-node@v2
       with:
-        node-version: '16'
+        node-version: '21'
     - run: yarn install --frozen-lockfile
 
     - run: yarn test
-    - run: yarn build --env browsers=all
+    - run: yarn build --browsers=all

.stylelintrc.json

@@ -11,21 +11,17 @@
   ],
   "rules": {
     "alpha-value-notation": null,
-    "color-hex-case": null,
     "color-named": null,
     "color-function-notation": null,
     "declaration-property-value-disallowed-list": null,
     "font-family-no-missing-generic-family-keyword": [true, { "ignoreFontFamilies": "Batch" }],
     "font-family-name-quotes": null,
     "function-no-unknown": null,
     "hue-degree-notation": null,
-    "indentation": "tab",
+    "import-notation": null,
     "keyframes-name-pattern": null,
-    "max-line-length": null,
     "max-nesting-depth": null,
     "no-descending-specificity": null,
-    "number-leading-zero": null,
-    "order/properties-alphabetical-order": null,
     "scss/double-slash-comment-empty-line-before": null,
     "scss/at-function-pattern": null,
     "scss/at-mixin-pattern": null,
@@ -36,7 +32,6 @@
     "selector-max-compound-selectors": null,
     "selector-max-id": null,
     "selector-no-qualifying-type": null,
-    "shorthand-property-no-redundant-values": null,
-    "string-quotes": "single"
+    "shorthand-property-no-redundant-values": null
   }
 }

CONTRIBUTING.md

@@ -19,7 +19,7 @@ Thinking about contributing to RES? Awesome! We just ask that you follow a few s
 #### First time installation
 
 1. Install [git](https://git-scm.com/).
-1. Install [node.js](https://nodejs.org) (version >= 10).
+1. Install [node.js](https://nodejs.org) (version >= 21).
 1. Install [yarn](https://yarnpkg.com/lang/en/docs/install/)
 1. [Clone this repository](https://help.github.com/articles/cloning-a-repository/).
 1. Run `yarn` in that folder.
@@ -30,11 +30,11 @@ To load the extension into your browser, see [Loading RES into your browser](#lo
 
 #### Build commands
 
-**`yarn start [--env browsers=<browsers>]`** will clean `dist/`, then build RES (dev mode), and start a watch task that will rebuild RES when you make changes. Only changed files will be rebuilt.
+**`yarn start [--browsers <browsers>]`** will clean `dist/`, then build RES (dev mode), and start a watch task that will rebuild RES when you make changes. Only changed files will be rebuilt.
 
-**`yarn once [--env browsers=<browsers>]`** will clean `dist/`, then build RES (dev mode) a single time.
+**`yarn once [--browsers <browsers>]`** will clean `dist/`, then build RES (dev mode) a single time.
 
-**`yarn build [--env browsers=<browsers>]`** will clean `dist/`, then build RES (release mode). Each build output will be compressed to a .zip file in `dist/zip/`.
+**`yarn build [--browsers <browsers>]`** will clean `dist/`, then build RES (release mode). Each build output will be compressed to a .zip file in `dist/zip/`.
 
 `<browsers>` is a comma-separated list of browsers to target, e.g. `chrome,firefox`. `all` will build all targets. By default, `chrome` will be targeted.
 
@@ -95,7 +95,7 @@ The default host and port (`localhost` and `4444`) should work for most local in
   - `locales`: RES i18n translations
   - `tests/`: integration tests
   - `package.json`: package info, dependencies
-  - `webpack.config.babel.js`: build script
+  - `build.js`: build script
 
 ## Adding new files
 
@@ -105,7 +105,7 @@ First, check to see if there is an existing module with the same focus.
 
 See [`examples/module.js`](https://github.com/honestbleeps/Reddit-Enhancement-Suite/blob/master/examples/module.js) for an example.
 
-Create a new `.js` file in `lib/modules`.
+Create a new `.js` file in `lib/modules`. Export it in `lib/modules/index.js` 
 It will automatically be loaded when the build script is restarted.
 
 All user-visible text must be translated. See the [locales README](/locales/locales/README.md) for details.
@@ -114,7 +114,7 @@ All user-visible text must be translated. See the [locales README](/locales/loca
 
 See [`examples/host.js`](https://github.com/honestbleeps/Reddit-Enhancement-Suite/blob/master/examples/host.js) for an example.
 
-Create a new `.js` file in `lib/modules/hosts`.
+Create a new `.js` file in `lib/modules/hosts`. Export it in `lib/modules/hosts/index.js` 
 It will automatically be loaded when the build script is restarted.
 
 If the host uses an API that does not support [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing), you must add it to the browsers' manifests and the host's `permissions` property. For example, search for usages of `api.twitter.com`.

ava.config.mjs

@@ -0,0 +1,8 @@
+/* @flow */
+
+export default {
+	files: [
+		// `lib` must be transpiled before tests are executed
+		'dist/transpiled/**/__tests__/*.js',
+	],
+};