refactor: migrate to ESM (#7331)

* refactor: move package.json to type: module

this is where the fun begins

* chore: move webpack common and prod to esm

* chore: move webpack to esm, eslint to explicit cjs

* refactor: migrate all files to esm

* style: lint

* refactor: begin moving karma to cjs, use dynamic esm import

* refactor: move index-test to cjs

* refactor: begin moving e2e to ESM

this was manual. I'm committing this because I'm about to try the `cjstoesm` tool

* refactor: move all to esm

* fix: make all e2e tests use .js imports

* refactor: begin moving exports to esm

* refactor: use URL transforms instead of __dirname

* fix: use libraryExport: default to properly handle openmct

* fix: export all playwright configs as modules

* refactor: move all instances of __dirname to import.meta.url

* refactor: lint, drop unnecessary URL call

* fix: use correct URL path on helper/addNoneditableObject.js

* fix: more incorrect URL resolve issues

* fix: parse json after reading it

src/plugins/displayLayout/CustomStringFormatterSpec.js

@@ -1,6 +1,6 @@
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 
-import CustomStringFormatter from './CustomStringFormatter';
+import CustomStringFormatter from './CustomStringFormatter.js';
 
 const CUSTOM_FORMATS = [
   {

src/plugins/displayLayout/components/BoxView.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
 
 export default {

src/plugins/displayLayout/components/EditMarquee.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import LayoutDrag from './../LayoutDrag';
+import LayoutDrag from './../LayoutDrag.js';
 
 export default {
   inject: ['openmct'],

src/plugins/displayLayout/components/EllipseView.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
 
 export default {

src/plugins/displayLayout/components/ImageView.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
 
 export default {

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -41,8 +41,8 @@
 <script>
 import _ from 'lodash';
 
-import DRAWING_OBJECT_TYPES from '../DrawingObjectTypes';
-import LayoutDrag from './../LayoutDrag';
+import DRAWING_OBJECT_TYPES from '../DrawingObjectTypes.js';
+import LayoutDrag from './../LayoutDrag.js';
 
 export default {
   inject: ['openmct'],

src/plugins/displayLayout/components/LineView.vue

@@ -62,7 +62,7 @@
 <script>
 import _ from 'lodash';
 
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 
 const START_HANDLE_QUADRANTS = {
   1: 'c-frame-edit__handle--sw',

src/plugins/displayLayout/components/TelemetryView.vue

@@ -73,8 +73,8 @@ import {
 } from '@/plugins/notebook/utils/notebook-storage.js';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
-import tooltipHelpers from '../../../api/tooltips/tooltipMixins';
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import tooltipHelpers from '../../../api/tooltips/tooltipMixins.js';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];

src/plugins/displayLayout/components/TextView.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script>
-import conditionalStylesMixin from '../mixins/objectStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectStyles-mixin.js';
 import LayoutFrame from './LayoutFrame.vue';
 
 export default {

src/plugins/displayLayout/plugin.js

@@ -22,7 +22,7 @@
 
 import mount from 'utils/mount';
 
-import CopyToClipboardAction from './actions/CopyToClipboardAction';
+import CopyToClipboardAction from './actions/CopyToClipboardAction.js';
 import AlphaNumericFormatViewProvider from './AlphanumericFormatViewProvider.js';
 import DisplayLayout from './components/DisplayLayout.vue';
 import DisplayLayoutToolbar from './DisplayLayoutToolbar.js';

src/plugins/displayLayout/pluginSpec.js

@@ -23,7 +23,7 @@
 import { createOpenMct, renderWhenVisible, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 
-import DisplayLayoutPlugin from './plugin';
+import DisplayLayoutPlugin from './plugin.js';
 
 describe('the plugin', function () {
   let element;