alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace app.js with webpack-dev-server (#5797)

Browse Source
This commit is contained in:
Scott Bell
2022-09-30 17:17:02 +02:00
committed by GitHub
parent 35c42ba43d
commit 2bdac56505
25 changed files with 107 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.npmignore
View File

@@ -10,9 +10,6 @@
# https://github.com/nasa/openmct/issues/4992 # https://github.com/nasa/openmct/issues/4992
!/example/**/* !/example/**/*
# We will remove this in https://github.com/nasa/openmct/issues/4922
!/app.js
# ...except for these files in the above folders. # ...except for these files in the above folders.
/src/**/*Spec.js /src/**/*Spec.js
/src/**/test/ /src/**/test/

7
API.md
View File

@@ -57,7 +57,7 @@
<!-- END doctoc generated TOC please keep comment here to allow auto update --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->
# Building Applications With Open MCT # Developing Applications With Open MCT
## Scope and purpose of this document ## Scope and purpose of this document
@@ -72,8 +72,7 @@ MCT, as well as addressing some common developer use cases.
## Building From Source ## Building From Source
The latest version of Open MCT is available from [our GitHub repository](https://github.com/nasa/openmct). The latest version of Open MCT is available from [our GitHub repository](https://github.com/nasa/openmct).
If you have `git`, and `node` installed, you can build Open MCT with the If you have `git`, and `node` installed, you can build Open MCT with the commands
commands
```bash ```bash
git clone https://github.com/nasa/openmct.git git clone https://github.com/nasa/openmct.git
@@ -86,7 +85,7 @@ build a minified version that can be included in your application. The output
of the build process is placed in a `dist` folder under the openmct source of the build process is placed in a `dist` folder under the openmct source
directory, which can be copied out to another location as needed. The contents directory, which can be copied out to another location as needed. The contents
of this folder will include a minified javascript file named `openmct.js` as of this folder will include a minified javascript file named `openmct.js` as
well as assets such as html, css, and images necessary for the UI. well as assets such as html, css, and images necessary for the UI.
## Starting an Open MCT application ## Starting an Open MCT application

1
Procfile
View File

@@ -1 +0,0 @@
web: node app.js --port $PORT

10
README.md
View File

@@ -30,6 +30,8 @@ Building and running Open MCT in your local dev environment is very easy. Be sur
Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/) Open MCT is now running, and can be accessed by pointing a web browser at [http://localhost:8080/](http://localhost:8080/)
Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpack.js.org/).
## Documentation ## Documentation
Documentation is available on the [Open MCT website](https://nasa.github.io/openmct/documentation/). Documentation is available on the [Open MCT website](https://nasa.github.io/openmct/documentation/).
@@ -43,11 +45,9 @@ our documentation.
We want Open MCT to be as easy to use, install, run, and develop for as We want Open MCT to be as easy to use, install, run, and develop for as
possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov). possible, and your feedback will help us get there! Feedback can be provided via [GitHub issues](https://github.com/nasa/openmct/issues/new/choose), [Starting a GitHub Discussion](https://github.com/nasa/openmct/discussions), or by emailing us at [arc-dl-openmct@mail.nasa.gov](mailto:arc-dl-openmct@mail.nasa.gov).
## Building Applications With Open MCT ## Developing Applications With Open MCT
Open MCT is built using [`npm`](http://npmjs.com/) and [`webpack`](https://webpack.js.org/). For more on developing with Open MCT, see our documentation for a guide on [Developing Applications with Open MCT](./API.md#starting-an-open-mct-application).
See our documentation for a guide on [building Applications with Open MCT](https://github.com/nasa/openmct/blob/master/API.md#starting-an-open-mct-application).
## Compatibility ## Compatibility
@@ -64,7 +64,7 @@ that is intended to be added or removed as a single unit.
As well as providing an extension mechanism, most of the core Open MCT codebase is also As well as providing an extension mechanism, most of the core Open MCT codebase is also
written as plugins. written as plugins.
For information on writing plugins, please see [our API documentation](https://github.com/nasa/openmct/blob/master/API.md#plugins). For information on writing plugins, please see [our API documentation](./API.md#plugins).
## Tests ## Tests

92
app.js
View File

@@ -1,92 +0,0 @@
/*global process*/
/**
* Usage:
*
* npm install minimist express
* node app.js [options]
*/
const options = require('minimist')(process.argv.slice(2));
const express = require('express');
const app = express();
const fs = require('fs');
const request = require('request');
const __DEV__ = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
// Defaults
options.port = options.port || options.p || 8080;
options.host = options.host || 'localhost';
options.directory = options.directory || options.D || '.';
// Show command line options
if (options.help || options.h) {
console.log("\nUsage: node app.js [options]\n");
console.log("Options:");
console.log(" --help, -h Show this message.");
console.log(" --port, -p <number> Specify port.");
console.log(" --directory, -D <bundle> Serve files from specified directory.");
console.log("");
process.exit(0);
}
app.disable('x-powered-by');
app.use('/proxyUrl', function proxyRequest(req, res, next) {
console.log('Proxying request to: ', req.query.url);
req.pipe(request({
url: req.query.url,
strictSSL: false
}).on('error', next)).pipe(res);
});
class WatchRunPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync('WatchRunPlugin', (compilation, callback) => {
console.log('Begin compile at ' + new Date());
callback();
});
}
}
const webpack = require('webpack');
let webpackConfig;
if (__DEV__) {
webpackConfig = require('./webpack.dev');
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.entry.openmct = [
'webpack-hot-middleware/client?reload=true',
webpackConfig.entry.openmct
];
webpackConfig.plugins.push(new WatchRunPlugin());
} else {
webpackConfig = require('./webpack.coverage');
}
const compiler = webpack(webpackConfig);
app.use(require('webpack-dev-middleware')(
compiler,
{
publicPath: '/dist',
stats: 'errors-warnings'
}
));
if (__DEV__) {
app.use(require('webpack-hot-middleware')(
compiler,
{}
));
}
// Expose index.html for development users.
app.get('/', function (req, res) {
fs.createReadStream('index.html').pipe(res);
});
// Finally, open the HTTP server and log the instance to the console
app.listen(options.port, options.host, function () {
console.log('Open MCT application running at %s:%s', options.host, options.port);
});

3
docs/footer.html
View File

@@ -1,3 +0,0 @@
<hr>
</body>
</html>

209
docs/gendocs.js
View File

@@ -1,209 +0,0 @@
/*****************************************************************************
* Open MCT, Copyright (c) 2014-2022, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global require,process,__dirname,GLOBAL*/
/*jslint nomen: false */
// Usage:
// node gendocs.js --in <source directory> --out <dest directory>
var CONSTANTS = {
DIAGRAM_WIDTH: 800,
DIAGRAM_HEIGHT: 500
},
TOC_HEAD = "# Table of Contents";
GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be defined
(function () {
"use strict";
var fs = require("fs"),
mkdirp = require("mkdirp"),
path = require("path"),
glob = require("glob"),
marked = require("marked"),
split = require("split"),
stream = require("stream"),
nomnoml = require('nomnoml'),
toc = require("markdown-toc"),
Canvas = require('canvas'),
header = fs.readFileSync(path.resolve(__dirname, 'header.html')),
footer = fs.readFileSync(path.resolve(__dirname, 'footer.html')),
options = require("minimist")(process.argv.slice(2));
// Convert from nomnoml source to a target PNG file.
function renderNomnoml(source, target) {
var canvas =
new Canvas(CONSTANTS.DIAGRAM_WIDTH, CONSTANTS.DIAGRAM_HEIGHT);
nomnoml.draw(canvas, source, 1.0);
canvas.pngStream().pipe(fs.createWriteStream(target));
}
// Stream transform.
// Pulls out nomnoml diagrams from fenced code blocks and renders them
// as PNG files in the output directory, prefixed with a provided name.
// The fenced code blocks will be replaced with Markdown in the
// output of this stream.
function nomnomlifier(outputDirectory, prefix) {
var transform = new stream.Transform({ objectMode: true }),
isBuilding = false,
counter = 1,
outputPath,
source = "";
transform._transform = function (chunk, encoding, done) {
if (!isBuilding) {
if (chunk.trim().indexOf("```nomnoml") === 0) {
var outputFilename = prefix + '-' + counter + '.png';
outputPath = path.join(outputDirectory, outputFilename);
this.push([
"\n![Diagram ",
counter,
"](",
outputFilename,
")\n\n"
].join(""));
isBuilding = true;
source = "";
counter += 1;
} else {
// Otherwise, pass through
this.push(chunk + '\n');
}
} else {
if (chunk.trim() === "```") {
// End nomnoml
renderNomnoml(source, outputPath);
isBuilding = false;
} else {
source += chunk + '\n';
}
}
done();
};
return transform;
}
// Convert from Github-flavored Markdown to HTML
function gfmifier(renderTOC) {
var transform = new stream.Transform({ objectMode: true }),
markdown = "";
transform._transform = function (chunk, encoding, done) {
markdown += chunk;
done();
};
transform._flush = function (done) {
if (renderTOC){
// Prepend table of contents
markdown =
[ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n");
}
this.push(header);
this.push(marked(markdown));
this.push(footer);
done();
};
return transform;
}
// Custom renderer for marked; converts relative links from md to html,
// and makes headings linkable.
function CustomRenderer() {
var renderer = new marked.Renderer(),
customRenderer = Object.create(renderer);
customRenderer.heading = function (text, level) {
var escapedText = (text || "").trim().toLowerCase().replace(/\W/g, "-"),
aOpen = "<a name=\"" + escapedText + "\" href=\"#" + escapedText + "\">",
aClose = "</a>";
return aOpen + renderer.heading.apply(renderer, arguments) + aClose;
};
// Change links to .md files to .html
customRenderer.link = function (href, title, text) {
// ...but only if they look like relative paths
return (href || "").indexOf(":") === -1 && href[0] !== "/" ?
renderer.link(href.replace(/\.md/, ".html"), title, text) :
renderer.link.apply(renderer, arguments);
};
return customRenderer;
}
options['in'] = options['in'] || options.i;
options.out = options.out || options.o;
marked.setOptions({
renderer: new CustomRenderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});
// Convert all markdown files.
// First, pull out nomnoml diagrams.
// Then, convert remaining Markdown to HTML.
glob(options['in'] + "/**/*.md", {}, function (err, files) {
files.forEach(function (file) {
var destination = file.replace(options['in'], options.out)
.replace(/md$/, "html"),
destPath = path.dirname(destination),
prefix = path.basename(destination).replace(/\.html$/, ""),
//Determine whether TOC should be rendered for this file based
//on regex provided as command line option
renderTOC = file.match(options['suppress-toc'] || "") === null;
mkdirp(destPath, function (err) {
fs.createReadStream(file, { encoding: 'utf8' })
.pipe(split())
.pipe(nomnomlifier(destPath, prefix))
.pipe(gfmifier(renderTOC))
.pipe(fs.createWriteStream(destination, {
encoding: 'utf8'
}));
});
});
});
// Also copy over all HTML, CSS, or PNG files
glob(options['in'] + "/**/*.@(html|css|png)", {}, function (err, files) {
files.forEach(function (file) {
var destination = file.replace(options['in'], options.out),
destPath = path.dirname(destination),
streamOptions = {};
if (file.match(/png$/)) {
streamOptions.encoding = null;
} else {
streamOptions.encoding = 'utf8';
}
mkdirp(destPath, function (err) {
fs.createReadStream(file, streamOptions)
.pipe(fs.createWriteStream(destination, streamOptions));
});
});
});
}());

9
docs/header.html
View File

@@ -1,9 +0,0 @@
<html>
<head>
<link rel="stylesheet"
href="//nasa.github.io/openmct/static/res/css/styles.css">
<link rel="stylesheet"
href="//nasa.github.io/openmct/static/res/css/documentation.css">
</head>
<body>

2
e2e/README.md
View File

@@ -151,7 +151,7 @@ Current list of test tags:
- `@ipad` - Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no Create button). - `@ipad` - Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no Create button).
- `@gds` - Denotes a GDS Test Case used in the VIPER Mission. - `@gds` - Denotes a GDS Test Case used in the VIPER Mission.
- `@addInit` - Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of app.js. - `@addInit` - Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.
- `@localStorage` - Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB). - `@localStorage` - Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB).
- `@snapshot` - Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container. - `@snapshot` - Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.
- `@unstable` - A new test or test which is known to be flaky. - `@unstable` - A new test or test which is known to be flaky.

2
e2e/playwright-ci.config.js
View File

@@ -14,7 +14,7 @@ const config = {
testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
timeout: 60 * 1000, timeout: 60 * 1000,
webServer: { webServer: {
command: 'cross-env NODE_ENV=test npm run start', command: 'npm run start:coverage',
url: 'http://localhost:8080/#', url: 'http://localhost:8080/#',
timeout: 200 * 1000, timeout: 200 * 1000,
reuseExistingServer: false reuseExistingServer: false

5
e2e/playwright-local.config.js
View File

@@ -12,10 +12,7 @@ const config = {
testIgnore: '**/*.perf.spec.js', testIgnore: '**/*.perf.spec.js',
timeout: 30 * 1000, timeout: 30 * 1000,
webServer: { webServer: {
env: { command: 'npm run start:coverage',
NODE_ENV: 'test'
},
command: 'npm run start',
url: 'http://localhost:8080/#', url: 'http://localhost:8080/#',
timeout: 120 * 1000, timeout: 120 * 1000,
reuseExistingServer: true reuseExistingServer: true

4
e2e/playwright-performance.config.js
View File

@@ -6,12 +6,12 @@ const CI = process.env.CI === 'true';
/** @type {import('@playwright/test').PlaywrightTestConfig} */ /** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = { const config = {
retries: 1, //Only for debugging purposes because trace is enabled only on first retry retries: 1, //Only for debugging purposes for trace: 'on-first-retry'
testDir: 'tests/performance/', testDir: 'tests/performance/',
timeout: 60 * 1000, timeout: 60 * 1000,
workers: 1, //Only run in serial with 1 worker workers: 1, //Only run in serial with 1 worker
webServer: { webServer: {
command: 'cross-env NODE_ENV=test npm run start', command: 'npm run start', //coverage not generated
url: 'http://localhost:8080/#', url: 'http://localhost:8080/#',
timeout: 200 * 1000, timeout: 200 * 1000,
reuseExistingServer: !CI reuseExistingServer: !CI

6
e2e/playwright-visual.config.js
View File

@@ -4,13 +4,13 @@
/** @type {import('@playwright/test').PlaywrightTestConfig<{ theme: string }>} */ /** @type {import('@playwright/test').PlaywrightTestConfig<{ theme: string }>} */
const config = { const config = {
retries: 1, // visual tests should never retry due to snapshot comparison errors. Leaving as a shim retries: 0, // Visual tests should never retry due to snapshot comparison errors. Leaving as a shim
testDir: 'tests/visual', testDir: 'tests/visual',
testMatch: '**/*.visual.spec.js', // only run visual tests testMatch: '**/*.visual.spec.js', // only run visual tests
timeout: 60 * 1000, timeout: 60 * 1000,
workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067 workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067
webServer: { webServer: {
command: 'cross-env NODE_ENV=test npm run start', command: 'npm run start:coverage',
url: 'http://localhost:8080/#', url: 'http://localhost:8080/#',
timeout: 200 * 1000, timeout: 200 * 1000,
reuseExistingServer: !process.env.CI reuseExistingServer: !process.env.CI
@@ -31,7 +31,7 @@ const config = {
} }
}, },
{ {
name: 'chrome-snow-theme', name: 'chrome-snow-theme', //Runs the same visual tests but with snow-theme enabled
use: { use: {
browserName: 'chromium', browserName: 'chromium',
theme: 'snow' theme: 'snow'

2
e2e/tests/framework/baseFixtures.e2e.spec.js
View File

@@ -23,7 +23,7 @@
/* /*
This test suite is dedicated to testing our use of the playwright framework as it This test suite is dedicated to testing our use of the playwright framework as it
relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions made in our dev environment relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions made in our dev environment
(app.js and ./e2e/webpack-dev-middleware.js) (`npm start` and ./e2e/webpack-dev-middleware.js)
*/ */
const { test } = require('../../baseFixtures.js'); const { test } = require('../../baseFixtures.js');

2
e2e/tests/visual/controlledClock.visual.spec.js
View File

@@ -22,7 +22,7 @@
/* /*
Collection of Visual Tests set to run in a default context. The tests within this suite Collection of Visual Tests set to run in a default context. The tests within this suite
are only meant to run against openmct's app.js started by `npm run start` within the are only meant to run against openmct started by `npm start` within the
`./e2e/playwright-visual.config.js` file. `./e2e/playwright-visual.config.js` file.
*/ */

2
e2e/tests/visual/default.visual.spec.js
View File

@@ -22,7 +22,7 @@
/* /*
Collection of Visual Tests set to run in a default context. The tests within this suite Collection of Visual Tests set to run in a default context. The tests within this suite
are only meant to run against openmct's app.js started by `npm run start` within the are only meant to run against openmct started by `npm start` within the
`./e2e/playwright-visual.config.js` file. `./e2e/playwright-visual.config.js` file.
These should only use functional expect statements to verify assumptions about the state These should only use functional expect statements to verify assumptions about the state

12
jsdoc.json
View File

@@ -1,12 +0,0 @@
{
"source": {
"include": [
"src/"
],
"includePattern": "src/.+\\.js$",
"excludePattern": ".+\\Spec\\.js$|lib/.+"
},
"plugins": [
"plugins/markdown"
]
}

27
karma.conf.js
View File

@@ -23,14 +23,32 @@
/*global module,process*/ /*global module,process*/
module.exports = (config) => { module.exports = (config) => {
const webpackConfig = require('./webpack.coverage.js'); let webpackConfig;
let browsers;
let singleRun;
if (process.env.KARMA_DEBUG) {
webpackConfig = require('./webpack.dev.js');
browsers = ['ChromeDebugging'];
singleRun = false;
} else {
webpackConfig = require('./webpack.coverage.js');
browsers = ['ChromeHeadless'];
singleRun = true;
}
delete webpackConfig.output; delete webpackConfig.output;
// karma doesn't support webpack entry
delete webpackConfig.entry;
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine'], frameworks: ['jasmine', 'webpack'],
files: [ files: [
'indexTest.js', 'indexTest.js',
// included means: should the files be included in the browser using <script> tag?
// We don't want them as a <script> because the shared worker source
// needs loaded remotely by the shared worker process.
{ {
pattern: 'dist/couchDBChangesFeed.js*', pattern: 'dist/couchDBChangesFeed.js*',
included: false included: false
@@ -46,7 +64,7 @@ module.exports = (config) => {
], ],
port: 9876, port: 9876,
reporters: ['spec', 'junit', 'coverage-istanbul'], reporters: ['spec', 'junit', 'coverage-istanbul'],
browsers: [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'], browsers,
client: { client: {
jasmine: { jasmine: {
random: false, random: false,
@@ -70,6 +88,7 @@ module.exports = (config) => {
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
fixWebpackSourcePaths: true, fixWebpackSourcePaths: true,
skipFilesWithNoCoverage: true,
dir: "coverage/unit", //Sets coverage file to be consumed by codecov.io dir: "coverage/unit", //Sets coverage file to be consumed by codecov.io
reports: ['lcovonly'] reports: ['lcovonly']
}, },
@@ -90,7 +109,7 @@ module.exports = (config) => {
stats: 'errors-warnings' stats: 'errors-warnings'
}, },
concurrency: 1, concurrency: 1,
singleRun: true, singleRun,
browserNoActivityTimeout: 400000 browserNoActivityTimeout: 400000
}); });
}; };

96
lighthouserc.yml
View File

@@ -1,96 +0,0 @@
---
ci:
collect:
urls:
- http://localhost/
numberOfRuns: 5
settings:
onlyCategories:
- performance
- best-practices
upload:
target: temporary-public-storage
assert:
preset: lighthouse:recommended
assertions:
### Applicable assertions
bootup-time:
- warn
- minScore: 0.88 #Original value was calculated at 0.88
dom-size:
- error
- maxNumericValue: 200 #Original value was calculated at 188
first-contentful-paint:
- error
- minScore: 0.07 #Original value was calculated at 0.08
mainthread-work-breakdown:
- warn
- minScore: 0.8 #Original value was calculated at 0.8
unused-javascript:
- warn
- maxLength: 1
- error
- maxNumericValue: 2000 #Original value was calculated at 1855
unused-css-rules: warn
installable-manifest: warn
service-worker: warn
### Disabled seo, accessibility, and pwa assertions, below
categories:seo: 'off'
categories:accessibility: 'off'
categories:pwa: 'off'
accesskeys: 'off'
apple-touch-icon: 'off'
aria-allowed-attr: 'off'
aria-command-name: 'off'
aria-hidden-body: 'off'
aria-hidden-focus: 'off'
aria-input-field-name: 'off'
aria-meter-name: 'off'
aria-progressbar-name: 'off'
aria-required-attr: 'off'
aria-required-children: 'off'
aria-required-parent: 'off'
aria-roles: 'off'
aria-toggle-field-name: 'off'
aria-tooltip-name: 'off'
aria-treeitem-name: 'off'
aria-valid-attr: 'off'
aria-valid-attr-value: 'off'
button-name: 'off'
bypass: 'off'
canonical: 'off'
color-contrast: 'off'
content-width: 'off'
crawlable-anchors: 'off'
csp-xss: 'off'
font-display: 'off'
font-size: 'off'
maskable-icon: 'off'
heading-order: 'off'
hreflang: 'off'
html-has-lang: 'off'
html-lang-valid: 'off'
http-status-code: 'off'
image-alt: 'off'
input-image-alt: 'off'
is-crawlable: 'off'
label: 'off'
link-name: 'off'
link-text: 'off'
list: 'off'
listitem: 'off'
meta-description: 'off'
meta-refresh: 'off'
meta-viewport: 'off'
object-alt: 'off'
plugins: 'off'
robots-txt: 'off'
splash-screen: 'off'
tabindex: 'off'
tap-targets: 'off'
td-headers-attr: 'off'
th-has-data-cells: 'off'
themed-omnibox: 'off'
valid-lang: 'off'
video-caption: 'off'
viewport: 'off'

32
package.json
View File

@@ -15,10 +15,9 @@
"@types/mocha": "^9.1.0", "@types/mocha": "^9.1.0",
"babel-loader": "8.2.5", "babel-loader": "8.2.5",
"babel-plugin-istanbul": "6.1.1", "babel-plugin-istanbul": "6.1.1",
"codecov": "3.8.3",
"comma-separated-values": "3.6.4", "comma-separated-values": "3.6.4",
"codecov":"3.8.3",
"copy-webpack-plugin": "11.0.0", "copy-webpack-plugin": "11.0.0",
"cross-env": "7.0.3",
"css-loader": "6.7.1", "css-loader": "6.7.1",
"d3-axis": "3.0.0", "d3-axis": "3.0.0",
"d3-scale": "3.3.0", "d3-scale": "3.3.0",
@@ -29,7 +28,6 @@
"eslint-plugin-vue": "9.3.0", "eslint-plugin-vue": "9.3.0",
"eslint-plugin-you-dont-need-lodash-underscore": "6.12.0", "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
"eventemitter3": "1.2.0", "eventemitter3": "1.2.0",
"express": "4.13.1",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"git-rev-sync": "3.0.2", "git-rev-sync": "3.0.2",
"html2canvas": "1.4.1", "html2canvas": "1.4.1",
@@ -51,12 +49,12 @@
"moment": "2.29.4", "moment": "2.29.4",
"moment-duration-format": "2.3.2", "moment-duration-format": "2.3.2",
"moment-timezone": "0.5.37", "moment-timezone": "0.5.37",
"nyc":"15.1.0", "nyc": "15.1.0",
"painterro": "1.2.78", "painterro": "1.2.78",
"playwright-core": "1.26.1",
"plotly.js-basic-dist": "2.14.0", "plotly.js-basic-dist": "2.14.0",
"plotly.js-gl2d-dist": "2.14.0", "plotly.js-gl2d-dist": "2.14.0",
"printj": "1.3.1", "printj": "1.3.1",
"request": "2.88.2",
"resolve-url-loader": "5.0.0", "resolve-url-loader": "5.0.0",
"sass": "1.55.0", "sass": "1.55.0",
"sass-loader": "13.0.2", "sass-loader": "13.0.2",
@@ -69,23 +67,23 @@
"vue-template-compiler": "2.6.14", "vue-template-compiler": "2.6.14",
"webpack": "5.74.0", "webpack": "5.74.0",
"webpack-cli": "4.10.0", "webpack-cli": "4.10.0",
"webpack-dev-middleware": "5.3.3", "webpack-dev-server": "4.11.1",
"webpack-hot-middleware": "2.25.2",
"webpack-merge": "5.8.0" "webpack-merge": "5.8.0"
}, },
"scripts": { "scripts": {
"clean": "rm -rf ./dist ./node_modules ./package-lock.json", "clean": "rm -rf ./dist ./node_modules ./package-lock.json",
"clean-test-lint": "npm run clean; npm install; npm run test; npm run lint", "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
"start": "node app.js", "start": "npx webpack serve --config ./webpack.dev.js",
"start:coverage": "npx webpack serve --config ./webpack.coverage.js",
"lint": "eslint example src e2e --ext .js,.vue openmct.js --max-warnings=0", "lint": "eslint example src e2e --ext .js,.vue openmct.js --max-warnings=0",
"lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix", "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
"build:prod": "cross-env webpack --config webpack.prod.js", "build:prod": "webpack --config webpack.prod.js",
"build:dev": "webpack --config webpack.dev.js", "build:dev": "webpack --config webpack.dev.js",
"build:coverage": "webpack --config webpack.coverage.js", "build:coverage": "webpack --config webpack.coverage.js",
"build:watch": "webpack --config webpack.dev.js --watch", "build:watch": "webpack --config webpack.dev.js --watch",
"info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown", "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
"test": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run", "test": "karma start",
"test:debug": "cross-env NODE_ENV=debug karma start --no-single-run", "test:debug": "KARMA_DEBUG=true karma start",
"test:e2e": "npx playwright test", "test:e2e": "npx playwright test",
"test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb", "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb",
"test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb\"", "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb\"",
@@ -95,13 +93,12 @@
"test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js --grep-invert @unstable", "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js --grep-invert @unstable",
"test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb", "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
"test:perf": "npx playwright test --config=e2e/playwright-performance.config.js", "test:perf": "npx playwright test --config=e2e/playwright-performance.config.js",
"test:watch": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
"update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2022/gm' ./src/ui/layout/AboutDialog.vue", "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2022/gm' ./src/ui/layout/AboutDialog.vue",
"update-copyright-date": "npm run update-about-dialog-copyright && grep -lr --null --include=*.{js,scss,vue,ts,sh,html,md,frag} 'Copyright (c) 20' . | xargs -r0 perl -pi -e 's/Copyright\\s\\(c\\)\\s20\\d\\d\\-20\\d\\d/Copyright \\(c\\)\\ 2014\\-2022/gm'", "update-copyright-date": "npm run update-about-dialog-copyright && grep -lr --null --include=*.{js,scss,vue,ts,sh,html,md,frag} 'Copyright (c) 20' . | xargs -r0 perl -pi -e 's/Copyright\\s\\(c\\)\\s20\\d\\d\\-20\\d\\d/Copyright \\(c\\)\\ 2014\\-2022/gm'",
"cov:e2e:report":"nyc report --reporter=lcovonly --report-dir=./coverage/e2e", "cov:e2e:report": "nyc report --reporter=lcovonly --report-dir=./coverage/e2e",
"cov:e2e:full:publish":"codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full", "cov:e2e:full:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-full",
"cov:e2e:stable:publish":"codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-stable", "cov:e2e:stable:publish": "codecov --disable=gcov -f ./coverage/e2e/lcov.info -F e2e-stable",
"cov:unit:publish":"codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit", "cov:unit:publish": "codecov --disable=gcov -f ./coverage/unit/lcov.info -F unit",
"prepare": "npm run build:prod" "prepare": "npm run build:prod"
}, },
"repository": { "repository": {
@@ -111,9 +108,6 @@
"engines": { "engines": {
"node": ">=14.19.1" "node": ">=14.19.1"
}, },
"overrides": {
"core-js": "3.21.1"
},
"browserslist": [ "browserslist": [
"Firefox ESR", "Firefox ESR",
"not IE 11", "not IE 11",

7
src/plugins/performanceIndicator/pluginSpec.js
View File

@@ -57,8 +57,9 @@ describe('the plugin', () => {
it('calculates an fps value', async () => { it('calculates an fps value', async () => {
await loopForABit(); await loopForABit();
// eslint-disable-next-line // eslint-disable-next-line radix
expect(parseInt(performanceIndicator.text().split(' fps')[0])).toBeGreaterThan(0); const fps = parseInt(performanceIndicator.text().split(' fps')[0]);
expect(fps).toBeGreaterThan(0);
}); });
function loopForABit() { function loopForABit() {
@@ -66,7 +67,7 @@ describe('the plugin', () => {
return new Promise(resolve => { return new Promise(resolve => {
requestAnimationFrame(function loop() { requestAnimationFrame(function loop() {
if (++frames === 240) { if (++frames > 90) {
resolve(); resolve();
} else { } else {
requestAnimationFrame(loop); requestAnimationFrame(loop);

19
webpack.common.js
View File

@@ -1,5 +1,13 @@
/* global __dirname */ /* global __dirname module */
/*
This is the OpenMCT common webpack file. It is imported by the other three webpack configurations:
- webpack.prod.js - the production configuration for OpenMCT (default)
- webpack.dev.js - the development configuration for OpenMCT
- webpack.coverage.js - imports webpack.dev.js and adds code coverage
There are separate npm scripts to use these configurations, though simply running `npm install`
will use the default production configuration.
*/
const path = require('path'); const path = require('path');
const packageDefinition = require('./package.json'); const packageDefinition = require('./package.json');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
@@ -140,8 +148,13 @@ const config = {
} }
] ]
}, },
stats: 'errors-warnings' stats: 'errors-warnings',
performance: {
// We should eventually consider chunking to decrease
// these values
maxEntrypointSize: 25000000,
maxAssetSize: 25000000
}
}; };
// eslint-disable-next-line no-undef
module.exports = config; module.exports = config;

29
webpack.coverage.js
View File

@@ -1,34 +1,21 @@
// This file extends the webpack.dev.js config to add istanbul coverage /* global module */
// instrumentation using babel-plugin-istanbul (see babel.coverage.js)
/*
This file extends the webpack.dev.js config to add babel istanbul coverage.
OpenMCT Continuous Integration servers use this configuration to add code coverage
information to pull requests.
*/
const config = require('./webpack.dev'); const config = require('./webpack.dev');
const vueLoaderRule = config.module.rules.find(r => r.use === 'vue-loader');
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const CI = process.env.CI === 'true'; const CI = process.env.CI === 'true';
config.devtool = CI ? false : undefined; config.devtool = CI ? false : undefined;
vueLoaderRule.use = { config.devServer.hot = false;
loader: 'vue-loader'
// Attempt to use Babel with babel-plugin-istanbul
// TODO The purpose of this was to try to add coverage to JS expressions
// inside `<template>` markup, but it seems to add only coverage inside
// `<script>` tags.
// Issue: https://github.com/nasa/openmct/issues/4973
//
// options: {
// compiler: require('vue-template-babel-compiler'),
// compilerOptions: {
// babelOptions: require('./babel.coverage')
// }
// }
};
config.module.rules.push({ config.module.rules.push({
test: /\.js$/, test: /\.js$/,
// test: /(\.js$)|(\?vue&type=template)/,
// exclude: /node_modules(?!.*\.vue)/,
exclude: /(Spec\.js$)|(node_modules)/, exclude: /(Spec\.js$)|(node_modules)/,
use: { use: {
loader: 'babel-loader', loader: 'babel-loader',

19
webpack.dev.js
View File

@@ -1,3 +1,10 @@
/* global __dirname module */
/*
This configuration should be used for development purposes. It contains full source map, a
devServer (which be invoked using by `npm start`), and a non-minified Vue.js distribution.
If OpenMCT is to be used for a production server, use webpack.prod.js instead.
*/
const { merge } = require('webpack-merge'); const { merge } = require('webpack-merge');
const common = require('./webpack.common'); const common = require('./webpack.common');
@@ -27,5 +34,15 @@ module.exports = merge(common, {
__OPENMCT_ROOT_RELATIVE__: '"dist/"' __OPENMCT_ROOT_RELATIVE__: '"dist/"'
}) })
], ],
devtool: 'eval-source-map' devtool: 'eval-source-map',
devServer: {
static: {
directory: path.join(__dirname, '/dist/'),
publicPath: '/dist'
},
client: {
progress: true,
overlay: true
}
}
}); });

6
webpack.prod.js
View File

@@ -1,3 +1,9 @@
/* global __dirname module */
/*
This configuration should be used for production installs.
It is the default webpack configuration.
*/
const { merge } = require('webpack-merge'); const { merge } = require('webpack-merge');
const common = require('./webpack.common'); const common = require('./webpack.common');