chore: remove type: module, create openmct-e2e subpackage (#7590)

* fix: remove mystery webpack code

* fix: remove type:module and specify exports

- we aren't a module... yet

* fix: rename webpack*.js to webpack*.mjs so we can use import/export. fix imports

* fix: exports format

* fix: woops, need to add `start` script back

* chore: split e2e into its own module

* fix: use normal Painterro import

* fix: update e2e pathing

* fix: copy over helper functions

* chore: specify `cwd` for playwright configs so that openmct npm commands work as intended in any environment

* chore: add pretest script to e2e package.json

* chore: don't package e2e

* refactor: tidy up webpack common config

* chore: compile types to a single file

* chore: fix visual test npm scripts

* chore: fix import pathing

* chore: define package exports, move test specific dependencies to the subpackage

* chore: export test framework from openmct-e2e

* chore: export baseFixtures also

* chore: let `openmct` and `openmct-e2e` share `node_modules/`

* chore: use `--workspace`, remove pretest script

* Revert "fix: remove mystery webpack code"

This reverts commit eb14d52569ffa27ab1a090b883694f4707b59cd0.

* chore: update package-lock

* chore: add `.npmignore`

* fix: *js -> mjs

.npmignore

@@ -22,9 +22,3 @@
 !index.html
 !openmct.js
 !SECURITY.md
-
-# Add e2e tests to npm package
-!/e2e/**/*
-
-# ... except our test-data folder files.
-/e2e/test-data/*.json

.webpack/webpack.common.mjs

@@ -1,8 +1,8 @@
 /*
 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
+ - webpack.prod.mjs - the production configuration for OpenMCT (default)
+ - webpack.dev.mjs - the development configuration for OpenMCT
+ - webpack.coverage.mjs - 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.
 */
@@ -15,6 +15,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { VueLoaderPlugin } from 'vue-loader';
 import webpack from 'webpack';
+import { merge } from 'webpack-merge';
 let gitRevision = 'error-retrieving-revision';
 let gitBranch = 'error-retrieving-branch';
 
@@ -54,9 +55,11 @@ const config = {
     globalObject: 'this',
     filename: '[name].js',
     path: path.resolve(projectRootDir, 'dist'),
-    library: 'openmct',
-    libraryExport: 'default',
-    libraryTarget: 'umd',
+    library: {
+      name: 'openmct',
+      type: 'umd',
+      export: 'default'
+    },
     publicPath: '',
     hashFunction: 'xxhash64',
     clean: true

.webpack/webpack.coverage.mjs

@@ -1,10 +1,10 @@
 /*
-This file extends the webpack.dev.js config to add babel istanbul coverage.
+This file extends the webpack.dev.mjs config to add babel istanbul coverage.
 OpenMCT Continuous Integration servers use this configuration to add code coverage
 information to pull requests.
 */
 
-import config from './webpack.dev.js';
+import config from './webpack.dev.mjs';
 
 config.devtool = 'source-map';
 config.devServer.hot = false;

.webpack/webpack.dev.mjs

@@ -1,14 +1,15 @@
 /*
 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.
+If OpenMCT is to be used for a production server, use webpack.prod.mjs instead.
 */
+import { fileURLToPath } from 'node:url';
+
 import path from 'path';
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
-import { fileURLToPath } from 'node:url';
 
-import common from './webpack.common.js';
+import common from './webpack.common.mjs';
 
 export default merge(common, {
   mode: 'development',

.webpack/webpack.prod.mjs

@@ -6,7 +6,7 @@ It is the default webpack configuration.
 import webpack from 'webpack';
 import { merge } from 'webpack-merge';
 
-import common from './webpack.common.js';
+import common from './webpack.common.mjs';
 
 export default merge(common, {
   mode: 'production',

TESTING.md

@@ -63,7 +63,7 @@ Once the file is generated, it can be published to codecov with
 ### e2e
 The e2e line coverage is a bit more complex than the karma implementation. This is the general sequence of events:
 
-1. Each e2e suite will start webpack with the ```npm run start:coverage``` command with config `webpack.coverage.js` and the `babel-plugin-istanbul` plugin to generate code coverage during e2e test execution using our custom [baseFixture](./baseFixtures.js). 
+1. Each e2e suite will start webpack with the ```npm run start:coverage``` command with config `webpack.coverage.mjs` and the `babel-plugin-istanbul` plugin to generate code coverage during e2e test execution using our custom [baseFixture](./baseFixtures.js). 
 1. During testcase execution, each e2e shard will generate its piece of the larger coverage suite. **This coverage file is not merged**. The raw coverage file is stored in a `.nyc_report` directory.
 1. [nyc](https://github.com/istanbuljs/nyc) converts this directory into a `lcov` file with the following command `npm run cov:e2e:report`
 1. Most of the tests are run in the '@stable' configuration and focus on chrome/ubuntu at a single resolution. This coverage is published to codecov with `npm run cov:e2e:stable:publish`.

e2e/README.md

@@ -167,9 +167,9 @@ When an a11y test fails, the result must be interpreted in the html test report
 
 The open source performance tests function in three ways which match their naming and folder structure:
 
-`./e2e/tests/performance` - The tests at the root of this folder path detect functional changes which are mostly apparent with large performance regressions like [this](https://github.com/nasa/openmct/issues/6879). These tests run against openmct webpack in `production-mode` with the `npm run test:perf:localhost` script.
-`./e2e/tests/performance/contract/` -  These tests serve as [contracts](https://martinfowler.com/bliki/ContractTest.html) for the locator logic, functionality, and assumptions will work in our downstream, closed source test suites. These tests run against openmct webpack in `dev-mode` with the `npm run test:perf:contract` script.
-`./e2e/tests/performance/memory/` -  These tests execute memory leak detection checks in various ways. This is expected to evolve as we move to the `memlab` project. These tests run against openmct webpack in `production-mode` with the `npm run test:perf:memory` script.
+`tests/performance` - The tests at the root of this folder path detect functional changes which are mostly apparent with large performance regressions like [this](https://github.com/nasa/openmct/issues/6879). These tests run against openmct webpack in `production-mode` with the `npm run test:perf:localhost` script.
+`tests/performance/contract/` -  These tests serve as [contracts](https://martinfowler.com/bliki/ContractTest.html) for the locator logic, functionality, and assumptions will work in our downstream, closed source test suites. These tests run against openmct webpack in `dev-mode` with the `npm run test:perf:contract` script.
+`tests/performance/memory/` -  These tests execute memory leak detection checks in various ways. This is expected to evolve as we move to the `memlab` project. These tests run against openmct webpack in `production-mode` with the `npm run test:perf:memory` script.
 
 These tests are expected to become blocking and gating with assertions as we extend the capabilities of Playwright.
 

e2e/index.js

@@ -0,0 +1,8 @@
+// Import everything from the specific fixture files
+import * as appActions from './appActions.js';
+import * as avpFixtures from './avpFixtures.js';
+import * as baseFixtures from './baseFixtures.js';
+import * as pluginFixtures from './pluginFixtures.js';
+
+// Export these as named exports
+export { appActions, avpFixtures, baseFixtures, pluginFixtures };

e2e/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "openmct-e2e",
+  "version": "4.0.0-next",
+  "description": "The Open MCT e2e framework",
+  "type": "module",
+  "module": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js"
+    }
+  },
+  "scripts": {
+    "pretest:visual": "npm install",
+    "test": "npx playwright test",
+    "test:visual": "percy exec"
+  },
+  "devDependencies": {
+    "@types/sinonjs__fake-timers": "8.1.5",
+    "@percy/cli": "1.27.4",
+    "@percy/playwright": "1.0.4",
+    "@playwright/test": "1.42.1",
+    "@axe-core/playwright": "4.8.5",
+    "sinon": "17.0.0"
+  },
+  "author": "NASA Ames Research Center",
+  "license": "Apache-2.0"
+}

e2e/playwright-ci.config.js

@@ -15,6 +15,7 @@ const config = {
   timeout: 60 * 1000,
   webServer: {
     command: 'npm run start:coverage',
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.

e2e/playwright-local.config.js

@@ -10,6 +10,7 @@ const config = {
   timeout: 30 * 1000,
   webServer: {
     command: 'npm run start:coverage',
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 120 * 1000,
     reuseExistingServer: true

e2e/playwright-mobile.config.js

@@ -14,6 +14,7 @@ const config = {
   timeout: 30 * 1000,
   webServer: {
     command: 'npm run start:coverage',
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.

e2e/playwright-performance-dev.config.js

@@ -10,6 +10,7 @@ const config = {
   workers: 1, //Only run in serial with 1 worker
   webServer: {
     command: 'npm run start', //need development mode for performance.marks and others
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: false

e2e/playwright-performance-prod.config.js

@@ -10,6 +10,7 @@ const config = {
   workers: 1, //Only run in serial with 1 worker
   webServer: {
     command: 'npm run start:prod', //Production mode
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: false //Must be run with this option to prevent dev mode

e2e/playwright-visual-a11y.config.js

@@ -10,6 +10,7 @@ const config = {
   workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067
   webServer: {
     command: 'npm run start:coverage',
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: !process.env.CI

e2e/playwright-watch.config.js

@@ -11,6 +11,7 @@ const config = {
   timeout: 60 * 1000,
   webServer: {
     command: 'npm run start', //Start in dev mode for hot reloading
+    cwd: '../', // Provide cwd for the root of the project
     url: 'http://localhost:8080/#',
     timeout: 200 * 1000,
     reuseExistingServer: true //This was originally disabled to prevent differences in local debugging vs. CI. However, it significantly speeds up local debugging.

e2e/tests/functional/forms.e2e.spec.js

@@ -31,8 +31,8 @@ import { createDomainObjectWithDefaults } from '../../appActions.js';
 import { expect, test } from '../../pluginFixtures.js';
 
 const TEST_FOLDER = 'test folder';
-const jsonFilePath = 'e2e/test-data/ExampleLayouts.json';
-const imageFilePath = 'e2e/test-data/rick.jpg';
+const jsonFilePath = 'test-data/ExampleLayouts.json';
+const imageFilePath = 'test-data/rick.jpg';
 
 test.describe('Form Validation Behavior', () => {
   test('Required Field indicators appear if title is empty and can be corrected', async ({

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -21,7 +21,6 @@
  *****************************************************************************/
 import fs from 'fs';
 
-import { getPreciseDuration } from '../../../../src/utils/duration.js';
 import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../../appActions.js';
 import {
   assertPlanActivities,
@@ -132,3 +131,58 @@ test.describe('Gantt Chart', () => {
     );
   });
 });
+
+const ONE_SECOND = 1000;
+const ONE_MINUTE = 60 * ONE_SECOND;
+const ONE_HOUR = ONE_MINUTE * 60;
+const ONE_DAY = ONE_HOUR * 24;
+
+function normalizeAge(num) {
+  const hundredtized = num * 100;
+  const isWhole = hundredtized % 100 === 0;
+
+  return isWhole ? hundredtized / 100 : num;
+}
+
+function padLeadingZeros(num, numOfLeadingZeros) {
+  return num.toString().padStart(numOfLeadingZeros, '0');
+}
+
+function toDoubleDigits(num) {
+  return padLeadingZeros(num, 2);
+}
+
+function toTripleDigits(num) {
+  return padLeadingZeros(num, 3);
+}
+
+function getPreciseDuration(value, { excludeMilliSeconds, useDayFormat } = {}) {
+  let preciseDuration;
+  const ms = value || 0;
+
+  const duration = [
+    Math.floor(normalizeAge(ms / ONE_DAY)),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_DAY) / ONE_HOUR))),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_HOUR) / ONE_MINUTE))),
+    toDoubleDigits(Math.floor(normalizeAge((ms % ONE_MINUTE) / ONE_SECOND)))
+  ];
+  if (!excludeMilliSeconds) {
+    duration.push(toTripleDigits(Math.floor(normalizeAge(ms % ONE_SECOND))));
+  }
+
+  if (useDayFormat) {
+    // Format days as XD
+    const days = duration.shift();
+    if (days > 0) {
+      preciseDuration = `${days}D ${duration.join(':')}`;
+    } else {
+      preciseDuration = duration.join(':');
+    }
+  } else {
+    const days = toDoubleDigits(duration.shift());
+    duration.unshift(days);
+    preciseDuration = duration.join(':');
+  }
+
+  return preciseDuration;
+}

e2e/tests/performance/contract/imagery.contract.perf.spec.js

@@ -34,7 +34,7 @@ TODO:
 
 import { expect, test } from '@playwright/test';
 
-const filePath = 'e2e/test-data/PerformanceDisplayLayout.json';
+const filePath = 'test-data/PerformanceDisplayLayout.json';
 
 test.describe('Performance tests', () => {
   test.beforeEach(async ({ page, browser }, testInfo) => {

e2e/tests/performance/contract/notebook.contract.perf.spec.js

@@ -33,7 +33,7 @@ TODO:
 
 import { expect, test } from '@playwright/test';
 
-const notebookFilePath = 'e2e/test-data/PerformanceNotebook.json';
+const notebookFilePath = 'test-data/PerformanceNotebook.json';
 
 test.describe('Performance tests', () => {
   test.beforeEach(async ({ page, browser }, testInfo) => {

e2e/tests/visual-a11y/components/inspector.visual.spec.js

@@ -33,7 +33,7 @@ test.describe('Visual - Inspector @ally @clock', () => {
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test.use({
-    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    storageState: 'test-data/overlay_plot_with_delay_storage.json',
     clockOptions: {
       now: MISSION_TIME,
       shouldAdvanceTime: true

e2e/tests/visual-a11y/controlledClock.visual.spec.js

@@ -35,7 +35,7 @@ test.describe('Visual - Controlled Clock @clock', () => {
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test.use({
-    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    storageState: 'test-data/overlay_plot_with_delay_storage.json',
     clockOptions: {
       now: MISSION_TIME,
       shouldAdvanceTime: false //Don't advance the clock

e2e/tests/visual-a11y/defaultPlugins.visual.spec.js

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

karma.conf.cjs

@@ -24,13 +24,13 @@
 const loadWebpackConfig = async () => {
   if (process.env.KARMA_DEBUG) {
     return {
-      config: (await import('./.webpack/webpack.dev.js')).default,
+      config: (await import('./.webpack/webpack.dev.mjs')).default,
       browsers: ['ChromeDebugging'],
       singleRun: false
     };
   } else {
     return {
-      config: (await import('./.webpack/webpack.coverage.js')).default,
+      config: (await import('./.webpack/webpack.coverage.mjs')).default,
       browsers: ['ChromeHeadless'],
       singleRun: true
     };

package-lock.json

@@ -8,13 +8,12 @@
       "name": "openmct",
       "version": "4.0.0-next",
       "license": "Apache-2.0",
+      "workspaces": [
+        "e2e"
+      ],
       "devDependencies": {
-        "@axe-core/playwright": "4.8.5",
         "@babel/eslint-parser": "7.23.3",
         "@braintree/sanitize-url": "6.0.4",
-        "@percy/cli": "1.27.4",
-        "@percy/playwright": "1.0.4",
-        "@playwright/test": "1.42.1",
         "@types/d3-axis": "3.0.6",
         "@types/d3-scale": "4.0.8",
         "@types/d3-selection": "3.0.10",
@@ -22,7 +21,6 @@
         "@types/eventemitter3": "1.2.0",
         "@types/jasmine": "5.1.2",
         "@types/lodash": "4.17.0",
-        "@types/sinonjs__fake-timers": "8.1.5",
         "@vue/compiler-sfc": "3.4.3",
         "babel-loader": "9.1.0",
         "babel-plugin-istanbul": "6.1.1",
@@ -81,7 +79,6 @@
         "sanitize-html": "2.12.1",
         "sass": "1.71.1",
         "sass-loader": "14.1.1",
-        "sinon": "17.0.0",
         "style-loader": "3.3.3",
         "terser-webpack-plugin": "5.3.9",
         "tiny-emitter": "2.1.0",
@@ -99,6 +96,19 @@
         "node": ">=18.14.2 <22"
       }
     },
+    "e2e": {
+      "name": "openmct-e2e",
+      "version": "4.0.0-next",
+      "license": "Apache-2.0",
+      "devDependencies": {
+        "@axe-core/playwright": "4.8.5",
+        "@percy/cli": "1.27.4",
+        "@percy/playwright": "1.0.4",
+        "@playwright/test": "1.42.1",
+        "@types/sinonjs__fake-timers": "8.1.5",
+        "sinon": "17.0.0"
+      }
+    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -1496,9 +1506,9 @@
       }
     },
     "node_modules/@percy/sdk-utils": {
-      "version": "1.28.1",
-      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.28.1.tgz",
-      "integrity": "sha512-joS3i5wjFYXRSVL/NbUvip+bB7ErgwNjoDcID31l61y/QaSYUVCOxl/Fy4nvePJtHVyE1hpV0O7XO3tkoG908g==",
+      "version": "1.28.2",
+      "resolved": "https://registry.npmjs.org/@percy/sdk-utils/-/sdk-utils-1.28.2.tgz",
+      "integrity": "sha512-cMFz8AjZ2KunN0dVwzA+Wosk4B+6G9dUkh2YPhYvqs0KLcCyYs3s91IzOQmtBOYwAUVja/W/u6XmBHw0jaxg0A==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -1929,16 +1939,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/yauzl": {
-      "version": "2.10.3",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
-      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -8549,6 +8549,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/openmct-e2e": {
+      "resolved": "e2e",
+      "link": true
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",

package.json

@@ -2,15 +2,21 @@
   "name": "openmct",
   "version": "4.0.0-next",
   "description": "The Open MCT core platform",
-  "type": "module",
+  "module": "dist/openmct.js",
   "main": "dist/openmct.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/openmct.js",
+      "require": "./dist/openmct.js"
+    }
+  },
+  "workspaces": [
+    "e2e"
+  ],
   "devDependencies": {
-    "@axe-core/playwright": "4.8.5",
     "@babel/eslint-parser": "7.23.3",
     "@braintree/sanitize-url": "6.0.4",
-    "@percy/cli": "1.27.4",
-    "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.42.1",
     "@types/d3-axis": "3.0.6",
     "@types/d3-scale": "4.0.8",
     "@types/d3-selection": "3.0.10",
@@ -18,7 +24,6 @@
     "@types/eventemitter3": "1.2.0",
     "@types/jasmine": "5.1.2",
     "@types/lodash": "4.17.0",
-    "@types/sinonjs__fake-timers": "8.1.5",
     "@vue/compiler-sfc": "3.4.3",
     "babel-loader": "9.1.0",
     "babel-plugin-istanbul": "6.1.1",
@@ -77,7 +82,6 @@
     "sanitize-html": "2.12.1",
     "sass": "1.71.1",
     "sass-loader": "14.1.1",
-    "sinon": "17.0.0",
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "tiny-emitter": "2.1.0",
@@ -92,39 +96,39 @@
     "webpack-merge": "5.10.0"
   },
   "scripts": {
-    "clean": "rm -rf ./dist ./node_modules ./coverage ./html-test-results ./test-results ./.nyc_output ",
-    "start": "npx webpack serve --config ./.webpack/webpack.dev.js",
-    "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.js",
-    "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.js",
+    "clean": "rm -rf ./dist ./node_modules ./coverage ./html-test-results ./test-results ./.nyc_output",
+    "start": "npx webpack serve --config ./.webpack/webpack.dev.mjs",
+    "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.mjs",
+    "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.mjs",
     "lint:js": "eslint \"example/**/*.js\" \"src/**/*.js\" \"e2e/**/*.js\" \"openmct.js\" --max-warnings=0",
     "lint:vue": "eslint \"src/**/*.vue\"",
     "lint:spelling": "cspell \"**/*.{js,md,vue}\" --show-context --gitignore --quiet",
     "lint": "run-p \"lint:js -- {1}\" \"lint:vue -- {1}\" \"lint:spelling -- {1}\" --",
     "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
-    "build:prod": "webpack --config ./.webpack/webpack.prod.js",
-    "build:dev": "webpack --config ./.webpack/webpack.dev.js",
-    "build:coverage": "webpack --config ./.webpack/webpack.coverage.js",
-    "build:watch": "webpack --config ./.webpack/webpack.dev.js --watch",
+    "build:prod": "webpack --config ./.webpack/webpack.prod.mjs",
+    "build:dev": "webpack --config ./.webpack/webpack.dev.mjs",
+    "build:coverage": "webpack --config ./.webpack/webpack.coverage.mjs",
+    "build:watch": "webpack --config ./.webpack/webpack.dev.mjs --watch",
     "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
     "test": "karma start karma.conf.cjs",
     "test:debug": "KARMA_DEBUG=true karma start karma.conf.cjs",
-    "test:e2e": "npx playwright test",
-    "test:e2e:a11y": "npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep @a11y",
-    "test:e2e:mobile": "npx playwright test --config=e2e/playwright-mobile.config.js",
-    "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
-    "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
-    "test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",
-    "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
-    "test:e2e:generatedata": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @generatedata",
-    "test:e2e:checksnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --retries=0",
-    "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
-    "test:e2e:visual:ci": "percy exec --config ./e2e/.percy.ci.yml --partial -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --project=chrome --grep-invert @unstable",
-    "test:e2e:visual:full": "percy exec --config ./e2e/.percy.nightly.yml -- npx playwright test --config=e2e/playwright-visual-a11y.config.js --grep-invert @unstable",
-    "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js --grep-invert @couchdb",
-    "test:e2e:watch": "npx playwright test --ui --config=e2e/playwright-watch.config.js",
-    "test:perf:contract": "npx playwright test --config=e2e/playwright-performance-dev.config.js",
-    "test:perf:localhost": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome",
-    "test:perf:memory": "npx playwright test --config=e2e/playwright-performance-prod.config.js --project=chrome-memory",
+    "test:e2e": "npm test --workspace e2e",
+    "test:e2e:a11y": "npm test --workspace e2e -- --config=playwright-visual-a11y.config.js --project=chrome --grep @a11y",
+    "test:e2e:mobile": "npm test --workspace e2e -- --config=playwright-mobile.config.js",
+    "test:e2e:couchdb": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep @couchdb --workers=1",
+    "test:e2e:stable": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb|@generatedata\"",
+    "test:e2e:unstable": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep @unstable",
+    "test:e2e:local": "npm test --workspace e2e -- --config=playwright-local.config.js --project=chrome",
+    "test:e2e:generatedata": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep @generatedata",
+    "test:e2e:checksnapshots": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep @snapshot --retries=0",
+    "test:e2e:updatesnapshots": "npm test --workspace e2e -- --config=playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
+    "test:e2e:visual:ci": "npm run test:visual --workspace e2e -- --config .percy.ci.yml --partial -- npx playwright test --config=playwright-visual-a11y.config.js --project=chrome --grep-invert @unstable",
+    "test:e2e:visual:full": "npm run test:visual --workspace e2e -- --config .percy.nightly.yml -- npx playwright test --config=playwright-visual-a11y.config.js --grep-invert @unstable",
+    "test:e2e:full": "npm test --workspace e2e -- --config=playwright-ci.config.js --grep-invert @couchdb",
+    "test:e2e:watch": "npm test --workspace e2e -- --ui --config=playwright-watch.config.js",
+    "test:perf:contract": "npm test --workspace e2e -- --config=playwright-performance-dev.config.js",
+    "test:perf:localhost": "npm test --workspace e2e -- --config=playwright-performance-prod.config.js --project=chrome",
+    "test:perf:memory": "npm test --workspace e2e -- --config=playwright-performance-prod.config.js --project=chrome-memory",
     "update-about-dialog-copyright": "perl -pi -e 's/20\\d\\d\\-202\\d/2014\\-2023/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\\-2024/gm'",
     "cov:e2e:report": "nyc report --reporter=lcovonly --report-dir=./coverage/e2e",

packages/e2e/.npmignore

@@ -0,0 +1,7 @@
+*
+!appActions.js
+!baseFixtures.js
+!pluginFixtures.js
+!avpFixtures.js
+!index.js
+!*.md

src/plugins/notebook/utils/painterroInstance.js

@@ -46,7 +46,7 @@ export default class PainterroInstance {
     this.config.id = this.elementId;
     this.config.saveHandler = this.saveHandler.bind(this);
 
-    this.painterro = Painterro.default(this.config);
+    this.painterro = Painterro(this.config);
   }
 
   save(callback) {

tsconfig.json

@@ -16,14 +16,22 @@
     "noImplicitAny": false,
     "module": "esnext",
     "moduleResolution": "node",
-    "outDir": "dist",
+    "outFile": "dist/types/index.d.ts",
     "skipLibCheck": true,
     "target": "ES2015",
     "paths": {
       // matches the alias in webpack config, so that types for those imports are visible.
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     }
   },
-  "include": ["src/api/**/*.js"],
-  "exclude": ["node_modules", "dist", "**/*Spec.js"]
-}
+  "include": [
+    "src/api/**/*.js"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*Spec.js"
+  ]
+}