chore: add eslint import order plugin (#1990)

* chore: add `eslint` import order plugin

* Include `.mjs` files.

* Add a distinct group for `@material/...` imports.

.eslintrc.json

@@ -60,6 +60,29 @@
         ]
       }
     ],
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "@material/**",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["@material/**"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
     "no-prototype-builtins": "off",
     "prefer-const": "error",
     "@typescript-eslint/ban-types": "off",

client/infrastructure/electron/app_paths.ts

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {app} from 'electron';
 import * as os from 'os';
 import * as path from 'path';
 
+import {app} from 'electron';
+
 const isWindows = os.platform() === 'win32';
 
 /**

client/src/cordova/android/import_messages.mjs

@@ -14,6 +14,7 @@
 
 import {readFile, writeFile} from 'fs/promises';
 import path from 'path';
+
 import XML from 'xmlbuilder2';
 
 const STRINGS_DIR = ['src', 'cordova', 'plugin', 'android', 'resources', 'strings'];

client/src/cordova/apple/import_messages.mjs

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import path from 'path';
+
 import I18N from 'i18n-strings-files';
 
 const STRINGS_DIR = ['src', 'cordova', 'apple', 'OutlineAppleLib', 'Sources', 'OutlineAppKitBridge', 'Resources', 'Strings'];

client/src/cordova/build.action.mjs

@@ -12,18 +12,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import fs from 'node:fs/promises';
 import path from 'node:path';
 import url from 'url';
-import fs from 'node:fs/promises';
 
 import cordovaLib from 'cordova-lib';
 const {cordova} = cordovaLib;
 
-import {runAction} from '../../../src/build/run_action.mjs';
+import {downloadHttpsFile} from '../../../src/build/download_file.mjs';
 import {getRootDir} from '../../../src/build/get_root_dir.mjs';
+import {runAction} from '../../../src/build/run_action.mjs';
 import {spawnStream} from '../../../src/build/spawn_stream.mjs';
-import {downloadHttpsFile} from '../../../src/build/download_file.mjs';
-
 import {getBuildParameters} from '../build/get_build_parameters.mjs';
 
 /**

client/src/cordova/import_messages.action.mjs

@@ -12,14 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import chalk from 'chalk';
-import minimist from 'minimist';
+import {readFile, readdir, mkdir} from 'fs/promises';
 import path from 'path';
 import url from 'url';
-import {getRootDir} from '../../../src/build/get_root_dir.mjs';
-import {readFile, readdir, mkdir} from 'fs/promises';
+
+import chalk from 'chalk';
+import minimist from 'minimist';
+
 import * as ANDROID_IMPORTER from './android/import_messages.mjs';
 import * as IOS_IMPORTER from './apple/import_messages.mjs';
+import {getRootDir} from '../../../src/build/get_root_dir.mjs';
 
 const ANDROID = 'android';
 const IOS = 'ios';

client/src/cordova/setup.action.mjs

@@ -13,19 +13,21 @@
 // limitations under the License.
 
 import os from 'os';
-import url from 'url';
-import rmfr from 'rmfr';
 import path from 'path';
+import url from 'url';
 
-import replace from 'replace-in-file';
+import chalk from 'chalk';
 import cordovaLib from 'cordova-lib';
+import replace from 'replace-in-file';
+import rmfr from 'rmfr';
+
 const {cordova} = cordovaLib;
 
 import {getRootDir} from '../../../src/build/get_root_dir.mjs';
 import {runAction} from '../../../src/build/run_action.mjs';
 import {spawnStream} from '../../../src/build/spawn_stream.mjs';
 import {getBuildParameters} from '../build/get_build_parameters.mjs';
-import chalk from 'chalk';
+
 
 const WORKING_CORDOVA_OSX_COMMIT = '07e62a53aa6a8a828fd988bc9e884c38c3495a67';
 

client/src/cordova/test.action.mjs

@@ -12,11 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import url from 'url';
+import fs from 'fs/promises';
 import os from 'os';
-import minimist from 'minimist';
 import path from 'path';
-import fs from 'fs/promises';
+import url from 'url';
+
+import minimist from 'minimist';
 import rmfr from 'rmfr';
 
 import {getRootDir} from '../../../src/build/get_root_dir.mjs';

client/src/tun2socks/build.action.mjs

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import url from 'url';
+
 import {spawnStream} from '../../../src/build/spawn_stream.mjs';
 import {getBuildParameters} from '../build/get_build_parameters.mjs';
 

client/src/www/TODO.spec.ts

@@ -27,13 +27,12 @@
 // import * as outlineIcons from './ui_components/outline-icons';
 
 import * as clipboard from './app/clipboard';
-import * as errorReporter from './shared/error_reporter';
 import * as platform from './app/platform';
 import * as tunnel from './app/tunnel';
 import * as updater from './app/updater';
 import * as urlInterceptor from './app/url_interceptor';
 import * as vpnInstaller from './app/vpn_installer';
-
+import * as errorReporter from './shared/error_reporter';
 import * as aboutView from './ui_components/about-view';
 import * as addServerView from './ui_components/add-server-view';
 import * as appRoot from './ui_components/app-root.js';

client/src/www/app/app.ts

@@ -12,22 +12,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as errors from '../model/errors';
-import * as events from '../model/events';
-import {Server} from '../model/server';
-import {OperationTimedOut} from '../../../infrastructure/timeout_promise';
-import {ServerListItem, ServerConnectionState} from '../views/servers_view';
-import {SERVER_CONNECTION_INDICATOR_DURATION_MS} from '../views/servers_view/server_connection_indicator';
 
 import {Clipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {OutlineErrorReporter} from '../shared/error_reporter';
 import {OutlineServerRepository} from './outline_server_repository';
 import {Settings, SettingsKey} from './settings';
 import {Updater} from './updater';
 import {UrlInterceptor} from './url_interceptor';
 import {VpnInstaller} from './vpn_installer';
 import {Localizer} from '../../../infrastructure/i18n';
+import {OperationTimedOut} from '../../../infrastructure/timeout_promise';
+import * as errors from '../model/errors';
+import * as events from '../model/events';
+import {Server} from '../model/server';
+import {OutlineErrorReporter} from '../shared/error_reporter';
+import {ServerListItem, ServerConnectionState} from '../views/servers_view';
+import {SERVER_CONNECTION_INDICATOR_DURATION_MS} from '../views/servers_view/server_connection_indicator';
 
 enum OUTLINE_ACCESS_KEY_SCHEME {
   STATIC = 'ss',

client/src/www/app/cordova_main.ts

@@ -18,24 +18,21 @@
 import '@babel/polyfill';
 import 'web-animations-js/web-animations-next-lite.min.js';
 import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
-
 import {setRootPath} from '@polymer/polymer/lib/utils/settings.js';
 setRootPath(location.pathname.substring(0, location.pathname.lastIndexOf('/') + 1));
-
 import * as Sentry from '@sentry/browser';
 
 import {AbstractClipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {SentryErrorReporter, Tags} from '../shared/error_reporter';
+import {FakeOutlineTunnel} from './fake_tunnel';
 import {main} from './main';
-import * as errors from '../model/errors';
 import {OutlinePlatform} from './platform';
-import {Tunnel, TunnelStatus} from './tunnel';
+import {Tunnel, TunnelStatus,ShadowsocksSessionConfig} from './tunnel';
 import {AbstractUpdater} from './updater';
 import * as interceptors from './url_interceptor';
-import {FakeOutlineTunnel} from './fake_tunnel';
-import {ShadowsocksSessionConfig} from './tunnel';
 import {NoOpVpnInstaller, VpnInstaller} from './vpn_installer';
+import * as errors from '../model/errors';
+import {SentryErrorReporter, Tags} from '../shared/error_reporter';
 
 const OUTLINE_PLUGIN_NAME = 'OutlinePlugin';
 

client/src/www/app/electron_main.ts

@@ -19,16 +19,16 @@ import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
 
 import * as Sentry from '@sentry/electron/renderer';
 
-import {ErrorCode, OutlinePluginError} from '../model/errors';
 
 import {AbstractClipboard} from './clipboard';
 import {ElectronOutlineTunnel} from './electron_outline_tunnel';
-import {getSentryBrowserIntegrations, OutlineErrorReporter, Tags} from '../shared/error_reporter';
 import {FakeOutlineTunnel} from './fake_tunnel';
 import {getLocalizationFunction, main} from './main';
 import {AbstractUpdater} from './updater';
 import {UrlInterceptor} from './url_interceptor';
 import {VpnInstaller} from './vpn_installer';
+import {ErrorCode, OutlinePluginError} from '../model/errors';
+import {getSentryBrowserIntegrations, OutlineErrorReporter, Tags} from '../shared/error_reporter';
 
 const isWindows = window.electron.os.platform === 'win32';
 const isLinux = window.electron.os.platform === 'linux';

client/src/www/app/electron_outline_tunnel.ts

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
 import * as errors from '../model/errors';
 
-import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
 
 export class ElectronOutlineTunnel implements Tunnel {
   private statusChangeListener: ((status: TunnelStatus) => void) | null = null;

client/src/www/app/fake_tunnel.ts

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
 import * as errors from '../model/errors';
 
-import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from './tunnel';
 
 // Fake Tunnel implementation for demoing and testing.
 // Note that because this implementation does not emit disconnection events, "switching" between

client/src/www/app/main.ts

@@ -14,16 +14,17 @@
 
 import '../ui_components/app-root.js';
 
-import {EventQueue} from '../model/events';
+
+import {makeConfig, SIP002_URI} from 'ShadowsocksConfig';
 
 import {App} from './app';
 import {onceEnvVars} from './environment';
 import {OutlineServerRepository} from './outline_server_repository';
-import {makeConfig, SIP002_URI} from 'ShadowsocksConfig';
 import {OutlinePlatform} from './platform';
 import {Settings} from './settings';
 import {TunnelFactory} from './tunnel';
 import {Localizer} from '../../../infrastructure/i18n.js';
+import {EventQueue} from '../model/events';
 
 // Used to determine whether to use Polymer functionality on app initialization failure.
 let webComponentsAreReady = false;

client/src/www/app/outline_server_repository/access_key_serialization.ts

@@ -15,7 +15,6 @@
 import {SHADOWSOCKS_URI} from 'ShadowsocksConfig';
 
 import * as errors from '../../model/errors';
-
 import {ShadowsocksSessionConfig} from '../tunnel';
 
 // DON'T use these methods outside of this folder!

client/src/www/app/outline_server_repository/index.ts

@@ -15,14 +15,13 @@
 import {makeConfig, SHADOWSOCKS_URI, SIP002_URI} from 'ShadowsocksConfig';
 import uuidv4 from 'uuidv4';
 
+import {staticKeyToShadowsocksSessionConfig} from './access_key_serialization';
+import {OutlineServer} from './server';
 import * as errors from '../../model/errors';
 import * as events from '../../model/events';
 import {ServerRepository, ServerType} from '../../model/server';
-
 import {TunnelFactory} from '../tunnel';
 
-import {OutlineServer} from './server';
-import {staticKeyToShadowsocksSessionConfig} from './access_key_serialization';
 
 // TODO(daniellacosse): write unit tests for these functions
 

client/src/www/app/outline_server_repository/outline_server_repository.spec.ts

@@ -12,15 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {makeConfig, SIP002_URI} from 'ShadowsocksConfig';
+
+import {OutlineServerRepository, ServersStorageV0, ServersStorageV1, serversStorageV0ConfigToAccessKey} from '.';
+import {OutlineServer} from './server';
 import {InMemoryStorage} from '../../../../infrastructure/memory_storage';
 import {ServerIncompatible, ServerUrlInvalid, ShadowsocksUnsupportedCipher} from '../../model/errors';
 import {EventQueue, ServerAdded, ServerForgetUndone, ServerForgotten, ServerRenamed} from '../../model/events';
-
 import {FakeOutlineTunnel} from '../fake_tunnel';
 
-import {OutlineServerRepository, ServersStorageV0, ServersStorageV1, serversStorageV0ConfigToAccessKey} from '.';
-import {OutlineServer} from './server';
-import {makeConfig, SIP002_URI} from 'ShadowsocksConfig';
+
 
 // TODO(alalama): unit tests for OutlineServer.
 

client/src/www/app/outline_server_repository/server.ts

@@ -12,13 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {fetchShadowsocksSessionConfig, staticKeyToShadowsocksSessionConfig} from './access_key_serialization';
 import * as errors from '../../model/errors';
 import * as events from '../../model/events';
 import {Server, ServerType} from '../../model/server';
-
 import {Tunnel, TunnelStatus, ShadowsocksSessionConfig} from '../tunnel';
 
-import {fetchShadowsocksSessionConfig, staticKeyToShadowsocksSessionConfig} from './access_key_serialization';
 
 // PLEASE DON'T use this class outside of this `outline_server_repository` folder!
 

client/src/www/app/platform.ts

@@ -14,11 +14,11 @@
 
 import {Clipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {OutlineErrorReporter} from '../shared/error_reporter';
 import {TunnelFactory} from './tunnel';
 import {Updater} from './updater';
 import {UrlInterceptor} from './url_interceptor';
 import {VpnInstaller} from './vpn_installer';
+import {OutlineErrorReporter} from '../shared/error_reporter';
 
 // Provides platform-specific dependencies.
 // TODO: Remove one of hasDeviceSupport and getServerFactory; they're almost the same

client/src/www/app/settings.spec.ts

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Settings, SettingsKey} from './settings';
 import {InMemoryStorage} from '../../../infrastructure/memory_storage';
 
-import {Settings, SettingsKey} from './settings';
 
 const FAKE_SETTINGS_KEYS = ['key', 'key1', 'key2'];
 

client/src/www/build.action.mjs

@@ -13,15 +13,15 @@
 // limitations under the License.
 
 import fs from 'fs/promises';
-import url from 'url';
 import path from 'path';
-import rmfr from 'rmfr';
+import url from 'url';
 
-import {runWebpack} from '../build/run_webpack.mjs';
-import {getBuildParameters} from '../build/get_build_parameters.mjs';
-import {getRootDir} from '../../../src/build/get_root_dir.mjs';
+import rmfr from 'rmfr';
 
 import {getBrowserWebpackConfig} from './get_browser_webpack_config.mjs';
+import {getRootDir} from '../../../src/build/get_root_dir.mjs';
+import {getBuildParameters} from '../build/get_build_parameters.mjs';
+import {runWebpack} from '../build/run_webpack.mjs';
 
 /**
  * @description Builds the web UI for use across both electron and cordova.