refactor: Convert openmct-yamcs to ESModule (akhenry#410)

pixxelhq · Jan 24, 2024 · 19513c3 · 19513c3
1 parent fd31018
commit 19513c3
Show file tree

Hide file tree

Showing 36 changed files with 287 additions and 247 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
@@ -25,7 +25,7 @@ module.exports = {
         "browser": true,
         "es6": true,
         "jasmine": true,
-        "amd": true
+        "amd": false
     },
     "extends": "eslint:recommended",
     "parser": "@babel/eslint-parser",
@@ -37,7 +37,16 @@ module.exports = {
             "impliedStrict": true
         }
     },
+    "plugins": ['import'],
     "rules": {
+        'import/no-amd': 'error',
+        'import/no-commonjs': 'error',
+        'import/named': 'error',
+        'import/no-webpack-loader-syntax': 'error',
+        'import/first': 'error',
+        'import/no-import-module-exports': 'error',
+        'import/no-mutable-exports': 'error',
+        'import/no-unused-modules': 'error',
         "no-bitwise": "error",
         "curly": "error",
         "eqeqeq": "error",
@@ -237,6 +246,12 @@ module.exports = {
                         "varsIgnorePattern": "controller"
                     }
                 ]
+            }  
+        },
+        {
+            "files": ['*.eslintrc.cjs'],
+            "env": {
+              "node": true
             }
         }
     ]

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -1,4 +1,4 @@
-name: npm install and build:example
+name: npm install, build, and lint
 
 on:
   push:
@@ -31,3 +31,15 @@ jobs:
         elif [ "${{ matrix.openmct-version }}" = "stable" ]; then
           npm run build:example
         fi
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+    - run: npm install
+    - name: Run lint
+      run: npm run lint
diff --git a/.github/workflows/yamcs-quickstart-e2e.yml b/.github/workflows/yamcs-quickstart-e2e.yml
@@ -74,9 +74,7 @@ jobs:
             echo "Error: Unable to fetch Yamcs version. HTTP status code: $response"
             exit 1
           fi
-      - name: Run Quickstart tests and publish to deploysentinel
-        env:
-          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }} 
+      - name: Run Quickstart tests
         run: npm run test:e2e:quickstart
       - name: Capture docker logs to file
         if: always()

diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ test-results
 
 # Misc
 .DS_Store
+.vscode/settings.json
diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
@@ -20,18 +20,19 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const path = require('path');
-const projectRootDir = path.resolve(__dirname, '..');
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-// eslint-disable no-undef
-const WEBPACK_COMMON_CONFIG = {
+const projectRootDir = fileURLToPath(new URL('../', import.meta.url));
+
+/** @type {import('webpack').Configuration} */
+const commonConfig = {
+    context: projectRootDir,
     performance: {
         hints: false
     },
-    resolve: {
-        alias: {
-            saveAs: "file-saver/src/FileSaver.js",
-        }
+    entry: {
+        'openmct-yamcs': './src/openmct-yamcs.js'
     },
     module: {
         rules: [
@@ -40,17 +41,19 @@ const WEBPACK_COMMON_CONFIG = {
                 enforce: "pre",
                 use: ["source-map-loader"]
             }
-        ]
+        ],
     },
     output: {
         globalObject: "this",
         filename: '[name].js',
-        // eslint-disable-next-line no-undef
         path: path.resolve(projectRootDir, 'dist'),
-        libraryTarget: 'umd',
-        library: 'openmctYamcs'
+        library: {
+            type: 'umd',
+            export: 'default',
+            name: 'openmctYamcs'
+        }
     }
 };
 
-// eslint-disable-next-line no-undef
-module.exports = WEBPACK_COMMON_CONFIG;
+export default commonConfig;
+
diff --git a/.webpack/webpack.coverage.js b/.webpack/webpack.coverage.js
@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const config = require('./webpack.dev');
+import config from './webpack.dev.js';
+
 // eslint-disable-next-line no-undef
 const CI = process.env.CI === 'true';
 
@@ -43,5 +44,4 @@ config.module.rules.push({
     }
 });
 
-// eslint-disable-next-line no-undef
-module.exports = config;
+export default config;
diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
@@ -19,30 +19,29 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { merge } from 'webpack-merge';
+import commonConfig from './webpack.common.js';
 
-const path = require('path');
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
-const projectRootDir = path.resolve(__dirname, '..');
+// Replicate __dirname functionality for ES modules
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-// eslint-disable-next-line no-undef
-module.exports = merge(common, {
-    context: projectRootDir,
+/** @type {import('webpack').Configuration} */
+const devConfig = {
     mode: 'development',
     devtool: 'eval-source-map',
     entry: {
-        'openmct-yamcs-example': path.resolve(projectRootDir, 'example/index.js')
+        'openmct-yamcs-example': './example/index.js'
     },
     devServer: {
         compress: true,
         port: 9000,
         static: [{
-            // eslint-disable-next-line no-undef
-            directory: path.join(projectRootDir, 'example')
+            directory: path.join(__dirname, '../example'),
         }, {
-            // eslint-disable-next-line no-undef
-            directory: path.join(projectRootDir, '/node_modules/openmct/dist'),
-            publicPath: '/node_modules/openmct/dist'
+            directory: path.join(__dirname, '../node_modules/openmct/dist'),
+            publicPath: '/dist',
         }],
         proxy: {
             "/yamcs-proxy/*": {
@@ -59,5 +58,12 @@ module.exports = merge(common, {
                 pathRewrite: { '^/yamcs-proxy-ws/': '' }
             }
         }
+    },
+    resolve: {
+        alias: {
+            openmct: path.resolve(__dirname, '../node_modules/openmct/dist/openmct.js')
+        }
     }
-});
+};
+
+export default merge(commonConfig, devConfig);
diff --git a/.webpack/webpack.prod.js b/.webpack/webpack.prod.js
@@ -20,17 +20,12 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const path = require('path');
-const { merge } = require('webpack-merge');
-const common = require('./webpack.common');
+import { merge } from 'webpack-merge';
+import common from './webpack.common.js';
 
-const projectRootDir = path.resolve(__dirname, '..');
-// eslint-disable-next-line no-undef
-module.exports = merge(common, {
-    context: projectRootDir,
+/** @type {import('webpack').Configuration} */
+const prodConfig = {
     mode: 'production',
-    entry: {
-        'openmct-yamcs': path.resolve(projectRootDir, 'src/plugin.js')
-    },
     devtool: 'source-map'
-});
+}
+export default merge(common, prodConfig);
diff --git a/check-optional-dependencies.js b/check-optional-dependencies.js
@@ -1,14 +1,15 @@
 // check-optional-dependencies.js
-const fs = require('fs');
-const semver = require('semver');
-const myPackageJson = require('./package.json');
+import fs from 'node:fs';
+import semver from 'semver';
+const myPackageJson = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url)));
+
 
 function checkOptionalDependency(dependency, expectedVersion) {
   if (!fs.existsSync(`node_modules/${dependency}`)) {
     console.error(`The optional dependency ${dependency} is not installed. Please install it before building.`);
     process.exit(1);
   } else {
-    const installedPackageJson = require(`./node_modules/${dependency}/package.json`);
+    const installedPackageJson = JSON.parse(fs.readFileSync(new URL(`./node_modules/${dependency}/package.json`, import.meta.url)));
     const installedVersion = installedPackageJson.version;
     if (!semver.satisfies(installedVersion, expectedVersion)) {
       console.error(`The installed version of optional dependency ${dependency} is ${installedVersion}, which does not satisfy the expected version ${expectedVersion}. Please update it before building.`);

diff --git a/example/index.html b/example/index.html
@@ -21,7 +21,7 @@
 <html>
 <head>
     <title>Open MCT - YAMCS Example</title>
-    <script src="/node_modules/openmct/dist/openmct.js"></script>
+    <script src="/dist/openmct.js"></script>
     <script src="/openmct-yamcs-example.js" defer></script>
 
     <link rel="icon" type="image/png" href="/node_modules/openmct/dist/favicons/favicon-96x96.png" sizes="96x96" type="image/x-icon">

diff --git a/example/index.js b/example/index.js
@@ -1,5 +1,5 @@
 
-import installYamcsPlugin from '../src/plugin.js';
+import installYamcsPlugin from '../src/openmct-yamcs.js';
 
 const config = {
     "yamcsDictionaryEndpoint": "http://localhost:9000/yamcs-proxy/",
@@ -39,57 +39,55 @@ const STATUS_STYLES = {
 };
 const openmct = window.openmct;
 
-(function () {
-    const THIRTY_MINUTES = 30 * 60 * 1000;
+const THIRTY_MINUTES = 30 * 60 * 1000;
 
-    openmct.setAssetPath('/node_modules/openmct/dist');
+openmct.setAssetPath('/dist');
 
-    installDefaultPlugins();
-    openmct.install(installYamcsPlugin(config));
-    openmct.install(openmct.plugins.OperatorStatus({statusStyles: STATUS_STYLES}));
+installDefaultPlugins();
+openmct.install(installYamcsPlugin(config));
+openmct.install(openmct.plugins.OperatorStatus({statusStyles: STATUS_STYLES}));
 
-    document.addEventListener('DOMContentLoaded', function () {
-        openmct.start();
-    });
+document.addEventListener('DOMContentLoaded', function () {
+    openmct.start();
+});
 
-    function installDefaultPlugins() {
-        openmct.install(openmct.plugins.LocalStorage());
-        openmct.install(openmct.plugins.Espresso());
-        openmct.install(openmct.plugins.MyItems());
-        openmct.install(openmct.plugins.example.Generator());
-        openmct.install(openmct.plugins.example.ExampleImagery());
-        openmct.install(openmct.plugins.UTCTimeSystem());
-        openmct.install(openmct.plugins.TelemetryMean());
+function installDefaultPlugins() {
+    openmct.install(openmct.plugins.LocalStorage());
+    openmct.install(openmct.plugins.Espresso());
+    openmct.install(openmct.plugins.MyItems());
+    openmct.install(openmct.plugins.example.Generator());
+    openmct.install(openmct.plugins.example.ExampleImagery());
+    openmct.install(openmct.plugins.UTCTimeSystem());
+    openmct.install(openmct.plugins.TelemetryMean());
 
-        openmct.install(openmct.plugins.DisplayLayout({
-            showAsView: ['summary-widget', 'example.imagery', 'yamcs.image']
-        }));
-        openmct.install(openmct.plugins.Conductor({
-            menuOptions: [
-                {
-                    name: "Realtime",
-                    timeSystem: 'utc',
-                    clock: 'local',
-                    clockOffsets: {
-                        start: -THIRTY_MINUTES,
-                        end: 0
-                    }
-                },
-                {
-                    name: "Fixed",
-                    timeSystem: 'utc',
-                    bounds: {
-                        start: Date.now() - THIRTY_MINUTES,
-                        end: 0
-                    }
+    openmct.install(openmct.plugins.DisplayLayout({
+        showAsView: ['summary-widget', 'example.imagery', 'yamcs.image']
+    }));
+    openmct.install(openmct.plugins.Conductor({
+        menuOptions: [
+            {
+                name: "Realtime",
+                timeSystem: 'utc',
+                clock: 'local',
+                clockOffsets: {
+                    start: -THIRTY_MINUTES,
+                    end: 0
                 }
-            ]
-        }));
-        openmct.install(openmct.plugins.SummaryWidget());
-        openmct.install(openmct.plugins.Notebook());
-        openmct.install(openmct.plugins.LADTable());
-        openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
+            },
+            {
+                name: "Fixed",
+                timeSystem: 'utc',
+                bounds: {
+                    start: Date.now() - THIRTY_MINUTES,
+                    end: 0
+                }
+            }
+        ]
+    }));
+    openmct.install(openmct.plugins.SummaryWidget());
+    openmct.install(openmct.plugins.Notebook());
+    openmct.install(openmct.plugins.LADTable());
+    openmct.install(openmct.plugins.ClearData(['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked']));
 
-        openmct.install(openmct.plugins.FaultManagement());
-    }
-}());
+    openmct.install(openmct.plugins.FaultManagement());
+}
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "openmct-yamcs",
   "version": "3.3.0-next",
   "description": "An adapter for connecting Open MCT with YAMCS",
+  "type": "module",
   "main": "dist/openmct-yamcs.js",
   "scripts": {
     "clean": "rm -rf ./dist ./node_modules ./package-lock.json ./coverage ./test-results ./tests/html-test-results ./tests/e2e/test-results ./.nyc_output ./tests/e2e/opensource",
@@ -19,6 +20,7 @@
     "test:e2e:smoke": "npx playwright test --config=./tests/e2e/playwright-quickstart.config.js --project=chromium quickstartSmoke",
     "test:e2e:quickstart": "npx playwright test --config=./tests/e2e/playwright-quickstart.config.js --project=chromium tests/e2e/yamcs/",
     "test:e2e:quickstart:local": "npx playwright test --config=./tests/e2e/playwright-quickstart.config.js --project=local-chrome tests/e2e/yamcs/",
+    "test:e2e:watch": "npx playwright test --ui --config=./tests/e2e/playwright-quickstart.config.js",
     "wait-for-yamcs": "wait-on http-get://localhost:8090/ -v"
   },
   "keywords": [
@@ -36,11 +38,11 @@
   "devDependencies": {
     "@babel/core": "7.20.12",
     "@babel/eslint-parser": "7.19.1",
-    "@deploysentinel/playwright": "0.3.4",
     "@playwright/test": "1.39.0",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
     "eslint": "8.38.0",
+    "eslint-plugin-import":"2.29.1",
     "eventemitter3": "4.0.7",
     "file-saver": "2.0.5",
     "semver": "7.5.2",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,4 @@ test-results

		# Misc
		.DS_Store
		.vscode/settings.json