WIP: migrate to ES module

package.json

@@ -7,15 +7,14 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./core": {
-      "import": "./dist/core.esm.js",
-      "require": "./dist/core.js"
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
     },
     "./dist/assets/*.css": "./dist/assets/*.css",
-    "./dist/*.js": "./dist/*.js",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -24,10 +23,10 @@
     "build": "run-p bundle",
     "bundle": "rollup -c",
     "bundle:watch": "rollup -c -w",
-    "lint": "eslint .",
+    "lint": "eslint . --ext js,cjs,mjs",
     "dev": "npm test -- --auto-watch --no-single-run",
-    "test": "karma start karma.config.js",
-    "test:build": "mocha --reporter=spec --recursive test/distro/*.spec.js",
+    "test": "karma start karma.config.cjs",
+    "test:build": "mocha --reporter=spec --recursive test/distro/*.spec.c?js",
     "start": "cross-env SINGLE_START=cloud-templates npm run dev",
     "start:templates": "cross-env SINGLE_START=templates npm run dev",
     "prepare": "run-s bundle"
@@ -46,9 +45,9 @@
     "properties-panel",
     "element-templates"
   ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "umd:main": "dist/bpmn-js-element-templates.umd.js",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "author": {
     "name": "Nico Rehwaldt",
     "url": "https://github.com/nikku"

rollup.config.mjs

@@ -15,18 +15,6 @@ const nonbundledDependencies = Object.keys({ ...pkg.dependencies, ...pkg.peerDep
 const nonExternalDependencies = [ 'preact-markup' ];
 
 export default [
-  {
-    input: 'src/index.js',
-    output: [
-      {
-        sourcemap: true,
-        format: 'umd',
-        file: pkg['umd:main'],
-        name: 'BpmnJSElementTemplates'
-      }
-    ],
-    plugins: pgl()
-  },
   {
     input: 'src/index.js',
     output: [

test/.eslintrc

@@ -5,5 +5,8 @@
   ],
   "globals": {
     "sinon": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020
   }
 }

test/TestHelper.js

@@ -12,8 +12,6 @@ import {
   insertCSS
 } from 'bpmn-js/test/helper';
 
-import semver from 'semver';
-
 import fileDrop from 'file-drops';
 
 import download from 'downloadjs';
@@ -23,25 +21,18 @@ import Modeler from 'bpmn-js/lib/Modeler';
 import BPMNModdle from 'bpmn-moddle';
 import zeebeModdle from 'zeebe-bpmn-moddle/resources/zeebe';
 
-let PROPERTIES_PANEL_CONTAINER;
+import propertiesPanelCSS from '@bpmn-io/properties-panel/dist/assets/properties-panel.css';
 
-global.chai.use(function(chai, utils) {
+import elementTemplatesCSS from '../assets/element-templates.css';
+import elementTemplateChooserCSS from '@bpmn-io/element-template-chooser/dist/element-template-chooser.css';
+import lintingCSS from '@camunda/linting/assets/linting.css';
 
-  utils.addMethod(chai.Assertion.prototype, 'jsonEqual', function(comparison) {
+import testCSS from './test.css';
 
-    var actual = JSON.stringify(this._obj);
-    var expected = JSON.stringify(comparison);
+import diagramCSS from 'bpmn-js/dist/assets/diagram-js.css';
+import bpmnJsCSS from 'bpmn-js/dist/assets/bpmn-js.css';
+import bpmnFontCSS from 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
 
-    this.assert(
-      actual == expected,
-      'expected #{this} to deep equal #{act}',
-      'expected #{this} not to deep equal #{act}',
-      comparison, // expected
-      this._obj, // actual
-      true // show diff
-    );
-  });
-});
 
 export * from 'bpmn-js/test/helper';
 
@@ -50,6 +41,8 @@ export {
   createEvent
 } from 'bpmn-js/test/util/MockEvents';
 
+let PROPERTIES_PANEL_CONTAINER;
+
 export function bootstrapPropertiesPanel(diagram, options, locals) {
   return async function() {
     const container = TestContainer.get(this);
@@ -92,96 +85,25 @@ export function clickInput(input) {
 }
 
 export function insertCoreStyles() {
-  insertCSS(
-    'properties-panel.css',
-    require('@bpmn-io/properties-panel/dist/assets/properties-panel.css').default
-  );
-
-  insertCSS(
-    'element-templates.css',
-    require('../assets/element-templates.css').default
-  );
-
-  insertCSS(
-    'test.css',
-    require('./test.css').default
-  );
-
-  insertCSS(
-    'element-template-chooser.css',
-    require('@bpmn-io/element-template-chooser/dist/element-template-chooser.css').default
-  );
-
-  insertCSS('linting.css',
-    require('@camunda/linting/assets/linting.css').default
-  );
+  insertCSS('properties-panel.css', propertiesPanelCSS);
+  insertCSS('element-templates.css', elementTemplatesCSS);
+  insertCSS('element-template-chooser.css', elementTemplateChooserCSS);
+  insertCSS('linting.css', lintingCSS);
 
+  insertCSS('test.css', testCSS);
 }
 
 export function insertBpmnStyles() {
-  insertCSS(
-    'diagram.css',
-    require('bpmn-js/dist/assets/diagram-js.css').default
-  );
-
-  // @barmac: this fails before bpmn-js@9
-  if (bpmnJsSatisfies('>=9')) {
-    insertCSS(
-      'bpmn-js.css',
-      require('bpmn-js/dist/assets/bpmn-js.css').default
-    );
-  }
+  insertCSS('diagram.css', diagramCSS);
 
-  insertCSS(
-    'bpmn-font.css',
-    require('bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css').default
-  );
+  insertCSS('bpmn-js.css', bpmnJsCSS);
+  insertCSS('bpmn-font.css', bpmnFontCSS);
 }
 
 export function bootstrapModeler(diagram, options, locals) {
   return bootstrapBpmnJS(Modeler, diagram, options, locals);
 }
 
-/**
- * Execute test only if currently installed bpmn-js is of given version.
- *
- * @param {string} versionRange
- * @param {boolean} only
- */
-export function withBpmnJs(versionRange, only = false) {
-  if (bpmnJsSatisfies(versionRange)) {
-    return only ? it.only : it;
-  } else {
-    return it.skip;
-  }
-}
-
-function bpmnJsSatisfies(versionRange) {
-  const bpmnJsVersion = require('bpmn-js/package.json').version;
-
-  return semver.satisfies(bpmnJsVersion, versionRange, { includePrerelease: true });
-}
-
-/**
- * Execute test only if currently installed @bpmn-io/properties-panel is of given version.
- *
- * @param {string} versionRange
- * @param {boolean} only
- */
-export function withPropertiesPanel(versionRange, only = false) {
-  if (propertiesPanelSatisfies(versionRange)) {
-    return only ? it.only : it;
-  } else {
-    return it.skip;
-  }
-}
-
-function propertiesPanelSatisfies(versionRange) {
-  const version = require('@bpmn-io/properties-panel/package.json').version;
-
-  return semver.satisfies(version, versionRange, { includePrerelease: true });
-}
-
 export async function setEditorValue(editor, value) {
   await act(() => {
     editor.textContent = value;
@@ -283,4 +205,24 @@ export function createProcess(bpmn = '', bpmndi = '') {
     </bpmn:process>
     ${ bpmndi }
   `);
-}
+}
+
+// additional chai helpers //////////////
+
+global.chai.use(function(chai, utils) {
+
+  utils.addMethod(chai.Assertion.prototype, 'jsonEqual', function(comparison) {
+
+    var actual = JSON.stringify(this._obj);
+    var expected = JSON.stringify(comparison);
+
+    this.assert(
+      actual == expected,
+      'expected #{this} to deep equal #{act}',
+      'expected #{this} not to deep equal #{act}',
+      comparison, // expected
+      this._obj, // actual
+      true // show diff
+    );
+  });
+});

test/coverageBundle.js

@@ -1,7 +1,13 @@
-const allTests = require.context('./spec', true, /.spec\.js$/);
+const allTests = import.meta.webpackContext('./spec', {
+  recursive: true,
+  regExp: /.spec\.js$/
+});
 
 allTests.keys().forEach(allTests);
 
-const allSources = require.context('../src', true, /.*\.js$/);
+const allSources = import.meta.webpackContext('../src', {
+  recursive: true,
+  regExp: /.*\.js$/
+});
 
 allSources.keys().forEach(allSources);

test/distro/distro.spec.cjs

@@ -0,0 +1,37 @@
+const {
+  expect
+} = require('chai');
+
+
+describe('exports', function() {
+
+  it('should expose CJS bundle', function() {
+
+    expect(() => require.resolve('bpmn-js-element-templates')).not.to.throw;
+    expect(() => require.resolve('bpmn-js-elemenet-templates/core')).not.to.throw;
+
+  });
+
+});
+
+
+describe('assets', function() {
+
+  const EXPORTS = [
+    'bpmn-js-element-templates',
+    'bpmn-js-element-templates/core',
+    'bpmn-js-element-templates/dist/assets/element-templates.css',
+    'bpmn-js-element-templates/package.json'
+  ];
+
+  EXPORTS.forEach(function(asset) {
+
+    it(`should expose <${asset}>`, function() {
+
+      expect(() => require.resolve(asset)).not.to.throw();
+
+    });
+
+  });
+
+});