feat(eslint): sort import rule (#6939)

* feat(eslint): sort import rule

* chore(deps): pin dep

* refactor: sort imports

---------

Co-authored-by: Jesse Mazzella <[email protected]>

.eslintrc.js

@@ -9,7 +9,7 @@ module.exports = {
   globals: {
     _: 'readonly'
   },
-  plugins: ['prettier'],
+  plugins: ['prettier', 'simple-import-sort'],
   extends: [
     'eslint:recommended',
     'plugin:compat/recommended',
@@ -28,6 +28,8 @@ module.exports = {
     }
   },
   rules: {
+    'simple-import-sort/imports': 'warn',
+    'simple-import-sort/exports': 'warn',
     'vue/no-deprecated-dollar-listeners-api': 'warn',
     'vue/no-deprecated-events-api': 'warn',
     'vue/no-v-for-template-key': 'off',

example/eventGenerator/plugin.js

@@ -19,8 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import EventTelemetryProvider from './EventTelemetryProvider';
 import EventMetadataProvider from './EventMetadataProvider';
+import EventTelemetryProvider from './EventTelemetryProvider';
 
 export default function EventGeneratorPlugin(options) {
   return function install(openmct) {

example/eventGenerator/pluginSpec.js

@@ -19,8 +19,8 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import EventMessageGeneratorPlugin from './plugin.js';
 import { createOpenMct, resetApplicationState } from '../../src/utils/testing';
+import EventMessageGeneratorPlugin from './plugin.js';
 
 describe('the plugin', () => {
   let openmct;

example/exampleUser/ExampleUserProvider.js

@@ -22,6 +22,7 @@
 
 import EventEmitter from 'EventEmitter';
 import { v4 as uuid } from 'uuid';
+
 import createExampleUser from './exampleUserCreator';
 
 const STATUSES = [

example/generator/plugin.js

@@ -20,11 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import GeneratorMetadataProvider from './GeneratorMetadataProvider';
 import GeneratorProvider from './GeneratorProvider';
 import SinewaveLimitProvider from './SinewaveLimitProvider';
 import SinewaveStalenessProvider from './SinewaveStalenessProvider';
 import StateGeneratorProvider from './StateGeneratorProvider';
-import GeneratorMetadataProvider from './GeneratorMetadataProvider';
 
 export default function (openmct) {
   openmct.types.addType('example.state-generator', {

example/simpleVuePlugin/plugin.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+
 import HelloWorld from './HelloWorld.vue';
 
 function SimpleVuePlugin() {

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-playwright": "0.12.0",
     "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-vue": "9.15.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",

src/api/actions/ActionCollectionSpec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ActionCollection from './ActionCollection';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import ActionCollection from './ActionCollection';
 
 describe('The ActionCollection', () => {
   let openmct;

src/api/actions/ActionsAPI.js

@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import EventEmitter from 'EventEmitter';
-import ActionCollection from './ActionCollection';
 import _ from 'lodash';
 
+import ActionCollection from './ActionCollection';
+
 class ActionsAPI extends EventEmitter {
   constructor(openmct) {
     super();

src/api/actions/ActionsAPISpec.js

@@ -20,9 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import ActionsAPI from './ActionsAPI';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
 import ActionCollection from './ActionCollection';
+import ActionsAPI from './ActionsAPI';
 
 describe('The Actions API', () => {
   let openmct;

src/api/annotation/AnnotationAPI.js

@@ -20,9 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { v4 as uuid } from 'uuid';
 import EventEmitter from 'EventEmitter';
 import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
 
 /**
  * @readonly

src/api/annotation/AnnotationAPISpec.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { createOpenMct, resetApplicationState } from '../../utils/testing';
 import ExampleTagsPlugin from '../../../example/exampleTags/plugin';
+import { createOpenMct, resetApplicationState } from '../../utils/testing';
 
 describe('The Annotation API', () => {
   let openmct;

src/api/composition/CompositionAPI.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import DefaultCompositionProvider from './DefaultCompositionProvider';
 import CompositionCollection from './CompositionCollection';
+import DefaultCompositionProvider from './DefaultCompositionProvider';
 
 /**
  * @typedef {import('./CompositionProvider').default} CompositionProvider

src/api/composition/CompositionProvider.js

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import _ from 'lodash';
+
 import objectUtils from '../objects/object-utils';
 
 /**

src/api/composition/DefaultCompositionProvider.js

@@ -19,9 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import { toRaw } from 'vue';
+
 import objectUtils from '../objects/object-utils';
 import CompositionProvider from './CompositionProvider';
-import { toRaw } from 'vue';
 
 /**
  * @typedef {import('../objects/ObjectAPI').DomainObject} DomainObject

src/api/forms/FormController.js

@@ -1,6 +1,8 @@
+import mount from 'utils/mount';
+
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
-import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
 import CheckBoxField from './components/controls/CheckBoxField.vue';
+import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
 import Datetime from './components/controls/Datetime.vue';
 import FileInput from './components/controls/FileInput.vue';
 import Locator from './components/controls/Locator.vue';
@@ -9,8 +11,6 @@ import SelectField from './components/controls/SelectField.vue';
 import TextAreaField from './components/controls/TextAreaField.vue';
 import TextField from './components/controls/TextField.vue';
 import ToggleSwitchField from './components/controls/ToggleSwitchField.vue';
-
-import mount from 'utils/mount';
 export const DEFAULT_CONTROLS_MAP = {
   autocomplete: AutoCompleteField,
   checkbox: CheckBoxField,

src/api/forms/FormsAPI.js

@@ -20,12 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import FormController from './FormController';
-import FormProperties from './components/FormProperties.vue';
-
 import _ from 'lodash';
 import mount from 'utils/mount';
 
+import FormProperties from './components/FormProperties.vue';
+import FormController from './FormController';
+
 export default class FormsAPI {
   constructor(openmct) {
     this.openmct = openmct;

src/api/forms/components/FormProperties.vue

@@ -73,9 +73,10 @@
 </template>
 
 <script>
-import FormRow from '@/api/forms/components/FormRow.vue';
 import { v4 as uuid } from 'uuid';
 
+import FormRow from '@/api/forms/components/FormRow.vue';
+
 export default {
   components: {
     FormRow

src/api/forms/components/controls/ToggleSwitchField.vue

@@ -34,10 +34,11 @@
 </template>
 
 <script>
-import toggleMixin from '../../toggle-check-box-mixin';
+import { v4 as uuid } from 'uuid';
+
 import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
 
-import { v4 as uuid } from 'uuid';
+import toggleMixin from '../../toggle-check-box-mixin';
 
 export default {
   components: {

src/api/indicators/IndicatorAPI.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
+
 import SimpleIndicator from './SimpleIndicator';
 
 class IndicatorAPI extends EventEmitter {

src/api/indicators/SimpleIndicator.js

@@ -21,9 +21,11 @@
  *****************************************************************************/
 
 import EventEmitter from 'EventEmitter';
-import indicatorTemplate from './res/indicator-template.html';
+
 import { convertTemplateToHTML } from '@/utils/template/templateHelpers';
 
+import indicatorTemplate from './res/indicator-template.html';
+
 const DEFAULT_ICON_CLASS = 'icon-info';
 
 class SimpleIndicator extends EventEmitter {

src/api/menu/MenuAPISpec.js

@@ -20,11 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import MenuAPI from './MenuAPI';
-import Menu from './menu';
-import { createOpenMct, createMouseEvent, resetApplicationState } from '../../utils/testing';
 import Vue from 'vue';
 
+import { createMouseEvent, createOpenMct, resetApplicationState } from '../../utils/testing';
+import Menu from './menu';
+import MenuAPI from './MenuAPI';
+
 describe('The Menu API', () => {
   let openmct;
   let appHolder;

src/api/menu/menu.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import EventEmitter from 'EventEmitter';
+import mount from 'utils/mount';
+import { h } from 'vue';
+
 import MenuComponent from './components/Menu.vue';
 import SuperMenuComponent from './components/SuperMenu.vue';
-import { h } from 'vue';
-import mount from 'utils/mount';
 
 export const MENU_PLACEMENT = {
   TOP: 'top',

src/api/notifications/NotificationAPI.js

@@ -30,8 +30,8 @@
  *
  * @namespace platform/api/notifications
  */
-import moment from 'moment';
 import EventEmitter from 'eventemitter3';
+import moment from 'moment';
 
 /**
  * @typedef {object} NotificationProperties

src/api/objects/MutableDomainObject.js

@@ -19,9 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import EventEmitter from 'EventEmitter';
 import _ from 'lodash';
+
 import utils from './object-utils.js';
-import EventEmitter from 'EventEmitter';
 
 const ANY_OBJECT_EVENT = 'mutation';
 

src/api/objects/ObjectAPI.js

@@ -20,15 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import EventEmitter from 'EventEmitter';
 import utils from 'objectUtils';
+
+import ConflictError from './ConflictError';
+import InMemorySearchProvider from './InMemorySearchProvider';
+import InterceptorRegistry from './InterceptorRegistry';
 import MutableDomainObject from './MutableDomainObject';
-import RootRegistry from './RootRegistry';
 import RootObjectProvider from './RootObjectProvider';
-import EventEmitter from 'EventEmitter';
-import InterceptorRegistry from './InterceptorRegistry';
+import RootRegistry from './RootRegistry';
 import Transaction from './Transaction';
-import ConflictError from './ConflictError';
-import InMemorySearchProvider from './InMemorySearchProvider';
 
 /**
  * Uniquely identifies a domain object.

src/api/objects/ObjectAPISpec.js

@@ -1,5 +1,5 @@
-import ObjectAPI from './ObjectAPI.js';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import ObjectAPI from './ObjectAPI.js';
 
 describe('The Object API', () => {
   let objectAPI;

src/api/objects/TransactionSpec.js

@@ -1,6 +1,7 @@
-import Transaction from './Transaction';
 import utils from 'objectUtils';
 
+import Transaction from './Transaction';
+
 let openmct = {};
 let objectAPI;
 let transaction;

src/api/overlays/Dialog.js

@@ -1,6 +1,7 @@
+import mount from 'utils/mount';
+
 import DialogComponent from './components/DialogComponent.vue';
 import Overlay from './Overlay';
-import mount from 'utils/mount';
 
 class Dialog extends Overlay {
   constructor({ iconClass, message, title, hint, timestamp, ...options }) {

src/api/overlays/Overlay.js

@@ -1,7 +1,8 @@
-import OverlayComponent from './components/OverlayComponent.vue';
 import EventEmitter from 'EventEmitter';
 import mount from 'utils/mount';
 
+import OverlayComponent from './components/OverlayComponent.vue';
+
 const cssClasses = {
   large: 'l-overlay-large',
   small: 'l-overlay-small',

src/api/overlays/OverlayAPI.js

@@ -20,8 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Overlay from './Overlay';
 import Dialog from './Dialog';
+import Overlay from './Overlay';
 import ProgressDialog from './ProgressDialog';
 import Selection from './Selection';
 

src/api/overlays/ProgressDialog.js

@@ -1,6 +1,7 @@
+import mount from 'utils/mount';
+
 import ProgressDialogComponent from './components/ProgressDialogComponent.vue';
 import Overlay from './Overlay';
-import mount from 'utils/mount';
 
 let component;
 class ProgressDialog extends Overlay {

src/api/overlays/Selection.js

@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import mount from 'utils/mount';
+
 import SelectionComponent from './components/SelectionComponent.vue';
 import Overlay from './Overlay';
-import mount from 'utils/mount';
 
 class Selection extends Overlay {
   constructor({

src/api/status/StatusAPISpec.js

@@ -1,5 +1,5 @@
-import StatusAPI from './StatusAPI.js';
 import { createOpenMct, resetApplicationState } from '../../utils/testing';
+import StatusAPI from './StatusAPI.js';
 
 describe('The Status API', () => {
   let statusAPI;