chore: move project to ESM (#2840)

The `package.json` file has its type set to "module" and it declares "exports". 

Migrate configuration files to ESM. When possible, add typings to ease configuration change in IDE.
- Configure tools to manage all specific JS/TS extensions.
- ESLint configuration file is still using CommonJS.
- Jest files are still using CommonJS. 
- PostCSS configuration still using CommonJS.

.github/workflows/generate-demo-preview.yml

@@ -17,7 +17,7 @@ on:
       - '.nvmrc'
       - 'package.json'
       - 'package-lock.json'
-      - 'postcss.config.js'
+      - 'postcss.config.cjs'
       - 'tailwind.config.js'
       - 'tsconfig.json'
       - 'vite.config.js'

.github/workflows/test-e2e.yml

@@ -17,7 +17,7 @@ on:
       - '.nvmrc'
       - 'package.json'
       - 'package-lock.json'
-      - 'postcss.config.js'
+      - 'postcss.config.cjs'
       - 'tailwind.config.js'
       - 'tsconfig.json'
       - 'vite.config.js'
@@ -37,7 +37,7 @@ on:
       - '.nvmrc'
       - 'package.json'
       - 'package-lock.json'
-      - 'postcss.config.js'
+      - 'postcss.config.cjs'
       - 'tailwind.config.js'
       - 'tsconfig.json'
       - 'vite.config.js'

.prettierrc.js

@@ -1,7 +1,8 @@
-module.exports = {
+const config = {
   semi: true,
-  trailingComma: "all",
+  trailingComma: 'all',
   singleQuote: true,
-  arrowParens:"avoid",
-  endOfLine:"auto"
+  arrowParens: 'avoid',
+  endOfLine: 'auto',
 };
+export default config;

.vscode/launch.json

@@ -10,7 +10,7 @@
             "request": "launch",
             "program": "${workspaceFolder}/node_modules/jest/bin/jest",
             "args": [
-                "--runInBand", "--config=./test/unit/jest.config.js"
+                "--runInBand", "--config=./test/unit/jest.config.cjs"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",
@@ -22,7 +22,7 @@
             "request": "launch",
             "program": "${workspaceFolder}/node_modules/jest/bin/jest",
             "args": [
-                "--runInBand", "--detectOpenHandles", "--config=./test/e2e/jest.config.js"
+                "--runInBand", "--detectOpenHandles", "--config=./test/e2e/jest.config.cjs"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",
@@ -34,7 +34,7 @@
             "request": "launch",
             "program": "${workspaceFolder}/node_modules/jest/bin/jest",
             "args": [
-                "--runInBand", "--config=./test/integration/jest.config.js"
+                "--runInBand", "--config=./test/integration/jest.config.cjs"
             ],
             "cwd": "${workspaceFolder}",
             "console": "integratedTerminal",

.vscode/settings.json

@@ -6,7 +6,7 @@
     // Jest Extension (https://github.com/jest-community/vscode-jest)
     // The following is to run unit tests
     // Change the configuration file if you want to run other kind of tests (integration, e2e)
-    "jest.jestCommandLine": "node_modules/.bin/jest --runInBand --config=./test/unit/jest.config.js",
+    "jest.jestCommandLine": "node_modules/.bin/jest --runInBand --config=./test/unit/jest.config.cjs",
     // editorconfig extension
     "editorconfig.generateAuto": false,
     // eslint extension

docs/contributors/demo-page-css.md

@@ -5,6 +5,6 @@ The project demo page (`index.html`) uses [tailwindcss](https://tailwindcss.com/
 Vite automatically processes the CSS rules using `postcss`.
 
 Feel free to preview config files:
-- [postcss.config.js](postcss.config.js)
+- [postcss.config.cjs](postcss.config.cjs)
 - [tailwind.config.js](tailwind.config.js)
 

package.json

@@ -1,6 +1,8 @@
 {
   "name": "bpmn-visualization",
   "version": "0.38.1-post",
+  "type": "module",
+  "sideEffects": false,
   "description": "A TypeScript library for visualizing process execution data on BPMN diagrams",
   "keywords": [
     "typescript",
@@ -34,6 +36,10 @@
   "browser": "dist/bpmn-visualization.esm.js",
   "module": "dist/bpmn-visualization.esm.js",
   "types": "dist/not-supported-ts-versions.d.ts",
+  "exports": {
+    ".": "./dist/bpmn-visualization.esm.js",
+    "./package.json": "./package.json"
+  },
   "typesVersions": {
     ">=4.0.2": {
       "*": [
@@ -64,21 +70,21 @@
     "docs": "run-s docs:*",
     "docs:user": "node scripts/docs.mjs",
     "docs:api": "typedoc --tsconfig ./tsconfig.typedoc.json src/bpmn-visualization.ts",
-    "lint": "eslint \"**/*.{js,mjs,ts}\" --max-warnings 0 --quiet --fix",
-    "lint-check": "eslint \"**/*.{js,mjs,ts}\" --max-warnings 0",
+    "lint": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts}\" --max-warnings 0 --quiet --fix",
+    "lint-check": "eslint \"**/*.{js,cjs,mjs,ts,cts,mts}\" --max-warnings 0",
     "test": "run-s test:unit test:integration test:e2e",
-    "test:unit": "jest --runInBand --config=./test/unit/jest.config.js",
+    "test:unit": "jest --runInBand --config=./test/unit/jest.config.cjs",
     "test:unit:coverage": "npm run test:unit -- --coverage",
-    "test:integration": "jest --runInBand --config=./test/integration/jest.config.js",
+    "test:integration": "jest --runInBand --config=./test/integration/jest.config.cjs",
     "test:integration:coverage": "npm run test:integration -- --coverage",
     "test:unit:watch": "npm run test:unit:coverage -- --watchAll",
-    "test:e2e": "cross-env JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest --runInBand --detectOpenHandles --config=./test/e2e/jest.config.js",
+    "test:e2e": "cross-env JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest --runInBand --detectOpenHandles --config=./test/e2e/jest.config.cjs",
     "test:e2e:verbose": "cross-env DEBUG=bv:test:*,pw:browser* npm run test:e2e",
     "test:e2e:coverage": "npm run test:e2e -- --coverage",
-    "test:perf": "jest --runInBand --detectOpenHandles --config=./test/performance/jest.config.js",
+    "test:perf": "jest --runInBand --detectOpenHandles --config=./test/performance/jest.config.cjs",
     "test:perf:verbose": "cross-env DEBUG=bv:test:*,pw:browser* npm run test:perf",
     "test:perf:compile": "tsc -p test/performance/",
-    "test:bundles": "jest --runInBand --detectOpenHandles --config=./test/bundles/jest.config.js",
+    "test:bundles": "jest --runInBand --detectOpenHandles --config=./test/bundles/jest.config.cjs",
     "test:bundles:verbose": "cross-env DEBUG=bv:*,pw:browser* npm run test:bundles",
     "version-prepare": "node scripts/manage-version-in-files.mjs && git commit --no-verify -a -m \"chore(release): prepare version for release\"",
     "version": "IS_RELEASING=true node scripts/manage-version-in-files.mjs && git add .",
@@ -159,7 +165,7 @@
     "@types/node": "^16.18.0"
   },
   "lint-staged": {
-    "*.{js,mjs,ts}": [
+    "*.{js,cjs,mjs,ts,cts,mts}": [
       "eslint --fix"
     ]
   }

tailwind.config.js

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+const config = {
   content: ['./dev/public/index.html'],
   theme: {
     extend: {},
@@ -24,3 +25,5 @@ module.exports = {
   },
   plugins: [],
 };
+
+export default config;

test/bundles/jest-playwright.config.js → test/bundles/jest-playwright.config.cjs

@@ -14,4 +14,4 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-module.exports = require('../config/jest-playwright').computeConfiguration({ startWebServer: false, defaultBrowsers: 'chromium,firefox,webkit' });
+module.exports = require('../config/jest-playwright.cjs').computeConfiguration({ startWebServer: false, defaultBrowsers: 'chromium,firefox,webkit' });

test/bundles/jest.config.js → test/bundles/jest.config.cjs

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { moduleNameMapper } = require('../config/ts-jest');
+const { moduleNameMapper } = require('../config/ts-jest.cjs');
 
-process.env.JEST_PLAYWRIGHT_CONFIG = './test/bundles/jest-playwright.config.js';
+process.env.JEST_PLAYWRIGHT_CONFIG = './test/bundles/jest-playwright.config.cjs';
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {

test/config/jest-playwright.js → test/config/jest-playwright.cjs

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { isRunningOnCISlowOS, isRunningOnCi } = require('../shared/environment-utils');
+const { isRunningOnCISlowOS, isRunningOnCi } = require('../shared/environment-utils.cjs');
 
 const log = require('debug')('bv:test:config:pw');
 

test/config/jest.retries.ts

@@ -16,7 +16,7 @@ limitations under the License.
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore js file with commonjs export
-import envUtils = require('@test/shared/environment-utils.js');
+import envUtils = require('@test/shared/environment-utils.cjs');
 
 const onCi = envUtils.isRunningOnCi();
 jest.retryTimes(onCi ? 3 : 0, { logErrorsBeforeRetry: true });

test/e2e/jest-playwright.config.js → test/e2e/jest-playwright.config.cjs

@@ -14,4 +14,4 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-module.exports = require('../config/jest-playwright').computeConfiguration({ defaultBrowsers: 'chromium' });
+module.exports = require('../config/jest-playwright.cjs').computeConfiguration({ defaultBrowsers: 'chromium' });

test/e2e/jest.config.js → test/e2e/jest.config.cjs

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { moduleNameMapper } = require('../config/ts-jest');
+const { moduleNameMapper } = require('../config/ts-jest.cjs');
 
-process.env.JEST_PLAYWRIGHT_CONFIG = './test/e2e/jest-playwright.config.js';
+process.env.JEST_PLAYWRIGHT_CONFIG = './test/e2e/jest-playwright.config.cjs';
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {

test/integration/jest.config.js → test/integration/jest.config.cjs

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { moduleNameMapper } = require('../config/ts-jest');
+const { moduleNameMapper } = require('../config/ts-jest.cjs');
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {

test/performance/jest.config.js → test/performance/jest.config.cjs

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { moduleNameMapper } = require('../config/ts-jest');
+const { moduleNameMapper } = require('../config/ts-jest.cjs');
 
-process.env.JEST_PLAYWRIGHT_CONFIG = './test/performance/jest-playwright.config.js';
+process.env.JEST_PLAYWRIGHT_CONFIG = './test/performance/jest-playwright.config.cjs';
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {

test/shared/visu/bpmn-page-utils.ts

@@ -28,7 +28,7 @@ import { BpmnQuerySelectorsForTests } from '@test/shared/query-selectors';
 import { delay } from './test-utils';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore js file with commonjs export
-import envUtils = require('../environment-utils.js');
+import envUtils = require('../environment-utils.cjs');
 
 const pageCheckLog = debugLogger('bv:test:page-check');
 

test/unit/jest.config.js → test/unit/jest.config.cjs

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const { moduleNameMapper } = require('../config/ts-jest');
+const { moduleNameMapper } = require('../config/ts-jest.cjs');
 
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {